@charset "UTF-8";

/* A Modern CSS Reset */
.tech-in-life * {
    padding: 0;
    margin: 0;
}

.tech-in-life *,
.tech-in-life ::before,
.tech-in-life ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

.tech-in-life ul,
.tech-in-life ol {
    list-style: none;
}

.tech-in-life a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
}

.tech-in-life img {
    display: block;
    width: 100%;
}

main {
    font-family: "Meiryo", "メイリオ", "Arial", sans-serif;
    font-weight: 400;
    color: #000;
    background-color: #f3f9ff;
}

html {
    font-size: 16px;
}

@media (width <= 375px) {
    html {
        font-size: 4.2666666667vw;
    }
}

@media screen and (width >= 768px) {
    html {
        font-size: 1.2403100775vw;
    }
}

@media (width >= 1290px) {
    html {
        font-size: 16px;
    }
}

@font-face {
    font-family: "Open-Sans";
    src: url(/shared/unchangeable/font/OpenSans-Bold.woff) format("woff");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Open-Sans";
    src: url(/jp-ja/brand/tech-in-life/fonts/OpenSans-SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Open-Sans";
    src: url(/shared/unchangeable/font/OpenSans-Regular.woff) format("woff");
    font-weight: 400;
    font-display: swap;
}

.inner {
    width: 100%;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (width >= 768px) {
    .inner {
        max-width: 1290px;
        padding-right: 1.5625rem;
        padding-left: 1.5625rem;
    }
}

.fade-in {
    opacity: 0;

    /* 少し下に移動 */
    transition:
        opacity 1s ease,
        transform 1s ease;

    /* 初期状態は透明 */
    transform: scale(1.08);

    /* アニメーションの設定 */
}

.fade-in.visible {
    opacity: 1;

    /* フェードイン時の不透明度 */
    transform: scale(1);

    /* 元の位置に戻す */
}

@media screen and (width >= 768px) {
    .sec {
        margin-top: -45px;
    }
}

.sec-mv {
    position: relative;
    width: 100%;
    aspect-ratio: 375/400;
    background: url(/jp-ja/brand/tech-in-life/img/sec-mv-1-sp.jpg) no-repeat top/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/sec-mv-1-sp.webp)) {
    .sec-mv {
        background: url(/jp-ja/brand/tech-in-life/img/sec-mv-1-sp.webp) no-repeat top/cover;
    }
}

@media screen and (width >= 768px) {
    .sec-mv {
        aspect-ratio: 1440/523;
        background: url(/jp-ja/brand/tech-in-life/img/sec-mv-1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/sec-mv-1.webp)) {
        .sec-mv {
            background: url(/jp-ja/brand/tech-in-life/img/sec-mv-1.webp) no-repeat center/cover;
        }
    }
}

.sec-mv-film {
    position: relative;
    width: 100%;
    aspect-ratio: 375/400;
    background: url(/jp-ja/brand/tech-in-life/img/film-mv-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/film-mv-sp.webp)) {
    .sec-mv-film {
        background: url(/jp-ja/brand/tech-in-life/img/film-mv-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .sec-mv-film {
        aspect-ratio: 1440/523;
        background: url(/jp-ja/brand/tech-in-life/img/film-mv.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/film-mv.webp)) {
        .sec-mv-film {
            background: url(/jp-ja/brand/tech-in-life/img/film-mv.webp) no-repeat center/cover;
        }
    }
}

.sec-title {
    position: absolute;
    bottom: -0.0625rem;
    left: 0;
    width: 100%;
    padding: 1.25rem;
    background-color: #f3f9ff;
}

@media screen and (width >= 768px) {
    .sec-title {
        width: 58.8888888889%;
        height: 10.0625rem;
        padding: 0 0 0 4.5rem;
        border-top-right-radius: 1.25rem;
    }
}

.sec-title > div {
    display: flex;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .sec-title > div {
        position: absolute;
        display: flex;
        align-items: center;
        height: inherit;
        right: 5.3125rem;
        margin-left: 4.5rem;
        width: 81.3679245283%;
        max-width: 43.125rem;
    }
}

.top-block1 > div {
    margin: 0 1.25rem;
}

@media screen and (width >= 768px) {
    .top-block1 > div {
        width: 49%;
        margin: 4rem 0 0 7.25rem;
    }
}

.top-block2 > div {
    margin: 0 1.25rem;
}

@media screen and (width >= 768px) {
    .top-block2 > div {
        width: 47.6%;
        margin: 3.125rem 0 0 6rem;
    }
}

.top-block3 > div {
    margin: 0 1.25rem;
}

@media screen and (width >= 768px) {
    .top-block3 > div {
        width: 46.88%;
        margin: 9.5625rem 0 0 7.25rem;
    }
}

.tech-point > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    min-height: 3.5rem;
    border: 1.4px solid #0062c2;
    border-radius: 50%;
}

@media screen and (width >= 768px) {
    .tech-point > div {
        width: 5rem;
        min-width: 5rem;
        height: 5rem;
        min-height: 5rem;
        border: 2.2px solid #0062c2;
    }
}

.tech2-figure2-icon div {
    width: 100%;
    max-width: 10.1875rem;
    aspect-ratio: 1/1;
    margin: 0 auto;
}

.tech2-point > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    min-height: 3.5rem;
    border: 1.4px solid #0062c2;
    border-radius: 50%;
}

@media screen and (width >= 768px) {
    .tech2-point > div {
        width: 5rem;
        min-width: 5rem;
        height: 5rem;
        min-height: 5rem;
        border: 2.2px solid #0062c2;
    }
}

.sec-title > div > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    min-width: 3.5rem;
    height: 3.5rem;
    min-height: 3.5rem;
    background-color: #fff;
    border: 1.4px solid #0062c2;
    border-radius: 50%;
}

@media screen and (width >= 768px) {
    .sec-title > div > div {
        width: 5.5rem;
        min-width: 5.5rem;
        height: 5.5rem;
        min-height: 5.5rem;
        border: 2.2px solid #0062c2;
    }
}

.life-text > p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .life-text > p {
        font-size: 1rem;
    }
}

