<div class="media_03 media_03-reverse">
<div class="media_03--container">
<div class="media_03--container_child">
<div class="media_03--container_child_image">
<picture>
<source media="(min-width: 768px)" srcset="{{image_pc}}">
<source media="(min-width: 365px)" srcset="{{image_tablet}}">
<img src="{{image_sp}}" alt="">
</picture>
</div><!-- /.media_03--container_child_image -->
<div class="media_03--container_child_body">
<div class="media_03--container_child_body_adjust">
<h2 class="media_03--container_child_body_title">{{title}}</h2>
<p class="media_03--container_child_body_paragraph">{{description}}</p>
<a href="#" class="media_03--container_child_body_button">{{label}}</a>
</div><!-- /.media_03--container_child_body_adjust -->
</div><!-- /.media_03--container_child_body -->
</div><!-- /.media_03--container_child -->
</div><!-- /.media_03--container -->
</div><!-- /.media_03 -->
{
"title": "タイトルが入ります",
"description": "アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。アイテムの説明文が入ります。",
"image_sp": "/assets/images/media_03_img01_sp.jpg",
"image_tablet": "/assets/images/media_03_img01_tab.jpg",
"image_pc": "/assets/images/media_03_img01.jpg",
"label": "Button"
}
// =====================================================================================
//
// media_03
//
// =====================================================================================
@use 'scss/global' as g;
.media_03 {
&.media_03-reverse {
.media_03--container {
.media_03--container_child {
@include g.mq('tablet') {
justify-content: flex-end;
}
@include g.mq('pc') {
justify-content: flex-end;
}
}
.media_03--container_child_body {
@include g.mq('tablet') {
right: auto;
left: 0;
}
@include g.mq('pc') {
right: auto;
left: 0;
}
}
} // .media_03--container
} // &.media_03-reverse
.media_03--container {
position: relative;
@include g.mq('sp') {
padding: 18.6668% 0;
}
@include g.mq('tablet') {
padding: 14.6668% 2.0833%;
}
@include g.mq('pc') {
padding: 14.33333% 4.6875%;
}
.media_03--container_child {
@include g.mq('tablet') {
position: relative;
display: flex;
justify-content: space-between;
}
@include g.mq('pc') {
position: relative;
display: flex;
justify-content: space-between;
max-width: 1160px;
margin-right: auto;
margin-left: auto;
}
.media_03--container_child_image,
.media_03--container_child_body {
@include g.mq('tablet') {
display: flex;
align-items: center;
}
@include g.mq('pc') {
display: flex;
align-items: center;
}
}
.media_03--container_child_image {
@include g.mq('tablet') {
width: 67.3913%;
}
@include g.mq('pc') {
width: 65.51724%;
}
picture,
img {
display: block;
width: 100%;
height: auto;
}
}
.media_03--container_child_body {
@include g.mq('sp') {
position: relative;
z-index: 1;
padding-right: 4.1335%;
padding-left: 4.1335%;
margin-top: -5.997%;
}
@include g.mq('tablet') {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 44.02173%;
height: 100%;
}
@include g.mq('pc') {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 48.27586%;
height: 100%;
}
.media_03--container_child_body_adjust {
position: relative;
padding: 8.75% 7.14285%;
background-color: #fff;
}
.media_03--container_child_body_title {
margin-bottom: 2.2rem;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.25;
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_03--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_03--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_03--container_child_body_button
} // .media_03--container_child_body
} // .media_03--container_child
} // .media_03--container
} // .media_03