@charset "UTF-8";
/* =========================================================
   rakumo 紹介ページ（/service/rakumo/）専用スタイル
   - すべて .p-rakumo 系クラスに限定（他ページへ影響しない）
   - 色・フォント・角丸・余白は DEGINA の style.css の変数に合わせる
   - 2カラム（.layout-sidebar）・目次（.c-sidebar-nav）・見出し（.c-section-title）・
     ボタン（.c-btn）・注記（.c-note-list）は DEGINA 既存部品を利用
   - 対応環境ラベル（.p-rakumo-platform）の色のみ rakumo 側の色を使用
   ========================================================= */

/* ---------- ヒーロー（H1 のロゴ） ---------- */
.p-rakumo-hero__logo {
    display: block;
    width: auto;
    height: 4.7rem;
}

/* ---------- 紹介文 + スライダー ---------- */
.p-rakumo__intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6rem;
}

.p-rakumo__text {
    flex: 1 1 auto;
    max-width: 50rem;
}

.p-rakumo__text p + p {
    margin-top: 1.5em;
}

.p-rakumo__visual {
    display: flex;
    flex: 0 0 50rem;
    align-items: center;
    justify-content: center;
    aspect-ratio: 860 / 690;
    padding: 0 7rem;
    border-radius: var(--border-radius-default);
    background-color: var(--color-bg-secondary);
}

.p-rakumo-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 480 / 278;
}

.p-rakumo-slider__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.p-rakumo-slider__screen {
    position: absolute;
    left: 11.875%;
    top: 6.475%;
    width: 76.25%;
    height: 82.734%;
    overflow: hidden;
}

.p-rakumo-slider__screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.p-rakumo-slider__screen img.is-active {
    opacity: 1;
}

/* ---------- 製品カード ---------- */
.p-rakumo-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.p-rakumo-card {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    padding: 3.2rem 2.4rem 2.4rem;
    border-radius: var(--border-radius-default);
    background-color: var(--color-white);
    transition: box-shadow 0.4s ease;
}

@media (hover: hover) {
    .p-rakumo-card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
}

.p-rakumo-card__head {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.p-rakumo-card__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.p-rakumo-platform {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    border-radius: 3px;
    font-family: var(--font-en-secondary);
    font-size: 1.1rem;
    line-height: 1.4;
    color: #343a3d;
    white-space: nowrap;
}

/* rakumo 側のプラットフォーム色 */
.p-rakumo-platform--gws {
    background-color: #ffdf99;
}

.p-rakumo-platform--ms {
    background-color: #ccdcf2;
}

.p-rakumo-platform__icon {
    display: block;
    flex: none;
    width: 9px;
    height: 9px;
}

.p-rakumo-platform__icon--ms {
    position: relative;
}

.p-rakumo-platform__icon--ms img {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44.33%;
    height: 100%;
}

.p-rakumo-platform__icon--ms img:first-child {
    left: 0;
}

.p-rakumo-platform__icon--ms img:last-child {
    right: 0;
}

.p-rakumo-card__title {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.p-rakumo-card__icon {
    flex: none;
    width: 5.6rem;
    height: 5.6rem;
}

.p-rakumo-card__name {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.p-rakumo-card__cat {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--color-text-gray);
}

.p-rakumo-card__logo {
    width: 20.3rem;
    max-width: 100%;
    height: 1.8rem;
    object-fit: contain;
    object-position: left center;
}

.p-rakumo-card__desc {
    font-size: 1.4rem;
    line-height: 1.7;
}

.p-rakumo-card__img {
    align-self: center;
    width: 24.2rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 242 / 139;
}

.p-rakumo-card__btn {
    margin-top: auto;
}

.p-rakumo-card__btn a {
    padding: 1.4rem 2rem;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
    .p-rakumo-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .p-rakumo__intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 4rem;
    }

    .p-rakumo__text {
        max-width: none;
    }

    .p-rakumo__visual {
        flex: none;
        width: 100%;
        aspect-ratio: auto;
        padding: 8rem 4rem;
    }

    .p-rakumo-slider {
        max-width: 480px;
    }
}

@media (max-width: 768px) {
    .p-rakumo-hero__logo {
        height: 3.6rem;
    }

    .p-rakumo__visual {
        padding: 5rem 2.4rem;
    }

    .p-rakumo-cards {
        grid-template-columns: 1fr;
    }

    .p-rakumo-card__btn a {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p-rakumo-slider__screen img {
        transition: none;
    }
}