@charset "UTF-8";

#innovation.report .related-content {
    margin-top: 80px;
    margin-bottom: 20px;
    background: #f8f8f8;
    padding: 40px 0;
}

#innovation.report .related-content .inner {
    width: 1080px;
    max-width: 90%;
    margin: 0 auto;
}

#innovation.report .related-content .page-body h3 {
    text-align: center;
    font-size: 24px;
    margin: 0 0 40px;
}

#innovation.report .related-content .flxbox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

#innovation.report .related-content .engine-related-slide .slick-list {
    width: 100%;
}

#innovation.report .related-latest .link-item-ph {
    background: #fff;
    border: 1px solid #000;
    width: auto;
    flex: 0 0 32%;
    margin-bottom: 20px;
}

#innovation.report .related-content .link-item-ph a figure {
    margin: 0;
}

#innovation.report .related-content .link-item-ph a figure img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    width: 100%;
    height: 100%;
}

#innovation.report .related-content .link-item-ph .textarea {
    padding: 1em;
    text-align: left;
}

#innovation.report .related-content .link-item-ph .title {
    padding: 0;
    margin: 0;
    text-align: left;
}

#innovation.report .related-content .link-item-ph a,
#innovation.report .related-content .link-item-ph a:link,
#innovation.report .related-content .link-item-ph a:visited,
#innovation.report .related-content .link-item-ph a:hover,
#innovation.report .related-content .link-item-ph a:active,
#innovation.report .related-content .link-item-ph .title {
    text-decoration: none !important;
}

#innovation.report .engine-related-slide {
    margin-bottom: 20px;
}

#innovation.report .engine-related-slide .link-item-ph {
    margin: 0 10px !important;
    box-sizing: border-box;
}

#innovation.report .related-content .slick-slide {
    box-sizing: border-box;
}

#innovation.report .related-content .engine-related-slide .textarea {
    min-height: 5em;
}

#innovation.report .related-content .engine-related-slide img.prev-arrow {
    position: absolute;
    top: 43%;
    left: -30px;
    width: 30px;
    height: auto;
    margin: 0;
    cursor: pointer;
    z-index: 28;
}

#innovation.report .related-content .engine-related-slide img.next-arrow {
    position: absolute;
    top: 43%;
    right: -30px;
    width: 30px;
    height: auto;
    margin: 0;
    cursor: pointer;
    z-index: 28;
}

@media screen and (max-width: 768px) {
    #innovation.report .related-latest .link-item-ph {
        flex: 0 0 100%;
        margin-bottom: 0;
    }

    #innovation.report .related-latest {
        margin-bottom: 20px;
    }

    #innovation.report .related-content .link-item-ph.E a {
        display: flex;
        flex-flow: row;
        justify-content: center;
    }

    #innovation.report .related-content .link-item-ph.E a figure {
        flex: 0 0 40%;
    }

    #innovation.report .related-content .link-item-ph.E a .textarea {
        flex: 0 0 60%;
    }

    #innovation.report .related-content .link-item-ph.E a .textarea h4 {
        font-size: 14px;
    }

    #innovation.report .related-content .engine-related-slide img.prev-arrow {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 28;
    }

    #innovation.report .related-content .engine-related-slide img.next-arrow {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 28;
    }

    #innovation.report .engine-related-slide {
        padding: 0 30px;
    }
}

/* =========================================================
   Profiles（記事末の技術者プロフィール欄）
   Honda Design の Profiles を参考にした4カラムレイアウト
   ========================================================= */
#innovation.report .inn-content-area .page-body .profiles-area {
    margin: 80px 0 0;
}

#innovation.report .inn-content-area .page-body .profiles-area h3 {
    font-size: 20px;
    font-weight: 200;
    line-height: 1.6em;
    letter-spacing: 0.05em;
    margin: 0 0 40px;
}

#innovation.report .inn-content-area .page-body .profiles-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 40px;
}

/* 4人以上: 1人 1 カラムで 4 カラムに並べる */
#innovation.report .inn-content-area .page-body .profile-item {
    grid-column: span 1;
}