.life-img2 p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .life-img2 p {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.life-img3 p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .life-img3 p {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.tech-text > p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

.tech-img2 p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .tech-img2 p {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.film-text > p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .film-text > p {
        font-size: 1rem;
    }
}

.film-img2 p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .film-img2 p {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.film-img3 p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .film-img3 p {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.tech2-text > p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

.life-title div p {
    margin-left: 0.375rem;
    font-size: 3.6vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
}

@media screen and (width >= 768px) {
    .life-title div p {
        margin-left: 0.375rem;
        font-size: 1.25rem;
    }
}

.tech-title div p {
    font-size: 3.6vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
}

@media screen and (width >= 768px) {
    .tech-title div p {
        font-size: 1.25rem;
    }
}

.film-title div p {
    margin-left: 0.375rem;
    font-size: 3.6vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
}

@media screen and (width >= 768px) {
    .film-title div p {
        margin-left: 0.375rem;
        font-size: 1.25rem;
    }
}

.tech2-title div p {
    font-size: 3.6vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
}

@media screen and (width >= 768px) {
    .tech2-title div p {
        font-size: 1.25rem;
    }
}

.tech-point > div > div > p {
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech-point > div > div > p {
        font-size: 1rem;
        letter-spacing: initial;
    }
}

.tech2-point > div > div > p {
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech2-point > div > div > p {
        font-size: 1rem;
        letter-spacing: initial;
    }
}

.sec-title > div > div > div > p {
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .sec-title > div > div > div > p {
        font-size: 1.1rem;
    }
}

.tech-point > div > div > .num {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media screen and (width >= 768px) {
    .tech-point > div > div > .num {
        font-size: 1.875rem;
        font-weight: 600;
        letter-spacing: -0.04em;
    }
}

.tech2-point > div > div > .num {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media screen and (width >= 768px) {
    .tech2-point > div > div > .num {
        font-size: 1.875rem;
        font-weight: 600;
        letter-spacing: -0.04em;
    }
}

.sec-title > div > div > div > .num {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media screen and (width >= 768px) {
    .sec-title > div > div > div > .num {
        font-size: 2.2rem;
    }
}

.mv-title h1 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

@media screen and (width >= 768px) {
    .mv-title h1 {
        font-size: 3.0625rem;
    }
}

.sec-title > div > h1 {
    margin-left: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.01em;
}

@media screen and (width >= 768px) {
    .sec-title > div > h1 {
        margin-left: 1.25rem;
        font-size: 2.25rem;
    }
}

.sec-mv.third {
    aspect-ratio: initial;
    background: initial;
}

.sec-mv-wrap {
    display: block;
}

@media screen and (width >= 768px) {
    .sec-mv-wrap {
        display: flex;
        padding-top: 45px;
        background-color: #fff;
    }
}

.top-block2 > div > div {
    margin-top: 1.375rem;
}

@media screen and (width >= 768px) {
    .top-block2 > div > div {
        margin-top: 0;
    }
}

.sec-mv-wrap > div:first-child {
    padding: 2.5625rem 1.25rem 1.4375rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .sec-mv-wrap > div:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40.97%;
        padding: initial;
    }
}

@media screen and (width >= 768px) {
    .sec-mv-wrap > div:first-child > div {
        width: 66.95%;
        margin-top: -1.1875rem;
    }
}

.sec-mv-title {
    padding-bottom: 0.625rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.02em;
    border-bottom: 2px solid #0062c2;
}

@media screen and (width >= 768px) {
    .sec-mv-title {
        font-size: 1.25rem;
    }
}

.sec-mv-lead {
    margin: 0.5rem 0 0 -0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.01em;
}

@media screen and (width >= 768px) {
    .sec-mv-lead {
        margin: 1rem 0 0 -1.0625rem;
        font-size: 2.5rem;
    }
}

.sec-mv-lead-tech2 {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.01em;
}

@media screen and (width >= 768px) {
    .sec-mv-lead-tech2 {
        margin-top: 1rem;
        font-size: 2.5rem;
    }
}

.sec-mv-text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 180%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .sec-mv-text {
        margin-top: 2rem;
        font-size: 1.125rem;
    }
}

.sec-mv-wrap > div.tech-mv {
    width: 100%;
    aspect-ratio: 375/320;
    background: url(/jp-ja/brand/tech-in-life/img/tech-mv-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech-mv-sp.webp)) {
    .sec-mv-wrap > div.tech-mv {
        background: url(/jp-ja/brand/tech-in-life/img/tech-mv-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .sec-mv-wrap > div.tech-mv {
        width: 59.03%;
        aspect-ratio: 850/522;
        background: url(/jp-ja/brand/tech-in-life/img/tech-mv.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech-mv.webp)) {
        .sec-mv-wrap > div.tech-mv {
            background: url(/jp-ja/brand/tech-in-life/img/tech-mv.webp) no-repeat center/cover;
        }
    }
}

.sec-mv-wrap > div.tech2-mv {
    width: 100%;
    aspect-ratio: 375/289;
    background: url(/jp-ja/brand/tech-in-life/img/tech2-mv-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-mv-sp.webp)) {
    .sec-mv-wrap > div.tech2-mv {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-mv-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .sec-mv-wrap > div.tech2-mv {
        width: 59.03%;
        aspect-ratio: 850/522;
        background: url(/jp-ja/brand/tech-in-life/img/tech2-mv.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-mv.webp)) {
        .sec-mv-wrap > div.tech2-mv {
            background: url(/jp-ja/brand/tech-in-life/img/tech2-mv.webp) no-repeat center/cover;
        }
    }
}

.card-slider li {
    padding: 0.4375rem;
}

@media screen and (width >= 768px) {
    .card-slider li {
        padding: 0.4375rem;
        margin-right: 1.125rem;
    }
}

.navi-bg {
    border-bottom: none;
}

.l-header-navigation > ul > li.fix-style {
    margin-bottom: 0;
}

.l-header-navigation > ul {
    font-size: initial;
}

.top-header#km-header {
    padding-left: 0;
    box-shadow: initial;
}

@media screen and (width >= 768px) {
    .top-header#km-header {
        padding-left: 0.5625rem;
    }
}

.top {
    position: relative;
    margin-bottom: 3rem;
    overflow: hidden;
}

@media screen and (width >= 768px) {
    .top {
        margin-bottom: 2.125rem;
        overflow: initial;
    }
}

.top-block1 {
    margin: 3.375rem auto 0;
}

@media screen and (width >= 768px) {
    .top-block1 {
        display: flex;
        max-width: 90rem;
        margin: 1.6875rem auto 0;
    }
}

.top-img-wrap > div:nth-child(1) {
    position: absolute;
    top: 0;
    right: 0.25rem;
    width: 48.46%;
    aspect-ratio: 314/256;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-4.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-4.webp)) {
    .top-img-wrap > div:nth-child(1) {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-4.webp) no-repeat center/cover;
    }
}

.top-img-wrap > div:nth-child(2) {
    position: absolute;
    top: 9.3125rem;
    left: -0.9375rem;
    width: 68.67%;
    aspect-ratio: 445/405;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-5.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-5.webp)) {
    .top-img-wrap > div:nth-child(2) {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-5.webp) no-repeat center/cover;
    }
}

.life-title.bubble div {
    position: absolute;
    top: 0;
    left: 19%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .life-title.bubble div {
        position: absolute;
        top: 0;
        left: 14%;
        z-index: 2;
    }
}

.life-title.gear div {
    position: absolute;
    top: 12%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .life-title.gear div {
        position: absolute;
        top: 0.1875rem;
        left: 15.5%;
        z-index: 2;
    }
}

.life-title.earth div {
    position: absolute;
    top: 29%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .life-title.earth div {
        position: absolute;
        top: 0.5625rem;
        left: 12%;
        z-index: 2;
    }
}

.tech-title.clothes div {
    position: absolute;
    top: 2%;
    left: 24%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .tech-title.clothes div {
        position: absolute;
        top: 22%;
        left: 16%;
        z-index: 2;
    }
}

.tech-title.gear div {
    position: absolute;
    top: 1%;
    left: 25%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .tech-title.gear div {
        position: absolute;
        top: 0.1875rem;
        left: 15.5%;
        z-index: 2;
    }
}

.film-title.phone div {
    position: absolute;
    top: 7%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .film-title.phone div {
        position: absolute;
        top: 0.5rem;
        left: 15%;
        z-index: 2;
    }
}

.film-title.bubble div {
    position: absolute;
    top: -8%;
    left: 19%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .film-title.bubble div {
        position: absolute;
        top: -0.4375rem;
        left: 14.5%;
        z-index: 2;
    }
}

.film-title.gear div {
    position: absolute;
    top: 12%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .film-title.gear div {
        position: absolute;
        top: 0.1875rem;
        left: 16.5%;
        z-index: 2;
    }
}

.film-title.earth div {
    position: absolute;
    top: -4%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .film-title.earth div {
        position: absolute;
        top: 0.375rem;
        left: 12.2%;
        z-index: 2;
    }
}

.tech2-title.phone div {
    position: absolute;
    top: 8%;
    left: 23%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .tech2-title.phone div {
        position: absolute;
        top: 0;
        left: 16.5%;
        z-index: 2;
    }
}

.tech2-title.gear div {
    position: absolute;
    top: 18%;
    left: 25%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .tech2-title.gear div {
        position: absolute;
        top: 0.1875rem;
        left: 15.5%;
        z-index: 2;
    }
}

.tech2-title.future div {
    position: absolute;
    top: -0.3125rem;
    left: 25%;
    z-index: 2;
}

@media screen and (width >= 768px) {
    .tech2-title.future div {
        position: absolute;
        top: 0.25rem;
        left: 20.5%;
        z-index: 2;
    }
}

.tech2-figure2-icon:nth-child(1) div {
    background: url(/jp-ja/brand/tech-in-life/img/tech2-icon1.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-icon1.webp)) {
    .tech2-figure2-icon:nth-child(1) div {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-icon1.webp) no-repeat center/cover;
    }
}

.tech2-figure2-icon:nth-child(2) div {
    background: url(/jp-ja/brand/tech-in-life/img/tech2-icon2.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-icon2.webp)) {
    .tech2-figure2-icon:nth-child(2) div {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-icon2.webp) no-repeat center/cover;
    }
}

.tech2-figure2-icon:nth-child(3) div {
    background: url(/jp-ja/brand/tech-in-life/img/tech2-icon4.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-icon4.webp)) {
    .tech2-figure2-icon:nth-child(3) div {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-icon4.webp) no-repeat center/cover;
    }
}

.tech2-figure2-icon:nth-child(4) div {
    background: url(/jp-ja/brand/tech-in-life/img/tech2-icon3.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-icon3.webp)) {
    .tech2-figure2-icon:nth-child(4) div {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-icon3.webp) no-repeat center/cover;
    }
}

.top-block1 > div > div:nth-child(n + 2) {
    margin-top: 2rem;
}

@media screen and (width >= 768px) {
    .top-block1 > div > div:nth-child(n + 2) {
        margin-top: 2.5rem;
    }
}

.top-block3 > div > .top-lead {
    margin: 1.25rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 180%;
    color: #0062c2;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

@media screen and (width >= 768px) {
    .top-block3 > div > .top-lead {
        margin: 2.375rem 0 1.5rem;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 180%;
        color: #0062c2;
        letter-spacing: 0.03em;
        white-space: inherit;
    }
}

.top-block1 > div > div .top-lead {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .top-block1 > div > div .top-lead {
        margin-bottom: 0;
        font-size: 1.75rem;
        line-height: 200%;
    }
}

.top-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 190%;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .top-text {
        font-size: 1.32vw;
        line-height: 200%;
        white-space: nowrap;
    }
}

@media screen and (width >= 1440px) {
    .top-text {
        font-size: 1.1875rem;
    }
}

.top-block1 .top-img {
    width: 37.29%;
    aspect-ratio: 520/449;
    margin: 0 0 0 1.375rem;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-2.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-2.webp)) {
    .top-block1 .top-img {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-2.webp) no-repeat center/cover;
    }
}

.top-block2 {
    margin: 2.1875rem auto 0;
}

@media screen and (width >= 768px) {
    .top-block2 {
        display: flex;
        max-width: 90rem;
        margin: -1.1875rem auto 0;
    }
}

.top-block2 .top-img {
    width: 37.5%;
    aspect-ratio: 540/392;
    margin: 0 0 0 3.8125rem;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-3.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-3.webp)) {
    .top-block2 .top-img {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-3.webp) no-repeat center/cover;
    }
}

.top-block2 > div > div:nth-child(n + 2) {
    margin-top: 1.4375rem;
}

@media screen and (width >= 768px) {
    .top-block2 > div > div:nth-child(n + 2) {
        margin-top: 2.5rem;
    }
}

.top-block3 {
    margin: 3rem auto 0;
}

@media screen and (width >= 768px) {
    .top-block3 {
        display: flex;
        max-width: 90rem;
        margin: -5.9375rem auto 0;
    }
}

.top-title {
    margin-left: 0.1875rem;
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .top-title {
        font-size: 3rem;
    }
}

.top-block3 > .top-img-wrap {
    display: none;
}

@media screen and (width >= 768px) {
    .top-block3 > .top-img-wrap {
        position: relative;
        display: block;
        width: 45%;
        margin: 0 0 0 -1.4375rem;
    }
}

