body {
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
    margin: 3.5rem 2rem;
    line-height: 1.5;

    > article {
        position: relative;
        margin: 0 auto;
        max-width: 60rem;
        > .corners {
            --line-width: 1rem;
            --line-length: 8rem;
            --border-width: 0.125rem;
            border: solid var(--border-width) #000;
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            height: 100%;
            &:before {
                content: '';
                position: absolute;
                top: calc(var(--line-width) / 2 - var(--border-width));
                left: calc(var(--line-width) / 2 - var(--border-width));
                width: calc(100% - var(--line-width) + var(--border-width) * 2);
                height: calc(100% - var(--line-width) + var(--border-width) * 2);
                background: #fff;
                z-index: 0;
            }
            > div {
                position: absolute;
                left: 0;
                width: calc(100% + var(--line-width));
                height: calc(100% + var(--line-width));
                margin: calc(var(--line-width) * -1 / 2);
                overflow: hidden;
                z-index: -1;
                &:before, &:after {
                    content: '';
                    position: absolute;
                    background: rgb(231, 38, 105);
                    width: var(--line-length);
                    height: var(--line-length);
                }
                &:before {
                    left: 0;
                }
                &:after {
                    right: 0;
                }
                &:nth-child(1) {
                    top: 0;
                }
                &:nth-child(2) {
                    bottom: 0;
                    &:before, &:after {
                        bottom: 0;
                    }
                }
            }
        }
        > h1 {
            margin: 0 auto;
            background: rgb(231, 38, 105);
            color: #fff;
            font-size: 1em;
            padding: 1rem 2rem;
            position: relative;
            border-radius: 5rem;
            text-align: center;
            max-width: 17.5rem;
            width: calc(100% - 6rem);
            z-index: 0;
            transform: translateY(-50%);
            &:before {
                content: '';
                position: absolute;
                top: 0.5rem;
                left: 0.5rem;
                width: 100%;
                height: 100%;
                border-radius: 5rem;
                z-index: -1;
                background-image: linear-gradient(-45deg, transparent 25%, rgba(231, 38, 105, 0.4) 25%, rgba(231, 38, 105, 0.4) 50%, transparent 50%, transparent 75%, rgba(231, 38, 105, 0.4) 75%, rgba(231, 38, 105, 0.4));
                background-size: 0.5rem 0.5rem;
            }
        }
        > section {
            display: flex;
            padding: 2rem 5rem 3.5rem;
            > .content {
                z-index: 1;
                > p {
                    font-size: 0.9em;
                    line-height: 1.8;
                }
                > .columns {
                    display: flex;
                    gap: 1rem;
                    margin: 2rem 0;
                    > .column {
                        --accent: #198DCC;
                        flex-grow: 1;
                        flex-shrink: 1;
                        &:nth-child(1) {
                            --accent: #198DCC;
                        }
                        &:nth-child(2) {
                            --accent: #2C61CF;
                        }
                        &:nth-child(3) {
                            --accent: #1EA56D;
                        }
                        /* #198DCC #2C61CF #1EA56D */
                        > h2 {
                            margin: 0 auto;
                            background: var(--accent);
                            color: #fff;
                            font-size: 0.9em;
                            width: 6.5rem;
                            padding-bottom: 1rem;
                            text-align: center;
                            display: flex;
                            border-radius: 50%;
                            aspect-ratio: 1;
                            box-sizing: border-box;
                            margin-bottom: -2.25rem;
                            position: relative;
                            &:before {
                                content: '';
                                position: absolute;
                                top: 0.5rem;
                                left: 0.5rem;
                                width: 100%;
                                height: 100%;
                                border-radius: 5rem;
                                z-index: -1;
                                background-image: linear-gradient(-45deg, transparent 25%, #ccc 25%, #ccc 50%, transparent 50%, transparent 75%, #ccc 75%, #ccc);
                                background-size: 0.5rem 0.5rem;
                            }
                            > span {
                                margin: auto;
                            }
                        }
                        > .content {
                            border: solid 0.125rem #ccc;
                            background: #fff;
                            z-index: 0;
                            position: relative;
                            padding: 0 1rem 1rem;
                            > section {
                                padding: 1.5rem 0 1rem;
                                &:not(:first-child) {
                                    border-top: solid 0.125rem #eee;
                                }
                                > h3 {
                                    margin: 0;
                                    padding: 0.5rem;
                                    border-left: solid 0.25rem #FDD000;
                                    display: flex;
                                    flex-direction: column;
                                    font-size: 1em;
                                    > small {
                                        margin-top: 0.25rem;
                                        font-size: 0.75em;
                                        color: #666;
                                    }
                                }
                                > p {
                                    margin: 0.75rem 0 0;
                                    font-size: 0.9em;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}