/* 4人未満（顔写真なし）: 4 カラムにせず左詰めで並べ、氏名・肩書きが折り返さないよう文字幅に合わせる */
#innovation.report .inn-content-area .page-body .profiles-list:not(.has-photo):not(:has(.profile-item:nth-child(4))) {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
}

#innovation.report .inn-content-area .page-body .profiles-list:not(.has-photo):not(:has(.profile-item:nth-child(4))) .profile-item {
    flex: 0 0 auto;
}

#innovation.report .inn-content-area .page-body .profile-item h4 {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0.05em;
    margin: 0 0 0.5em;
}

#innovation.report .inn-content-area .page-body .profile-item p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* 顔写真つき（.profiles-list.has-photo）: 1 人 1 カラムで 4 枚を横に並べる。写真は正方形 */
#innovation.report .inn-content-area .page-body .profiles-list.has-photo .profile-item {
    grid-column: span 1;
}

#innovation.report .inn-content-area .page-body .profiles-list.has-photo .profile-item figure {
    margin: 0 0 16px;
}

#innovation.report .inn-content-area .page-body .profiles-list.has-photo .profile-item img {
    display: block;
    width: 100%;
    height: auto;
}

#innovation.report .inn-content-area .page-body .profiles-list.has-photo .profile-item p {
    font-size: 14px;
}

@media screen and (max-width: 480px) {
    #innovation.report .inn-content-area .page-body .profiles-area {
        margin-top: 40px;
    }

    #innovation.report .inn-content-area .page-body .profiles-area h3 {
        margin-bottom: 20px;
    }

    #innovation.report .inn-content-area .page-body .profiles-list {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 12px;
        grid-row-gap: 32px;
    }
}

/* =========================================================
   コラム枠（青背景・線なし）
   例: <div class="blue-box"><h3>…</h3><p>…</p></div>
   ========================================================= */
#innovation.report .inn-content-area .blue-box {
    background: #E6EFFB;
    padding: 2em;
    margin: 2em 0;
}

#innovation.report .inn-content-area .page-body .blue-box h3 {
    margin: 0 0 16px;
}

#innovation.report .inn-content-area .page-body .blue-box p:last-child {
    margin: 0;
}

/* =========================================================
   関連コンテンツ：カルーセルなしで並べるとき、タイトルを小さめにして行数を抑える
   例: <div class="related-latest flxbox related-compact">…</div>
   ========================================================= */
#innovation.report .related-content .related-compact .link-item-ph .title {
    font-size: 14px;
    line-height: 1.6;
}

#innovation.report .related-content .related-compact .link-item-ph a:hover .title {
    color: #0058CC;
}

/* =========================================================
   関連コンテンツの外に置く外部・他セクションへのリンク（画像＋テキストの横並び）
   例: <div class="related-banner"><div class="related-banner-list">
         <a class="related-banner-item" href="…"><figure><img …></figure><p>…</p></a>
       </div></div>
   ========================================================= */
#innovation.report .related-banner {
    width: 1080px;
    max-width: 90%;
    margin: 60px auto 40px;
}

#innovation.report .related-banner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#innovation.report .related-banner-item {
    display: flex;
    align-items: center;
    flex: 0 0 calc(50% - 10px);
    box-sizing: border-box;
    border: 1px solid #222;
    background: #fff;
    color: #35363B;
    text-decoration: none;
}

#innovation.report .related-banner-item figure {
    flex: 0 0 36%;
    margin: 0;
}

#innovation.report .related-banner-item figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
}

#innovation.report .related-banner-item p {
    flex: 1;
    margin: 0;
    padding: 0.8em 1em;
    font-size: 14px;
    line-height: 1.6;
}

#innovation.report .related-banner-item[target="_blank"] p::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.4em;
    vertical-align: -2px;
    background: url(/jp/tech/assets/2025/img/icon-blank-blue.png) no-repeat center / contain;
}

#innovation.report .related-banner-item:hover p {
    color: #0058CC;
}

@media screen and (max-width: 768px) {
    #innovation.report .related-banner-item {
        flex: 0 0 100%;
    }
}