デイトラweb制作上級編　 DAY31~44⑦

<div class="page-service__item">
    <div class="page-service__item-inner">
        <div class="page-service__content content-number1">
            <div class="page-service__title">
                <div class="page-service__jp">ビジネス英語研修</div>
                <div class="page-service__en font-en">Business English Training</div>
            </div>
            <div class="page-service__text">
                ビジネス英会話はこれからの時代、すべてのビジネスパーソンが学ぶべき必須スキルと考えおります。
                <br>
                海外にビジネス展開する際にはもちろんのこと、日本国内でも英会話コミュニケーションができることによってチャンスが掴める場面があります。
                <br>
                <br>
                担当する講師は皆、豊富な海外ビジネス経験者であり、ティーチングスキル、コミュニケーションスキル、人間性に加えて採用後には厳しいトレーニング期間を設けているので、様々な職業や職種に合ったスキルまで身につけられます。
                <br>
                また、必要に応じてマンツーマン形式のレッスンを行うことも可能なので、時間の限り話すことができ効率よく上達することができます。
            </div>
            <div class="page-service__price">
                <div class="page-service__price-item">
                    <dt>対象</dt>
                    <dd>ビジネスの中で使える英語コミュニケーション能力が必要な方</dd>
                </div>
                <div class="page-service__price-item">
                    <dt>費用</dt>
                    <dd>時間内容要相談</dd>
                </div>
            </div>
            <div class="page-service__button"><a href="#">お申し込みはこちら</a></div>
            <div class="page-service__img"><img src="./img/img-service-detail01.png" alt=""></div>
        </div>
    </div>
</div>

.page-service__program-item {

    &:not(:first-child) {
        margin-top: 331px;
    }
}

// これに対して「番号」と「画像」を付ける
.page-service__program-content {
    padding: 88px 40px 60px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
    max-width: 590px;
    width: 46.09375vw;
    position: relative;
}

// 番号
.content-number1 {

    &::after {
        position: absolute;
        content: "01";
        color: $color-main;
        top: -46px;
        left: 58px;
        font-size: 100px;
        line-height: 1;
        font-style: italic;
        font-family: $font-en;
        font-weight: 500;
    }
}

// 画像
.page-service__program-img {
    position: absolute;
    content: "";
    top: 60px;
    right: -93%;
    max-width: 610px;
    width: 47.65625vw;
    padding-right: 50px;
    z-index: -1;
}

<div class="page-service__program-item item-number2">
    <div class="page-service__program-item-inner inner-number2">
        <div class="page-service__program-content content-number2">
            <div class="page-service__program-title">
                <div class="page-service__program-jp">異文化コミュニケーション</div>
                <div class="page-service__program-en font-en">Cross-cultural communication</div>
            </div>
            <div class="page-service__program-text">
                急速にグローバル化が進んでおり、ビジネスの場面に限らず様々な文化的背景を持つ者同士の交流はもはや日常的な光景となりました。
                <br>
                言語や文化が異なる相手を理解することで世界が広がり、新たなビジネスチャンスに巡り会うことは少なくありません。
                <br>
                多様な価値観を尊重しながら言葉の垣根を越え、コミュニケーションの力で他者を理解しようとする「異文化コミュニケーション」はこれからの時代、さらに重要となるスキルと言えます。
                <br>
                <br>
                コミュニケーションの基本となる日本語と英語の力を鍛えつつ、アプローチする国の文化を同時に学び、スムーズなビジネス展開をサポートいたします。
            </div>
            <div class="page-service__program-price">
                <div class="page-service__program-price-item">
                    <dt>対象</dt>
                    <dd>ビジネスの中で使える英語コミュニケーション能力が必要な方</dd>
                </div>
                <div class="page-service__program-price-item">
                    <dt>費用</dt>
                    <dd>時間内容要相談</dd>
                </div>
            </div>
            <div class="page-service__program-button"><a href="#">お申し込みはこちら</a></div>
            <div class="page-service__program-img img-number2"><img src="./img/img-service-detail02.png" alt="">
            </div>
        </div>
    </div>
</div>

.content-number2 {

    &::after {
        position: absolute;
        content: "02";
        color: $color-main;
        top: -46px;
        right: 44px;
        font-size: 100px;
        line-height: 1;
        font-style: italic;
        font-family: $font-en;
        font-weight: 500;
    }
}

.item-number2 {
    margin-top: 375px;
}

.inner-number2 {
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
    padding-right: 90px;
}

.content-number2 {
    margin-left: auto;
}

.img-number2 {
    position: absolute;
    content: "";
    top: 60px;
    left: -93%;
    width: 47.65625vw;
    padding-left: 50px;
    padding-right: 0;
}