@charset "UTF-8";
.c-section {
  padding: 12rem 0;
}
.c-section:first-of-type {
  padding-top: 0;
}
.c-section:last-of-type {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .c-section {
    padding: 16.2790697674vw 0;
  }
}

.l-pagehead .txt {
  display: none;
}

/* ----------------------------------------------------------------------------------------------------
*	 詳細
* --------------------------------------------------------------------------------------------------*/
.step-page {
  padding-bottom: 16.2rem;
  border-radius: 7rem 7rem 0 0;
  background: #F7F7F7;
}
@media screen and (max-width: 767px) {
  .step-page {
    padding-bottom: 24.4186046512vw;
    border-radius: 6.976744186vw 6.976744186vw 0 0;
  }
}

.main_column {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: -7.2rem;
}
@media screen and (max-width: 767px) {
  .main_column {
    flex-wrap: wrap;
    margin-top: -12.0930232558vw;
  }
}
.main_column .c-inner {
  width: 100%;
}
.main_column .main {
  width: 67.1875%;
  padding: 3.6rem 8rem 7.2rem;
  margin-bottom: 9rem;
  background: #fff;
  border-radius: 7rem 0 7rem 7rem;
}
@media screen and (max-width: 767px) {
  .main_column .main {
    width: 100%;
    padding: 6.0465116279vw 4.6511627907vw 11.6279069767vw;
    margin-bottom: 11.6279069767vw;
    border-radius: 6.976744186vw;
  }
}
.main_column .main .main_in {
  max-width: 100rem;
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .main_column .main .main_in {
    max-width: 100rem;
  }
}
.main_column .main .step_title_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_title_area {
    gap: 2.3255813953vw;
    margin-bottom: 4.6511627907vw;
  }
}
.main_column .main .step_title_area .step {
  max-width: 12.2rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_title_area .step {
    width: 20.9302325581vw;
  }
}
.main_column .main .step_title_area .step img {
  width: 100%;
}
.main_column .main .step_title_area .step_title {
  font-size: 3.5rem;
  font-weight: bold;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_title_area .step_title {
    font-size: 4.8837209302vw;
    line-height: 1.7619047619;
    text-align: center;
  }
}
.main_column .main .step_title_area .title_face {
  max-width: 16.7rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_title_area .title_face {
    width: 23.2558139535vw;
  }
}
.main_column .main .step_title_area .title_face img {
  width: 100%;
}
.main_column .main .step_contet {
  padding-bottom: 5.5rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid #DEDEDE;
  letter-spacing: 0.025em;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet {
    padding-bottom: 13.9534883721vw;
    margin-bottom: 6.976744186vw;
  }
}
.main_column .main .step_contet img {
  max-width: 100%;
  display: block;
}
.main_column .main .step_contet img + img {
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet img + img {
    margin-top: 4.6511627907vw;
  }
}
.main_column .main .step_contet .txt {
  margin: 4rem 0 2.5rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .txt {
    margin: 6.976744186vw 0;
  }
}
.main_column .main .step_contet .txt:first-child {
  margin-top: 0;
}
.main_column .main .step_contet .txt:last-child {
  margin-bottom: 0;
}
.main_column .main .step_contet .txt p, .main_column .main .step_contet .txt li {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .txt p, .main_column .main .step_contet .txt li {
    font-size: 3.2558139535vw;
    line-height: 1.7142857143;
  }
}
.main_column .main .step_contet .txt .mt1em {
  margin-top: 1em;
}
.main_column .main .step_contet .txt .mt2em {
  margin-top: 2em;
}
.main_column .main .step_contet .qa {
  margin: 4rem 0 2rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .qa {
    margin: 6.976744186vw 0;
  }
}
.main_column .main .step_contet .qa dt {
  padding: 1.4rem 4rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: #fff;
  font-weight: 600;
  background: #47A6DC;
  border-radius: 2.9rem;
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .qa dt {
    padding: 2.5581395349vw 4.1860465116vw;
    margin-bottom: 3.488372093vw;
    font-size: 3.488372093vw;
    border-radius: 6.7441860465vw;
  }
}
.main_column .main .step_contet .qa dd {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .qa dd {
    font-size: 3.2558139535vw;
  }
}
.main_column .main .step_contet .qa dd + dt {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .qa dd + dt {
    margin-top: 6.976744186vw;
  }
}
.main_column .main .step_contet .blue_txt {
  color: #47A6DC;
  font-weight: 700 !important;
}
.main_column .main .step_contet .blue_txt * {
  font-weight: 700 !important;
}
.main_column .main .step_contet .shadow {
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .shadow {
    box-shadow: 0 0.6976744186vw 2.3255813953vw rgba(0, 0, 0, 0.16);
  }
}
.main_column .main .step_contet p svg {
  display: inline-block;
  width: 1.3em;
  height: auto;
  vertical-align: middle;
  padding-left: 0.1em;
}
.main_column .main .step_contet .mb6rem {
  margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .step_contet .mb6rem {
    margin-bottom: 6.976744186vw;
  }
}
.main_column .main .pager {
  display: flex;
  justify-content: space-between;
}
.main_column .main .pager a {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-size: 1.8rem;
  font-family: "Outfit", sans-serif;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .main_column .main .pager a {
    gap: 3.488372093vw;
    font-size: 3.7209302326vw;
  }
}
.main_column .main .pager a img {
  width: 7.6rem;
}
@media screen and (max-width: 767px) {
  .main_column .main .pager a img {
    width: 11.6279069767vw;
  }
}
.main_column .side {
  position: relative;
  width: 32.8125%;
  padding: 10.5rem 8rem;
  background: #F7F7F7;
  border-radius: 0 7rem 0 0;
}
@media screen and (max-width: 767px) {
  .main_column .side {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
  }
}
.main_column .side::before {
  content: "";
  position: absolute;
  top: 0;
  left: min(100% - 8rem, 42rem);
  translate: -100% 0;
  width: 2rem;
  height: 5.4rem;
  background: url(../img/kanako/step/line_side.svg) no-repeat center center/contain;
}
@media screen and (max-width: 767px) {
  .main_column .side::before {
    content: none;
  }
}
.main_column .side .flow {
  display: none;
}
@media screen and (max-width: 767px) {
  .main_column .side .flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3.488372093vw;
    width: 100%;
    height: 16.7441860465vw;
    font-size: 3.2558139535vw;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
    background: #47A6DC;
    border-radius: 4.6511627907vw 4.6511627907vw 0 0;
  }
}
.main_column .side .flow:before {
  content: "";
  width: 11.6279069767vw;
  height: 11.6279069767vw;
  background: url(../img/kanako/step/flow_face.png) no-repeat center center/contain;
  background-size: 11.6279069767vw;
  border-radius: 50%;
}
.main_column .side .flow:after {
  content: "";
  position: absolute;
  top: 0;
  right: 6.976744186vw;
  bottom: 0;
  width: 2.7906976744vw;
  height: 1.6279069767vw;
  margin: auto;
  background: url(../img/kanako/step/arrow_w.svg) no-repeat center center/contain;
}
.main_column .side .flow.active {
  background: #8B8B8B;
  border-radius: 0;
}
.main_column .side .flow.active:before {
  background: url(../img/kanako/step/flow_face_active.png) no-repeat center center, #fff;
  background-size: 11.6279069767vw;
}
.main_column .side .flow.active:after {
  transform: rotate(180deg);
}
.main_column .side .side_in {
  position: sticky;
  top: 16rem;
  max-width: 34rem;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in {
    display: none;
    position: fixed;
    top: auto;
    bottom: 16.7441860465vw;
    left: 0;
    max-width: none;
    width: 100%;
    padding: 6.976744186vw 5.5813953488vw;
    margin-right: 0;
    background: #F7F7F7;
    border-radius: 4.6511627907vw 4.6511627907vw 0 0;
    box-shadow: 0 0 1.3953488372vw rgba(0, 0, 0, 0.16);
  }
}
.main_column .side .side_in .side_title {
  margin-bottom: 2.4rem;
  font-size: 2rem;
  color: #47A6DC;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .side_title {
    margin-bottom: 2.3255813953vw;
    font-size: 5.3488372093vw;
  }
}
.main_column .side .side_in .g_txt {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: #7B7B7B;
  line-height: 1.857;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .g_txt {
    margin-bottom: 2.0930232558vw;
    font-size: 2.7906976744vw;
    line-height: 1.66;
  }
}
.main_column .side .side_in .fwb {
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .fwb {
    font-size: 3.2558139535vw;
  }
}
.main_column .side .side_in .page_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 3.5rem 0 0;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav {
    gap: 0.6976744186vw;
    margin: 6.976744186vw 0 0;
  }
}
.main_column .side .side_in .page_nav li {
  width: calc((100% - 1.6rem) / 2);
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav li {
    width: calc((100% - 1.3953488372vw) / 3);
  }
}
.main_column .side .side_in .page_nav li a {
  padding: 0.4rem;
  display: block;
  border-radius: 0.5rem;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav li a {
    padding: 0.4651162791vw;
  }
}
.main_column .side .side_in .page_nav li a img {
  width: 100%;
}
.main_column .side .side_in .page_nav li.current a {
  position: relative;
  background: #fff;
  pointer-events: none;
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav li.current a {
    box-shadow: 0 0.6976744186vw 2.3255813953vw rgba(0, 0, 0, 0.16);
  }
}
.main_column .side .side_in .page_nav li.current a:before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 0.8rem);
  height: calc(100% - 0.8rem);
  border-radius: 0.5rem;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav li.current a:before {
    top: 0.4651162791vw;
    left: 0.4651162791vw;
    width: calc(100% - 0.9302325581vw);
    height: calc(100% - 0.9302325581vw);
    border-radius: 0.6976744186vw;
  }
}
.main_column .side .side_in .page_nav li.current a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 5.8rem;
  aspect-ratio: 58/54;
  background: url(../img/kanako/step/page_nav_current.svg) no-repeat center center/contain;
}
@media screen and (max-width: 767px) {
  .main_column .side .side_in .page_nav li.current a:after {
    width: 13.488372093vw;
  }
}
.main_column .side .side_in .page_nav li:nth-last-of-type(even).current a:before {
  background: rgba(71, 166, 220, 0.85);
}
.main_column .side .side_in .page_nav li:nth-last-of-type(odd).current a:before {
  background: rgba(234, 75, 167, 0.85);
}

.btn_back a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  font-size: 2.2rem;
  font-family: "Outfit", sans-serif;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .btn_back a {
    gap: 3.023255814vw;
    font-size: 3.7209302326vw;
  }
  .btn_back a img {
    width: 9.8rem;
  }
}
@media screen and (max-width: 767px) and (max-width: 767px) {
  .btn_back a img {
    width: 14.8837209302vw;
  }
}

.l-footer {
  margin-top: -7.2rem;
  border-top: none;
  border-radius: 7rem 7rem 0 0;
}
@media screen and (max-width: 767px) {
  .l-footer {
    margin-top: -12.0930232558vw;
    border-radius: 6.976744186vw 6.976744186vw 0 0;
  }
}