@charset "utf-8";

:root {
    --se-article-black: #000;
    --se-article-white: #fff;
}

.se-article {
    overflow: hidden;
}

/* PCではヘッダーを透過してヒーローに重ねる */
@media (min-width: 769px) {
    .main {
        padding-top: 0;
    }
}

/* hero */
.se-article-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 830rem;
}
.se-article-hero-body {
    background: var(--se-article-black);
    color: var(--se-article-white);
    display: flex;
    flex-direction: column;
    padding: 120rem 40rem 94rem 80rem;
}
.se-article-category {
    font-family: "Inter", sans-serif;
}
.se-article-category-en {
    font-size: 26rem;
    font-weight: 500;
    line-height: 1;
    margin: 0;
}
.se-article-category-ja {
    font-feature-settings: "palt" 1;
    font-size: 14rem;
    line-height: 1.4;
    margin: 12rem 0 0;
    padding-top: 10rem;
    position: relative;
    width: max-content;
}
/* 罫線はテキスト幅ではなくFigmaと同じ15pxで引く */
.se-article-category-ja::before {
    background: currentColor;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 0;
    width: 15rem;
}
.se-article-title {
    font-feature-settings: "palt" 1;
    font-size: 44rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 40rem 0 0;
}
.se-article-hero-person {
    margin-top: auto;
    padding-top: 60rem;
}
.se-article-hero-persons {
    align-items: flex-start;
    display: flex;
    gap: 60rem;
    margin-top: auto;
    padding-top: 60rem;
    position: relative;
}
/* 肩書2行の中西様と1行の青田様で、肩書の上端と名前の高さを揃える */
.se-article-hero-persons .se-article-hero-position {
    min-height: 2.8em;
}
.se-article-hero-persons .se-article-hero-person {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
}
.se-article-hero-persons .se-article-hero-person:first-child {
    width: 303rem;
}
.se-article-hero-persons .se-article-hero-person:last-child {
    width: 179rem;
}
/* ✕はフローに入れると両者の幅を圧迫して肩書が折り返すため、Figmaと同じく絶対配置にする */
/* 中西様の肩書2行目が303remいっぱいまで伸びるため、✕は60remの間隔の中央（左右11remずつ空ける）に置く */
.se-article-hero-mark {
    bottom: 0;
    display: block;
    height: 38rem;
    left: 314rem;
    margin-block: auto;
    position: absolute;
    top: 60rem;
    width: 38rem;
}
.se-article-hero-mark img {
    display: block;
    height: auto;
    width: 100%;
}
.se-article-hero-position {
    font-feature-settings: "palt" 1;
    font-size: 12rem;
    line-height: 1.4;
    margin: 0;
}
.se-article-hero-name {
    font-feature-settings: "palt" 1;
    font-size: 28rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 6rem 0 0;
}
.se-article-hero-name-en {
    font-family: "Inter", sans-serif;
    font-size: 12rem;
    line-height: 1;
    margin: 8rem 0 0;
}
/* pictureはinline要素のままだとimgのheight:100%が効かないためblock化する */
.se-article-hero-image picture {
    display: block;
    height: 100%;
}
.se-article-hero-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.se-article-breadcrumb {
    display: flex;
    justify-content: flex-end;
    padding: 24rem 40rem;
}
.se-article-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.se-article-breadcrumb-list li {
    color: #74776b;
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 12rem;
    letter-spacing: 1.2rem;
    line-height: 1;
}
.se-article-breadcrumb-list li:last-child {
    color: var(--se-article-black);
}
.se-article-breadcrumb-list li + li::before {
    content: "＞";
    padding-right: 6rem;
}
.se-article-breadcrumb-list a {
    color: inherit;
    text-decoration: none;
}

/* inner */
.se-article-inner {
    margin-inline: auto;
    max-width: 1440rem;
    padding-inline: 40rem;
}

