<section class="plan-area">
	<!-- 
	    <div class="plan__title">
			<p>プラン内容も豊富にご用意</p>
			<h2>ツール提供以外にも<br class="sp">4つの運用代行プラン</h2>
	    </div>
     -->
	    <div class="plan__cont wrapper _920">
			<div class="plan_box d-flex">
			    <div class="tool_id_only shadow-box text-center">
			        <h2 class="title">ツールIDのみ</h2>
			        <div class="inner">
			            <h3 class="plan_name">スタンダード<br class="pc">プラン</h3>
						<img src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_01-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_01-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_01_x2-min.png 2x" alt="">
						<p>まずはマーケロボを<br class="pc">はじめてみたい<br class="">企業様向け</p>
			        </div>
			    </div>

				<div class="tool_id_and_consultant shadow-box text-center">
				    <h2 class="title">ツールID + 運用代行</h2>
				    <div class="d-grid">
			            <div>
			                <h3 class="plan_name">ベーシック<br class="pc">運用代行プラン</h3>
			                <img src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_02-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_02-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_02_x2-min.png 2x" alt="">
			                <p>マーケロボを利用<br class="pc">するイメージはあるが<br class="">社外の力も借りながら<br class="pc">運用したい<br class="sp">企業様向け</p>
			            </div>
			            <div>
			                <h3 class="plan_name">ebook付<br class="pc">運用代行プラン</h3>
			                <img src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_03-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_03-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_03_x2-min.png 2x" alt="">
			                <p>マーケロボ運用で<br class="pc">不可欠な<br class="sp">コンテンツの<br class="pc">作成から支援を<br class="pc">希望する<br class="sp">企業様向け</p>
			            </div>
			            <div>
			                <h3 class="plan_name">コンサルティング<br class="pc">プラン</h3>
			                <img src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_04-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_04-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_04_x2-min.png 2x" alt="">
			                <p>マーケロボ運用の土台を<br class="pc">早期に作り<br class="sp">徹底的に営業<br class="pc">組織を改革したい<br class="">企業様向け</p>
			            </div>
			            <div>
			                <h3 class="plan_name">すべてお任せ<br class="pc">プラン</h3>
			                <img src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_05-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_05-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_price_icon_05_x2-min.png 2x" alt="">
			                <!-- 
			                <p>MAを基軸とした営業体制構築から<br class="pc">採用まで全てを一気通貫で行い<br>デジタル変革を起こしていきたい<br>企業様向け</p>
			                -->
			                <!-- <p>営業から採用まで一気通貫で<br>MAを基軸に体制構築し<br>DXを起こしていきたい<br>企業様向け</p> -->
			                <p>マーケロボを基軸とした<br class="pc">営業体制構築から<br class="sp">採用<br class="pc">まで一気通貫でDXを<br class="pc">起こしたい<br class="sp">企業様向け</p>
			            </div>
				    </div>
				</div>
			</div>

		    </div>
		<div class="plan__cont banner wrapper _940">
			<img class="pc" src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_service-min.png" srcset="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_service-min.png 1x,https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_service_x2-min.png 2x" alt="">
			<img class="sp" src="https://mk8-robo.com/wp-content/uploads/2020/11/manufacturing_sp_service_x2.png" alt="">
		</div>
	</section>