.top-illust1 {
    display: none;
}

@media screen and (width >= 768px) {
    .top-illust1 {
        position: absolute;
        top: 19.7%;
        z-index: 1;
        display: block;
        width: 100%;
        aspect-ratio: 1440/125;
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-1.png) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-1.webp)) {
        .top-illust1 {
            background: url(/jp-ja/brand/tech-in-life/img/top-illust-1.webp) no-repeat center/cover;
        }
    }
}

@media screen and (width >= 1440px) {
    .top-illust1 {
        top: 27.5625rem;
    }
}

.top-illust2 {
    display: none;
}

@media screen and (width >= 768px) {
    .top-illust2 {
        display: block;
        aspect-ratio: 1440/281;
        margin-top: -13.5%;
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-2.png) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-2.webp)) {
        .top-illust2 {
            background: url(/jp-ja/brand/tech-in-life/img/top-illust-2.webp) no-repeat center/cover;
        }
    }
}

.top-illust3 {
    aspect-ratio: 1440/189;
    margin-top: 11%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-3.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-3.webp)) {
    .top-illust3 {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-3.webp) no-repeat center/cover;
    }
}

.top-img1-sp {
    position: relative;
    z-index: 2;
    width: 68.27%;
    aspect-ratio: 256/223;
    margin: -0.375rem 0 0 34%;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-2.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-2.webp)) {
    .top-img1-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-2.webp) no-repeat center/cover;
    }
}

.top-img2-sp {
    position: relative;
    z-index: 2;
    width: 49.33%;
    aspect-ratio: 185/150;
    margin: -0.9375rem 0 0 0.375rem;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-3-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-3-sp.webp)) {
    .top-img2-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-3-sp.webp) no-repeat center/cover;
    }
}

.top-illust1-sp {
    position: relative;
    z-index: 1;
    aspect-ratio: 375/224;
    margin-top: -67%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-2-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-2-sp.webp)) {
    .top-illust1-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-2-sp.webp) no-repeat center/cover;
    }
}

.top-illust2-sp {
    position: relative;
    z-index: 1;
    aspect-ratio: 375/142;
    margin-top: -41%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-3-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-3-sp.webp)) {
    .top-illust2-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-3-sp.webp) no-repeat center/cover;
    }
}

.top-img3-sp {
    position: relative;
    z-index: 2;
    width: 75.2%;
    aspect-ratio: 282/257;
    margin: 1.125rem auto 2.5625rem;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-5.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-5.webp)) {
    .top-img3-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-5.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .top-img3-sp {
        display: none;
    }
}

.top-illust3-sp {
    position: relative;
    z-index: 1;
    aspect-ratio: 375/260;
    margin-top: -83%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-4-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-4-sp.webp)) {
    .top-illust3-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-4-sp.webp) no-repeat center/cover;
    }
}

.top-illust4-sp {
    aspect-ratio: 375/100;
    margin-top: 7%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-6-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-6-sp.webp)) {
    .top-illust4-sp {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-6-sp.webp) no-repeat center/cover;
    }
}

.mv {
    padding: 2.3125rem 1.25rem 1.5625rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .mv {
        padding: 3.3125rem 5.625rem 3.1875rem 6.625rem;
    }
}

.mv-inner {
    width: calc(100% + 2.5rem);
    margin: 0 calc(50% - 50vw);
}

@media screen and (width >= 768px) {
    .mv-inner {
        display: flex;
        justify-content: space-around;
        margin: 0 auto;
    }
}

@media screen and (width >= 768px) {
    .mv-block {
        position: relative;
        z-index: 2;
        min-width: 22.8125rem;
        margin-top: 2.375rem;
    }
}

.mv-title h1 span.mv-title {
    margin-top: 0.75rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.05em;
    display:block;
    white-space: nowrap;
}

.mv-title h2 {
    margin-top: 0.75rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

@media screen and (width >= 768px) {
    .mv-title h2 {
        margin-top: 1.25rem;
        font-size: 3.0625rem;
    }
}

.mv-lead {
    display: flex;
    align-items: center;
    margin: 1.5625rem 0 0 0.4375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .mv-lead {
        margin: 2rem 0 0 0.375rem;
        font-size: 1.4375rem;
        line-height: 180%;
    }
}

.mv-lead::before {
    width: 1.75rem;
    height: 0.125rem;
    margin-right: 0.5625rem;
    content: "";
    background-color: #000;
}

@media screen and (width >= 768px) {
    .mv-lead::before {
        width: 2.5rem;
        height: 0.15625rem;
        margin-right: 0.375rem;
        background-color: #000;
    }
}

.mv-text {
    margin: 0.375rem 0 0 0.4375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 170%;
    letter-spacing: 0.04em;
}

@media screen and (width >= 768px) {
    .mv-text {
        margin: 0.5rem 0 0 0.375rem;
        font-size: 1.4375rem;
        line-height: 180%;
        white-space: nowrap;
    }
}

.mv-img {
    margin: 1.75rem -1.25rem 1.5rem;
}

@media screen and (width >= 768px) {
    .mv-img {
        position: relative;
        z-index: 2;
        width: 63.91%;
        margin: 0 0 0 5.625rem;
        overflow: hidden;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.625rem rgb(0 0 0 / 16%);
    }
}

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

.mv-illust {
    aspect-ratio: 375/82;
    margin: 0 -1.25rem;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-1-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-1-sp.webp)) {
    .mv-illust {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .mv-illust {
        display: none;
    }
}

.slider {
    position: relative;
    padding: 2.75rem 0 3.375rem;
    background-color: #fff;
    border-radius: 2.5rem 2.5rem 0 0;
}

@media screen and (width >= 768px) {
    .slider {
        padding: 6.25rem 0 4.375rem;
    }
}

.slider-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .slider-title {
        margin-left: 0.625rem;
        font-size: 2.25rem;
        letter-spacing: initial;
    }
}

.slider-img {
    aspect-ratio: 375/118;
    margin-top: 4.5%;
    background: url(/jp-ja/brand/tech-in-life/img/top-illust-5-sp.png);
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-5-sp.webp)) {
    .slider-img {
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-5-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .slider-img {
        aspect-ratio: 1440/385;
        margin-top: -13%;
        background: url(/jp-ja/brand/tech-in-life/img/top-illust-4.png);
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-illust-4.webp)) {
        .slider-img {
            background: url(/jp-ja/brand/tech-in-life/img/top-illust-4.webp) no-repeat center/cover;
        }
    }
}

.slider-prev-btn {
    position: absolute;
    top: 18.125rem;
    left: 0;
    z-index: 1;
    display: block;
    width: 2.25rem;
    height: 4.5rem;
    background-color: #fff;
    border: 1px solid #0062c2;
    border-radius: 0 100% 100% 0/50%;
    box-shadow: 0 0 0.25rem rgb(0 0 0 / 50%);
}

@media screen and (width >= 768px) {
    .slider-prev-btn {
        top: 42%;
        width: 2.5rem;
        height: 5rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 80%);
    }
}

@media screen and (width >= 1440px) {
    .slider-prev-btn {
        top: 24.625rem;
    }
}

.slider-prev-btn::after {
    display: block;
    width: 0.625rem;
    min-width: 0.625rem;
    height: 1rem;
    min-height: 1rem;
    margin-left: 0.5625rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.png) no-repeat center/cover;
    transform: rotate(180deg);
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.webp)) {
    .slider-prev-btn::after {
        background: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .slider-prev-btn::after {
        width: 0.8125rem;
        min-width: 0.8125rem;
        height: 1.3125rem;
        min-height: 1.3125rem;
    }
}

.slider-next-btn {
    position: absolute;
    top: 18.125rem;
    right: 0;
    z-index: 1;
    display: block;
    width: 2.25rem;
    height: 4.5rem;
    background-color: #fff;
    border: 1px solid #0062c2;
    border-radius: 100% 0 0 100%/50%;
    box-shadow: 0 0 0.25rem rgb(0 0 0 / 50%);
}

@media screen and (width >= 768px) {
    .slider-next-btn {
        top: 42%;
        width: 2.5rem;
        height: 5rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 80%);
    }
}

@media screen and (width >= 1440px) {
    .slider-next-btn {
        top: 24.625rem;
    }
}

