@charset "UTF-8";
/*
* join.css
*
*/
/* --------------------------------
  Components
-------------------------------- */
.l-container > .l-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  .c-link_btn {
    margin-top: 4.26667vw;
  }
}

@media (min-width: 768px) {
  .c-link_btn {
    margin-top: 3.21429vw;
  }
}

@media (min-width: 1400px) {
  .c-link_btn {
    margin-top: 45px;
  }
}

.c-btn_pink_arrow {
  border-radius: 9999px;
}
@media (min-width: 768px) {
  .c-btn_pink_arrow {
    margin: auto;
    max-width: 64.28571vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_pink_arrow {
    max-width: 900px;
  }
}
.c-btn_pink_arrow > a {
  padding: 2.66667vw 0; 
  letter-spacing: 0.06em;
  font-size: 6.13333vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .c-btn_pink_arrow > a {
    padding: 1.64286vw 0 1.78571vw; 
    font-size: 2vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_pink_arrow > a {
    padding: 23px 0 25px; 
    font-size: 28px;
  }
}

@media (max-width: 767.98px) {
  .procedure-detail {
    margin-top: 13.33333vw; 
    border-radius: 2.93333vw;
  }
}

@media (min-width: 768px) {
  .procedure-detail {
    margin-top: 6.42857vw; 
    border-radius: 0.71429vw;
  }
}

@media (min-width: 1400px) {
  .procedure-detail {
    margin-top: 90px; 
    border-radius: 10px;
  }
}

.procedure-detail .l-section {
  position: relative;
  z-index: 1;
  margin-top: -2.66667vw;
  padding: 0;
  padding-top: 2.66667vw;
}
@media (min-width: 768px) {
  .procedure-detail .l-section {
    margin-top: -20px;
    padding-top: 20px;
  }
}

.procedure-detail .c-border_yellow::after {
  bottom: -0.4vw;
  height: 0.66667vw;
}
@media (min-width: 768px) {
  .procedure-detail .c-border_yellow::after {
    bottom: -0.21429vw;
    height: 0.35714vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail .c-border_yellow::after {
    bottom: -3px;
    height: 5px;
  }
}

@media (min-width: 768px) {
  .l-section .l-section_title {
    margin: 0 0 2.14286vw;
  }
}

@media (min-width: 1400px) {
  .l-section .l-section_title {
    margin: 0 0 30px;
  }
}

.l-section_title {
  margin: 0 0 8vw;
  text-align: center; 
  color: #1b84c7;
  font-size: 6.4vw;
  line-height: 1.83333;
}
@media (min-width: 768px) {
  .l-section_title {
    margin: 0 0 4.28571vw; 
    font-size: 2.71429vw;
    line-height: 1.97368;
  }
}
@media (min-width: 1400px) {
  .l-section_title {
    margin: 0 0 60px; 
    font-size: 38px;
  }
}
.l-section_title span {
  display: inline-block;
  border-bottom: dotted 1.06667vw #1b84c7;
}
@media (min-width: 768px) {
  .l-section_title span {
    border-bottom: dotted 5px #1b84c7;
  }
}
@media (max-width: 767.98px) {
  .l-section_title em {
    border-bottom: dotted 1.06667vw #1b84c7;
  }
}
@media (min-width: 768px) {
  .l-section_title em {
    border-bottom: dotted 5px #1b84c7;
  }
  .l-section_title em span {
    display: inline;
    border-bottom: none;
  }
}

/* --------------------------------
  パララックスobj
-------------------------------- */
.ul_object {
  position: absolute;
}
.ul_object:nth-child(1) {
  top: 131.2vw;
  left: 0;
  width: 18.53333vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(1) {
    top: 49.14286vw;
    width: 5.64286vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(1) {
    top: 688px;
    width: 79px;
  }
}
.ul_object:nth-child(2) {
  top: 145.33333vw;
  right: 0;
  width: 32.4vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(2) {
    top: 52.28571vw;
    width: 15.35714vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(2) {
    top: 732px;
    width: 215px;
  }
}
.ul_object:nth-child(3) {
  top: 305.33333vw;
  left: 2.13333vw;
  width: 18.8vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(3) {
    top: 96.42857vw;
    left: 6.71429vw;
    width: 10.07143vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(3) {
    top: 1350px;
    left: 94px;
    width: 141px;
  }
}
.ul_object:nth-child(4) {
  top: 608.53333vw;
  right: 0;
  width: 22vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(4) {
    top: 139.42857vw;
    width: 5.57143vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(4) {
    top: 1952px;
    width: 78px;
  }
}
.ul_object:nth-child(5) {
  top: 729.86667vw;
  left: 0;
  width: 29.46667vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(5) {
    top: 192.57143vw;
    width: 15.71429vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(5) {
    top: 2696px;
    width: 220px;
  }
}
.ul_object:nth-child(6) {
  top: 838.13333vw;
  right: 0;
  width: 24.4vw;
}
@media (min-width: 768px) {
  .ul_object:nth-child(6) {
    top: 226.57143vw;
    width: 11.57143vw;
  }
}
@media (min-width: 1400px) {
  .ul_object:nth-child(6) {
    top: 3172px;
    width: 162px;
  }
}

.bl_heading .bl_heading_ttl {
  font-size: 6.66667vw;
}
@media (min-width: 768px) {
  .bl_heading .bl_heading_ttl {
    font-size: 3.14286vw;
  }
}
@media (min-width: 1400px) {
  .bl_heading .bl_heading_ttl {
    font-size: 44px;
  }
}
.bl_heading .bl_heading_ttl .bl_heading_ttl_text {
  display: block;
}
.bl_heading .bl_heading_ttl .bl_heading_ttl_cap {
  font-size: 5.33333vw;
}
@media (min-width: 768px) {
  .bl_heading .bl_heading_ttl .bl_heading_ttl_cap {
    font-size: 2.28571vw;
  }
}
@media (min-width: 1400px) {
  .bl_heading .bl_heading_ttl .bl_heading_ttl_cap {
    font-size: 32px;
  }
}
.bl_heading .bl_heading_ttl small {
  display: block;
  margin-top: 0.3em;
  font-size: 4.26667vw;
}
@media (min-width: 768px) {
  .bl_heading .bl_heading_ttl small {
    font-size: 2vw;
  }
}
@media (min-width: 1400px) {
  .bl_heading .bl_heading_ttl small {
    font-size: 28px;
  }
}

.bl_heading_lead_small {
  margin: 1.33333vw 0 0; 
  font-size: 2.93333vw;
}
@media (min-width: 768px) {
  .bl_heading_lead_small {
    margin: 0.71429vw 0 0; 
    font-size: 1vw;
  }
}
@media (min-width: 1400px) {
  .bl_heading_lead_small {
    margin: 10px 0 0; 
    font-size: 14px;
  }
}

a {
  transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
a:hover {
  opacity: 0.6;
}

.procedure-detail_lead {
  text-align: center;
  letter-spacing: 0.06em;
  color: #000; 
  font-weight: bold;
}
@media (min-width: 768px) {
  .procedure-detail_lead {
    font-size: 1.85714vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_lead {
    font-size: 26px;
  }
}

@media (max-width: 767.98px) {
  .procedure-detail_text {
    margin-top: 4.26667vw;
    text-align: left;
    font-size: 4vw;
  }
}

@media (min-width: 768px) {
  .procedure-detail_text {
    margin-top: 2.14286vw;
    text-align: center;
    font-size: 1.42857vw;
  }
}

@media (min-width: 1400px) {
  .procedure-detail_text {
    margin-top: 30px;
    font-size: 20px;
  }
}

.bg-light-blue {
  padding: 7.33333vw 4vw 10vw; 
  border-radius: 2.66667vw;
  background: #e1f0fc;
  font-size: 4vw;
}
@media (min-width: 768px) {
  .bg-light-blue {
    padding: 2.85714vw 2.85714vw 4.28571vw;
    border-radius: 0.71429vw; 
    font-size: 1.42857vw;
  }
}
@media (min-width: 1400px) {
  .bg-light-blue {
    padding: 40px 40px 60px;
    border-radius: 10px; 
    font-size: 20px;
  }
}

.ul_flow > li {
  position: relative;
  margin-bottom: 10.66667vw;
  padding: 5.33333vw 3.33333vw; 
  border: solid 0.53333vw #1b84c7;
  border-radius: 1.33333vw;
  background-color: #fff;
}
@media (min-width: 768px) {
  .ul_flow > li {
    display: flex;
    margin-bottom: 4.28571vw;
    padding: 2.14286vw 5.21429vw 3.57143vw;
    border: solid 0.14286vw #1b84c7;
    border-radius: 0.85714vw; 
    width: 66.85714vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow > li {
    margin-bottom: 60px;
    padding: 30px 73px 50px;
    border: solid 2px #1b84c7;
    border-radius: 12px; 
    width: 936px;
  }
}
.ul_flow > li::before {
  content: "";
  position: absolute;
  top: -5.86667vw;
  left: -1.33333vw;
  width: 16vw;
  height: 16vw;
  background: center/contain no-repeat url(/img/procedure/badge_step1.png);
}
@media (min-width: 768px) {
  .ul_flow > li::before {
    top: 2.85714vw;
    left: -4vw;
    margin: auto;
    width: 7.42857vw;
    height: 7.42857vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow > li::before {
    top: 40px;
    left: -56px;
    width: 104px;
    height: 104px;
  }
}
.ul_flow > li::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8vw;
  left: 0;
  margin: auto;
  border-width: 4.26667vw 5.6vw 0 5.6vw;
  border-style: solid;
  border-color: #1b84c7 transparent transparent transparent; 
  width: 0;
  height: 0;
}
@media (min-width: 768px) {
  .ul_flow > li::after {
    bottom: -3vw;
    border-width: 1.42857vw 2vw 0 2vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow > li::after {
    bottom: -42px;
    border-width: 20px 28px 0 28px;
  }
}
.ul_flow > li:nth-child(2)::before {
  background-image: url(/img/procedure/badge_step2.png);
}
.ul_flow > li:nth-child(3)::before {
  background-image: url(/img/procedure/badge_step3.png);
}
.ul_flow > li:nth-child(4)::before {
  background-image: url(/img/procedure/badge_step3.png);
}
.ul_flow > li:nth-child(5)::before {
  background-image: url(/img/procedure/badge_step4.png);
}
@media (min-width: 768px) {
  .ul_flow > li.is_step3 .ul_flow_icon {
    height: 15.28571vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow > li.is_step3 .ul_flow_icon {
    height: 214px;
  }
}
@media (max-width: 767.98px) {
  .ul_flow > li:last-child {
    margin-bottom: 0;
  }
}
.ul_flow > li:last-child::after {
  display: none;
}
.ul_flow > li:last-child {
  margin-bottom: 0;
}

.ul_flow_ttl {
  text-align: center;
  letter-spacing: 0.02em;
  color: #1b84c7;
  font-size: 5.33333vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .ul_flow_ttl {
    margin: 0 0 0.71429vw;
    text-align: left; 
    font-size: 1.85714vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_ttl {
    margin: 0 0 10px;
    font-size: 26px;
  }
}
.ul_flow_ttl.ul_flow_ttl__big {
  margin-bottom: 6.93333vw;
  font-size: 7.46667vw;
}
@media (min-width: 768px) {
  .ul_flow_ttl.ul_flow_ttl__big {
    margin: 0;
    font-size: 2.85714vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_ttl.ul_flow_ttl__big {
    margin: 0;
    font-size: 40px;
  }
}
@media (min-width: 768px) {
  .ul_flow_ttl.ul_flow_ttl__big .hp_marker {
    padding-bottom: 4px;
    background: linear-gradient(transparent 90%, #ffd112 90%);
  }
}

@media (max-width: 767.98px) {
  .ul_flow_text {
    margin-top: 2.66667vw;
    font-size: 3.2vw;
  }
}

@media (min-width: 768px) {
  .ul_flow_text {
    font-size: 1.42857vw;
  }
}

@media (min-width: 1400px) {
  .ul_flow_text {
    font-size: 20px;
  }
}

@media (max-width: 767.98px) {
  .ul_flow_img {
    margin-top: 5.46667vw;
  }
}

@media (min-width: 768px) {
  .ul_flow_img {
    margin-top: 2.5vw;
  }
}

@media (min-width: 1400px) {
  .ul_flow_img {
    margin-top: 35px;
  }
}

/* --------------------------------
  ヘルパー / helper
-------------------------------- */
.hp_marker {
  padding: 0 0 6px;
  background: linear-gradient(transparent 86%, #ffd112 86%);
}

.procedure-detail_flow_accordion {
  margin-top: 10.66667vw;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion {
    margin-top: 4.78571vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion {
    margin-top: 67px;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn {
  position: relative;
  cursor: pointer;
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span {
  padding: 1.3em 0 1.5em;
  letter-spacing: 0.1em; 
  font-size: 3.73333vw;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span {
    padding: 1.0em 0 1.2em;
    font-size: 1.71429vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span {
    font-size: 24px;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::before {
  border-radius: 2.66667vw;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::before {
    border-radius: 0.71429vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::before {
    border-radius: 10px;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::after {
  border-radius: 2.66667vw;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::after {
    border-radius: 0.71429vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span::after {
    border-radius: 10px;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn > span:hover::before {
  opacity: 0;
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::before,
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4vw;
  border-radius: 4px; 
  width: 4.66667vw;
  height: 0.66667vw;
  transition: all 0.3s;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background: #fff;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::before,
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::after {
    right: 2.14286vw;
    width: 2.14286vw;
    height: 0.28571vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::before,
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::after {
    right: 30px;
    width: 30px;
    height: 4px;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn::after {
  top: 48%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::before {
  border-radius: 2.66667vw 2.66667vw 0 0;
  box-shadow: none;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::before {
    border-radius: 0.71429vw 0.71429vw 0 0;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::before {
    border-radius: 10px 10px 0 0;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::after {
  border-radius: 2.66667vw 2.66667vw 0 0;
  box-shadow: none;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::after {
    border-radius: 0.71429vw 0.71429vw 0 0;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span::after {
    border-radius: 10px 10px 0 0;
  }
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active > span:hover::before {
  opacity: 0;
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_btn.is-active::after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
.procedure-detail_flow_accordion .procedure-detail_flow_accordion_cont {
  display: none;
  padding: 10.66667vw 2.66667vw 10vw;
  border-radius: 0 0 2.66667vw 2.66667vw; 
  background-color: #fff;
}
@media (min-width: 768px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_cont {
    padding: 4.28571vw 4.28571vw 5vw;
    border-radius: 0 0 0.71429vw 0.71429vw;
  }
}
@media (min-width: 1400px) {
  .procedure-detail_flow_accordion .procedure-detail_flow_accordion_cont {
    padding: 60px 60px 70px;
    border-radius: 0 0 10px 10px;
  }
}
.procedure-detail_flow_accordion .ul_flow li {
  width: 100%;
}

.btn-hokkaido {
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .btn-hokkaido {
    margin-top: 20vw;
    width: 84vw;
  }
}
@media (min-width: 768px) {
  .btn-hokkaido {
    margin-top: 6.21429vw;
    width: 34.28571vw;
  }
}
@media (min-width: 1400px) {
  .btn-hokkaido {
    margin-top: 87px;
    width: 480px;
  }
}

.ul_flow_content_accordion {
  display: -ms-grid;
  display: grid;

  -ms-grid-rows: subgrid;

  grid-template-rows: subgrid;
  -ms-grid-row-span: 2;
  grid-row: span 2;
  gap: 0;
}
@media (max-width: 767.98px) {
  .ul_flow_content_accordion {
    margin-top: 4vw;
  }
}
.ul_flow_content_accordion:first-of-type {
  margin-top: 0;
}

.ul_flow_content_accordion_btn {
  position: relative;
  cursor: pointer;
}
@media (max-width: 767.98px) {
  .ul_flow_content_accordion_btn.is-active {
    border-radius: 2.66667vw 2.66667vw 0 0;
  }
}
@media (max-width: 767.98px) {
  .ul_flow_content_accordion_btn {
    border-radius: 2.66667vw; 

    padding-block: 2.66667vw;
  }
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_btn {
    border-radius: 0.64286vw 0.64286vw 0 0; 
    cursor: text;
    pointer-events: none;

    padding-block: 0.85714vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_accordion_btn {
    border-radius: 9px 9px 0 0; 

    padding-block: 12px;
  }
}
.ul_flow_content_accordion_btn.__blue {
  background-color: #2073a8;
}
.ul_flow_content_accordion_btn.__yellow {
  background-color: #f93;
}
.ul_flow_content_accordion_btn > span {
  display: block;
  text-align: center; 
  color: #fff;
  font-size: 3.73333vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_btn > span {
    font-size: 1.64286vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_accordion_btn > span {
    font-size: 23px;
  }
}
.ul_flow_content_accordion_btn::before,
.ul_flow_content_accordion_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4vw;
  border-radius: 4px; 
  width: 4.66667vw;
  height: 0.66667vw;
  transition: all 0.3s;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  background: #fff;
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_btn::before,
  .ul_flow_content_accordion_btn::after {
    display: none;
  }
}
.ul_flow_content_accordion_btn::after {
  top: 48%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.ul_flow_content_accordion_btn.is-active > span::before {
  border-radius: 2.66667vw 2.66667vw 0 0;
  box-shadow: none;
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_btn.is-active > span::before {
    border-radius: 0.71429vw 0.71429vw 0 0;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_accordion_btn.is-active > span::before {
    border-radius: 10px 10px 0 0;
  }
}
.ul_flow_content_accordion_btn.is-active > span::after {
  border-radius: 2.66667vw 2.66667vw 0 0;
  box-shadow: none;
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_btn.is-active > span::after {
    border-radius: 0.71429vw 0.71429vw 0 0;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_accordion_btn.is-active > span::after {
    border-radius: 10px 10px 0 0;
  }
}
.ul_flow_content_accordion_btn.is-active > span:hover::before {
  opacity: 0;
}
.ul_flow_content_accordion_btn.is-active::after {
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

@media (max-width: 767.98px) {
  .ul_flow_content_accordion_cont {
    display: none;
    padding: 3.6vw 2.93333vw 4.26667vw;
    border-radius: 0 0 2.66667vw 2.66667vw;
  }
}

@media (min-width: 768px) {
  .ul_flow_content_accordion_cont {
    display: flex;
    flex-direction: column;
    padding: 0.71429vw 1.78571vw 1.07143vw;
    border-radius: 0 0 0.64286vw 0.64286vw;

    gap: 1.07143vw;
  }
}

@media (min-width: 1400px) {
  .ul_flow_content_accordion_cont {
    padding: 10px 25px 15px;
    border-radius: 0 0 9px 9px;

    gap: 15px;
  }
}

.ul_flow_content_accordion_cont.__blue {
  background-color: #e1f0fc;
}

.ul_flow_content_accordion_cont.__yellow {
  background-color: #fef7da;
}

.ul_flow_content_accordion_cont_text {
  letter-spacing: 0.02em;
}
@media (max-width: 767.98px) {
  .ul_flow_content_accordion_cont_text {
    margin-bottom: 4.4vw; 
    font-size: 3.2vw;
  }
}
@media (min-width: 768px) {
  .ul_flow_content_accordion_cont_text {
    font-size: 1.42857vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_accordion_cont_text {
    font-size: 20px;
  }
}

.ul_flow_content_grid {
  display: -ms-grid;
  display: grid;
}
@media (max-width: 767.98px) {
  .ul_flow_content_grid {
    margin-top: 6.66667vw;
  }
}
@media (min-width: 768px) {
  .ul_flow_content_grid {
    margin-top: 1.07143vw;

    -ms-grid-columns: 1fr 1.64286vw 1fr;

    grid-template-columns: 1fr 1fr;
    grid-gap: 1.64286vw;
  }
}
@media (min-width: 1400px) {
  .ul_flow_content_grid {
    margin-top: 15px;

    grid-gap: 23px;
  }
}

.l-banner {
  display: flex;
  flex-direction: column; 

  align-items: center;
  justify-content: center;
}
@media (max-width: 767.98px) {
  .l-banner {
    gap: 4.66667vw;
  }
}
@media (min-width: 768px) {
  .l-banner {
    gap: 2.14286vw;
  }
}
@media (min-width: 1400px) {
  .l-banner {
    gap: 30px;
  }
}

.l-campaign_title {
  text-align: center;
  color: #1b84c7;
}
@media (max-width: 767.98px) {
  .l-campaign_title {
    white-space: nowrap;
    font-size: 6vw;
    line-height: calc(62 / 50);
  }
}
@media (min-width: 768px) {
  .l-campaign_title {
    letter-spacing: 0.06em; 
    font-size: 3.14286vw;
    line-height: calc(70 / 44);
  }
}
@media (min-width: 1400px) {
  .l-campaign_title {
    font-size: 44px;
  }
}

.bl_inquiry {
  position: relative;
  background-color: #fce8ee;
}
@media (max-width: 767.98px) {
  .bl_inquiry {
    padding: 11.33333vw 4vw;
    border-radius: 2.66667vw;
  }
}
@media (min-width: 768px) {
  .bl_inquiry {
    padding: 4.28571vw 5.71429vw;
    border-radius: 0.71429vw;
  }
}
@media (min-width: 1400px) {
  .bl_inquiry {
    padding: 60px 80px;
    border-radius: 10px;
  }
}

.bl_inquiry-fukidashi {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media (max-width: 767.98px) {
  .bl_inquiry-fukidashi {
    top: -4.66667vw;
    width: 66.4vw;
  }
}
@media (min-width: 768px) {
  .bl_inquiry-fukidashi {
    top: -2.85714vw;
    width: 31.78571vw;
  }
}
@media (min-width: 1400px) {
  .bl_inquiry-fukidashi {
    top: -40px;
    width: 445px;
  }
}

.l-section .l-inquiry_title {
  color: #eb5985;
}
@media (max-width: 767.98px) {
  .l-section .l-inquiry_title em {
    border-bottom: dotted 1.06667vw #eb5985;
  }
}
@media (min-width: 768px) {
  .l-section .l-inquiry_title em {
    border-bottom: dotted 0.35714vw #eb5985;
  }
}
@media (min-width: 1400px) {
  .l-section .l-inquiry_title em {
    border-bottom: dotted 5px #eb5985;
  }
}

@media (max-width: 767.98px) {
  .bl_lead {
    width: 83.73333vw;
  }
}

@media (min-width: 768px) {
  .bl_lead {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bl_lead_logo {
    width: 9.78571vw;
  }
}

@media (min-width: 1400px) {
  .bl_lead_logo {
    width: 137px;
  }
}

.bl_lead_cont_text {
  letter-spacing: 0.06em;
  color: #1b84c7;
  font-weight: bold;
  line-height: 1;
}
@media (max-width: 767.98px) {
  .bl_lead_cont_text {
    font-size: 5.33333vw;
  }
}
@media (min-width: 768px) {
  .bl_lead_cont_text {
    font-size: 2.57143vw;
  }
}
@media (min-width: 1400px) {
  .bl_lead_cont_text {
    font-size: 36px;
  }
}

@media (max-width: 767.98px) {
  .bl_lead_cont_list {
    margin-top: 2.66667vw;
  }
}

@media (min-width: 768px) {
  .bl_lead_cont_list {
    margin-top: 1.07143vw;
  }
}

@media (min-width: 1400px) {
  .bl_lead_cont_list {
    margin-top: 15px;
  }
}

.bl_lead_cont_list li {
  letter-spacing: -0.01em; 
  font-weight: bold;
}
@media (max-width: 767.98px) {
  .bl_lead_cont_list li {
    font-size: 3.73333vw;
  }
}
@media (min-width: 768px) {
  .bl_lead_cont_list li {
    font-size: 1.71429vw;
  }
}
@media (min-width: 1400px) {
  .bl_lead_cont_list li {
    font-size: 24px;
  }
}

.login {
  background-color: #e1f0fc;
}
@media (max-width: 767.98px) {
  .login {
    padding: 7.33333vw 4vw 10vw; 
    border-radius: 2.66667vw;
  }
}
@media (min-width: 768px) {
  .login {
    padding: 2.85714vw 2.85714vw 4.28571vw; 
    border-radius: 0.71429vw;
  }
}
@media (min-width: 1400px) {
  .login {
    padding: 40px 40px 60px;
    border-radius: 10px;
  }
}

.login_btn {
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .login_btn {
    margin-top: 6.4vw;
  }
}
@media (min-width: 768px) {
  .login_btn {
    margin-top: 2.5vw;
    width: 64.28571vw;
  }
}
@media (min-width: 1400px) {
  .login_btn {
    margin-top: 35px;
    width: 900px;
  }
}
.login_btn a {
  letter-spacing: 0.06em; 
  line-height: 1.2;
}
@media (max-width: 767.98px) {
  .login_btn a {
    font-size: 6.13333vw;
  }
}
@media (min-width: 768px) {
  .login_btn a {
    padding: 2.14286vw 0;
    font-size: 2vw;
  }
}
@media (min-width: 1400px) {
  .login_btn a {
    padding: 30px 0;
    font-size: 28px;
  }
}

@media (max-width: 767.98px) {
  .inquiry_note {
    margin-top: 6.4vw;
    font-size: 4vw;
  }
}

@media (min-width: 768px) {
  .inquiry_note {
    margin-top: 2.14286vw;
    font-size: 1.42857vw;
  }
}

@media (min-width: 1400px) {
  .inquiry_note {
    margin-top: 30px;
    font-size: 20px;
  }
}

.inquiry_note li {
  padding-left: 1em; 
  text-indent: -1em;
}

@media (max-width: 767.98px) {
  .subscribe {
    padding: 10vw 4vw; 
    border: solid 0.53333vw #1b84c7;
    border-radius: 2.66667vw;
  }
}

@media (min-width: 768px) {
  .subscribe {
    padding: 4.28571vw 2.14286vw;
    border: solid 0.14286vw #1b84c7; 
    border-radius: 0.71429vw;
  }
}

@media (min-width: 1400px) {
  .subscribe {
    padding: 60px 30px;
    border: solid 2px #1b84c7; 
    border-radius: 10px;
  }
}

.subscribe_btn {
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .subscribe_btn {
    margin-top: 6.4vw;
  }
}
@media (min-width: 768px) {
  .subscribe_btn {
    margin-top: 2.5vw;
    width: 34.28571vw;
  }
}
@media (min-width: 1400px) {
  .subscribe_btn {
    margin-top: 35px;
    width: 480px;
  }
}

@media (max-width: 767.98px) {
  .bl_notice {
    margin-top: 17.33333vw;
    padding: 10vw 3.73333vw;
    border: solid 0.53333vw #1b84c7; 
    border-radius: 2.66667vw;
  }
}

@media (min-width: 768px) {
  .bl_notice {
    margin-top: 7.85714vw;
    padding: 5.71429vw;
    border: solid 0.14286vw #1b84c7; 
    border-radius: 0.71429vw;
  }
}

@media (min-width: 1400px) {
  .bl_notice {
    margin-top: 110px;
    padding: 80px;
    border: solid 2px #1b84c7; 
    border-radius: 10px;
  }
}

.bl_notice-text {
  text-align: center; 
  font-weight: bold;
}
@media (max-width: 767.98px) {
  .bl_notice-text {
    letter-spacing: 0.02em; 
    font-size: 4vw;
    line-height: calc(42 / 30);
  }
}
@media (min-width: 768px) {
  .bl_notice-text {
    letter-spacing: 0.06em; 
    font-size: 1.85714vw;
    line-height: calc(38 / 26);
  }
}
@media (min-width: 1400px) {
  .bl_notice-text {
    font-size: 26px;
  }
}

.notice_btn {
  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .notice_btn {
    margin-top: 6.66667vw;
  }
}
@media (min-width: 768px) {
  .notice_btn {
    margin-top: 3.21429vw;
    width: 34.28571vw;
  }
}
@media (min-width: 1400px) {
  .notice_btn {
    margin-top: 45px;
    width: 480px;
  }
}
.notice_btn a {
  letter-spacing: 0.06em;
}
@media (max-width: 767.98px) {
  .notice_btn a {
    font-size: 3.6vw;
  }
}
@media (min-width: 768px) {
  .notice_btn a {
    font-size: 1.28571vw;
  }
}
@media (min-width: 1400px) {
  .notice_btn a {
    font-size: 18px;
  }
}

.inquiry_modal {
  position: relative;
  width: 100%; 
  background-color: #fff;

  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .inquiry_modal {
    padding: 9.33333vw 3.73333vw; 
    border-radius: 2.66667vw;
    max-width: 84.26667vw;
  }
}
@media (min-width: 768px) {
  .inquiry_modal {
    padding: 5.57143vw 5.33333vw 10.66667vw; 
    border-radius: 0.71429vw;
    max-width: 75.71429vw;
  }
}
@media (min-width: 1400px) {
  .inquiry_modal {
    padding: 78px 40px 80px; 
    border-radius: 10px;
    max-width: 1060px;
  }
}

@media (max-width: 767.98px) {
  .inquiry_modal_text p {
    text-align: left;
    font-size: 3.73333vw;
    line-height: calc(46 / 30);
  }
}

@media (min-width: 768px) {
  .inquiry_modal_text p {
    text-align: center;
    font-size: 1.42857vw;
    line-height: calc(32 / 20);
  }
}

@media (min-width: 1400px) {
  .inquiry_modal_text p {
    font-size: 20px;
  }
}

.inquiry_modal_text small {
  display: block;
  color: #eb5985;
}
@media (max-width: 767.98px) {
  .inquiry_modal_text small {
    margin-top: 1.33333vw;
    text-align: left;
    font-size: 3.2vw;
    line-height: calc(42 / 26);
  }
}
@media (min-width: 768px) {
  .inquiry_modal_text small {
    margin-top: 0.71429vw;
    text-align: center;
    font-size: 1.14286vw;
    line-height: calc(28 / 16);
  }
}
@media (min-width: 1400px) {
  .inquiry_modal_text small {
    margin-top: 10px;
    font-size: 16px;
  }
}

.c-btn_subscribe {
  position: relative;
  z-index: 5;
  border-radius: 16vw;
  transition: 0.3s;
  background-color: #2073a8;
  box-shadow: 0 1.6vw 2.93333vw rgba(32, 115, 168, 0.4); 

  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .c-btn_subscribe {
    margin-top: 4vw;
  }
}
@media (min-width: 768px) {
  .c-btn_subscribe {
    margin-top: 1.42857vw;
    box-shadow: 0 0.85714vw 1.57143vw rgba(32, 115, 168, 0.4);
  }
}
@media (min-width: 1400px) {
  .c-btn_subscribe {
    margin-top: 20px;
    box-shadow: 0 12px 22px rgba(32, 115, 168, 0.4);
  }
}
.c-btn_subscribe:hover {
  opacity: 0.6;
}
.c-btn_subscribe > a {
  display: block;
  padding: 2.4vw 0 3.2vw;
  transition: 0.3s; 
  text-align: center;
  letter-spacing: 0.2em;
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .c-btn_subscribe > a {
    padding: 0.78571vw 0 0.92857vw;
    border-radius: 2.14286vw;
    letter-spacing: 0.1em; 
    font-size: 1.28571vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_subscribe > a {
    padding: 11px 0 13px;
    border-radius: 30px;
    font-size: 18px;
  }
}
.c-btn_subscribe::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 5.33333vw;
  border-top: 0.66667vw solid #fff;
  border-right: 0.66667vw solid #fff;
  width: 3.33333vw;
  height: 3.33333vw;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
@media (min-width: 768px) {
  .c-btn_subscribe::after {
    right: 1.42857vw;
    border-top: 0.28571vw solid #fff;
    border-right: 0.28571vw solid #fff; 
    width: 0.92857vw;
    height: 0.92857vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_subscribe::after {
    right: 20px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff; 
    width: 13px;
    height: 13px;
  }
}

.c-btn_create {
  position: relative;
  z-index: 5;
  border-radius: 16vw;
  transition: 0.3s;
  background-color: #f93;
  box-shadow: 0 1.6vw 2.93333vw rgba(255, 153, 51, 0.4); 

  margin-inline: auto;
}
@media (max-width: 767.98px) {
  .c-btn_create {
    margin-top: 4vw;
  }
}
@media (min-width: 768px) {
  .c-btn_create {
    margin-top: 1.42857vw;
    box-shadow: 0 0.85714vw 1.57143vw rgba(255, 153, 51, 0.4);
  }
}
@media (min-width: 1400px) {
  .c-btn_create {
    margin-top: 20px;
    box-shadow: 0 12px 22px rgba(255, 153, 51, 0.4);
  }
}
.c-btn_create:hover {
  opacity: 0.6;
}
.c-btn_create > a {
  display: block;
  padding: 2.4vw 0 3.2vw;
  transition: 0.3s; 
  text-align: center;
  letter-spacing: 0.2em;
  color: #fff;
  font-size: 4vw;
  font-weight: bold;
}
@media (min-width: 768px) {
  .c-btn_create > a {
    padding: 0.78571vw 0 0.92857vw;
    border-radius: 2.14286vw;
    letter-spacing: 0.1em; 
    font-size: 1.28571vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_create > a {
    padding: 11px 0 13px;
    border-radius: 30px;
    font-size: 18px;
  }
}
.c-btn_create::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 5.33333vw;
  border-top: 0.66667vw solid #fff;
  border-right: 0.66667vw solid #fff;
  width: 3.33333vw;
  height: 3.33333vw;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
@media (min-width: 768px) {
  .c-btn_create::after {
    right: 1.42857vw;
    border-top: 0.28571vw solid #fff;
    border-right: 0.28571vw solid #fff; 
    width: 0.92857vw;
    height: 0.92857vw;
  }
}
@media (min-width: 1400px) {
  .c-btn_create::after {
    right: 20px;
    border-top: 4px solid #fff;
    border-right: 4px solid #fff; 
    width: 13px;
    height: 13px;
  }
}

.inquiry_subscribe_wrapper {
  display: -ms-grid;
  display: grid;
}
@media (max-width: 767.98px) {
  .inquiry_subscribe_wrapper {
    margin-top: 5.33333vw;

    gap: 3.2vw;
  }
}
@media (min-width: 768px) {
  .inquiry_subscribe_wrapper {
    margin-top: 2.57143vw;

    -ms-grid-columns: 50% 1vw 50%;

    grid-template-columns: 50% 50%;
    gap: 1vw;
  }
}
@media (min-width: 1400px) {
  .inquiry_subscribe_wrapper {
    margin-top: 36px;

    gap: 14px;
  }
}

@media (max-width: 767.98px) {
  .inquiy_subscribe {
    padding: 5.33333vw 3.73333vw; 
    border-radius: 1.42857vw;
  }
}

@media (min-width: 768px) {
  .inquiy_subscribe {
    padding: 3vw 2.14286vw; 
    border-radius: 0.71429vw;
  }
}

@media (min-width: 1400px) {
  .inquiy_subscribe {
    padding: 42px 30px; 
    border-radius: 10px;
  }
}

.inquiy_subscribe.__member {
  background-color: #e1f0fc;
}

.inquiy_subscribe.__notmember {
  background-color: #fef7da;
}

.inquiry_subscribe_text {
  text-align: center;
  letter-spacing: 0.02em; 
  font-weight: bold;
}
@media (max-width: 767.98px) {
  .inquiry_subscribe_text {
    font-size: 4vw;
  }
}
@media (min-width: 768px) {
  .inquiry_subscribe_text {
    font-size: 1.71429vw;
  }
}
@media (min-width: 1400px) {
  .inquiry_subscribe_text {
    font-size: 24px;
  }
}

.inquiry_modal_link {
  letter-spacing: 0.02em;
}
@media (max-width: 767.98px) {
  .inquiry_modal_link {
    margin-top: 5.86667vw;
    font-size: 3.73333vw;
    line-height: calc(46 / 30);
  }
}
@media (min-width: 768px) {
  .inquiry_modal_link {
    margin-top: 2.57143vw;
    text-align: center;
    font-size: 1.35714vw;
    line-height: calc(32 / 20);
  }
}
@media (min-width: 1400px) {
  .inquiry_modal_link {
    margin-top: 36px;
    font-size: 19px;
  }
}

.inquiry_modal .mfp-close {
  background-image: url(/img/join/btn_modal_close.png);
}
@media (max-width: 767.98px) {
  .inquiry_modal .mfp-close {
    top: -8vw;
    right: -9.33333vw;
    width: 20vw;
    height: 20vw;
  }
}
@media (min-width: 768px) {
  .inquiry_modal .mfp-close {
    top: -2.85714vw;
    right: -2.85714vw;
    width: 6.42857vw;
    height: 6.42857vw;
  }
}
@media (min-width: 1400px) {
  .inquiry_modal .mfp-close {
    top: -40px;
    right: -40px;
    width: 90px;
    height: 90px;
  }
}
.inquiry_modal .mfp-close:hover {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .mfp-content {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 100%; 

    padding-block: 13.33333vw;
  }
}

@media (min-width: 768px) {
  .mfp-content {
    padding-block: 7.14286vw;
  }
}

@media (min-width: 1400px) {
  .mfp-content {
    padding-block: 100px;
  }
}

.is-modal-open {
  overflow: hidden;
}

.open-popup-link {
  cursor: pointer;
}