/* profile & lead */
/* リード文の下の罫線はテキスト幅ではなくコンテンツ幅いっぱいに引く */
.se-article-profile-block {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-top: 56rem;
}
.se-article-profile {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 40rem;
}
.se-article-profile-label {
    font-family: "Inter", sans-serif;
    font-size: 12rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
}
.se-article-profile-body {
    display: flex;
    gap: 20rem;
    margin-top: 20rem;
    max-width: 440rem;
}
.se-article-profile-image {
    flex-shrink: 0;
    height: 100rem;
    overflow: hidden;
    width: 100rem;
}
.se-article-profile-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.se-article-profile-name {
    font-feature-settings: "palt" 1;
    font-size: 12rem;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}
.se-article-profile-text {
    font-feature-settings: "palt" 1;
    font-size: 12rem;
    line-height: 1.6;
    margin: 0;
}
.se-article-lead {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 16rem;
    letter-spacing: 0.48rem;
    line-height: 1.7;
    margin: 0;
    max-width: 636rem;
    padding: 40rem 0;
    text-align: justify;
}

/* body */
.se-article-section {
    display: grid;
    grid-template-columns: 640rem 1fr;
    padding-top: 80rem;
}
.se-article-section[data-section="first"] {
    padding-top: 180rem;
}
.se-article-heading {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 28rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    padding-right: 40rem;
}
/* 罫線をse-article-bodyの左端（写真と同じライン）に置き、質問・回答をその分インデントする */
.se-article-qa {
    padding-left: 40rem;
}
.se-article-qa + .se-article-qa {
    margin-top: 40rem;
}
.se-article-question {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.9;
    margin: 0;
    position: relative;
}
.se-article-question::before {
    background: currentColor;
    content: "";
    height: 3rem;
    left: -40rem;
    position: absolute;
    top: 0.95em;
    transform: translateY(-50%);
    width: 23rem;
}
.se-article-answer {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 16rem;
    line-height: 1.9;
    margin: 30rem 0 0;
}
.se-article-note {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 14rem;
    line-height: 1.9;
    margin: 40rem 0 0;
}
.se-article-note[data-text="right"] {
    text-align: right;
}

.se-article-note a {
    color: inherit;
    text-decoration: underline;
    word-break: break-all;
}
.se-article-speech {
    display: grid;
    grid-template-columns: 80rem 1fr;
}
.se-article-speech + .se-article-speech {
    margin-top: 20rem;
}
.se-article-speaker {
    font-feature-settings: "palt" 1, "pwid" 1;
    font-size: 16rem;
    font-weight: 400;
    line-height: 1.9;
    margin: 0;
}
.se-article-speech .se-article-answer {
    margin: 0;
    min-width: 0;
}
.se-article-profiles {
    display: flex;
    flex-wrap: wrap;
    gap: 80rem;
}
.se-article-photo-tall {
    aspect-ratio: 360 / 427.5;
}
.se-article-photos {
    margin-top: 40rem;
}
.se-article-photo-main {
    aspect-ratio: 720 / 405;
    overflow: hidden;
}
.se-article-photo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.se-article-photo {
    aspect-ratio: 360 / 405;
    overflow: hidden;
}
.se-article-photo-main img,
.se-article-photo img,
.se-article-full-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.se-article-full-image {
    aspect-ratio: 1440 / 560;
    margin: 80rem -40rem 0;
    overflow: hidden;
}

/* links */
.se-article-links {
    margin-inline: auto;
    max-width: 1200rem;
    padding: 180rem 0 70rem;
}
.se-article-links-inner {
    border-block: 1px solid rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    padding-block: 40rem;
}
.se-article-links-title {
    font-family: "Inter", sans-serif;
    font-size: 50rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}