.slider-next-btn::after {
    display: block;
    width: 0.625rem;
    min-width: 0.625rem;
    height: 1rem;
    min-height: 1rem;
    margin-left: 1.125rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.webp)) {
    .slider-next-btn::after {
        background: url(/jp-ja/brand/tech-in-life/img/slider-next-btn.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .slider-next-btn::after {
        width: 0.8125rem;
        min-width: 0.8125rem;
        height: 1.3125rem;
        min-height: 1.3125rem;
    }
}

.related-tech-slider .slider-prev-btn {
    top: 0;
    left: 0.25rem;
    bottom: 0;
    margin: auto;
}

.related-tech-slider .slider-next-btn {
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.card-slider {
    position: relative;
    margin: 1.6875rem calc(50% - 50vw) 0 -0.375rem;
}

@media screen and (width >= 768px) {
    .card-slider {
        margin: 2rem calc(50% - 50vw) 0 -0.25rem;
    }
}

.card-wrap {
    width: 19.375rem;
    height: 21.125rem;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0 0.375rem rgb(0 0 0 / 20%);
}

@media screen and (width >= 768px) {
    .card-wrap {
        width: 32.5rem;
        height: 29.875rem;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.625rem rgb(0 0 0 / 20%);
    }
}

.card-wrap a {
    display: block;
    height: inherit;
}

.card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.card-title {
    position: absolute;
    bottom: -0.0625rem;
    left: 0;
    display: inline-block;
    padding: 0.5625rem 0.9375rem 0.0625rem;
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 100%;
    color: #0062c2;
    letter-spacing: 0.02em;
    background-color: #fff;
    border-top-right-radius: 0.75rem;
}

@media screen and (width >= 768px) {
    .card-title {
        padding: 0.8125rem 1.4375rem 0 1.5rem;
        font-size: 1.5rem;
        border-top-right-radius: 1.25rem;
    }
}

.card-title span {
    font-size: 1.5rem;
}

@media screen and (width >= 768px) {
    .card-title span {
        font-size: 2.25rem;
    }
}

.card-body {
    padding: 0.875rem 0.9375rem 1.125rem;
}

@media screen and (width >= 768px) {
    .card-body {
        padding: 1.25rem 1.5rem 1.6875rem;
    }
}

.card-lead {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .card-lead {
        font-size: 1.375rem;
    }
}

.card-lead::after {
    display: block;
    width: 1.125rem;
    min-width: 1.125rem;
    height: 0.9375rem;
    min-height: 0.9375rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/arrow.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/arrow.webp)) {
    .card-lead::after {
        background: url(/jp-ja/brand/tech-in-life/img/arrow.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .card-lead::after {
        width: 1.625rem;
        min-width: 1.625rem;
        height: 1.375rem;
        min-height: 1.375rem;
        margin-left: 0.4375rem;
    }
}

.card-text {
    margin-top: 0.5625rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .card-text {
        margin-top: 0.75rem;
        font-size: 0.9375rem;
        line-height: 160%;
    }
}

.related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.related-tech-img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 310/180;
    object-fit: cover;
}

@media screen and (width >= 768px) {
    .related-tech-img img {
        width: 100%;
        height: 100%;
        aspect-ratio: 392/240;
        object-fit: cover;
        transition: 0.5s;
    }
}

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

.life-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
    /* aspect-ratio: 335/128; */
}

/* @media screen and (min-width: 768px) {
    .life-banner-img img {
        aspect-ratio: initial;
    }
} */

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

.life-link-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

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

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

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

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

.film-banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

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

.film-link-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

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

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

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

.mv-slider .slide-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-wrap:hover .card-img img {
    transform: scale(1.05);
}

.coming-soon {
    position: relative;
}

.coming-soon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 100%;
    color: #8b8b8b;
    letter-spacing: 0.02em;
    content: "Coming soon";
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .coming-soon::after {
        font-size: 2.5rem;
    }
}

.coming-soon a {
    filter: blur(2px);
}

.related {
    padding: 3.9375rem 0 5.9375rem;
    background-color: #f6f6f6;
}

@media screen and (width >= 768px) {
    .related {
        padding: 5.625rem 0 7.5rem;
    }
}

.related-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .related-title {
        font-size: 2.25rem;
        letter-spacing: initial;
    }
}

.related-sub-title {
    display: flex;
    align-items: normal;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 150%;
}

@media screen and (width >= 768px) {
    .related-sub-title {
        align-items: center;
        margin-top: 0.25rem;
        font-size: 1.125rem;
    }
}

.related-sub-title::before {
    display: block;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 0.0625rem;
    min-height: 0.0625rem;
    margin-top: 0.625rem;
    margin-right: 0.5rem;
    content: "";
    background-color: #000;
}

@media screen and (width >= 768px) {
    .related-sub-title::before {
        width: 2rem;
        min-width: 2rem;
        height: 0.0625rem;
        min-height: 0.0625rem;
        margin-top: 0;
    }
}

.related-text {
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 180%;
    letter-spacing: 0.02em;
    margin-top: 1rem;
}

@media screen and (width >= 768px) {
    .related-text {
        font-size: 0.9375rem;
        line-height: 160%;
        margin-top: 1.5rem;
    }
}

.related-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media screen and (width >= 768px) {
    .related-list {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 1.5rem;
        margin-top: 2.5rem;
    }
}

.related-item {
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 0.2875rem rgb(0 0 0 / 20%);
}

@media screen and (width >= 768px) {
    .related-item {
        box-shadow: 0 0 0.52125rem rgb(0 0 0 / 20%);
    }
}

.related-img {
    overflow: hidden;
}

.related-body {
    padding: 0.5625rem;
}

@media screen and (width >= 768px) {
    .related-body {
        padding: 1rem 1rem 1.4375rem;
    }
}

.related-body > div {
    display: flex;
    align-items: center;
    height: 2.25rem;
}

@media screen and (width >= 768px) {
    .related-body > div {
        display: block;
        align-items: initial;
        height: initial;
    }
}

.related-lead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 130%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .related-lead {
        justify-content: initial;
        width: initial;
        font-size: 1rem;
        line-height: 100%;
    }
}

.related-lead::after {
    display: block;
    width: 0.725rem;
    min-width: 0.725rem;
    height: 0.725rem;
    min-height: 0.725rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/related-arrow-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/related-arrow-sp.webp)) {
    .related-lead::after {
        background: url(/jp-ja/brand/tech-in-life/img/related-arrow-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .related-lead::after {
        width: 1.3125rem;
        min-width: 1.3125rem;
        height: 1.3125rem;
        min-height: 1.3125rem;
        margin-left: 0.25rem;
        background: url(/jp-ja/brand/tech-in-life/img/related-arrow.png) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/related-arrow.webp)) {
        .related-lead::after {
            background: url(/jp-ja/brand/tech-in-life/img/related-arrow.webp) no-repeat center/cover;
        }
    }
}

.related-item-text {
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 140%;
    letter-spacing: 0.02em;
    margin-top: 0.4375rem;
}

@media screen and (width >= 768px) {
    .related-item-text {
        font-size: 0.9375rem;
        line-height: 160%;
        margin-top: 0.625rem;
    }
}

.related-item:hover .related-img img {
    transform: scale(1.05);
}

.related-tech {
    padding-bottom: 4rem;
    margin-top: 3.5rem;
}

@media screen and (min-width: 768px) {
    .related-tech {
        padding-bottom: 7.5625rem;
        margin-top: 6.25rem;
    }
}

.related-tech-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .related-tech-title {
        font-size: 2.25rem;
        letter-spacing: 0.05em;
    }
}

.related-tech-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.related-tech-card {
    width: 19.375rem;
    height: 21.375rem;
    margin: 0.25rem 0.75rem 0.25rem 0.25rem;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 0 0.375rem rgb(0 0 0 / 20%);
}

@media screen and (width >= 768px) {
    .related-tech-card {
        width: 100%;
        height: 26.8125rem;
        margin: 0;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.625rem rgb(0 0 0 / 12%);
    }
}

.related-tech-card a {
    display: block;
    height: inherit;
}

.related-tech-img {
    overflow: hidden;
    background-color: #c4c4c4;
}

.related-tech-card:hover .related-tech-img img {
    transform: scale(1.05);
}

.related-tech-body {
    padding: 1rem 0.9375rem 1.25rem;
}

@media screen and (width >= 768px) {
    .related-tech-body {
        padding: 1.25rem 1.5rem 2rem;
    }
}

.related-tech-lead {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .related-tech-lead {
        font-size: 1.25rem;
    }
}

.related-tech-lead::after {
    display: block;
    width: 0.5rem;
    min-width: 0.5rem;
    height: 0.9375rem;
    min-height: 0.9375rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/related-tech-arrow.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/related-tech-arrow.webp)) {
    .related-tech-lead::after {
        background: url(/jp-ja/brand/tech-in-life/img/related-tech-arrow.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .related-tech-lead::after {
        width: 0.9375rem;
        min-width: 0.9375rem;
        height: 1.375rem;
        min-height: 1.375rem;
    }
}

.related-tech-text {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .related-tech-text {
        font-size: 0.9375rem;
    }
}

.related-tech-slider {
    margin: 1.25rem -1.25rem 0 -0.25rem;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.related-link-wrap {
    padding: 3rem 0;
    margin-top: 3.5rem;
    background-color: #f6f6f6;
}

@media screen and (width >= 768px) {
    .related-link {
        padding: 6.25rem 0;
        margin: 6.25rem calc(50% - 50vw) 0;
        background-color: #f6f6f6;
    }
}

.related-link-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    color: #000;
    letter-spacing: 0.03em;
}

@media screen and (width >= 768px) {
    .related-link-title {
        font-size: 2.25rem;
        letter-spacing: 0.05em;
    }
}

.related-link-cards {
    display: block;
    margin-top: 1.25rem;
}

@media screen and (min-width: 768px) {
    .related-link-cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        margin-top: 2rem;
    }
}

.related-link-card {
    width: 100%;
    padding: 0.9375rem 1.25rem;
    margin: 0.625rem 0 0.625rem;
    background-color: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 0 0.625rem rgb(0 0 0 / 12%);
}

@media screen and (width >= 768px) {
    .related-link-card {
        padding: 2rem 1.5rem;
        margin: 0;
    }
}

.related-link-lead {
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .related-link-lead {
        font-size: 1.25rem;
        background-image: linear-gradient(#0062c2, #0062c2);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 0 1px;
        transition: background-size 0.3s;
    }
}

.related-link-card:hover .related-link-lead {
    background-position: bottom left;
    background-size: 100% 1px;
}

.related-link-lead::after {
    display: block;
    width: 1.34375rem;
    min-width: 1.34375rem;
    height: 1.5rem;
    min-height: 1.5rem;
    margin-left: 0.5rem;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/icn-link.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/icn-link.webp)) {
    .related-link-lead::after {
        background: url(/jp-ja/brand/tech-in-life/img/icn-link.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .related-link-lead::after {
        width: 1.625rem;
        min-width: 1.625rem;
        height: 1.8125rem;
        min-height: 1.8125rem;
    }
}

.related-link-text {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .related-link-text {
        font-size: 1rem;
    }
}

.related-link-slider {
    margin: 1.25rem -1.25rem 0 -0.375rem;
    overflow: hidden;
}

.life {
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .life {
        padding-bottom: 6.25rem;
        margin: 3.3125rem 0 0;
        background-color: initial;
    }
}

.life-block {
    width: 100%;
    height: 4.875rem;
    background-color: #f3f9ff;
}

.life-wrap {
    padding: 3.125rem 0 0.75rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .life-wrap {
        padding: 3.875rem 13.75rem 0.9375rem;
        background-color: #fff;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 12%);
    }
}

.life-title.bubble {
    width: 101.7910447761%;
    aspect-ratio: 341/56;
    margin: 0 0 2.5rem -0.4375rem;
    background: url(/jp-ja/brand/tech-in-life/img/life-title1-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .life-title.bubble {
        width: 104.3125%;
        aspect-ratio: 835/93;
        margin: 0 0 3rem -2.1875rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-title1.svg) no-repeat center/contain;
    }
}

.life-title.gear {
    width: 101.1940298507%;
    aspect-ratio: 339/68;
    margin: 0 0 2.5rem -0.3125rem;
    background: url(/jp-ja/brand/tech-in-life/img/life-title2-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .life-title.gear {
        width: 103.4625%;
        aspect-ratio: 828/104;
        margin: 0 0 3rem -0.9375rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-title2.svg) no-repeat center/contain;
    }
}

.life-title.earth {
    width: 100.5970149254%;
    aspect-ratio: 337/67;
    margin: 0 0 2.5625rem -0.1875rem;
    background: url(/jp-ja/brand/tech-in-life/img/life-title3-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .life-title.earth {
        width: 102.625%;
        aspect-ratio: 821/79;
        margin: 0 0 3rem -1.3125rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-title3.svg) no-repeat center/contain;
    }
}

.life-title {
    position: relative;
    z-index: 1;
}

.life-title div h2 {
    margin-bottom: 0.5625rem;
    font-size: 5.3vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .life-title div h2 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
    }
}

.tech-title div h2 {
    margin-bottom: 0.5625rem;
    font-size: 5.3vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech-title div h2 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
    }
}

.film-title div h2 {
    margin-bottom: 0.5625rem;
    font-size: 5.3vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .film-title div h2 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
    }
}

