/* ------------------------------------------------
ARCHIVE: cases - 事例紹介 -
------------------------------------------------ */
/* KVのグラデーションをCSSで入れるかどうか検討（画像によって変えている。変動あるなら入れる？） */
.kv::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    background: linear-gradient(180deg, #20D0D8, #004B79);
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.4;
}

.post-type-archive-case .catch__title {
    padding-left: 0;
    --min-size: 22;
    --max-size: 32;
    margin-bottom: var(--clamp-size);
}

.post-type-archive-case .catch__copy {
    line-height: var(--lineHeight-150);
    font-size: var(--fontSize-xl);
}

.post-type-archive-case .catch__text {
    line-height: var(--lineHeight-150);
    max-width: 542px;
    flex: 1;
}

@media (width < 768px) {
    .post-type-archive-case .catch__text {
        max-width: 100%;
    }
}

.cases {
    position: relative;
    padding-top: var(--space-5xl);
}

.cases::after {
    content: "";
    display: block;
    background: url(../../img/page/case/bg_blur.png) no-repeat center/contain;
    position: absolute;
    top: -25%;
    left: -15%;
    --min-size: 300;
    --max-size: 600;
    width: var(--clamp-size);
    height: var(--clamp-size);
    z-index: -1;
}

.cases__inner {
    max-width: 1084px;
    margin-inline: auto;
}

.cases__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    --min-size: 8;
    --max-size: 10;
    gap: var(--clamp-size) clamp(10px, 4.2vw, 58px);
    justify-items: flex-start;
}

/* 事例 */
.cases__item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    --min-size: 16;
    --max-size: 45;
    margin-bottom: var(--space-3xl);
    padding-bottom: var(--space-sm);
    transition: all 0.2s ease-in-out;
    background-color: #F4F4F4;
    max-width: 323px;
}

/* hoverスタイル */
.cases__item:hover {
    /* ドロップシャドウ */
    box-shadow: 0 0 20px #E5F2F2;
    /* 背景色 */
    transition: all 0.2s ease-in-out;
}

.cases__item>a {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: inherit;
    /* 親のgapを継承 */
}

.cases__thumbnail {
    width: 100%;
    height: auto;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: bottom;
        aspect-ratio: 323 / 184;
    }
}

.cases__system,
.cases__name,
.cases__industry {
    margin: 0 var(--space-sm);
}

/* カテゴリ表示（タグアイコン）詳細ページ共通 */
.cases__system {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

.cases__system-tag {
    padding: 0.3em 0.3em 0.4em;
    background-color: var(--color-sky);
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-white);
    font-family: var(--fontWeight-bold);
    line-height: var(--lineHeight-1);
}


.cases__system-tag::before {
    content: "";
    display: block;
    background-image: url(../../img/page/case/icon_tag.svg);
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cases__name {
    font-size: var(--fontSize-lg);
    line-height: var(--lineHeight-150);
}

/* 線 */
.cases__industry::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #C9C9C9;
    margin-bottom: var(--space-xs);
}

.cases__industry {
    margin-bottom: var(--space-2xl);
}

@media (width < 768px) {
    .cases__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .cases__item {
        max-width: 100%;
    }
}

@media (width < 480px) {
    .cases__list {
        grid-template-columns: 1fr;
    }
}

/* ページネーション
-----------------------------------------*/
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    --min-size: 36;
    --max-size: 50;
    margin-top: var(--clamp-size);
}

.pagination__prev,
.pagination__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--gradient-reverse);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    position: relative;
}

.pagination__prev::after,
.pagination__next::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--color-white);
}

