@charset "utf-8";
.hero {
  position: relative;
  height: 280px;
  background: url("assets/high/highly.png") center 25% / cover no-repeat;
}

.page-main {
	  position: relative;
  padding: 2px 27px 6px 32px
}

.features {
  width: 712px;
	margin-bottom: 20px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px
}
.feature-grid article, .support-grid article {
/*  overflow: hidden;*/
  border: 1px solid var(--border);
  border-radius: 5px;
  background: white;
}
.feature-grid article {
/*  height: 173px*/	
}
.feature-grid article > img {
  width: 100%;
  height: 88px;
  object-fit: cover;
}
.feature-grid-high{
  display: flex;
  align-items: center;
  height: 50px;	
margin-bottom: 5px;
}
.feature-grid-high b {
margin: 3px 3px 0 3px;
}
.feature-grid-high b img{
width:49px;
	height:49px;
	object-fit: cover;
}
.feature-grid-high h3{
  color: #0038b7;
  font: 800 16px/1.3 "Yu Mincho", serif;
  padding: 0px;
	margin: 0;
}

.feature-grid p, .support-grid p {
 /*  margin: 0;
 color: #333;
  font-size: 10px;
  line-height: 1.45;*/
  font-weight: 600;
	  margin:5px;
}
.points {
  margin-top: 10px;
}
.points .section-heading {
  width: 705px;
}
.ex-point{
	color: var(--blue);
  font-size: 16px;
  line-height: 1.85;
	font-weight: bold;
}
.point-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: 7px
}
.point-grid article {
/*  height: 134px;*/
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: white
}
.point-grid h3 {
  display: grid;
  place-items: center;
  margin: 0 0 8px;
  background: #0863df;
  color: white;
  font: 800 16px "Yu Mincho", serif;
  text-align: center
}
.point-grid p {
  margin: 0 0px 2px 3px;
/*  color: #333;
  font-size: 10px;
  line-height: 1.75;*/
  font-weight: 700;
  white-space: nowrap;
}
.advantages {
  margin-top: 11px
}
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: 6px
}
.advantage-grid article {
  position: relative;
/*  height: 129px;*/
  padding: 45px 7px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-align: center
}
.advantage-grid b {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0758d9;
  color: white;
  font: 800 16px Arial;
}
.advantage-grid h3 {
/*  min-height: 39px;*/
  margin: 0;
  color: #0039bc;
  font: 800 16px/1.3 "Yu Mincho", serif;
	padding: 10px 0 3px
}
.advantage-grid p {
  margin: 3px 0;
/*  color: #333;
  font-size: 9px;
  line-height: 1.35;*/
  font-weight: 600;
	text-align: left;
}
.support {
  margin-top: 11px
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 6px 0 20px;	
}
.support-grid article {
/*  height: 165px*/
	padding-bottom:5px;
}
.support-grid img {
  width: 100%;
  height: 95px;
  object-fit: cover
}
.support-grid h3 {
  margin: 5px 7px;
  font-size: 16px
}
.support-grid p {
  margin: 0 7px
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none
}
.flow-grid li:not(:last-child):after {
  content: "";
  position: absolute;
  right: -17px;
  top: 50px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 10px solid #0751d8
}
.point-grid article {
  position: relative;
  padding-top: 36px;
  background-position: center 6px;
  background-size: 44px 36px;
  background-repeat: no-repeat;
	margin-bottom: 20px;
}
.point-grid article:nth-child(1) {
  background-image: url("assets/high/high-point-1.jpg")
}
.point-grid article:nth-child(2) {
  background-image: url("assets/high/high-point-2.jpg")
}
.point-grid article:nth-child(3) {
  background-image: url("assets/high/high-point-3.jpg")
}
.point-grid article:nth-child(4) {
  background-image: url("assets/high/high-point-4.jpg")
}
.point-grid article:nth-child(5) {
  background-image: url("assets/high/high-point-5.jpg")
}
.point-grid article:nth-child(6) {
  background-image: url("assets/high/high-point-6.jpg")
}
.point-grid h3 {
/*  height: 29px;*/
  margin: 10px 0 5px;
  background: transparent;
  color: #0039bc;
  font-size: 18px
}
.point-grid p {
 /*font-size: 15px;
  line-height: 1.65;*/
}
.advantage-grid article {
  background-position: center 4px;
  background-size: 42px 42px;
  background-repeat: no-repeat;
		margin-bottom: 20px;
}
.advantage-grid article:nth-child(1) {
  background-image: url("assets/high/high-advantage-1.jpg")
}
.advantage-grid article:nth-child(2) {
  background-image: url("assets/high/high-advantage-2.jpg")
}
.advantage-grid article:nth-child(3) {
  background-image: url("assets/high/high-advantage-3.jpg")
}
.advantage-grid article:nth-child(4) {
  background-image: url("assets/high/high-advantage-4.jpg")
}
.advantage-grid article:nth-child(5) {
  background-image: url("assets/high/high-advantage-5.jpg")
}
.advantage-grid article:nth-child(6) {
  background-image: url("assets/high/high-advantage-6.png")
}
.advantage-grid b {
  left: 5px;
  top: 6px;
  transform: none;
  width: 33px;
  height: 33px;
}

@media(max-width:1024px) {
	.hero {
  position: relative;
  height: 280px!important;
  background: url("assets/high/highly.png") center 25% / cover no-repeat;
}
  .intro, .features, .points .section-heading, .point-grid {
    width: 100%;
    height: auto;
  }

  .point-grid, .advantage-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media(max-width:644px) {
  .feature-grid article,support-grid article {
    margin-bottom: 10px;
  }
  .point-grid, .advantage-grid {
    grid-template-columns: repeat(2, 1fr)!important;
  }	
@media(max-width:414px) {
	.hero-message br{
		display: none;
	}
}