@font-face {
    font-family: LINESeedSans;
    src: 
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_TTF_Th.eot");
    src: 
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Th.woff2") format("woff2"),
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Th.woff") format("woff");
    font-weight: 300
}



@font-face {
    font-family: LINESeedSans;
    src: 
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_TTF_Rg.eot");
    src: 
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Rg.woff2") format("woff2"),
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Rg.woff") format("woff");
}

@font-face {
    font-family: LINESeedSans;
    src: 
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_TTF_Bd.eot");
    src:
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Bd.woff2") format("woff2"),
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Bd.woff") format("woff");
    font-weight: 700
}

@font-face {
    font-family: LINESeedSans;
    src:
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_TTF_Eb.eot");
    src:
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Eb.woff2") format("woff2"),
      url("https://newgrads.line-dev.me/hubfs/NewGrads/LINESeedJP_OTF_Eb.woff") format("woff");
    font-weight: 800
}

:where(ul, ol) {
    list-style: none;
}

.footer_preentry_section {
    max-width: 100%!important;
    width: 100%!important;
    background: #efefef;
    position: relative;
    overflow: hidden;
}

.footer_preentry_section .content_title_wrapper {
    text-align: center;
}

.flow_graph_list {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1000px;
}

.first_flow_graph {
    padding: 0 auto;
    background:#4270ed!important;
    border-radius: 12px;
    border: 4px solid #000;
    position: relative;
    min-width: 190px;
    height: 150px;
}

.flow_graph_list li {
    background: #fff;
    border-radius: 12px;
    border: 4px solid #000;
    position: relative;
    min-width: 190px;
    max-width: 190px;
    height: 150px;
    padding-top: 1em !important;
}


/*
.first_flow_graph:before {
    content: "";
    position: absolute;
    top: 0;
    right: -19px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2258%22%20height%3D%2237%22%20viewBox%3D%220%200%2058%2037%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22path-1-inside-1_1_2%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L57.5655%2018.2843L29.2812%2036.5685L0.996979%2018.2843L29.2812%20-1.73698e-07Z%22%2F%3E%3C%2Fmask%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L57.5655%2018.2843L29.2812%2036.5685L0.996979%2018.2843L29.2812%20-1.73698e-07Z%22%20fill%3D%22%234270ed%22%2F%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L30.9099%20-2.51941L29.2812%20-3.57226L27.6526%20-2.51941L29.2812%20-1.73698e-07ZM57.5655%2018.2843L59.1942%2020.8037L63.0915%2018.2843L59.1942%2015.7649L57.5655%2018.2843ZM29.2812%2036.5685L27.6526%2039.088L29.2812%2040.1408L30.9099%2039.088L29.2812%2036.5685ZM0.996979%2018.2843L-0.631688%2015.7649L-4.52901%2018.2843L-0.631688%2020.8037L0.996979%2018.2843ZM27.6526%202.51941L55.9369%2020.8037L59.1942%2015.7649L30.9099%20-2.51941L27.6526%202.51941ZM55.9369%2015.7649L27.6526%2034.0491L30.9099%2039.088L59.1942%2020.8037L55.9369%2015.7649ZM30.9099%2034.0491L2.62565%2015.7649L-0.631688%2020.8037L27.6526%2039.088L30.9099%2034.0491ZM2.62565%2020.8037L30.9099%202.51941L27.6526%20-2.51941L-0.631688%2015.7649L2.62565%2020.8037Z%22%20fill%3D%22black%22%20mask%3D%22url(%23path-1-inside-1_1_2)%22%2F%3E%3C%2Fsvg%3E") no-repeat right center;
    height: 100%;
    width: 19px;
}

.not_last_flow_graph:before {
    content: "";
    position: absolute;
    top: 0;
    right: -19px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2258%22%20height%3D%2237%22%20viewBox%3D%220%200%2058%2037%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22path-1-inside-1_1_2%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L57.5655%2018.2843L29.2812%2036.5685L0.996979%2018.2843L29.2812%20-1.73698e-07Z%22%2F%3E%3C%2Fmask%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L57.5655%2018.2843L29.2812%2036.5685L0.996979%2018.2843L29.2812%20-1.73698e-07Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M29.2812%20-1.73698e-07L30.9099%20-2.51941L29.2812%20-3.57226L27.6526%20-2.51941L29.2812%20-1.73698e-07ZM57.5655%2018.2843L59.1942%2020.8037L63.0915%2018.2843L59.1942%2015.7649L57.5655%2018.2843ZM29.2812%2036.5685L27.6526%2039.088L29.2812%2040.1408L30.9099%2039.088L29.2812%2036.5685ZM0.996979%2018.2843L-0.631688%2015.7649L-4.52901%2018.2843L-0.631688%2020.8037L0.996979%2018.2843ZM27.6526%202.51941L55.9369%2020.8037L59.1942%2015.7649L30.9099%20-2.51941L27.6526%202.51941ZM55.9369%2015.7649L27.6526%2034.0491L30.9099%2039.088L59.1942%2020.8037L55.9369%2015.7649ZM30.9099%2034.0491L2.62565%2015.7649L-0.631688%2020.8037L27.6526%2039.088L30.9099%2034.0491ZM2.62565%2020.8037L30.9099%202.51941L27.6526%20-2.51941L-0.631688%2015.7649L2.62565%2020.8037Z%22%20fill%3D%22black%22%20mask%3D%22url(%23path-1-inside-1_1_2)%22%2F%3E%3C%2Fsvg%3E") no-repeat right center;
    height: 100%;
    width: 19px;
}
*/
.first_flow_graph:before,.not_last_flow_graph:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #000;
    border-width: 12px;
    margin-top: -12px;
    border-left-width: 20px;
}