/* 既存のOtherコンポーネントと同じSwiper。PCは3枚が収まるためコントロールはlockされる */
/* Swiper側のmargin-inline:autoでflexのstretchが効かなくなるため幅を明示する */
.se-article-links-list {
    width: 100%;
}
.se-article-links-list .swiper-slide {
    width: 240rem;
}
.se-article-link-card {
    color: inherit;
    display: block;
    position: relative;
    text-decoration: none;
    width: 100%;
}
/* 現在表示中のページはaにせず淡色で見せる（既存のOtherコンポーネントと同じ挙動） */
.se-article-link-card:not(a) {
    opacity: 0.5;
}
.se-article-link-image {
    aspect-ratio: 1;
    overflow: hidden;
    position: relative;
}
.se-article-link-image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.se-article-link-image-overlay::after {
    background: rgba(0, 0, 0, 0.35);
    content: "";
    inset: 0;
    position: absolute;
}
.se-article-link-image-text {
    color: var(--se-article-white);
    font-family: "Avenir Next", "Inter", sans-serif;
    font-size: 40.459rem;
    left: 17rem;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.se-article-link-label {
    align-items: center;
    background: var(--se-article-white);
    bottom: 0;
    display: flex;
    left: 0;
    position: absolute;
    width: 170rem;
}
.se-article-link-name {
    align-items: center;
    display: flex;
    font-feature-settings: "palt" 1;
    font-size: 12rem;
    height: 50rem;
    justify-content: center;
    line-height: 1.1;
    margin: 0;
    padding-inline: 10rem;
    text-align: center;
    width: 120rem;
}
/* SOLUTION ENGINEER TOPのみFigmaでは左揃え */
.se-article-link-name[data-align="left"] {
    text-align: left;
}
.se-article-link-arrow {
    flex-shrink: 0;
    height: 50rem;
    position: relative;
    width: 50rem;
}
.se-article-link-arrow::before {
    background: url(../../images/common/arrow_black.svg) no-repeat 50% 50% / contain;
    content: "";
    display: block;
    height: 15rem;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 15rem;
}
/* 矢印は共通パーツと同じ挙動（右へ流れて消え、左から次の矢印が入る） */
@media (min-width: 769px) {
    @media (hover: hover) {
        .se-article-link-arrow {
            clip-path: polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%);
            overflow: hidden;
        }
        .se-article-link-arrow::after {
            background: url(../../images/common/arrow_black.svg) no-repeat 50% 50% / contain;
            content: "";
            display: block;
            height: 15rem;
            inset: 0;
            margin: auto;
            position: absolute;
            transform: translateX(-220%);
            width: 15rem;
        }
        a.se-article-link-card:hover .se-article-link-arrow::before {
            animation: arrow_move_before 1s forwards;
        }
        a.se-article-link-card:hover .se-article-link-arrow::after {
            animation: arrow_move_after 1s forwards;
        }
        a.se-article-link-card:hover .se-article-link-image img {
            scale: 1.5;
        }
    }
}