.plan-area {padding: 3.5em 0 3.9em;}
.plan-area .plan__title {text-align: center;}
.plan-area .plan__title h2 {color: #eb5a24;font-size: 2.4em;margin-top: 0.2em;}
.plan-area .plan__cont {margin-top: 3.6em;}
.plan-area .plan__cont.banner {margin-top: 1em;}
.plan-area .plan__download {margin: 0 auto;margin-top: 30px;width: 20%;}
.plan-area .plan__title p {font-size: 1.3em;font-weight: bold;}

@media (max-width: 768px) {
.plan-area {padding: 1.6em 0 1.9em;}
.plan-area .plan__title p {font-size: 0.6em;}
.plan-area .plan__title h2 {font-size: 20px;line-height: 1.3;}
.plan-area .plan__cont {margin-top: 2em;}
.plan-area .plan__cont .plan_box {width: 75%; }
.plan-area .plan__download {width: 75%;} 
}

.tool_id_only, .tool_id_and_consultant {border-radius: 10px;}
.plan_name {margin: 0;text-align: center;color: #595757;}
.tool_id_only .title, .tool_id_and_consultant .title {color: #fff;font-weight: normal;padding: 3px 0;text-align: center;font-size: 1.15em;}

.tool_id_only {border: solid 2px #00a397;padding: 0 0 0.2em;position: relative;}
.tool_id_only .inner {padding: 0 0.5em 0;}
.tool_id_only .title {background-color: #00a397;border-radius: 6px 6px 0 0;}
.tool_id_only .title {margin-bottom: 30px;}
.tool_id_only p, .tool_id_and_consultant p {line-height: 1.4;text-align: center;font-size: 0.9em;color: #595757;}
.tool_id_only p:not([class]) {align-items: center;display: flex;justify-content: center;/*min-height: 5em;*/}
.tool_id_and_consultant {height: 100%;overflow: hidden;}
.tool_id_and_consultant .title {background-color: #df8c3d;margin-bottom: 24px;}
.tool_id_and_consultant .d-grid {grid-template-columns: repeat(4,1fr);}
.tool_id_and_consultant .d-grid > div {padding: 0 0.5em 1em;position: relative;}
.tool_id_and_consultant .d-grid > div + div:before {background-color: #df8c3d;content: "";display: block;position: absolute;}

.markerobo-form-wrapper {font-size: 16px;}
.summary_text p {font-size: 17px;letter-spacing: 0.02em;line-height: 1.5;margin-bottom: 30px;text-align: justify;}

@media screen and (max-width: 960px){}
@media screen and (min-width: 801px){
.tool_id_only, .tool_id_and_consultant {
    min-height: 19.5em;
    box-sizing: border-box;
}
.plan_box.d-flex {justify-content: center;}
.tool_id_only {width: 215px;max-width: 100%;}
.tool_id_only.shadow-box.text-center {width: 21%;}
.plan_box .tool_id_only img {max-width: 100%;margin-top: 0.7em;}
.plan_box .tool_id_and_consultant img {
    max-width: 100%;
    margin-bottom: 0.6em;
}
.tool_id_and_consultant{margin-left: 1%;max-width: calc(100% - 22%);}
.tool_id_and_consultant .d-grid {gap: 0 2px;}
.tool_id_and_consultant .d-grid > div + div:before {height: calc(100%);left: -2px;top: -10px;width: 2px;}
}
@media (max-width: 1980px) and (min-width: 801px){
.plan-area .plan__cont .plan_box {font-size: 0.83vw; }
}
@media screen and (max-width: 800px){
.tool_id_only .plan_name,.tool_id_and_consultant .plan_name {font-size: 1.6em;}
.category-01{padding-bottom: 10px;}
*[class^="category-"]:nth-child(even) {padding-left: 20px;padding-right: 20px;}
.summary_text p {font-size: 14px;}
.plan-area .plan__cont.banner {
margin-top: 1.5em;
max-width: 88%;
}		    
.plan_box.d-flex {flex-direction: column;margin-left: auto;margin-right: auto;max-width: 406px;}
.tool_id_only p, .tool_id_and_consultant p {font-size: 1.5em;line-height: 1.5;}
.tool_id_and_consultant {margin-top: 30px;}
.tool_id_and_consultant .d-grid {grid-template-columns: repeat(1,1fr);padding-bottom: 2em;}
.tool_id_and_consultant .d-grid {gap: 2.9em 0;}
.tool_id_and_consultant .d-grid > div + div:before {height: 2px;left: 0;margin: auto;right: 0;/*top: -28px;width: calc(100% - 40px);*/}
.tool_id_and_consultant .d-grid > div + div:before {top: -2.25em;width: calc(100% - 2.3em);}
.tool_id_only .title, .tool_id_and_consultant .title {font-size: 1.3em;padding: 0.3em 0;}
.tool_id_and_consultant p {margin-top: 5px;}
.plan_box .tool_id_only img {max-width: 276px;width: 72%;margin-bottom: -0.6em;}
.plan_box .tool_id_and_consultant img {width: 406px;margin-bottom: -1em;}
.plan_box .tool_id_and_consultant img[src$="price_renewal_icon_04-min.png"] {max-width: 180px;}
}
.tool_id_and_consultant .d-grid > div {padding: 0 0em 1em;}

@media screen and (max-width: 680px){

.tool_id_only p:not([class]),.tool_id_and_consultant p {
margin-top: 0em;
font-size: 1em;
line-height: 1.45;
}
.tool_id_and_consultant .plan_name {
font-size: 1.45em;
}
.tool_id_and_consultant .title {
margin-bottom: 1.85em;
}
.tool_id_and_consultant {margin-top: 2.2em;}
.tool_id_only .inner {padding-bottom: 0.8em;}
}

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.