【コピペ集】デザインパーツ

<div class="layout_two_col">
  <figure class="layout_two_col__image">
    <img class="layout_two_col__img" src="https://test.lp-web.net/wp-content/uploads/2021/09/anthony-indraus-Bb9jWuTMPUk-unsplash-scaled.jpg" alt="画像に適した説明を入れる">
  </figure>
  <div class="layout_two_col__text">
    <p class="layout_two_col__paragraph">
      初めまして。北杜市の髪にやさしい美容室みどりLoveEarthです。
    </p>
    <p class="layout_two_col__paragraph">
      当店ではお客さまにゆったりした気持ちでくつろいでいただきたく、
      <strong class="layout_two_col__strong">完全予約制</strong>とさせていただいています。
    </p>
    <p class="layout_two_col__paragraph">
      環境にも優しい美容材料を使っていますので、
      敏感肌の方にも安心です（アレルギーがある方は事前にお知らせください）。
    </p>
  </div>
</div>

<div class="layout_two_col layout_two_col--reverse">
  <figure class="layout_two_col__image">
    <img class="layout_two_col__img" src="https://test.lp-web.net/wp-content/uploads/2021/09/anthony-indraus-Bb9jWuTMPUk-unsplash-scaled.jpg" alt="画像に適した説明を入れる">
  </figure>
  <div class="layout_two_col__text">
    <p class="layout_two_col__paragraph">
      初めまして。北杜市の髪にやさしい美容室みどりLoveEarthです。
    </p>
    <p class="layout_two_col__paragraph">
      当店ではお客さまにゆったりした気持ちでくつろいでいただきたく、
      <strong class="layout_two_col__strong">完全予約制</strong>とさせていただいています。
    </p>
    <p class="layout_two_col__paragraph">
      環境にも優しい美容材料を使っていますので、
      敏感肌の方にも安心です（アレルギーがある方は事前にお知らせください）。
    </p>
  </div>
</div>

/* 2カラムレイアウト */
.layout_two_col {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* 2カラム 左右反転 */
.layout_two_col--reverse {
  flex-direction: row-reverse;
}

/* 各カラム */
.layout_two_col__image,
.layout_two_col__text {
  width: 50%;
  min-width: 0;
}

.layout_two_col__image {
	display: flex;
	margin-bottom: 0;
}

.layout_two_col__text {
	padding: 24px;
}

/* 画像 */
.layout_two_col__img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト段落・強調 */
.layout_two_col__paragraph {
  margin-bottom: 1em;
  line-height: 1.8;
  color: #333;
}

.layout_two_col__strong {
  font-weight: 600;
  color: #000;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .layout_two_col,
	.layout_two_col--reverse {
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
  }
	.layout_two_col__image,
	.layout_two_col__text {
  	width: 100%;
	}
  .layout_two_col__text {
    padding: 0 12px;
  }
}