<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CTA Layout Example</title>
    <style>
        /* CSS全体 */
        .m-kv2025 {
            color: #222;
            font-family: sans-serif; /* 見やすいようにフォントを追加 */
        }
        .m-kv2025 picture,
        .m-kv2025 source {
            display: block;
        }
        .m-kv2025-sp {
            display: none;
        }
        .m-kv2025-slide {
            background-position: 50% 50%;
            background-repeat: no-repeat;
            background-size: cover;
            /* SP表示のレイアウトをPCにも適用するために追加 */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .m-kv2025-slide__inner {
            position: relative;
            max-width: 1200px;
            height: auto; /* SPと同じくautoに変更 */
            margin: 0 auto;
            padding: 6vw 5vw; /* SPと同じパディングを適用 */
        }
        .m-kv2025-slide__cont {
            position: relative;
            z-index: 2;
        }
        .m-kv2025-slide__cta {
            width: 100%;
        }
        .m-kv2025-slide__image {
            position: relative; /* SPと同じくrelativeに変更 */
            bottom: 0;
            right: 0;
            z-index: 1;
            margin: 0 auto; /* 中央寄せ */
            max-width: 40vw; /* SPと同じ幅を適用 */
        }
        .m-kv2025-slide__cta {
            margin-top: 30px;
            display: flex; /* CTAを中央寄せするためにFlexboxを適用 */
            justify-content: center;
        }
        .m-kv2025-slide__cta .cta2025-home {
            margin-top: 0;
        }
        @media screen and (max-width: 768px) {
            br.m-kv2025-sp {
                display: inline;
            }
            .m-kv2025-slide__inner {
                height: auto;
                padding: 6vw 5vw;
            }
            .m-kv2025-slide {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .m-kv2025-slide__cta {
                display: flex;
                justify-content: center;
                margin: 6vw auto 0;
                font-size: .85em;
            }
            .m-kv2025-slide__cta .cta2025-home {
                max-width: 320px;
                margin-right: auto;
                margin-left: auto;
            }
        }
        @media screen and (min-width: 769px) {
            .m-kv2025-slide__cta .cta2025-home {
                transition: .3s;
            }
            .m-kv2025-slide__cta .cta2025-home:hover {
                opacity: .8;
            }
        }

        /* 01 */
        .m-kv2025-slide--01 {
            background-image: url("https://copyki-pr.com/hubfs/copyki-pr2024/image/back/copy_pc_bg03.png");
            background-color: #f0f0f0; /* 背景がなくても見えるように色を追加 */
        }
        .m-kv2025-slide-01__catch {
            font-size: 56px;
            font-weight: 700;
            line-height: 1.5;
        }
        .m-kv2025-slide-01__catch span {
            display: inline-block;
            font-size: .875em;
            transform: skewX(-7deg);
        }
        .m-kv2025-slide-01__catch strong {
            display: inline-block;
            margin: 0 .1em;
            padding: .15em .15em .05em;
            background: linear-gradient(to right,#ef3291, #f63135);
            color: #fff;
            font-size: 1.38em;
            line-height: 1.1;
        }
        .m-kv2025-slide-01-cont {
            display: flex;
            margin-bottom: 10px;
        }
        .m-kv2025-slide-01-cont__price {
            display: flex;
            gap: 10px;
        }
        .m-kv2025-slide-01-cont__price dl {
            width: 297px;
        }
        .m-kv2025-slide-01-cont__price dt {
            margin-bottom: 10px;
            padding: .2em;
            background: linear-gradient(to right,#ef3291, #f63135);
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            transform: skewX(-7deg);
        }
        .m-kv2025-slide-01-cont__price dd {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 20px;
        }
        .m-kv2025-slide-01-cont__price li {
            font-weight: 700;
        }
        .m-kv2025-slide-01-cont__price li::before {
            display: inline-block;
            width: .9em;
            height: .85em;
            margin-right: .3em;
            background-image: url('data:image/svg+xml, <svg id="b" data-name="レイヤー_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18.69 16.634"><defs><linearGradient id="d" data-name="名称未設定グラデーション 12" x1="0" y1="8.317" x2="18.69" y2="8.317" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="rgb(246,49,53)"/><stop offset="1" stop-color="rgb(239,50,145)"/></linearGradient></defs><g id="c" data-name="レイヤー_3"><polygon points="6.176 16.634 0 10.289 1.745 8.529 5.904 11.588 16.585 0 18.69 1.439 6.176 16.634" fill="url(%23d)"/></g></svg>');
            background-repeat: no-repeat;
            background-size: 100% auto;
            content: "";
        }
        .m-kv2025-slide-01-cont__price li span {
            background: linear-gradient(transparent 60%, #ffc69f 60%, #ffc69f 80%, transparent 80%);
        }
        .m-kv2025-slide-01-cont__image {
            /* SP表示のレイアウトをPCにも適用するために修正 */
            position: relative;
            bottom: 0;
            right: 0;
            max-width: 40vw; /* SPと同じ幅を適用 */
            margin: 0 auto; /* 中央寄せ */
        }
        @media screen and (max-width: 1080px) {
            .m-kv2025-slide-01__catch {
                font-size: 5vw;
            }
            .m-kv2025-slide-01-cont__price dl {
                width: auto;
            }
            .m-kv2025-slide-01-cont__price dt {
                font-size: 2.5vw;
            }
            .m-kv2025-slide-01-cont__price dd {
                font-size: 1.8vw;
            }
            .m-kv2025-slide-01-cont__image {
                max-width: 37%;
            }
        }
        @media screen and (max-width: 768px) {
            .m-kv2025-slide--01 {
                background-image: url("https://copyki-pr.com/hubfs/copyki-pr2024/image/back/copy_sp_mvback01.png");
            }
            .m-kv2025-slide-01__catch {
                font-size: 8.2vw;
                line-height: 1.4;
            }
            .m-kv2025-slide-01-cont {
                flex-direction: column;
                gap: 0;
                margin-bottom: 0;
            }
            .m-kv2025-slide-01-cont__price {
                gap: 6px;
            }
            .m-kv2025-slide-01-cont__price dl {
                width: calc(100% / 2 - 6px);
            }
            .m-kv2025-slide-01-cont__price dt {
                font-size: 4vw;
            }
            .m-kv2025-slide-01-cont__price dd {
                font-size: 2.66vw;
            }
            .m-kv2025-slide-01-cont__image {
                position: relative;
                max-width: 400px;
                margin: 0 auto;
            }
            .m-kv2025-slide--01 .m-kv2025-slide__cta {
                margin-top: 0;
            }
            .m-kv2025-slide--01 .m-kv2025-slide__cta .cta2025-home {
                margin-top: 0;
            }
        }           
    </style>
</head>
          