/*パソコン表示共通*/
.heading{
  font-size: 28pt;
  font-weight: bold;
  border-bottom: solid 8px #0070E0;
}

.sub-heading{
  font-size: 18pt;
  font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 0 30px;
    padding-top: 30px;
    margin-bottom: 5px;
}

.sub-heading:before {
    position: absolute;
    left: 0;
    top: 15px;
    content: "";
    width: 2px;
    height: 80%;
    background: #000;
    border-radius: 3px;
    transform: rotate(-35deg);
}
       
.sub-heading:after {
    position: absolute;
    content: "";
    right: 0;
    top: 15px;
    width: 2px;
    height: 80%;
    background: #000;
    border-radius: 3px;
    transform: rotate(35deg);
}


/*キャンペーンパソコン*/
#campaign{
	position: relative;
	background: yellow;
}

#campaign b{
	font-size: 1.4rem;
}

#campaign li{
	font-size: 1.2rem;
}

#campaignbaner{
		position: absolute;
		transform: translate(10%, -50%);
	}


/*事例パソコン*/
.examplecard{
	background: white;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 10px 25px;
    box-shadow: 20px 20px 0 #292e49;
    border-top-left-radius: 50px;
    border-color: #292e49;
    border-width: 25px 0px 0px 25px;
    outline: 25px solid #d7e7f4;
    outline-offset: -20px;
}

.examplecard-title{
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	border-bottom: 5px dotted black;
	width: 750px;
}

.examplecard-heading{
	margin-bottom: 0.2rem;
    font-weight: bold;
    font-size: 26px;
    text-align: center;
}

.examplecard-heading span{
	background: linear-gradient(
      transparent 60%, #FFFE03 60%
    );
}

.point-balloon {
  position: relative;
  top: 10px;
  left: 100px;
  display: inline-block;
  background: black;
  border-radius: 10px;
  padding: 5px 50px 5px 50px;
  font-weight: bold;
  color: white;
}

.point-balloon:before {
  content: "";
  /* borderで三角形を作る */
  border: 10px solid transparent;
  border-top: 10px solid black;
  /* 配置する */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.point-space{
  text-align: center;
  font-size: 1.2rem;
  background: #ffe236;
  padding: 25px 15px;
  margin: 0px 70px;
}

.benefits-heading{
	font-size: 1.8rem;
	font-weight: bold;
	border-bottom: 1px solid black;
	width: 750px;
}

.benefits-li span{
	font-size: 1.2rem;
	font-weight: bold;
	color: red;
}


/*FAQパソコン*/
.faq img{
  width: 65px;
  height: 65px;
}

.faq-q div{
  font-size: 1.5rem;
  position: relative;
  top: -35px;
  left: 80px;
}

.faq-a div{
  font-size: 1.5rem;
  background: #d6e8fa;
  padding-top: 15px;
  position: relative;
  top: -50px;
  left: 80px;
}

.faq-hr{
  border-top: 3px dotted #666666;
  width: 960px;
}


/*CTAパソコン*/
.dots{
  background-image: radial-gradient(circle at center, yellow 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.3em; /* 点の間隔とサイズ調整 */
  padding-top: .2em; /* 縦方向の位置調整 */
}

.cta-sub-heading{
	font-size: 22pt;
	font-weight: bold;
	color: yellow;
    position: relative;
    display: inline-block;
    padding: 0 30px;
    margin-bottom: 5px;
}

.cta-sub-heading:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 2px;
    height: 100%;
    background: yellow;
    transform: rotate(-35deg);
}
       
.cta-sub-heading:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: yellow;
    transform: rotate(35deg);
}