デイトラweb制作上級編パターン2　 DAY31~44③

<!-- top-conceptに疑似要素 -->
<section class="top-concept">
    <div class="top-concept__inner">
        <div class="top-concept__description">
            <div class="top-concept__en">CONCEPT</div>
            <h2 class="top-concept__title top-title">
                健康的で素敵な笑顔あふれる
                <br>
                街づくりを目指して
            </h2>
            <div class="top-concept__text">
                私たちは最新の医療技術を追求すると共に、患者様とのコミュニケーションを大事することで、気軽に通いやすく些細なことでも相談できる「街の掛かり付け医」を目指しております。
                <br>
                お子様からご高齢の方まで、快適な空間で治療が受けられる場を作り、地域医療に貢献しきたいと考えております。
            </div>
            <div class="top-concept__button"><a href="#">当院について</a></div>
        </div>
        <div class="top-concept__image"><img src="./img/top/concept-img1.png" alt=""></div>
    </div>
</section>

.top-concept {
    margin-top: 60px;
    position: relative;
    z-index: 2;
    overflow: hidden;

    &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 33%;
        background: url(../img/top/concept-bg.png) no-repeat center right/contain;
        height: 725px;
        width: 102%;

        @include mq('sp') {
            background: url(../img/top/concept-bg_sp.png) no-repeat center center/contain;
            left: 0;
            width: 152%;
            height: 308px;
        }
    }
}

<section class="top-guide">
    <!-- 背景1 -->
    <div class="top-guide__top"></div>
    <!-- 背景2 -->
    <div class="top-guide__bg">
        <div class="top-guide__inner">
            <div class="top-guide__title top-title top-deco">診療案内</div>
            <div class="top-guide__content">
                <div class="top-guide__items">
                    <a href="#" class="top-guide__item medical-bg1">
                        <div class="top-guide__item-line">
                            <div class="top-guide__item-title top-title">一般診療</div>
                            <div class="top-guide__item-lead">虫歯・入れ歯・小児歯科</div>
                        </div>
                    </a>
                    <a href="#" class="top-guide__item medical-bg2">
                        <div class="top-guide__item-line">
                            <div class="top-guide__item-title top-title">特殊診療</div>
                            <div class="top-guide__item-lead">
                                インプラント・ホワイトニング
                                <br>
                                予防歯科・口腔外科・審美歯科
                            </div>
                        </div>
                    </a>
                </div>
                <div class="top-guide__text">
                    当院では、患者さんの歯の健康状態や治療方針を丁寧にカウンセリングし、十分ご理解していただいた上で治療いたします。
                    <br>
                    痛みに配慮することと、可能な限り削らない・抜かない治療に努めております。
                    <br>
                    <span>※特殊性の高い矯正治療などは保険の適応外となります。 これらの治療を行う際は事前に詳細と費用のご説明いたします。</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 背景3 -->
    <div class="top-guide__bottom"></div>
</section>

// 背景1
.top-guide__top {
    position: relative;
    height: 15.78125vw;

    &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/top/bg-top.png) no-repeat center center / cover;
    }
}

// 背景2
.top-guide__bg {
    background: #DFF1FD;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 3%;
        background: url(../img/top/deco-kirakira2-w.png) no-repeat center center / contain;
        width: 57px;
        height: 57px;
    }

    &::after {
        position: absolute;
        content: "";
        bottom: -17px;
        right: 1.5%;
        background: url(../img/top/deco-kirakira-w.png) no-repeat center center / contain;
        width: 125px;
        height: 128px;
    }
}

// 背景3
.top-guide__bottom {
    height: 7.578125vw;
    position: relative;

    &::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../img/top/bg-bottom.png) no-repeat center center / cover;
        z-index: -1;
    }
}