.tech2-title div h2 {
    margin-bottom: 0.5625rem;
    font-size: 5.3vw;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech2-title div h2 {
        margin-bottom: 1rem;
        font-size: 2.25rem;
    }
}

.life-title.earth div h2 {
    margin-bottom: 1.125rem;
}

@media screen and (width >= 768px) {
    .life-title.earth div h2 {
        margin-bottom: 1rem;
    }
}

.life-lead {
    margin-bottom: 1.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
}

@media screen and (width >= 768px) {
    .life-lead {
        margin-bottom: 2rem;
        font-size: 1.75rem;
    }
}

.life-text > p:nth-child(n + 2) {
    margin-top: 1rem;
}

@media screen and (width >= 768px) {
    .life-text > p:nth-child(n + 2) {
        margin-top: 1.5rem;
    }
}

.life-img1 {
    aspect-ratio: 375/240;
    margin: 1.75rem -1.25rem 2.5rem;
    overflow: hidden;
    background: url(/jp-ja/brand/tech-in-life/img/life-img-1-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-img-1-sp.webp)) {
    .life-img1 {
        background: url(/jp-ja/brand/tech-in-life/img/life-img-1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .life-img1 {
        width: 155%;
        aspect-ratio: 1240/460;
        margin: 2.5rem -13.75rem 4.1875rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-img-1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-img-1.webp)) {
        .life-img1 {
            background: url(/jp-ja/brand/tech-in-life/img/life-img-1.webp) no-repeat center/cover;
        }
    }
}

.life-img2 {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 2rem;
    overflow: hidden;
}

@media screen and (width >= 768px) {
    .life-img2 {
        width: 155%;
        max-width: initial;
        margin: 2.3125rem -13.75rem 2.5rem;
    }
}

.life-banner {
    width: 100%;
    height: 100%;
    margin-bottom: 3.125rem;
    overflow: hidden;
    border-radius: 1.25rem;
}

@media screen and (width >= 768px) {
    .life-banner {
        margin-bottom: 3.8125rem;
    }
}

.life-banner:hover .life-banner-img img {
    transform: scale(1.05);
}

.life-link:hover .life-link-img img {
    transform: scale(1.05);
}

.film-banner:hover .film-banner-img img {
    transform: scale(1.05);
}

.film-link:hover .film-link-img img {
    transform: scale(1.05);
}

.life-banner a:hover .life-banner-img img {
    transform: scale(1.05);
}

.life-banner-img {
    overflow: hidden;
}

.life-banner-body {
    padding: 1.25rem 1rem;
    background-color: #0062c2;
    position: relative;
}

@media screen and (min-width: 768px) {
    .life-banner-body {
        padding: 1.125rem 1.5rem 1.5rem 2rem;
    }
}

.life-banner-text {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 150%;
    color: #fff;
    letter-spacing: 0.02em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .life-banner-text {
        margin-top: 0.25rem;
        font-size: 0.9375rem;
    }
}

.life-banner-title {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    letter-spacing: 0.03em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .life-banner-title {
        font-size: 1.375rem;
    }
}

.life-banner:hover .life-banner-title {
    background-position: bottom left;
    background-size: 100% 1px;
}

.life-banner:hover .life-banner-text {
    background-position: bottom left;
    background-size: 100% 1px;
}

.life-banner-arrow {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: url(/jp-ja/brand/tech-in-life/img/banner-arrow-sp.svg) no-repeat center/cover;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .life-banner-arrow {
        width: 2rem;
        height: 2rem;
        top: 0;
        bottom: 0;
        right: 1.5rem;
        background: url(/jp-ja/brand/tech-in-life/img/banner-arrow.svg) no-repeat center/cover;
    }
}

.life-img3 {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 2.375rem;
    overflow: hidden;
}

@media screen and (width >= 768px) {
    .life-img3 {
        width: 155%;
        max-width: initial;
        margin: 2.5rem -13.75rem 4rem;
    }
}

.life-more {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .life-more {
        font-size: 1.75rem;
    }
}

.life-more::after {
    display: block;
    width: 0.875rem;
    min-width: 0.875rem;
    height: 1.25rem;
    min-height: 1.25rem;
    margin: 0.625rem auto 0;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.webp)) {
    .life-more::after {
        background: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .life-more::after {
        width: 1.125rem;
        min-width: 1.125rem;
        height: 1.625rem;
        min-height: 1.625rem;
    }
}

.life-link {
    width: 100%;
    height: 100%;
    margin: 0.9375rem 0 0.6875rem;
    overflow: hidden;
    border-radius: 1.25rem;
}

@media screen and (width >= 768px) {
    .life-link {
        width: 125%;
        margin: 1.25rem -6.25rem 1.875rem;
    }
}

.life-link-img {
    overflow: hidden;
}

.life-link-body {
    padding: 1.25rem 1rem;
    background-color: #0062c2;
    position: relative;
}

@media screen and (min-width: 768px) {
    .life-link-body {
        padding: 1.125rem 1.5rem 1.5rem 2rem;
    }
}

.life-link-title {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    letter-spacing: 0.03em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .life-link-title {
        font-size: 1.375rem;
    }
}

.life-link:hover .life-link-title {
    background-position: bottom left;
    background-size: 100% 1px;
}

.life-link-text {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 150%;
    color: #fff;
    letter-spacing: 0.02em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .life-link-text {
        margin-top: 0.25rem;
        font-size: 0.9375rem;
    }
}

.life-link:hover .life-link-text {
    background-position: bottom left;
    background-size: 100% 1px;
}

.life-link-arrow {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    background: url(/jp-ja/brand/tech-in-life/img/banner-arrow-sp.svg) no-repeat center/cover;
}

@media screen and (min-width: 768px) {
    .life-link-arrow {
        width: 2rem;
        height: 2rem;
        top: 0;
        bottom: 0;
        right: 1.5rem;
        background: url(/jp-ja/brand/tech-in-life/img/banner-arrow.svg) no-repeat center/cover;
    }
}

.life-illust {
    aspect-ratio: 375/122;
    margin: 0 -1.25rem;
    background: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.webp)) {
    .life-illust {
        background: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .life-illust {
        width: 155%;
        aspect-ratio: 1240/147;
        margin: 0 -13.75rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-illust.png) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-illust.webp)) {
        .life-illust {
            background: url(/jp-ja/brand/tech-in-life/img/life-illust.webp) no-repeat center/cover;
        }
    }
}

.tech {
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .tech {
        margin: 5.5625rem 0 0;
        background-color: initial;
    }
}

.tech-wrap {
    padding: 2.8125rem 0 2.5rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .tech-wrap {
        padding: 4rem 13.75rem;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 12%);
    }
}

.tech-wrap:nth-child(n + 2) {
    padding: 2.625rem 0 3rem;
}

@media screen and (width >= 768px) {
    .tech-wrap:nth-child(n + 2) {
        padding: 4.0625rem 13.75rem 4rem;
        margin-top: 4rem;
    }
}

.tech-title.clothes {
    width: 107.7611940299%;
    margin: 0 0 2.5rem -0.625rem;
    aspect-ratio: 361/68;
    background: url(/jp-ja/brand/tech-in-life/img/tech-title1-sp.png) no-repeat center/contain;
}

