@charset "UTF-8";



/* モバイル時は縦積み */
@media (max-width:767px){
  .step { grid-template-columns:1fr }
}

/*サービスラインナップ*/
.service {
  width: min(100%, 1000px);

}
.service__lead { text-align:center; color:var(--ink-weak); margin-bottom:24px; }
.service-list { display:grid; gap:18px; }

.card{
  gap: clamp(20px, 3vw, 30px);}


@media (max-width:767px){
  /* 「STEP」直下の並び */
  .step{
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .step > div:nth-of-type(1){ order: 1; }
  .step > div:nth-of-type(2){ order: 2; }
  .step > hr.card-divider{ order: 3; }
  .step > div:nth-of-type(3){ order: 4; } 
  .step > div:nth-of-type(4){ order: 5; } 
  .step > .step__band{ order: 6; }

}

/* ==========  badges--list ========== */

.badges--list{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr)); 
  gap: .6em 2em;
  margin: 16px 0 0;
  padding: 0;
  list-style: none; 
  font-size: 17px;
}

.badges--list.badges--tight > li{
  --bullet-gap: 0;}
.badges--list > li{
  --bullet-color: #0aa7a7;
  --bullet-size: 1em; 
  --bullet-gap:  0.55em;
  --bullet-lh:   1.6;
  position: relative;
  padding-left: calc(var(--bullet-size) + var(--bullet-gap));
  line-height: var(--bullet-lh);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  display: flex;
  align-items: center;
}

.badges--list > li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 行の中心に固定（縦ズレ防止） */
  width:  var(--bullet-size);
  height: var(--bullet-size);
  background: var(--bullet-color);
  border-radius: 50%;
  pointer-events: none;
}


li:first-child {
margin-top: 0;
}
/*マーケット帯*/
.market {
width: 100%;
text-align: center;
}
.market .card {
grid-template-columns: none;
display: block;
}
.color-change.card__cta {
    width: 50%;
    background: #666666;
    display: inline-block;
}
.section--security,
.security,
#security {
  width: min(100%, 1000px);
  margin-inline: auto;
  padding-inline: 20px;
}

.section--security .card-list,
.security .card-list,
#security .card-list {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
}

/*card-divide*/
.section.card-list > .card.card--band.step:nth-of-type(2) > .card-divider{
  grid-column: 1 / -1;
}

.initial{ 
  color: #009591;
}
/*label-box*/
.label-box::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: .5em;
}
.triangular-box::after {
  content: "";
  display: inline-block;
    margin-left: .7em;
    margin-right: .5em;
    border-top: 0.7em solid transparent;
    border-bottom: 0.7em solid transparent;
    border-left: .9em solid #fff;
}

.triangular-box{
    display: flex; 
  align-items: center;
}
@media (max-width:767px){
.triangular-box{
margin-top: auto;
padding-bottom: 2%;
}}
.STEP-text{ 
    font-size: 0.85rem;
  font-weight: 400;
}
.STEP-title {
    font-size: 20px;
  }
.block100 {
  height: 100px;
  display: block;
  width: 100%;
  pointer-events: none;
}

/* レスポンシブ列数 */
@media (max-width:767px){
  .badges--list{ 
  grid-template-columns: repeat(4, minmax(0,1fr)); 
  font-size: 13px;
    gap: 0em;}
.color-change.card__cta {
    width: 100%;}
.card {
gap: 22px!important;
}}
@media (max-width:560px){
  .badges--list{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.market {
    padding-bottom: 0px;
}}