body {
    padding: 0px;
    margin: 0px;
    background-color: silver;
}

#MainWrap {
    max-width: 562.5px;
    margin: 0 auto;
    padding: 0px;

}

.wrapMain {
    max-width: 562.5px;
    margin: 0 auto;
    background-color: white;
    padding: 0px;
}

.box {
    /*            border: 1px solid black;
*/
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    height: 300px;
}

.example {
    display: block;
    width: 100px;
    background: #FFF;
}

.editBtn1 a {
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* 隙間調整 */
p {
    margin-block-start: 0;
    margin-block-end: 0;
}

:root {
    --color1: #ffe047;
    --color2: #ffffff;
    --color3: #c1f738;
    --color4: #f4f3e6;
    --black: #616161;

    --spacing: 0.05em;
}

.bwrap {
    font-family: "M PLUS 1", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.font_jost {
    font-family: "Jost", "Yu Gothic Medium", "游ゴシック Medium", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/* color */
.txt_color_nomal,
.hvr_txt_color_nomal:hover {
    color: var(--black);
}

.txt_white,
.hvr_txt_white:hover {
    color: white;
}

.txt_black40 {
    color: color-mix(in srgb, var(--black) 40%, transparent)
}

.txt_white40 {
    color: rgb(255 255 255 / 0.4);
}

.txt_red,
.hvr_txt_red:hover {
    color: #C12326;
}

.txt_gray,
.hvr_txt_gray:hover {
    color: #ccc
}

.txt_color1,
.hvr_txt_color1:hover {
    color: var(--color1)
}

.txt_color2,
.hvr_txt_color2:hover {
    color: var(--color2)
}

.txt_color3,
.hvr_txt_color3:hover {
    color: var(--color3)
}

.txt_color4,
.hvr_txt_color4:hover {
    color: var(--color4)
}

/* background-color */
.bg_white,
.hvr_bg_white:hover {
    background-color: white
}

.bg_black,
.hvr_bg_black:hover {
    background-color: var(--black)
}

.bg_gray,
.hvr_bg_gray:hover {
    background-color: #ccc
}

.bg_color1,
.hvr_bg_color1:hover {
    background-color: var(--color1)
}

.bg_color2,
.hvr_bg_color2:hover {
    background-color: var(--color2)
}

.bg_color3,
.hvr_bg_color3:hover {
    background-color: var(--color3)
}

.bg_color4,
.hvr_bg_color4:hover {
    background-color: var(--color4)
}

.bg_color_clear,
.hvr_bg_color_clear:hover {
    background-color: transparent !important
}

/* border-color*/
.border_white,
.hvr_border_white:hover {
    border-color: white
}

.border_black,
.hvr_border_black:hover {
    border-color: var(--black)
}

.border_gray,
.hvr_border_gray:hover {
    border-color: #ccc
}

.border_color1,
.hvr_border_color1:hover {
    border-color: var(--color1)
}

.border_color2,
.hvr_border_color2:hover {
    border-color: var(--color2)
}

.border_color3,
.hvr_border_color3:hover {
    border-color: var(--color3)
}

.border_color4,
.hvr_border_color4:hover {
    border-color: var(--color4)
}

.font_bold,
strong {
    font-weight: 800;
}

.bwrap {
    color: var(--black);
    line-height: 1.7;
}

.bwrap *,
.bwrap *::before,
.bwrap *::after {
    box-sizing: border-box;
    letter-spacing: var(--spacing);
}

.box_title,
.box_title1,
.box_title2,
.box_title3,
.box_title4,
.box_title5 {
    line-height: 1.3;
}

/* -- customize ---------------------------------------------------------- */

.box__data:has(.fv) {
    overflow: hidden;
}

.fv {
    &::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border: solid 0.5em currentColor;
        border-bottom: none;
        pointer-events: none;
        z-index: 1;
    }

    .main_copy div {
        font-feature-settings: "palt";
    }

    .box_title1 {
        color: #fff;
        -webkit-text-stroke: 3px var(--color1);
        text-stroke: 3px var(--color1);
        paint-order: stroke;
    }

    .box_title2 {
        -webkit-text-stroke: 3px #fff;
        text-stroke: 3px #fff;
        paint-order: stroke;
    }

    .box_item .box_txt2 {
        .editTxt1 {
            background-color: var(--color1);
            padding: 0.2em 0.6em 0.2em 2em;
            position: relative;
            border-radius: 1000px;

            &::before {
                position: absolute;
                content: "";
                width: 0.8em;
                aspect-ratio: 2;
                display: block;
                top: 50%;
                left: 0.7em;
                transform: translateY(-80%) rotate(-45deg);
                border-bottom: solid 1px var(--color3);
                border-left: solid 1px var(--color3);
            }
        }
    }
}

.offer {
    .box_item {
        background-image: linear-gradient(to bottom, transparent 20px, rgb(255 255 255 / 0.1) 20px);

        .offer_list .box_txt1 {
            padding-left: 20%;

            &::before,
            &::after {
                position: absolute;
                content: "";
                top: 0;
                display: block;
            }

            &::before {
                width: 14%;
                aspect-ratio: 1;
                background-color: var(--color2);
                left: 0;
                margin-top: 3%;
            }

            &::after {
                width: 8%;
                aspect-ratio: 2;
                border-left: solid 1px var(--black);
                border-bottom: solid 1px var(--black);
                transform: rotate(-45deg);
                left: 3%;
                margin-top: 7%;
            }
        }
    }
}

.c1 .box_title1 {
    color: #fff;
    -webkit-text-stroke: 3px var(--black);
    text-stroke: 3px var(--black);
    paint-order: stroke;
}

.block_i-2 .arrow,
.block_i-2_B .arrow {
    transform: translateY(30%);
}