/* PCでは本文系を既存インタビュー記事と同じくpx固定にする（vw基準のremで縮小するのを防ぐ） */
@media (min-width: 769px) {
    /* PROFILE欄も769px以上は12px固定にする */
    .se-article-profile-label {
        font-size: 12px;
    }
    .se-article-profile-name {
        font-size: 12px;
    }
    .se-article-profile-text {
        font-size: 12px;
    }
    .se-article-lead {
        font-size: 16px;
        letter-spacing: 0.48px;
    }
    .se-article-heading {
        font-size: 28px;
    }
    .se-article-question {
        font-size: 18px;
    }
    .se-article-answer {
        font-size: 16px;
    }
    .se-article-speaker {
        font-size: 16px;
    }
    .se-article-note {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .se-article-hero {
        background: var(--se-article-black);
        color: var(--se-article-white);
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .se-article-hero-body {
        display: contents;
    }
    .se-article-category {
        order: 1;
        padding: 20rem 20rem 0;
    }
    .se-article-category-en {
        font-size: 15rem;
    }
    .se-article-category-ja {
        font-size: 12rem;
        line-height: 1.4;
        margin-top: 8rem;
        padding-top: 7rem;
    }
    .se-article-title {
        font-size: 21rem;
        line-height: 1.4;
        margin-top: 20rem;
        order: 2;
        padding: 0 20rem 15rem;
    }
    .se-article-hero-image {
        aspect-ratio: 375 / 345;
        order: 3;
        overflow: hidden;
    }
    /* 単体で置くinterview1は自身に余白を持つ（対談はse-article-hero-persons側が持つ） */
    .se-article-hero-person {
        margin-top: 0;
        order: 4;
        padding: 40rem 20rem;
    }
    .se-article-hero-persons {
        display: block;
        margin-top: 0;
        order: 4;
        padding: 40rem 20rem;
        position: static;
    }
    .se-article-hero-persons .se-article-hero-person,
    .se-article-hero-persons .se-article-hero-person:first-child,
    .se-article-hero-persons .se-article-hero-person:last-child {
        padding: 0;
        width: auto;
    }
    .se-article-hero-persons .se-article-hero-position {
        min-height: 0;
    }
    .se-article-hero-mark {
        height: 38rem;
        margin: 11rem 0;
        position: static;
        width: 38rem;
    }
    .se-article-hero-position {
        font-size: 12rem;
    }
    .se-article-hero-name {
        font-size: 26rem;
    }
    .se-article-hero-name-en {
        font-size: 10rem;
        margin-top: 5rem;
    }
    .se-article-breadcrumb {
        justify-content: flex-start;
        padding: 14rem 20rem;
    }
    .se-article-breadcrumb-list li {
        font-size: 10rem;
        letter-spacing: 1rem;
    }
    .se-article-inner {
        padding-inline: 20rem;
    }
    .se-article-profile-block {
        padding-top: 40rem;
    }
    .se-article-profile-body {
        gap: 16rem;
        max-width: none;
    }
    .se-article-profile-image {
        height: 90rem;
        width: 90rem;
    }
    .se-article-lead {
        max-width: none;
        padding: 40rem 0;
    }
    .se-article-section {
        display: block;
        padding-top: 100rem;
    }
    .se-article-section[data-section="first"] {
        padding-top: 100rem;
    }
    .se-article-heading {
        font-size: 28rem;
        line-height: 1.6;
        padding-right: 0;
    }
    .se-article-body {
        padding-top: 40rem;
    }
    /* SPは罫線の装飾を出さないため、インデントは持たせない */
    .se-article-qa {
        padding-left: 0;
    }
    .se-article-question {
        font-size: 20rem;
        font-weight: 400;
        line-height: 1.6;
        padding-left: 0;
    }
    /* Figmaのデザインどおり、SPでは質問の罫線装飾を表示しない */
    .se-article-question::before {
        content: none;
    }
    .se-article-answer {
        font-size: 16rem;
        line-height: 1.9;
        margin-top: 18rem;
    }
    /* SPは発言者名を本文の上に置いた縦並び（Figma・既存インタビューページと同じ） */
    .se-article-speech {
        display: block;
    }
    .se-article-speech + .se-article-speech {
        margin-top: 30rem;
    }
    .se-article-speaker {
        font-size: 16rem;
    }
    .se-article-profiles {
        display: block;
    }
    .se-article-profiles .se-article-profile-body + .se-article-profile-body {
        margin-top: 20rem;
    }
    .se-article-photo-tall {
        aspect-ratio: 167 / 198;
    }
    .se-article-note {
        font-size: 12rem;
        margin-top: 40rem;
    }
    .se-article-photo-main {
        aspect-ratio: 335 / 188;
    }
    .se-article-photo {
        aspect-ratio: 167 / 188;
    }
    .se-article-full-image {
        aspect-ratio: 375 / 146;
        margin: 100rem -20rem 0;
    }
    .se-article-links {
        padding: 180rem 0 0;
    }
    .se-article-links-list {
        margin-top: 20rem;
    }
    .se-article-links-list .swiper-slide {
        width: 300rem;
    }
    .se-article-link-label {
        width: 212rem;
    }
    .se-article-link-name {
        font-size: 14rem;
        height: 62rem;
        width: 162rem;
    }
    .se-article-link-arrow {
        height: 62rem;
    }
    .se-article-link-image-text {
        font-size: 35rem;
        left: 20rem;
    }
}