<div class="media_01">
<div class="media_01--container">
<div class="media_01--container_child">
<div class="media_01--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_01--container_child_image -->
<div class="media_01--container_child_body">
<div class="media_01--container_child_body_adjust">
<h2 class="media_01--container_child_body_title">{{title}}</h2>
<p class="media_01--container_child_body_paragraph">{{description}}</p>
<a href="#" class="btn">{{label}}</a>
</div><!-- /.media_01--container_child_body_adjust -->
</div><!-- /.media_01--container_child_body -->
</div><!-- /.media_01--container_child -->
</div><!-- /.media_01--container -->
</div><!-- /.media_01 -->
{
"title": "タイトルが入ります",
"description": "アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。",
"image_sp": "/assets/images/media_01_img01_sp.jpg",
"image_tablet": "/assets/images/media_01_img01_tab.jpg",
"image_pc": "/assets/images/media_01_img01_sp.jpg",
"label": "Button"
}
// =====================================================================================
//
// media_01
//
// =====================================================================================
@use 'scss/global' as g;
.media_01 {
&.media_01-reverse {
.media_01--container_child_image {
order: 0;
@include g.mq('tablet') {
order: 2;
}
@include g.mq('pc') {
order: 2;
}
}
.media_01--container_child_body {
order: 0;
@include g.mq('tablet') {
order: 1;
}
@include g.mq('pc') {
order: 1;
}
}
} // &.media_01-reverse
.media_01--container {
padding: 18.6668% 4.1335%;
background-color: #fff;
@include g.mq('tablet') {
padding: 14.6668% 2.0833%;
}
@include g.mq('pc') {
padding: 143px 4.6875%;
}
.media_01--container_child {
@include g.mq('tablet') {
display: flex;
justify-content: space-between;
}
@include g.mq('pc') {
display: flex;
justify-content: space-between;
max-width: 1160px;
margin-right: auto;
margin-left: auto;
}
.media_01--container_child_image,
.media_01--container_child_body {
@include g.mq('tablet') {
display: flex;
width: 47.82%;
}
@include g.mq('pc') {
display: flex;
align-items: center;
width: 48.27%;
}
}
.media_01--container_child_image {
@include g.mq('sp') {
margin-bottom: 5%;
}
picture,
img {
display: block;
width: 100%;
height: auto;
}
}
.media_01--container_child_body {
flex-wrap: wrap;
.media_01--container_child_body_title,
.media_01--container_child_body_paragraph {
width: 100%;
}
.media_01--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_01--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_01--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_01--container_child_body_button
} // .media_01--container_child_body
} // .media_01--container_child
} // .media_01--container
} // .media_01