@supports (background-image: url("/jp-ja/brand/tech-in-life/img/tech-title1-sp.webp")) {
    .tech-title.clothes {
        background: url(/jp-ja/brand/tech-in-life/img/tech-title1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (min-width: 768px) {
    .tech-title.clothes {
        width: 104.5%;
        margin: 0 0 2.9375rem -2.25rem;
        aspect-ratio: 836/89;
        background: url(/jp-ja/brand/tech-in-life/img/tech-title1.png) no-repeat center/contain;
    }

    @supports (background-image: url("/jp-ja/brand/tech-in-life/img/tech-title1.webp")) {
        .tech-title.clothes {
            background: url(/jp-ja/brand/tech-in-life/img/tech-title1.webp) no-repeat center/cover;
        }
    }
}

.tech-title.gear {
    width: 102.9850746269%;
    aspect-ratio: 345/86;
    margin: 0 0 2.4375rem -0.65625rem;
    background: url(/jp-ja/brand/tech-in-life/img/tech-title2-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .tech-title.gear {
        width: 103.875%;
        aspect-ratio: 831/103;
        margin: 0 0 3.0625rem -1.9375rem;
        background: url(/jp-ja/brand/tech-in-life/img/tech-title2.svg) no-repeat center/contain;
    }
}

.tech-title {
    position: relative;
    z-index: 1;
}

.tech-text > p:nth-child(n + 2) {
    margin-top: 1rem;
}

@media screen and (width >= 768px) {
    .tech-text > p:nth-child(n + 2) {
        margin-top: 1.5rem;
    }
}

.tech-point {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
}

@media screen and (width >= 768px) {
    .tech-point {
        margin-bottom: 1.25rem;
    }
}

.tech-point:nth-child(n + 3) {
    margin-top: 2.5rem;
}

@media screen and (width >= 768px) {
    .tech-point:nth-child(n + 3) {
        margin-top: 4rem;
    }
}

.tech-point > h3 {
    margin-left: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech-point > h3 {
        margin-left: 1rem;
        font-size: 1.75rem;
        line-height: 100%;
    }
}

.tech-figure {
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 0;
}

@media screen and (width >= 768px) {
    .tech-figure {
        width: 100%;
        max-width: initial;
        margin: 2.5rem 0 0;
    }
}

.tech-img {
    position: relative;
    aspect-ratio: 375/230;
    margin: 1.75rem -1.25rem 0;
    overflow: hidden;
    background: url(/jp-ja/brand/tech-in-life/img/tech-img1-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech-img1-sp.webp)) {
    .tech-img {
        background: url(/jp-ja/brand/tech-in-life/img/tech-img1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .tech-img {
        width: 155%;
        aspect-ratio: 1240/542;
        margin: 2.5rem -13.75rem 0;
        background: url(/jp-ja/brand/tech-in-life/img/tech-img1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech-img1.webp)) {
        .tech-img {
            background: url(/jp-ja/brand/tech-in-life/img/tech-img1.webp) no-repeat center/cover;
        }
    }
}

.tech-img2 {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 0;
    overflow: hidden;
}

@media screen and (width >= 768px) {
    .tech-img2 {
        width: 155%;
        max-width: initial;
        margin: 2.5rem -13.75rem 0;
    }
}

.tech-block {
    width: 111.94%;
    max-width: 100vw;
    height: 2.5rem;
    margin: 0 -1.25rem;
    background-color: #f3f9ff;
}

.focus {
    margin-top: 3rem;
    overflow: hidden;
    background-color: #fff;
    background-image: linear-gradient(
            0deg,
            transparent calc(100% - 1px),
            #f0f5f9 calc(100% - 1px)
        ),
        linear-gradient(
            90deg,
            transparent calc(100% - 1px),
            #f0f5f9 calc(100% - 1px)
        );
    background-repeat: repeat;
    background-position: center center;
    background-size: 1.375rem 1.375rem;
    border: 2px solid #0062c2;
    border-radius: 1.25rem;
    box-shadow: 0 0 0.625rem rgb(0 0 0 / 10%);
}

@media screen and (width >= 768px) {
    .focus {
        margin-top: 4.1875rem;
        background-size: 2rem 2rem;
    }
}

.focus h4 {
    padding: 1.25rem 2.1875rem;
    font-family: "Open-Sans", "Arial", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 100%;
    color: #fff;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: #0062c2;
    border-radius: 1.0625rem 1.0625rem 0 0;
}

@media screen and (width >= 768px) {
    .focus h4 {
        padding: 0.9375rem 2.5rem;
        font-size: 2rem;
        line-height: 150%;
        text-align: initial;
    }
}

@media screen and (width >= 768px) {
    .focus-wrap {
        display: flex;
        align-items: center;
    }
}

.focus-body {
    width: 84.48%;
    margin: 1.5rem auto;
}

@media screen and (width >= 768px) {
    .focus-body {
        width: 43.55%;
        margin: auto;
    }
}

.focus-lead {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .focus-lead {
        font-size: 1.5rem;
    }
}

.focus-text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

.focus-img {
    width: 100%;
    aspect-ratio: 331/214;
    overflow: hidden;
    background: url(/jp-ja/brand/tech-in-life/img/focus-img.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/focus-img.webp)) {
    .focus-img {
        background: url(/jp-ja/brand/tech-in-life/img/focus-img.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .focus-img {
        width: 50%;
        aspect-ratio: 618/399;
        overflow: hidden;
    }
}

.video {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 0;
}

@media screen and (width >= 768px) {
    .video {
        position: relative;
        width: 100%;
        max-width: initial;
        max-height: 28.125rem;
        margin: 2.5rem 0 0;
    }
}

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

.video-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 60%);
}

@media screen and (width >= 768px) {
    .video-mask {
        background-color: rgb(0 0 0 / 40%);
    }
}

.video-pause,
.video-play {
    position: absolute;
    inset: 0;
    width: 2.9375rem;
    height: 2.9375rem;
    margin: auto;
    font: inherit;
    appearance: none;
    background: transparent;
    border: 1.4px solid #fff;
    border-radius: 50%;
    outline: none;
}

@media screen and (width >= 768px) {
    .video-pause,
    .video-play {
        width: 6.25rem;
        height: 6.25rem;
        border: 3px solid #fff;
    }
}

.video-pause::after {
    display: block;
    width: 0.625rem;
    height: 1rem;
    margin: auto;
    content: "";
    border-right: 1.4px solid #fff;
    border-left: 1.4px solid #fff;
}

@media screen and (width >= 768px) {
    .video-pause::after {
        width: 1.25rem;
        height: 1.875rem;
        border-right: 3px solid #fff;
        border-left: 3px solid #fff;
    }
}

.video-play::after {
    display: block;
    width: 0.625rem;
    height: 1rem;
    margin: auto;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/play-btn.png) no-repeat center/cover;
}

@media screen and (width >= 768px) {
    .video-play::after {
        width: 1.25rem;
        height: 1.875rem;
    }
}

.video-pause {
    display: none;
}

.video-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 150%;
    color: #5f5f5f;
    text-align: center;
    letter-spacing: 0.02em;
    background-color: rgb(255 255 255 / 90%);
}

@media screen and (width >= 768px) {
    .video-text {
        padding: 1.125rem 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 100%;
    }
}

.video.playing:hover .video-pause {
    display: block;
}

.mv-slider {
    width: 100%;
    aspect-ratio: 375/240;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .mv-slider {
        aspect-ratio: 795/545;
    }
}

.mv-slider .swiper {
    height: 100%;
}

.mv-slider .swiper-wrapper {
    height: 100%;
}

.mv-slider .swiper-slide {
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.mv-slider .swiper-slide.swiper-slide-active {
    opacity: 1;
}

.mv-slider .swiper-slide-prev,
.mv-slider .swiper-slide-next {
    opacity: 0.5;
}

.mv-slider .slide {
    height: 100%;
}

.mv-slider .slide-media {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.mv-slider .slide-media.img1 {
    aspect-ratio: 375/240;
    background: url(/jp-ja/brand/tech-in-life/img/top-img-1-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-1-sp.webp)) {
    .mv-slider .slide-media.img1 {
        background: url(/jp-ja/brand/tech-in-life/img/top-img-1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .mv-slider .slide-media.img1 {
        aspect-ratio: 785/538;
        background: url(/jp-ja/brand/tech-in-life/img/top-img-1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/top-img-1.webp)) {
        .mv-slider .slide-media.img1 {
            background: url(/jp-ja/brand/tech-in-life/img/top-img-1.webp) no-repeat center/cover;
        }
    }
}

.mv-slider .slide-media.img2 {
    aspect-ratio: 375/240;
    background: url(/jp-ja/brand/tech-in-life/img/mv2-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv2-sp.webp)) {
    .mv-slider .slide-media.img2 {
        background: url(/jp-ja/brand/tech-in-life/img/mv2-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .mv-slider .slide-media.img2 {
        aspect-ratio: 785/538;
        background: url(/jp-ja/brand/tech-in-life/img/mv2.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv2.webp)) {
        .mv-slider .slide-media.img2 {
            background: url(/jp-ja/brand/tech-in-life/img/mv2.webp) no-repeat center/cover;
        }
    }
}

.mv-slider .slide-media.img3 {
    aspect-ratio: 375/240;
    background: url(/jp-ja/brand/tech-in-life/img/mv3-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv3-sp.webp)) {
    .mv-slider .slide-media.img3 {
        background: url(/jp-ja/brand/tech-in-life/img/mv3-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .mv-slider .slide-media.img3 {
        aspect-ratio: 785/538;
        background: url(/jp-ja/brand/tech-in-life/img/mv3.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv3.webp)) {
        .mv-slider .slide-media.img3 {
            background: url(/jp-ja/brand/tech-in-life/img/mv3.webp) no-repeat center/cover;
        }
    }
}

.mv-slider .slide-media.img4 {
    aspect-ratio: 375/240;
    background: url(/jp-ja/brand/tech-in-life/img/mv4-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv4-sp.webp)) {
    .mv-slider .slide-media.img4 {
        background: url(/jp-ja/brand/tech-in-life/img/mv4-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .mv-slider .slide-media.img4 {
        aspect-ratio: 785/538;
        background: url(/jp-ja/brand/tech-in-life/img/mv4.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/mv4.webp)) {
        .mv-slider .slide-media.img4 {
            background: url(/jp-ja/brand/tech-in-life/img/mv4.webp) no-repeat center/cover;
        }
    }
}

.card-slider > ul > .swiper-slide {
    width: 19.375rem;
    margin-right: 0.9375rem;
}

@media screen and (width >= 768px) {
    .card-slider > ul > .swiper-slide {
        width: 32.5rem;
        margin-right: 1.875rem;
    }
}

.slider .swiper-button-disabled {
    display: none;
}

.slider .swiper-button-hidden {
    display: none;
}

.related-tech-slider .swiper-button-disabled {
    display: none;
}

.related-tech-slider .swiper-button-hidden {
    display: none;
}

.related-tech-slider > ul {
    padding-left: 1.25rem;
}

.related-tech-slider > ul > .swiper-slide {
    width: 19.375rem;
    margin-right: 0.9375rem;
}

.related-link-slider > .swiper-b > .swiper-wrapper > .swiper-slide {
    width: 19.375rem;
    margin-right: 0.9375rem;
}

.film {
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .film {
        padding-bottom: 4.8125rem;
        margin: 3.3125rem 0 0;
        background-color: initial;
    }
}

.film-wrap {
    padding: 2.875rem 0 1.9375rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .film-wrap {
        padding: 3.875rem 13.75rem 3.625rem;
        background-color: #fff;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 12%);
    }
}

.film-title.phone {
    width: 100%;
    aspect-ratio: 335/77;
    margin: 0 0 2.3125rem;
    background: url(/jp-ja/brand/tech-in-life/img/film-title1-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .film-title.phone {
        width: 103%;
        aspect-ratio: 824/131;
        margin: 0 0 3rem -0.9375rem;
        background: url(/jp-ja/brand/tech-in-life/img/film-title1.svg) no-repeat center/contain;
    }
}

.film-title.bubble {
    width: 101.7910447761%;
    aspect-ratio: 341/55;
    margin: 0 0 2.5rem -0.3125rem;
    background: url(/jp-ja/brand/tech-in-life/img/film-title2-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .film-title.bubble {
        width: 103.625%;
        aspect-ratio: 829/92;
        margin: 0 0 3rem -2.125rem;
        background: url(/jp-ja/brand/tech-in-life/img/film-title2.svg) no-repeat center/contain;
    }
}

.film-title.gear {
    width: 100.5970149254%;
    aspect-ratio: 337/67;
    margin: 0 0 2.5625rem -0.1875rem;
    background: url(/jp-ja/brand/tech-in-life/img/film-title3-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .film-title.gear {
        width: 101.75%;
        aspect-ratio: 814/102;
        margin: 0 0 3rem -1.3125rem;
        background: url(/jp-ja/brand/tech-in-life/img/film-title3.svg) no-repeat center/contain;
    }
}

.film-title.earth {
    width: 100.5970149254%;
    aspect-ratio: 337/67;
    margin: 0 0 2.5625rem -0.1875rem;
    background: url(/jp-ja/brand/tech-in-life/img/film-title4-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .film-title.earth {
        width: 102.5%;
        aspect-ratio: 820/81;
        margin: 0 0 3rem -1.3125rem;
        background: url(/jp-ja/brand/tech-in-life/img/film-title4.svg) no-repeat center/contain;
    }
}

.film-title {
    position: relative;
    z-index: 1;
}

.film-lead {
    margin-bottom: 1.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
}

@media screen and (width >= 768px) {
    .film-lead {
        margin-bottom: 2rem;
        font-size: 1.75rem;
    }
}

.film-text > p:nth-child(n + 2) {
    margin-top: 1rem;
}

@media screen and (width >= 768px) {
    .film-text > p:nth-child(n + 2) {
        margin-top: 1.5rem;
    }
}

.film-img1 {
    aspect-ratio: 375/240;
    margin: 1.75rem -1.25rem 3.375rem;
    overflow: hidden;
    background: url(/jp-ja/brand/tech-in-life/img/film-img1-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/film-img1-sp.webp)) {
    .film-img1 {
        background: url(/jp-ja/brand/tech-in-life/img/film-img1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .film-img1 {
        width: 155%;
        aspect-ratio: 1240/460;
        margin: 2.5rem -13.75rem 5rem;
        background: url(/jp-ja/brand/tech-in-life/img/film-img1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/film-img1.webp)) {
        .film-img1 {
            background: url(/jp-ja/brand/tech-in-life/img/film-img1.webp) no-repeat center/cover;
        }
    }
}

.film-note {
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 200%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .film-note {
        margin-top: 1.25rem;
        font-size: 0.875rem;
    }
}

.film-figure {
    width: calc(100% + 2.5rem);
    margin: 1.75rem calc(50% - 50vw) 2.5rem;
    padding: 0.9375rem 1.1875rem 1.125rem;
    max-width: 100vw;
    background-color: #f5f9fd;
}

@media screen and (min-width: 768px) {
    .film-figure {
        width: 100%;
        margin: 2rem 0 4.0625rem;
        padding: 2.0625rem 2.5rem 2.4375rem;
        max-width: initial;
        border-radius: 1.25rem;
    }
}

.film-figure p {
    font-weight: 700;
    font-size: 3.2vw;
    color: #0062c2;
    text-align: center;
    margin-bottom: 0.5rem;
}

@media screen and (min-width: 768px) {
    .film-figure p {
        font-size: 1.25rem;
        margin-bottom: 1.125rem;
    }
}

.film-img2 {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 2rem;
    overflow: hidden;
}

@media screen and (width >= 768px) {
    .film-img2 {
        width: 155%;
        max-width: initial;
        margin: 2.3125rem -13.75rem 2.5rem;
    }
}

.film-banner {
    width: 100%;
    height: 100%;
    margin-bottom: 2.5625rem;
    overflow: hidden;
    border-radius: 1.25rem;
}

@media screen and (width >= 768px) {
    .film-banner {
        margin-bottom: 4.0625rem;
    }
}

.film-banner-img {
    overflow: hidden;
}

.film-banner-body {
    padding: 1.25rem 2.9375rem 1.25rem 1rem;
    background-color: #0062c2;
    position: relative;
}

@media screen and (min-width: 768px) {
    .film-banner-body {
        padding: 1.125rem 1.5rem 1.5rem 2rem;
    }
}

.film-banner-text {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 150%;
    color: #fff;
    letter-spacing: 0.02em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .film-banner-text {
        margin-top: 0.25rem;
        font-size: 0.9375rem;
    }
}

.film-banner-title {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    letter-spacing: 0.03em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .film-banner-title {
        font-size: 1.375rem;
    }
}

.film-banner:hover .film-banner-title {
    background-position: bottom left;
    background-size: 100% 1px;
}

.film-banner:hover .film-banner-text {
    background-position: bottom left;
    background-size: 100% 1px;
}

.film-banner-arrow {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background: url(/jp-ja/brand/tech-in-life/img/banner-arrow-sp.svg) no-repeat center/cover;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
}

@media screen and (min-width: 768px) {
    .film-banner-arrow {
        width: 2rem;
        height: 2rem;
        top: 0;
        bottom: 0;
        right: 1.5rem;
        background: url(/jp-ja/brand/tech-in-life/img/banner-arrow.svg) no-repeat center/cover;
    }
}

.film-img3 {
    position: relative;
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 2.375rem;
}

@media screen and (width >= 768px) {
    .film-img3 {
        width: 155%;
        max-width: initial;
        margin: 3rem -13.75rem 4rem;
    }
}

.film-more {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .film-more {
        font-size: 1.75rem;
    }
}

.film-more::after {
    display: block;
    width: 0.875rem;
    min-width: 0.875rem;
    height: 1.25rem;
    min-height: 1.25rem;
    margin: 0.625rem auto 0;
    content: "";
    background: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.webp)) {
    .film-more::after {
        background: url(/jp-ja/brand/tech-in-life/img/life-more-arrow.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .film-more::after {
        width: 1.125rem;
        min-width: 1.125rem;
        height: 1.625rem;
        min-height: 1.625rem;
    }
}

.film-link {
    width: 100%;
    height: 100%;
    margin: 0.9375rem 0 0.4375rem;
    overflow: hidden;
    border-radius: 1.25rem;
}

@media screen and (width >= 768px) {
    .film-link {
        width: 125%;
        margin: 1.25rem -6.25rem 1.875rem;
    }
}

.film-link-img {
    overflow: hidden;
}

.film-link-body {
    padding: 1.25rem 2.9375rem 1.25rem 1rem;
    background-color: #0062c2;
    position: relative;
}

@media screen and (min-width: 768px) {
    .film-link-body {
        padding: 1.125rem 1.5rem 1.5rem 2rem;
    }
}

.film-link-title {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 130%;
    color: #fff;
    letter-spacing: 0.03em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .film-link-title {
        font-size: 1.375rem;
    }
}

.film-link:hover .film-link-title {
    background-position: bottom left;
    background-size: 100% 1px;
}

.film-link-text {
    display: inline-block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 150%;
    color: #fff;
    letter-spacing: 0.02em;
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

@media screen and (width >= 768px) {
    .film-link-text {
        margin-top: 0.25rem;
        font-size: 0.9375rem;
    }
}

.film-link:hover .film-link-text {
    background-position: bottom left;
    background-size: 100% 1px;
}

.film-link-arrow {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 0;
    bottom: 0;
    right: 1rem;
    margin: auto;
    background: url(/jp-ja/brand/tech-in-life/img/banner-arrow-sp.svg) no-repeat center/cover;
}

@media screen and (min-width: 768px) {
    .film-link-arrow {
        width: 2rem;
        height: 2rem;
        top: 0;
        bottom: 0;
        right: 1.5rem;
        background: url(/jp-ja/brand/tech-in-life/img/banner-arrow.svg) no-repeat center/cover;
    }
}

.film-illust {
    aspect-ratio: 375/122;
    margin: 0 -1.25rem;
    background: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.png) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.webp)) {
    .film-illust {
        background: url(/jp-ja/brand/tech-in-life/img/life-illust-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .film-illust {
        width: 155%;
        aspect-ratio: 1240/147;
        margin: 0 -13.75rem;
        background: url(/jp-ja/brand/tech-in-life/img/life-illust.png) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/life-illust.webp)) {
        .film-illust {
            background: url(/jp-ja/brand/tech-in-life/img/life-illust.webp) no-repeat center/cover;
        }
    }
}

.film-block {
    width: 100%;
    height: 3.6875rem;
    background-color: #f3f9ff;
}

.tech2 {
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .tech2 {
        margin: 5.5625rem 0 0;
        background-color: initial;
    }
}

.tech2-wrap {
    padding: 2.625rem 0 2.5rem;
    background-color: #fff;
}

@media screen and (width >= 768px) {
    .tech2-wrap {
        padding: 4rem 13.75rem;
        border-radius: 1.25rem;
        box-shadow: 0 0 0.5rem rgb(0 0 0 / 12%);
    }
}

.tech2-wrap:nth-child(n + 2) {
    padding: 0.3125rem 0 3rem;
}

@media screen and (width >= 768px) {
    .tech2-wrap:nth-child(n + 2) {
        padding: 4.0625rem 13.75rem 4rem;
        margin-top: 4.5rem;
    }
}

.tech2-title.phone {
    width: 100%;
    aspect-ratio: 335/78;
    margin: 0 0 2.375rem;
    background: url(/jp-ja/brand/tech-in-life/img/tech2-title1-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .tech2-title.phone {
        width: 102.75%;
        aspect-ratio: 822/128;
        margin: 0 0 2.9375rem -2.25rem;
        background: url(/jp-ja/brand/tech-in-life/img/tech2-title1.svg) no-repeat center/contain;
    }
}

.tech2-title.gear {
    width: 102.9850746269%;
    aspect-ratio: 345/86;
    margin: 0 0 1.8125rem -0.65625rem;
    background: url(/jp-ja/brand/tech-in-life/img/tech2-title2-sp.svg) no-repeat center/contain;
}

@media screen and (width >= 768px) {
    .tech2-title.gear {
        width: 103.875%;
        aspect-ratio: 831/103;
        margin: 0 0 2.875rem -1.9375rem;
        background: url(/jp-ja/brand/tech-in-life/img/tech2-title2.svg) no-repeat center/contain;
    }
}

.tech2-title.future {
    width: 102.3880597015%;
    margin: 0.3125rem 0 2.625rem -0.65625rem;
    aspect-ratio: 343/85;
    background: url(/jp-ja/brand/tech-in-life/img/tech2-title3-sp.svg) no-repeat center/contain;
}

@media screen and (min-width: 768px) {
    .tech2-title.future {
        width: 109%;
        margin: 0 0 2.5625rem -3.0625rem;
        aspect-ratio: 860/99;
        background: url(/jp-ja/brand/tech-in-life/img/tech2-title3.svg) no-repeat center/contain;
    }
}

.tech2-title {
    position: relative;
    z-index: 1;
}

.tech2-text > p:nth-child(n + 2) {
    margin-top: 1.5rem;
}

@media screen and (width >= 768px) {
    .tech2-text > p:nth-child(n + 2) {
        margin-top: 1.25rem;
    }
}

.tech2-figure1 {
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 0;
}

@media screen and (width >= 768px) {
    .tech2-figure1 {
        width: 100%;
        max-width: initial;
        margin: 2.5rem 0 0;
    }
}

.tech2-point {
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
}

@media screen and (width >= 768px) {
    .tech2-point {
        margin-bottom: 1.25rem;
    }
}

.tech2-point:nth-child(n + 3) {
    margin-top: 2.5rem;
}

@media screen and (width >= 768px) {
    .tech2-point:nth-child(n + 3) {
        margin-top: 4rem;
    }
}

.tech2-point > h3 {
    margin-left: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech2-point > h3 {
        margin-left: 1rem;
        font-size: 1.75rem;
        line-height: 150%;
    }
}

.tech2-img {
    position: relative;
    aspect-ratio: 375/168;
    margin: 1.75rem -1.25rem 0;
    overflow: hidden;
    background: url(/jp-ja/brand/tech-in-life/img/tech2-img1-sp.jpg) no-repeat center/cover;
}

@supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-img1-sp.webp)) {
    .tech2-img {
        background: url(/jp-ja/brand/tech-in-life/img/tech2-img1-sp.webp) no-repeat center/cover;
    }
}

@media screen and (width >= 768px) {
    .tech2-img {
        width: 155%;
        aspect-ratio: 1240/556;
        margin: 2.5rem -13.75rem 0;
        background: url(/jp-ja/brand/tech-in-life/img/tech2-img1.jpg) no-repeat center/cover;
    }

    @supports (background-image: url(/jp-ja/brand/tech-in-life/img/tech2-img1.webp)) {
        .tech2-img {
            background: url(/jp-ja/brand/tech-in-life/img/tech2-img1.webp) no-repeat center/cover;
        }
    }
}

.tech2-figure2 {
    width: calc(100% + 2.5rem);
    padding: 0.9375rem 1.0625rem 0.875rem;
    margin: 1.75rem -1.25rem 0;
    background-color: #f5f9fd;
}

@media screen and (width >= 768px) {
    .tech2-figure2 {
        width: 100%;
        padding: 2rem 2.25rem 2.125rem;
        margin: 2.5rem 0 0;
        background-color: #f5f9fd;
        border-radius: 1.25rem;
    }
}

.tech2-figure2-title {
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 160%;
    color: #0062c2;
    text-align: center;
    letter-spacing: 0.02em;
}

@media screen and (width >= 768px) {
    .tech2-figure2-title {
        font-size: 1.25rem;
    }
}

.tech2-figure2-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5625rem 2.6875rem;
    margin-top: 1.4375rem;
    padding: 0 2.8125rem;
}

@media screen and (width >= 768px) {
    .tech2-figure2-icons {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 0.875rem;
        margin-top: 1.5625rem;
        padding: 0;
    }
}

.tech2-figure2-icon {
    width: 100%;
}

.tech2-figure2-icon p {
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 0.625rem;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #0062c2;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .tech2-figure2-icon p {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
}

.tech2-figure3 {
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem 0;
}

@media screen and (width >= 768px) {
    .tech2-figure3 {
        width: 100%;
        max-width: initial;
        margin: 2.5rem 0 0;
    }
}

.tech2-figure4 {
    width: 111.94%;
    max-width: 100vw;
    margin: 1.75rem -1.25rem;
}

@media screen and (width >= 768px) {
    .tech2-figure4 {
        width: 100%;
        max-width: initial;
        margin: 2.5rem 0;
    }
}

.tech2-figure5 {
    margin: 1.75rem calc(50% - 50vw) 0;
    padding: 1.1875rem 0.625rem 1rem;
    width: calc(100% + 2.5rem);
    max-width: 100vw;
    background-color: #f5f9fd;
}

@media screen and (min-width: 768px) {
    .tech2-figure5 {
        margin: 2.5rem 0 0;
        padding: 2.5625rem 1.34375rem 2.0625rem;
        width: 100%;
        max-width: initial;
        border-radius: 1.25rem;
    }
}

.tech2-figure5 p {
    font-weight: 700;
    font-size: 3.2vw;
    line-height: 150%;
    color: #0062c2;
    text-align: center;
    margin-bottom: 0.625rem;
}

@media screen and (min-width: 768px) {
    .tech2-figure5 p {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }
}

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

.tech2-figure6 {
    margin: 1.75rem calc(50% - 50vw);
    padding: 1.875rem 1.5rem 1.5rem;
    width: calc(100% + 2.5rem);
    max-width: 100vw;
    background-color: #f5f9fd;
}

@media screen and (min-width: 768px) {
    .tech2-figure6 {
        margin: 2.5rem 0;
        padding: 2.5rem;
        width: 100%;
        max-width: initial;
        border-radius: 1.25rem;
    }
}

.tech2-figure6-title {
    font-weight: 700;
    font-size: 3.2vw;
    line-height: 150%;
    color: #0062c2;
    text-align: center;
    margin-bottom: 0.5rem;
}

@media screen and (min-width: 768px) {
    .tech2-figure6-title {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
}

.tech2-figure6-lead {
    font-weight: 400;
    font-size: 2.666666vw;
    line-height: 160%;
    letter-spacing: 0.02em;
    text-align: center;
    margin-bottom: 1.125rem;
}

@media screen and (min-width: 768px) {
    .tech2-figure6-lead {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
    }
}

.tech2-figure6 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.625rem;
}

@media screen and (min-width: 768px) {
    .tech2-figure6 img {
        border-radius: 1rem;
    }
}

.u-desktop {
    display: none;
}

@media screen and (width >= 768px) {
    .u-desktop {
        display: block;
    }
}

.u-desktop-flex {
    display: none;
}

@media screen and (width >= 768px) {
    .u-desktop-flex {
        display: flex;
    }
}

.u-desktop-ib {
    display: none;
}

@media screen and (min-width: 768px) {
    .u-desktop-ib {
        display: inline-block;
    }
}

@media screen and (width >= 768px) {
    .u-mobile {
        display: none;
    }
}