.title-24-14 {
  font-size: clamp(14px, 2.34375vw, 24px);
  font-weight: bold;
  line-height: 1.6em;
}
@media screen and (max-width: 767px) {
  .title-24-14 {
    font-size: 14px;
  }
}
.fz-13{
  font-size: 13px;
}
.column02 {
  display: flex;
  justify-content: space-between;
  width: 1024px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
@media screen and (max-width: 1064px) {
  .column02, .column03 {
    width: 100%;
  }
}
.column03 {
  display: flex;
  justify-content: space-between;
  max-width: 896px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}
.color-red{
  color: #f34b4b;
}
.bg-w {
  background-color: #fff !important;
  border-radius: 4px;
  padding: 50px 25px 16px;
  position: relative;
  box-shadow: 0px 6px 20px rgba(51, 51, 51, 0.05);
}
.ml-14{
  margin-left: 14px;
}
@media screen and (min-width: 768px) {
  .mr-40pc{
    margin-right: 40px;
  }
}
@media screen and (min-width: 768px) {
  .mr-16pc{
    margin-right: 16px;
  }
}
@media screen and (max-width: 767px) {
  .list-p{
    padding-left: 1em;
  }
}
.text-note-bold{
  font-weight: bold;
  font-size: 14px;
}
@media screen and (max-width: 1023px) {
  .content {
    padding-top: 46px;
  }
}

/* ========================================================================
     Component: Mainvisual
 ========================================================================== */
.webp .mv-l::before {
  background-image: url("/service/usen-members/assets/images/canva_cp/mainvisual_bg@2x.png.webp");
}
.no-webp .mv-l::before {
  background-image: url("/service/usen-members/assets/images/canva_cp/mainvisual_bg@2x.png");
}
@media screen and (max-width: 767px) {
  .webp .mv-l::before {
    background-image: url("/service/usen-members/assets/images/canva_cp/mainvisual_bg_sp@2x.png.webp");
  }
  .no-webp .mv-l::before {
    background-image: url("/service/usen-members/assets/images/canva_cp/mainvisual_bg_sp@2x.png");
  }
}
@media screen and (min-width: 768px) {
  .mv-l+section {
    max-height: 380px;
  }
}
@media screen and (max-width: 1023px) {
  .mv-l {
    height: 70vw;
  }
}
@media screen and (max-width: 1024px) {
  .mv-l::before {
    height: 70vw;
  }
}
@media screen and (max-width: 500px) {
  .mv-l-inner {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  .mv-l-body-image img {
    width: 40vw;
    min-width: 240px;
  }
}
@media screen and (max-width: 767px) {
  .mv-l-body-image img {
    width: 100%;
  }
}
.mv-l-header {
  width: 460px;
}
@media screen and (max-width: 1024px) {
  .mv-l-header {
    width: 45vw;
  }
}
@media screen and (max-width: 767px) {
  .mv-l-header {
    margin: 0 auto;
    width: 270px;
    transform: translateY(0);
    position: absolute;
  }
}
.mv-l-header::before {
  background: linear-gradient(135deg, #05BCCE 0%, #396FE3 60%, #7C2DE6 100%);
}
@media screen and (max-width: 767px) {
  .mv-l-header-logo img {
    height: 2vw;
    min-height: 20px;
  }
}
.mv-l-header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mv-l-header-title-add {
  background: #333;
  padding: 4px 8px;
  display: inline-block;
  margin-left: 8px;
}
@media screen and (max-width: 767px) {
  .mv-l-header-title-add {
    font-size: 12px;
  }
}
.mv-l-header-logo {
  width: 100%;
}
.mv-l-body01{
  margin: 0 auto;
  width: 1024px;
}
@media screen and (max-width: 1043px){
  .mv-l-body01{
    width: calc(100vw - 40px);
  }
}
.mv-l-body01-contents{
  align-items: center;
  border-radius: 4px;
  width: 100%;
  padding: 40px 64px;
  position: relative;
  top: -300px;
  left: 0;
  background: #fff;
  box-shadow: 10px 10px 10px rgba(51, 51, 51, 0.05)
}
@media screen and (max-width: 767px) {
  .mv-l-body01-contents {
    top: -100px;
    padding: 40px 15px;
  }
}
@media screen and (min-width: 768px) {
  .mv-l-body01-flex{
    display: flex;
    justify-content: space-between;
  }
}
.mv-l-body-text-span{
  background-color: #094c97;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  padding: 0 16px;
  margin-bottom: 8px;
  color: #fff;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .mv-l-body-text-span{
    padding: 0 6px;
  }
}





/* ========================================================================
   Component: about
========================================================================== */
.about-logo{
  margin-bottom: 72px;
}
@media screen and (max-width: 767px) {
  .about-logo{
    margin-bottom: 32px;
  }
}








/* ========================================================================
   Component: flow
========================================================================== */
.flow-box {
  width: 100%;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .flow-box-inner {
    display: inherit;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .flow-box-col-title {
    margin-bottom: 10px;
    text-align: left;
  }
}
.flow-box-col-step-3 {
  background: #596a7d;
  border-radius: 0;
}
@media screen and (max-width: 767px) {
  .flow-box-cols-3 {
    padding-bottom: 16px;
  }
}
.flow-box-col-step-4 {
  background: #36404B;
  border-radius: 0 30px 30px 0;
}
.flow-box-col-wrap-4{
  background: #596A7D;
}
@media screen and (max-width: 767px) {
  .flow-box-col-wrap-4 {
    flex: 1;
  }
}
@media screen and (min-width: 768px) {
  .flow-box-cols-1 {
    width: 19%;
  }
  .flow-box-cols-2 {
    width: 35%;
  }
  .flow-box-cols-3 {
    width: 25%;
  }
  .flow-box-cols-4 {
    width: 21%;
  }
}
@media screen and (min-width: 768px) {
  .flow-box-col-text {
    text-align: center;
  }
}
@media screen and (max-width: 880px) {
  .flow-box [class^="flow-box-cols"] [class^="flow-box-col-wrap"] {
    height: 210px;
  }
}
@media screen and (max-width: 767px) {
  .flow-box [class^="flow-box-cols"] [class^="flow-box-col-wrap"] {
    height: auto;
  }
}


.flow-account-title, .flow-coupon-title{
  width: 100%;
  background: linear-gradient(135deg, #05BCCE 0%, #396FE3 50%, #7C2DE6 100%);
  text-align: center;
  border-radius: 20px;
}
/*
@media screen and (max-width: 1064px) {
  .flow-account-inner, .flow-coupon-inner{
    width: calc(100% + 20px);
  }
}
  */
.flow-account-flex{
  width: 1024px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
@media screen and (max-width: 1080px) {
  .flow-account-flex, .flow-coupon-flex{
    padding-right: 20px;
  }
}
.flow-account-step, .flow-coupon-step{
  width: 100%;
  background: #98A6B5;
  text-align: center;
  border-radius: 20px;
}
.flow-account-step-textarea{
  height: 120px;
}
.flow-account-step-title, .flow-coupon-step-title{
  font-size: 16px;
  font-weight: bold;
  color: #094c97;
  margin-bottom: 8px;
}
.flow-account-step-text, .flow-coupon-step-text{
  font-size: 13px;
  line-height: 1.6em;
}
.flow-coupon-flex{
  width: 590px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.flow-coupon-step-textarea{
  height: 70px;
}
.flow-catch {
  display: inline-block;
  border-radius: 100%;
  position: relative;
  margin: 0 auto 40px;
  padding: 0 3px 0 0;
}
.flow-catch span {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background: #094c97;
  border-radius: 100%;
  position: relative;
  padding: 8px 8px;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4em;
}
.flow-catch span:before {
  content: "";
  border-style: solid;
  border-width: 14px 8px 0 8px;
  border-color: #094c97 transparent transparent transparent;
  position: absolute;
  left: 55px;
  bottom: -8px;
  z-index: 1;
  transform: rotate(120deg);
}
.flow-code{
  width: 107px;
  height: 107px;
}
.col-160{
  width: 160px;
  text-align: center;
}
.icon-exclamation:after{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(/service/usen-members/assets/images/canva_cp/exclamation.svg);
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-bottom: 4px;
  margin-left: 5px;
}
.flow-arrow{
  align-self: center;
}



/*　iphoneのスクロールバー表示調整　*/

.scroll__inner{
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */
}
.scroll__inner::-webkit-scrollbar {
  /* Chrome, Safari 対応 */
  display: none;
}
.simplebar-scrollbar::before {
  background: #D9D9D9 !important;
  border-radius: 0;
  margin-left: 3px;
  margin-top: 2px;
}
.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1 !important;
}
.simplebar-track {
  width: calc(100% - 20px) !important;
}






/* ========================================================================
     Component: function
 ========================================================================== */
/*
.function-content {
  border-radius: 4px;
  padding: 50px 25px 16px;
  position: relative;
  box-shadow: 0px 6px 20px rgba(51, 51, 51, 0.05);
}
*/
.function-img img {
  max-width: 232px;
  height: 130px;
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  margin: auto;
}
.function-mt-64-135 {
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .function-mt-64-135 {
    margin-top: 135px;
  }
}






/* ========================================================================
     Component: creative-menu
========================================================================== */
.creative-menu-bg{
  position: relative;
  overflow: hidden;
}
.creative-menu-bg::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 427px;
  background-image: url(/service/usen-members/assets/images/canva_cp/point_bg@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .creative-menu-bg::before {
    background-image: url(/service/usen-members/assets/images/canva_cp/point_bg_sp@2x.png);
    height: 246px;
  }
}

.creative-menu-column{
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .creative-menu-column{
    margin-top: 40px;
  }
}
.creative-menu-movie img {
  width: 496px;
  height: auto;
}




.loop-infinity {
  width: 100%;
  max-width: 5590px;
  margin: auto;
}
.loop_wrap_pc {
  display: flex;
  width: 5590px;
  height: 300px;
}
@media screen and (max-width: 767px) {
  .loop_wrap_pc {
    display: none;
  }
}
.loop_wrap_pc img {
  width: auto;
  height: 100%;
}
.loop_wrap_pc img:first-child {
  animation: loopTo 200s -100s linear infinite;
}
.loop_wrap_pc img:last-child {
  animation: loopFrom 200s linear infinite;
}
.loop_wrap_sp {
  display: flex;
  width: 2795px;
  height: 150px;
}
@media screen and (min-width: 768px) {
  .loop_wrap_sp {
    display: none;
  }
}
.loop_wrap_sp img {
  width: auto;
  height: 100%;
}
.loop_wrap_sp img:first-child {
  animation: loopTo 200s -100s linear infinite;
}
.loop_wrap_sp img:last-child {
  animation: loopFrom 200s linear infinite;
}

@keyframes loopTo {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loopFrom {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}







/* ========================================================================
     Component: Contact
========================================================================== */

.canvasupport-contact::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 660px;
  background: #dde2e7 !important;
  background-size: cover;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .canvasupport-contact::before {
    height: 930px;
  }
}
.canvasupport-contact-area{
  width: 1024px;
  border: 1px solid #cdd6dd;
  padding: 64px;
  background: #fff;
  margin-top: 40px;
  border-radius: 4px;
}
@media screen and (max-width: 1064px) {
  .canvasupport-contact-area {
    width: 100%;
    padding: 40px 20px;
    margin-top: 24px;
  }
}
.col-432 {
  max-width: 432px;
  width: 40.8vw;
}
@media screen and (max-width: 767px) {
  .col-432 {
    max-width: 100%;
    width: 100%;
  }
}
.information-center{
  border-top: 1px solid #cdd6dd;
}