body {
    &:has(.remembering-osamu.block) {
        background-color: #faf8f3;
        footer, header {
            display:none;
        }
    }
}

.remembering-osamu.block {
    max-width: 100%;
    padding-top: 5vw;
    padding-left: 9%;
    padding-right: 9%;
    box-sizing: border-box;
    @media (width >= 1024px) {
     padding: 30px 0 10px;  
    }
    .contents_inner {
        padding-inline: 0;
        @media (width >=1024px) {
            padding-inline: 35px;
        }
    }

    .osamu-wrapper {
        max-width: 1233px;
        margin: 0 auto;
        @media (width >=1024px) {
            padding-inline: 20px;
        }
    }

    .logo {
        width: 240px;

        @media (width >=1024px) {
            width: 270px;
        }
    }

    img {
        -webkit-backface-visibility: hidden;
        max-width: 100%;
        height: auto;
        border: 0;
        vertical-align: bottom;
    }

    p {
        margin: 0;
        padding: 0;
    }

    #mainContents {
        background-color: #faf8f3;
        padding: 0 0 10px;
    }

    .main-flex {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        padding-top: 30px;

        @media (width >=1024px) {
            flex-direction: row;
        }
    }

    .left-sec,
    .right-sec {
        width: 100%;
    }

    .left-sec {
        margin-top: 0;

        @media (width >=1024px) {
            width: 40%;
        }
        @media (width >=1200px) {
            width: 42%;
            margin-top: 20px;
        }

        .title {
            margin: 0;
            color: var(--tertiary-black);
            font-size: var(--heading-font-5-mob);
            font-family: var(--body-font-family);
            font-weight: var(--fw-900);
            line-height: var(--heading-lh-19-mob-text-small);
            padding-bottom: 10px;
            @media (width >=768px) {
                font-size: var(--heading-font-15-mob-sub-heading);
                line-height: var(--heading-lh-7-des);
            }    
            @media (width >=1024px) {
                font-size: var(--heading-font-2-des);
                line-height: var(--heading-lh-18-des-display);
            }
            @media (width >=1200px) {
                font-size: var(--heading-font-25-des);
                line-height: var(--heading-lh-23-des-text-normal);
            }
        }

        .title1 {
            color: var(--tertiary-black);
            font-size: var(--heading-font-12-mob);
            font-weight: var(--fw-900);
            line-height: var(--heading-lh-3--mob-heading);
            margin: 0px;
            padding: 0px 0px 20px 0px;
            @media (width >=1024px) {
                font-size: var(--heading-font-14-des);
                line-height: var(--heading-lh-1-des-display);
            }

            @media (width >=1200px) {
                font-size: var(--heading-font-12-des);
                line-height: var(--heading-lh-1-des-display);
            }
        }

        .text2 {
            margin-top: 5vw;
            color: var(--tertiary-black);
            font-size: var(--heading-font-4-mob);
            font-family: var(--body-font-family);
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-3--mob-heading);
            padding-bottom: 15px;
            @media (width >=768px) {
                margin-top: 3vw;
                font-size: var(--heading-font-22-mob);
                padding-bottom: 10px;
                line-height: var(--heading-lh-5--mob);
            }    
            @media (width >=1024px) {
                margin-top: 10px;
                font-size: var(--heading-font-19-des);
                line-height:  var(--heading-lh-12-des);
                padding-bottom: 20px;
            }

            @media (width >=1200px) {
                margin-top: 30px;
            }
        }

        .text3 {
            color: var(--tertiary-black);
            font-size: var(--heading-font-0-desc);
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-11-des-text-small);

            @media (width >=361px) {
                font-size: var(--heading-font-22-des);
            }

            @media (width >=768px) {
                font-size: var(--heading-font-size-xxs);
                line-height: var(--heading-lh-24-mob-text-small);
            }

            @media (width >=1024px) {
                font-size: var(--heading-font-16-des);
                line-height: var(--heading-lh-24-des-text-normal);
            }
        }

        .noDisplay {
            display: block;

            @media (width >=1024px) {
                display: none;
            }
        }
    }

    .right-sec {
        @media (width >=1024px) {
            width: 58%;
        }

        @media (width >=1200px) {
            width: 55%;
        }

        .noDisplay {
            display: none;

            @media (width >=1024px) {
                display: block;
            }
        }
    }

    .btn-section {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        width: 100%;
        margin-top: 5vw;
        gap: 10px;

        @media (width >=1024px) {
            flex-flow: row;
            margin-top: 20px;
            gap: 0;
        }

        @media (width >=1200px) {
            margin-top: 30px;
        }

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45%;
            margin: 0;
            padding: 12px 0;
            font-size: var(--heading-font-0-desc);
            font-weight: var(--fw-500);
            line-height: var(--heading-lh-11-des-text-small);
            font-family: var(--body-font-family);
            text-decoration: none;
            text-align: center;
            color: var(--tertiary-black);
            background: rgba(157, 159, 162, 1);
            transition: 0.3s all;

            @media (width >=768px) {
                padding: 20px 0;
                font-size: var(--heading-font-7-des);
                line-height: var(--heading-lh-7-des);
            }

            @media (width >=1024px) {
                width: 200px;
                margin: 0px 15px;
                padding: 18px 0;
                line-height: var(--heading-lh-12-des);
            }

            @media (width >=1200px) {
                padding: 20px 0px;
                font-size: var(--heading-font-7-des);
                line-height: var(--heading-lh-7-des);
            }

            &:hover {
                transform: scale(1);
                @media (width >=1024px) {
                    transform: scale(1.1);
                }
            }
        }
    }
}