.pagination__prev::after {
    border-right: 1px solid var(--color-white);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.pagination__next::after {
    border-right: 1px solid var(--color-white);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* hoverスタイル -------- */
.pagination__prev:hover,
.pagination__next:hover {
    opacity: 0.8;
}

.pagination__num {
    font-size: var(--fontSize-md);
    font-weight: var(--fontWeight-bold);
}

/* prev,nextが表示されない時に中央配置を保つためスペーサー追加 -------- */

.pagination__prev--disabled,
.pagination__next--disabled {
    pointer-events: none;
    width: 50px;
}

/* ------------------------------------------------
SINGLE: case - 事例詳細 -
------------------------------------------------ */
.case {
    padding-bottom: 0;
}

.case__heading {
    --min-size: 28;
    --max-size: 40;
    font-size: var(--clamp-size);
    font-weight: var(--fontWeight-bold);
    margin-bottom: var(--space-xl);
}

.case .cases__system {
    padding: 0.3em 0.4em 0.2em;
}

.cases__system--case {
    --min-size: 22;
    --max-size: 32;
    margin: 0 0 var(--clamp-size);
}

.case__thumbnail {
    --min-size: 36;
    --max-size: 70;
    margin-bottom: var(--clamp-size);
    aspect-ratio: 960 / 488;
    width: 100%;
    height: auto;
}

.case__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

/* 比較 */
.comparison {
    display: flex;
    gap: var(--space-lg) var(--space-md);
    --min-size: 48;
    --max-size: 54;
    margin-bottom: var(--clamp-size);
}

.comparison__wrap {
    --min-size: 30;
    --max-size: 38;
    flex: 1;
    padding: var(--space-sm) var(--space-md) var(--clamp-size);
    background-color: #E7E7E7;
    box-shadow: 0 4px 4px rgba(57, 57, 57, 0.09);
}

.comparison__wrap--after {
    background-color: #E5FBFF;
}

.comparison__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.comparison__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    line-height: var(--lineHeight-150);
}

.comparison__item::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 0.4em solid transparent;
    border-bottom: 0.4em solid transparent;
    border-left: 0.5em solid currentColor;
    border-right: 0;
    margin-top: 0.4em;
    margin-left: 0.2em;
}


/* 矢印アイコン */
.comparison__arrow {
    --min-size: 32;
    --max-size: 54;
    width: var(--clamp-size);
    height: auto;
    aspect-ratio: 55/43;

    svg {
        width: 100%;
        height: 100%;
    }
}

.comparison__title {
    padding: 0.3em 0.5em;
    background-color: var(--color-white);
    font-size: var(--fontSize-lg);
    text-align: center;
    margin-bottom: var(--space-lg);
}

.comparison__title--after {
    color: var(--color-sky);
}

@media (width < 768px) {
    .comparison {
        flex-direction: column;
        align-items: center;
    }

    .comparison__arrow {
        rotate: 90deg;
    }
}

.system__title {
    padding: 0.5em var(--space-2xl);
    background-color: var(--color-sky);
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-bold);
    color: var(--color-white);
}

.system__list {
    border-right: 3px solid var(--color-sky);
    border-left: 3px solid var(--color-sky);
    border-bottom: 3px solid var(--color-sky);
    padding: var(--space-lg) var(--space-2xl) var(--space-2xl);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: var(--space-3xl);
}

.system__item {
    list-style-type: disc;
    margin-left: 1.3em;
}

.system__item::marker {
    color: var(--color-sky);
}

/* 3ドット */
.case__dot {
    text-align: center;
    --min-size: 38;
    --max-size: 52;
    margin-bottom: var(--clamp-size);
}

/* お客様の声 -------- */

.voice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(16px, 2.3vw, 32px);
    --min-size: 65;
    --max-size: 90;
    margin-bottom: var(--clamp-size);
    padding: var(--space-2xl) var(--space-lg) var(--space-lg);
    background-color: #F1FEFF;
    position: relative;
}

.voice__head {
    position: absolute;
    top: -1.8em;
    left: -1em;
    z-index: 1;
}

/* タイトルの吹き出し */
.voice__title {
    position: relative;
    display: inline-block;
    margin-bottom: 9px;
    padding: var(--space-xs) var(--space-xl);
    background-color: #3faecb;
    text-align: center;
    font-size: var(--fontSize-lg);
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

.voice__avatar {
    width: clamp(50px, 30%, 122px);
    height: auto;
    aspect-ratio: 1/1;

    svg {
        width: 100%;
        height: 100%;
    }
}

.voice__title::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    border-style: solid;
    border-width: 10px 0 0 9px;
    border-color: #3faecb transparent transparent;
    translate: calc(-50% + 0.4px) 100%;
}

