<section class="section _4">
		<div class="wrapper _880">
			<!-- <div class=""><p class="title_set text-center">「〇〇〇〇〇」ができる<br class="sp">3つのこと</p></div> -->

			<div class="d-grid">
				<div>
					<div class="text-center">
					<div class=""><img src="https://placehold.jp/3d4070/ffffff/260x260.png?text=image" srcset="https://placehold.jp/3d4070/ffffff/260x260.png?text=image 1x,https://placehold.jp/3d4070/ffffff/260x260.png?text=image 2x" alt=""></div>
					<p class="heading">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
					<p class="text">〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>

					<div class="merit_box sp">
						<div class="d-grid text-center">
							<div class="inner">
								<p class="title">メリット1</p>
								<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
							</div>
						</div>
					</div>
				</div>
				<div>
					<div class="text-center">
					<div class=""><img src="https://placehold.jp/3d4070/ffffff/260x260.png?text=image" srcset="https://placehold.jp/3d4070/ffffff/260x260.png?text=image 1x,https://placehold.jp/3d4070/ffffff/260x260.png?text=image 2x" alt=""></div>
					<p class="heading">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
					<p class="text">〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>
					<div class="merit_box sp">
						<div class="d-grid text-center">
							<div class="inner">
								<p class="title">メリット2</p>
								<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
							</div>
						</div>
					</div>
				</div>
				<div>
					<div class="text-center">
					<div class=""><img src="https://placehold.jp/3d4070/ffffff/260x260.png?text=image" srcset="https://placehold.jp/3d4070/ffffff/260x260.png?text=image 1x,https://placehold.jp/3d4070/ffffff/260x260.png?text=image 2x" alt=""></div>
					<p class="heading">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
					<p class="text">〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇</p>

					<div class="merit_box sp">
						<div class="d-grid text-center">
							<div class="inner">
								<p class="title">メリット3</p>
								<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrapper _920 pc">
			<div class="merit_box">
				<div class="d-grid text-center">
					<div class="inner">
						<p class="title">メリット1</p>
						<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
					<div class="inner">
						<p class="title">メリット2</p>
						<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
					<div class="inner">
						<p class="title">メリット3</p>
						<p class="body_text">〇〇〇〇〇〇〇〇〇〇</p>
					</div>
				</div>
			</div>
		</div>

	</section>
<style type="text/css">
		.section._4 {padding: 3.5em 0;}
		.section._4 .d-grid {gap: 3.5% 3%;grid-template-columns: repeat(3,1fr);
		    padding-top: 2.4em;}
		.section._4 .d-grid img {margin-bottom: 1em;max-width: 260px;}
		.section._4 .d-grid .heading {font-size: 1.16em;font-weight: bold;margin-bottom: 5%;}
		.section._4 .d-grid .text {font-size: 0.9em;line-height: 1.5;color: #666;}

		.section._4 .merit_box {
			background-color: #ffeca1;
		    margin-top: 2.4em;
		}
		.section._4 .merit_box .d-grid {
		    padding: 2.4em 1.7em 1.5em;
		    gap: 2.5em;
		}
		.section._4 .merit_box .d-grid .inner {
		    background-color: #fff;
		    border-radius: 10px;
		    padding: 1.4em 0em 1.25em;
		    position: relative;
		}
		.section._4 .merit_box .d-grid .inner::before {
		    content: "";
		    width: 0;
		    height: 0;
		    border-color: #fff transparent transparent;
		    border-style: solid;
		    display: block;
		    border-width: 16px 14px;
		    margin: auto;
		    position: absolute;
		    right: 0;
		    left: 0;
		    top: -2.4em;
		}
		.section._4 .merit_box .d-grid .inner .title {
		    background-color: #eb5a24;
		    display: inline-block;
		    box-sizing: border-box;
		    font-size: 0.8em;
		    padding: 0em 0.5em;
		    border-radius: 2em;
		    color: #fff;
		}

		.section._4 .merit_box .d-grid .inner .body_text {
		    font-weight: bold;
		    font-size: 1.15em;
		    margin-top: 0.4em;
		    color: #eb5a24;
		}


	    @media screen and (max-width: 960px){
			.section._4 .d-grid img {max-width: 100%;}
		}
	    @media screen and (max-width: 680px){
			.section._4 {padding: 2.8em 0 0;}
			.section._4 .wrapper {
			    max-width: 100%;
			}
			.section._4 .d-grid {grid-template-columns: repeat(1,1fr);}
			.section._4 .d-grid {
			    gap: 3.2em 0;
			        padding-top: 1.95em;

			}
			.section._4 .d-grid .text {font-size: 1.5em;line-height: 1.7;}
			.section._4 .d-grid .text {width: fit-content;margin-left: auto;margin-right: auto;}
			.section._4 .d-grid .text {margin: 0 1.3em;}
			.section._4 .merit_box .d-grid .inner .title {font-size: 1.15em;}
						.section._4 .d-grid img {margin-bottom: 1.8em;	max-width: 60%;	width: 19.5em;}	
						.section._4 .d-grid .heading {font-size: 2.2em;	margin-bottom: 0.35em;}	
				
				.section._4 .merit_box {
			    display: block;
			    margin-top: 3em;

			}
				.section._4 .merit_box .d-grid .inner .title {
			    padding: 0.3em 0.7em;
			    border-radius: 3em;
			}
				.section._4 .merit_box .d-grid {
			    padding: 2.5em 4.0em 2.1em;
			    gap: 2em;
			}
				.section._4 .merit_box .d-grid .inner::before {

		    border-width: 25px 19px;
		    
		    top: -2.5em;
				}
			.section._4 .merit_box .d-grid .inner {
			    padding: 2.1em 0em 1.8em;
			}

			.section._4 .merit_box .d-grid .inner .body_text {
			    font-size: 1.8em;
			}
			}
	</style>

External CSS

  1. https://mk8-robo.com/wp-content/themes/mk8-robo/assets/css/style_add-decoration.css
  2. https://codepen.io/mayukoakiyama/pen/abmQpLz

External JavaScript

This Pen doesn't use any external JavaScript resources.