.first_flow_graph:after {
    left: calc(100% - 3px);
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #4270ed;
    border-width: 10px;
    margin-top: -10px;
    border-left-width: 18px;
}

.not_last_flow_graph:after {
    left: calc(100% - 3px);
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
    border-left-color: #fff;
    border-width: 10px;
    margin-top: -10px;
    border-left-width: 18px;
}


.last_flow_graph:before {
    content: "";
    position: absolute;
    top: 0;
    right: -19px;
    height: 100%;
    width: 19px;
}

.flow_graph_list-step_title {
    text-align: center;
}

.footer_preentry_content {
    width: 815px;
    background: #4270ed;
    border: 3px solid #000;
    border-radius: 12px;
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
}

.footer_preentry_row {
    text-align: center;
}

.footer_preentry_row strong {
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
    line-height: 1.59375em;
    color: #fff;
    word-break: break-word;
    padding-left: 2em;
    padding-right: 2em;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: initial;
    display: inline-block;
}

.btn.preentry {
    min-width: 220px;
    max-width: 220px;
    display: inline-flex;
}

.footer_preentry_section-illust1, .footer_preentry_section-illust2 {
    position: absolute;
    width: 510px;
    height: 370px;
    overflow: hidden;
    left: calc(50% - 700px);
    bottom: 0;
}

.footer_preentry_section-illust2 {
    left: initial;
    right: calc(50% - 700px);
    bottom: 0;
}

.footer_preentry_section-illust1 img, .footer_preentry_section-illust2 img {
    width: 100%;
}

.first_flow_graph_txt {
    line-height: 140px;
    text-align:center;
    color: #fff;
    font-size: clamp(20px, 1.4vw, 24px);
}

.flow_graph_list-step_title p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1em;
    color: #4270ed;
}

.flow_graph_list-step_title h4 {
    line-height: 1.2;
    color: #1a1a1a;
    word-break: auto-phrase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7ch;　/* 全角5文字 */
}

@media (max-width: 1020px) {
   /* スマホ */
  .footer_preentry_content {
    width: var(--content-width);
    max-width: 90vw;
    height: auto;
    margin-top: 40px;
    padding-top: 60px;
    padding-bottom: 60px;
    margin-bottom: 20.2vw;
  }
  
  .footer_preentry_row strong {
    font-size: 4.9vw;
    font-weight: 700;
    line-height: 1.59375em;
    color: #fff;
    word-break: break-word;
    padding:0;
    margin:0px 2px;
    word-wrap: break-word;
    max-width: 100%;
    box-sizing: initial;
    display: inline-block;
  }
  
  .first_flow_graph:before,.not_last_flow_graph:before {
	  top: 100%;
	  left: 50%;
	  border: solid transparent;
	  content: "";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
    border-color: rgba(0, 0, 0, 0);
	  border-top-color: #000;
	  border-width: 12px;
    border-top-width:20px;
	  margin-left: -12px;
    margin-top:0px;
  }
  
  .first_flow_graph:after{
	  top: calc(100% - 4px);
	  left: 50%;
	  border: solid transparent;
	  content: "";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
	  border-color: rgba(66, 112, 237, 0);
	  border-top-color: #4270ed;
	  border-width: 10px;
    border-top-width:18px;
	  margin-left: -10px;
    margin-top:0px;
  }
  
  .not_last_flow_graph:after{
    top: calc(100% - 4px);
	  left: 50%;
	  border: solid transparent;
	  content: "";
	  height: 0;
	  width: 0;
	  position: absolute;
	  pointer-events: none;
	  border-color: rgba(66, 112, 237, 0);
	  border-top-color: #fff;
	  border-width: 10px;
    border-top-width:18px;
	  margin-left: -10px;
    margin-top:0px;
  }
  
  .flow_graph_list li {
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    border: 4px solid #000;
    position: relative;
    min-width: 80vw;
    max-width: 80vw;
    height: 100px;
  }
  
  .first_flow_graph {
    background:#4270ed!important;
    border-radius: 12px;
    border: 4px solid #000;
    position: relative;
    min-width: 80vw;
    max-width: 80vw;
    height: 100px;
  }
  .first_flow_graph_txt {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color: #fff;
  }
  
    .footer_preentry_section-illust1,.footer_preentry_section-illust2 {
        left: -1.13vw;
        width: 58.67vw;
        height: auto;
        bottom: -17.2vw
    }

    .footer_preentry_section-illust2 {
        left: initial;
        right: 5.13vw;
        width: 23.93vw;
        height: auto;
        bottom: -8.53vw
    }
  
  .footer_preentry_section .btn.preentry {
          justify-content: center;
  }
  
  .flow_graph_list-step_title h4 {
      position: static;
      transform: none;
      width: 100%;
  }
  
}

@media (max-width: 1239px) and (min-width: 1021px) {
  .footer_preentry_section-illust1, .footer_preentry_section-illust2 {
    position: absolute;
    width: 510px;
    height: 370px;
    overflow: hidden;
    left: calc(50% - 57vw);
    bottom: -50px;
}

.footer_preentry_section-illust2 {
    left: initial;
    right: calc(50% - 57vw);
    bottom: -50px;
}

.footer_preentry_section-illust1 img, .footer_preentry_section-illust2 img {
    width: 100%;
}
 } 