.voice__text {
    flex: 1;
    max-width: 674px;
    line-height: var(--lineHeight-150);
    min-width: 250px;
}

@media (width < 768px) {
    .voice__head {
        left: -0.5em;
    }
}

/* その他の事例
-----------------------------------------*/
.other {
    padding: 0 max(6.5vw, 35px) var(--space-4xl);
}

.other__inner {
    max-width: 1045px;
    margin-inline: auto;
}

/* タイトル */
.other__heading {
    --min-size: 26;
    --max-size: 36;
    font-size: var(--clamp-size);
    margin-bottom: var(--space-2xl);
}

.other__slider {
    --min-size: 54;
    --max-size: 72;
    margin-bottom: var(--clamp-size);
}


/* その他の事例スライダー */
.other__item {
    transition: transform 0.3s ease;
}

.other__item {
    display: block;
    margin-bottom: 0;
    height: 100%;
    background-color: #F4F4F4;
    transition: all 0.2s ease-in-out;
    max-width: none;
    padding-bottom: var(--space-2xl);
}

.other__item:hover {
    box-shadow: 0 0 20px #E5F2F2;
    transition: all 0.2s ease-in-out;
}

.other__item>a {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

.other__thumbnail {
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

.other__thumbnail {
    aspect-ratio: 323 / 184;
    height: auto;
    margin-bottom: var(--space-md);
}

.other__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
    aspect-ratio: 323 / 184;
}

.other__system,
.other__content {
    margin: 0 var(--space-sm);
}

.other__system {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
}

/* タクソノミー（システム） */
.other__system-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--color-white);
    font-family: var(--fontWeight-bold);
    line-height: var(--lineHeight-1);
    padding: 0.3em 0.3em 0.4em;
    background-color: var(--color-sky);
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-white);
    font-family: var(--fontWeight-bold);
    line-height: var(--lineHeight-1);
}

.other__system-tag::before {
    content: "";
    display: block;
    background-image: url(../../img/page/case/icon_tag.svg);
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.other__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    margin: 0 var(--space-sm);
}

.other__title {
    font-size: var(--fontSize-lg);
    font-weight: var(--fontWeight-medium);
    line-height: var(--lineHeight-150);
    flex-shrink: 0;
    margin-top: var(--space-sm);
}

/* タクソノミー（業種） */
.other__industry {
    margin-top: auto;
    margin-bottom: var(--space-md);
}

.other__industry::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #C9C9C9;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.other__btn {
    position: relative;
    display: block;
    width: clamp(200px, 70vw, 287px);
    color: var(--color-white);
    font-weight: var(--fontWeight-bold);
    text-align: center;
    padding: 1em 2em;
    margin-inline: auto;
    overflow: hidden;
    z-index: 0;
    /* コンテンツより背面に */
    background: linear-gradient(135deg, #2573A4, #2DABB1);
    /* ホバー後の背景 */
}

.other__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-reverse);
    /* 通常時の背景 */
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {

    .other__btn:hover::before,
    .other__btn:focus::before {
        opacity: 0;
    }
}



/* スライダードロップシャドウが隠れるので余白を追加 */
.splide__track {
    padding-bottom: 1em;
}

/* スライダーの矢印 */
.splide__arrow {
    background: var(--color-white);
}

.splide__arrow {
    background: var(--color-white);
    width: clamp(17.7px, 3.5vw, 40px);
    height: clamp(35px, 6vw, 80px);
}

.splide__arrow svg {
    fill: var(--color-sky);
    width: 100%;
    height: 100%;
}

.splide__arrow svg {
    fill: var(--color-sky);
}

.splide__arrow--next {

    right: calc(-1 * clamp(8px, 4.3vw, 60px));
}

.splide__arrow--prev {

    left: calc(-1 * clamp(8px, 4.3vw, 60px));
}

@media (width < 768px) {
    .splide__arrow--next {

        right: 0;
        translate: 150%;
    }

    .splide__arrow--prev {

        left: 0;
        translate: -150%;

    }
}