@charset "utf-8";


/* common.css
---------------------------------------------*/

.freeWrap	h2{ 
  background-color: #152c81; 
  color: #fff; 
  font-size: 22px;
  font-weight: 700;
	line-height: 1.0;
  padding: 12px 20px; 
  margin: 50px auto 40px; 
}

.catch{
	color: #152c81;
  margin-bottom: 50px;
}
.catch li{
  font-size: 18px;
	font-weight: 700;
	position: relative;
	padding-left: 1em;
  line-height: 1.4;
}
.catch li:before{
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	background-color: #152c81;
	border-radius: 50%;
	position: absolute;
	top: 0.6em;
	left: 0;
	margin-left: 0.2em;
}
.catch li:not(:last-child){
  margin-bottom: 20px;
}
.catch li span{
	color: #e6960b;
}
.catch li small{
  color: #131b38;
  font-size: 13px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
	.catch li{
		font-size: 22px;
	}
  .catch li small{
    font-size: 14px;
  }
}

/*  common.css END
---------------------------------------------*/

@media screen and (max-width: 1439px) {
  .display_lg{
    display: none;
  }
}
@media screen and (min-width: 1440px) {
  .display_lg{
    display: block;
  }
}

.features{
  display: flex;
  align-items: center;
  column-gap: 40px;
}

.useBox{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lineup{
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
.lineup .col{
  text-align: center;
  margin-bottom: 30px;
}
.lineup a:hover .textlink{
  opacity: 0.6;
}
.lineup picture{
  margin-bottom: 20px;
}

@media screen and (max-width: 599px) {
  .useBox{
    flex-direction: column;
    align-items: center;
	}
  .useBox .col:not(:last-of-type){
    margin-bottom: 10px;
  }
}
@media screen and (min-width: 600px) and (max-width: 767px) {
  .useBox .col{
		width: calc( (100% - 10px) / 2 );
	}
}
@media screen and (max-width: 767px) {
  .features .col-R img{
    max-width: 345px;
    width: 100%;
  }
  .useBox img{
    max-width: 345px;
    width: 100%;
  }
  .lineup{
    justify-content: space-around;
    column-gap: 15px;
  }
  .lineup img{
    max-width: 165px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .features .col-R img{
    max-width: 310px;
    width: 310px;
  }
  .useBox .col{
    width: calc( (100% - 20px) / 3)    
  }
  .lineup{
    column-gap: 10px;
  }
  .lineup .col{
    width: calc( (100% - 50px) / 6)
  }
}
@media screen and (max-width: 1279px) {
  .features{
    flex-direction: column;
  }
}
@media screen and (min-width: 1280px) {
  .features .col-L{
    width: calc( 100% - 40px -310px );
  }
  .features .col-R{
    width: 310px;
  }
}