@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ .box{ } .box::before{ content: ""; display: block; width: 100%; height: 65vw; margin-bottom: 1em; background-image: url("images/image.jpg"); background-image: -webkit-image-set(url("images/image.jpg") 1x, url("images/image@2x.jpg") 2x); background-repeat: no-repeat; background-position: left bottom; background-size: cover; } .box .text{ text-align: left; padding: 0 5vw; } .box .text p{ margin-bottom: 1em; } .box .text p:last-child{ margin-bottom: 0; } .philosophy_img{ position: relative; } .philosophy_img .illust01{ width: 15%; position: absolute; left: 0; bottom: 0; } .philosophy_img .illust02{ width: 15%; position: absolute; right: 0; bottom: 0; } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px){ .box{ display: flex; position: relative; } .box::before{ width: 50%; height: auto; } .box .text{ width: 50%; padding: 0 4vw; } .box .text p{ font-size: 16px; } .philosophy_img{ width: 1100px; margin: 0 auto; text-align: center; } .philosophy_img .illust01, .philosophy_img .illust02{ width: auto; height: 380px; } .philosophy_img .illust01 img, .philosophy_img .illust02 img{ width: auto; height: 100%; } }