<div class="media_02">
<div class="media_02--container">
<div class="media_02--container_child">
<div class="media_02--container_child_image">
<picture>
<source media="(min-width: 768px)" srcset="{{image_sp}}">
<source media="(min-width: 375px)" srcset="{{image_tablet}}">
<img src="{{image_pc}}" alt="">
</picture>
</div><!-- /.media_02--container_child_image -->
<div class="media_02--container_child_body">
<div class="media_02--container_child_body_adjust">
<h2 class="media_02--container_child_body_title">{{title}}</h2>
<p class="media_02--container_child_body_paragraph">{{description}}</p>
<a href="#" class="btn">{{label}}</a>
</div><!-- /.media_02--container_child_body_adjust -->
</div><!-- /.media_02--container_child_body -->
</div><!-- /.media_02--container_child -->
</div><!-- /.media_02--container -->
</div><!-- /.media_02 -->
{
"title": "タイトルが入ります",
"description": "アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。",
"image_sp": "/assets/images/media_02_img01_sp.jpg",
"image_tablet": "/assets/images/media_02_img01_tab.jpg",
"image_pc": "/assets/images/media_02_img01_sp.jpg",
"label": "Button"
}
// =====================================================================================
//
// media_02
//
// =====================================================================================
@use 'scss/global' as g;
.media_02 {
&.media_02-reverse {
.media_02--container_child_image {
order: 0;
@include g.mq('tablet') {
order: 2;
}
@include g.mq('pc') {
order: 2;
}
}
.media_02--container_child_body {
order: 0;
@include g.mq('tablet') {
order: 1;
}
@include g.mq('pc') {
order: 1;
}
}
} // &.media_02-reverse
.media_02--container {
position: relative;
background-color: #fff;
@include g.mq('sp') {
padding-top: 8.54572%;
padding-bottom: 8.54572%;
}
@include g.mq('tablet') {
padding-top: 16%;
padding-bottom: 26.4%;
}
@include g.mq('pc') {
padding-top: 10%;
padding-bottom: 10%;
}
.media_02--container_child {
@include g.mq('tablet') {
display: flex;
justify-content: space-between;
}
@include g.mq('pc') {
display: flex;
justify-content: space-between;
}
.media_02--container_child_image,
.media_02--container_child_body {
@include g.mq('tablet') {
display: flex;
width: 50%;
}
@include g.mq('pc') {
display: flex;
width: 50%;
}
}
.media_02--container_child_image {
@include g.mq('tablet') {
align-items: flex-start;
}
picture,
img {
display: block;
width: 100%;
height: auto;
}
}
.media_02--container_child_body {
@include g.mq('tablet') {
align-items: center;
}
@include g.mq('pc') {
align-items: center;
}
.media_02--container_child_body_adjust {
@include g.mq('sp') {
padding-top: 4.49775%;
padding-right: 4.58165%;
padding-left: 4.58165%;
}
@include g.mq('tablet') {
padding-right: 8.33333%;
padding-left: 8.33333%;
}
@include g.mq('pc') {
padding-right: 4.96875%;
padding-left: 4.96875%;
}
}
.media_02--container_child_body_title {
margin-bottom: 2.2rem;
font-size: 2.2rem;
font-weight: 700;
letter-spacing: 0.3rem;
@include g.mq('sp') {
margin-bottom: 3%;
line-height: 1.45;
}
@include g.mq('tablet') {
margin-bottom: 6%;
line-height: 1.5;
}
}
.media_02--container_child_body_paragraph {
margin-bottom: 4.4rem;
font-size: 1.6rem;
line-height: 1.7;
letter-spacing: 0.1rem;
@include g.mq('sp') {
margin-bottom: 8%;
}
@include g.mq('tablet') {
margin-bottom: 11%;
}
}
.media_02--container_child_body_button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 260px;
height: 64px;
font-size: 1.6rem;
@include g.mq('sp') {
margin-right: auto;
margin-left: auto;
}
&:link,
&:visited,
&:hover,
&:active {
color: #fff;
background-color: g.$color_primary;
}
} // .media_02--container_child_body_button
} // .media_02--container_child_body
} // .media_02--container_child
} // .media_02--container
} // .media_02