@charset "UTF-8";

/*****************
l_whiteFrameWrap
*****************/
.l_whiteFrameWrap{
}
.l_whiteFrame{
  background: #fff;
  margin-bottom: 42px;
}
.l_whiteFrameTtl a{
  display: block;
  background: #092253;
  padding: 13px 0 15px;
  font-size: min(2.5vw,20px);
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  color: #fff;
  transition: .3s;
}
.l_whiteFrameTtl a:hover{
  text-decoration: none;
  filter: brightness(110%) opacity(75%);
}
.l_whiteFrameSttl a{
  display: block;
  background: #6688BB;
  padding: 13px 0 15px;
  font-size: min(2.5vw,20px);
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  color: #fff;
  transition: .3s;
}
.l_whiteFrameSttl a:hover{
  text-decoration: none;
  filter: brightness(110%) opacity(75%);
}
.l_whiteFrameInner{
  padding: 15px 32px;
  font-size: min(2.5vw,20px);
  line-height: 2.5;
  letter-spacing: .05em;
}
.l_whiteFrameInner ol{
  counter-reset: item;
}
.l_whiteFrameInner li:before {
  counter-increment: item;
  content: counter(item)'.';
  padding-right: .5em;
}

.l_whiteFrameLink{
}
.l_whiteFrameLink ul{
  display: flex;
  gap: 40px;
}
.l_whiteFrameLink li{
  width: calc((100% - 40px * 2) / 3);
  font-size: min(2.5vw,20px);
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}
.l_whiteFrameLink li a{
  position: relative;
  display: block;
  width: 100%;
  padding: 28px .8em 28px 0;
  background: #fff;
  border: 1px solid #707070;
  transition: .3s;
}
.l_whiteFrameLink li a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 16px;
  transform: translateY(-50%);
  background: url(../user_guide/common/img/icon_arrow.png) no-repeat;
  background-size: contain;
}
.l_whiteFrameLink li a:hover{
  text-decoration: none;
  filter: brightness(110%) opacity(75%);
}

.l_whiteFrameTop{
  padding-top: 37px;
}
.l_radiusBtn{
  position: relative;
  display: block;
  width: calc((100% - 40px * 2) / 3);
  margin: auto;
  padding: 28px .8em 28px 0;
  font-size: min(2.5vw,20px);
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
  background: #fff;
  border-radius: 60px;
  border: 1px solid #707070;
  transition: .3s;
}
.l_radiusBtn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 7px;
  height: 16px;
  transform: rotate(-90deg) translateX(8px);
  background: url(../user_guide/common/img/icon_arrow.png) no-repeat;
  background-size: contain;
}
.l_radiusBtn:hover{
  text-decoration: none;
  filter: brightness(110%) opacity(75%);
}

@media (max-width: 768px) {
  .l_whiteFrame{
    margin-bottom: 11.25vw;
  }
  .l_whiteFrameTtl a{
    padding: 2.5vw 0 2.6vw;
    font-size: 4vw;
  }
  .l_whiteFrameSttl a{
    padding: 2.5vw 0 2.7vw;
    font-size: 4vw;
  }
  .l_whiteFrameInner{
    padding: 4vw 5vw;
    font-size: 4vw;
    line-height: 1.9;
  }

  .l_whiteFrameLink ul{
    flex-direction: column;
    width: 65.6vw;
    margin: auto;
    gap: 6.56vw;
  }
  .l_whiteFrameLink li{
    width: 100%;
    font-size: 4.37vw;
  }
  .l_whiteFrameLink li a{
    padding: 5.6vw 4.8vw 5.6vw 0;
  }
  .l_whiteFrameLink li a::after{
    right: 4vw;
    width: 2vw;
    height: 4vw;
  }
  
  .l_whiteFrameTop{
    padding-top: 6.56vw;
  }
  .l_radiusBtn{
    width: 65.6vw;
    padding: 5.6vw 1.25vw 5.6vw 0;
    font-size: 4.37vw;
    border-radius: 9.37vw;
  }
  .l_radiusBtn::after{
    right: 8vw;
    width: 2vw;
    height: 4vw;
    transform: rotate(-90deg) translateX(8px);
  }
}