.support-multichannel {
    width: 100%;
    background: var(--color-bg-gray);
    padding-block: var(--space-10xl);
}

.support-multichannel__inner {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-inner-padding-inline);
}

.support-multichannel__heading {
    font-size: var(--fs-section-heading);
    font-weight: 900;
    line-height: var(--lh-normal);
    letter-spacing: 0.03em;
    color: var(--color-text);
    margin: 0 0 var(--space-lg);
}

.support-multichannel__heading::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background: var(--color-corporate);
    margin-top: var(--space-xs);
}

.support-multichannel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.support-multichannel__item {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--space-lg);
}

.support-multichannel__item-title {
    font-size: var(--fs-xl);
    font-weight: bold;
    color: var(--color-text);
    margin: 0 0 var(--space-xs);
}

.support-multichannel__item-text {
    font-size: var(--fs-md);
    letter-spacing: 0.05em;
    line-height: var(--lh-normal);
    color: var(--color-text);
    margin: 0;
}

.support-multichannel__item-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm); 
    height: 100%;
}

/* 1項目目：リンクボタン側で高さを定義（以前のmin-height相当） */
.support-multichannel__item--stores .support-multichannel__item-links {
    min-height: 250px;
}

/* 1項目目：お知らせ／店舗案内（横並び 4:6） */
.support-multichannel__item-links--split-horizontal {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: var(--space-sm);
}

.support-multichannel__link-card {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow: hidden;
    color: var(--color-text-white);
}

.support-multichannel__link-card-inner {
    position: absolute;
    right: var(--space-md);
    bottom: var(--space-md);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.support-multichannel__link-card-label {
    font-size: var(--fs-md);
    font-weight: 600;
}

.support-multichannel__link-card-icon img {
    display: block;
}

.support-multichannel__link-card--news {
    background: linear-gradient(135deg, #cdefff, #5db8ff);
}

.support-multichannel__link-card--stores {
    background-image:
        linear-gradient(180deg, rgba(0, 52, 154, 0) 0%, rgba(0, 52, 154, 0.85) 100%),
        linear-gradient(135deg, #d5d5d5, #b5b5b5);
    background-size: cover;
    background-position: center;
}

/* 2項目目：オンラインショップ */
.support-multichannel__item-links--shop {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    height: 100%;
    min-height: 250px;
}

.support-multichannel__link-main-shop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 6;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-corporate);
    color: var(--color-text-white);
}

.support-multichannel__link-main-shop-label {
    font-size: var(--fs-md);
    font-weight: bold;
    letter-spacing: 0.05em;
}

.support-multichannel__item-links-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    flex: 4;
}

.support-multichannel__link-outline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid currentColor;
    background: transparent;
    font-size: var(--fs-md);
    font-weight: 600;
}

.support-multichannel__link-outline--rakuten {
    color: var(--color-rakuten);
}

.support-multichannel__link-outline--yahoo {
    color: var(--color-yahoo);
}

.support-multichannel__link-outline-icon img {
    display: block;
}

/* 楽天・Yahoo・お問い合わせ：ホバー時にアイコンを白く（塗りと同化しないよう） */
.support-multichannel__link-outline--rakuten .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--yahoo .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--accent2 .support-multichannel__link-outline-icon img {
    transition: filter 0.18s ease-out;
}
.support-multichannel__link-outline--rakuten:hover .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--rakuten:focus-visible .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--yahoo:hover .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--yahoo:focus-visible .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--accent2:hover .support-multichannel__link-outline-icon img,
.support-multichannel__link-outline--accent2:focus-visible .support-multichannel__link-outline-icon img {
    filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
    .support-multichannel__link-outline--rakuten .support-multichannel__link-outline-icon img,
    .support-multichannel__link-outline--yahoo .support-multichannel__link-outline-icon img,
    .support-multichannel__link-outline--accent2 .support-multichannel__link-outline-icon img {
        transition-duration: 0.01ms;
    }
}

/* 3項目目：法人向けお問い合わせ */
.support-multichannel__item-links--corporate {
    align-items: stretch;
    min-height: 125px;
}

.support-multichannel__link-outline--accent2 {
    color: var(--color-accent2);
    border-color: var(--color-accent2);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.support-multichannel__link-outline-arrow {
    margin-left: var(--space-xs);
}

.support-multichannel__link-outline--accent2 .support-multichannel__link-outline-icon {
    margin-left: var(--space-xs);
}

/* Hover */
.support-multichannel a:hover,
.support-multichannel a:focus-visible {
    text-decoration: none;
}

.support-multichannel__link-card--news:hover,
.support-multichannel__link-card--news:focus-visible {
    filter: brightness(1.05);
}

.support-multichannel__link-card--stores:hover,
.support-multichannel__link-card--stores:focus-visible {
    filter: brightness(1.08);
}

.support-multichannel__link-main-shop:hover,
.support-multichannel__link-main-shop:focus-visible {
    filter: brightness(1.08);
}

/* アウトラインボタンのホバー（文字色白・フィル色）は .btn--outline-* で components.css に定義 */

/* SP: 767px以下 */
@media (max-width: 767px) {
    .support-multichannel {
        padding-block: var(--space-8xl);
    }

    .support-multichannel__item {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* 1. お知らせ／店舗案内：高さにゆとり＋店舗案内を主役に（行の高さ比 1 : 1.5） */
    .support-multichannel__item-links--split-horizontal {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.5fr;
        min-height: 280px;
    }

    .support-multichannel__item--stores .support-multichannel__item-links {
        min-height: 0;
    }

    .support-multichannel__link-card--news {
        min-height: 100px;
    }

    .support-multichannel__link-card--stores {
        min-height: 140px;
    }

    .support-multichannel__item-links-row {
        grid-template-columns: 1fr;
    }

    /* 3. オンラインショップ：WEB SHOP を主役に＋高さにゆとり */
    .support-multichannel__link-main-shop {
        min-height: 56px;
        padding-inline: var(--content-inner-padding-inline);
    }

    .support-multichannel__item-links--shop {
        min-height: 200px;
    }

    /* ボタン内左右paddingを縮小（オンラインショップ・問い合わせ） */
    .support-multichannel__link-outline {
        padding-inline: var(--content-inner-padding-inline);
    }

    /* 4. 法人ブロック */
    .support-multichannel__item-links--corporate {
        min-height: 100px;
    }
}