@charset "UTF-8";
/* CSSリセット
--------------------------------------------------------------------------------------------------------------------------------------------- */
.lp_main body, .lp_main div, .lp_main dl, .lp_main dt, .lp_main dd, .lp_main ul, .lp_main ol, .lp_main li, .lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6, .lp_main pre, .lp_main form, .lp_main fieldset, .lp_main input, .lp_main textarea, .lp_main p, .lp_main blockquote, .lp_main th, .lp_main td {
  margin: 0;
  padding: 0;
}

.lp_main ol, .lp_main ul {
  list-style: none;
}

.lp_main fieldset, .lp_main img {
  border: 0;
}

.lp_main abbr, .lp_main acronym {
  border: 0;
}

.lp_main address, .lp_main caption, .lp_main cite, .lp_main code, .lp_main dfn, .lp_main em, .lp_main strong, .lp_main th, .lp_main var {
  font-style: normal;
  font-weight: normal;
}

.lp_main strong {
  font-weight: bold;
}

.lp_main h1, .lp_main h2, .lp_main h3, .lp_main h4, .lp_main h5, .lp_main h6 {
  font-size: 1em;
  font-weight: normal;
}

.lp_main *, .lp_main *:before, .lp_main *:after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_main .clearfix::after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

/* COMMON */
html {
  font-size: 16px;/* w:1345px,f:16px */
  &.overflow_hidden {
    overflow: hidden;
  }
}
@media screen and (max-width: 750px) {
  html {
    font-size: 3.46vw;/* w:750px,f:26px */
  }
}
.lp_main body {
  background-color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: #333333;
  line-height: 1.75;
  letter-spacing: 0.04em;
}
.lp_main a {
  color: inherit;
  text-decoration: none;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
@media screen and (min-width: 751px) {
  .lp_main a[href^="tel:"] {
    pointer-events: none;
  }
}
.lp_main picture {
  display: block;
}
.lp_main img {
  display: block;
  max-width: 100%;
  width: 100%;
}
.lp_main svg:not([fill]) {
  fill: currentColor;
}
.lp_main svg:not(:root) {
  overflow: hidden;
}
.lp_main svg {
  display: inline-block;
  * {
    transition-duration: 0s;
  }
}
.lp_main .hidden {
  display: none !important;
}
.lp_main .show {
  display: block !important;
}

/* プレースホルダー */
/* Chrome, Safari 5+, Opera 15+, iOS, Android */
.lp_main ::-webkit-input-placeholder {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #c3c3c3;
}
/* Firefox 18- */
.lp_main :-moz-placeholder {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #c3c3c3;
  opacity: 1;
}
/* Firefox 19+ */
.lp_main ::-moz-placeholder {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #c3c3c3;
  opacity: 1;
}
/* IE 10+ */
.lp_main :-ms-input-placeholder {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #c3c3c3;
}
/* IE Edge */
.lp_main ::-ms-input-placeholder {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: #c3c3c3;
}

/* フォーム */
.lp_main input,
.lp_main textarea {
  display: block;
  outline: none;
  width: 100%;
  padding: 0.625rem;
  background: #fff;
  border: solid 1px #e0e0e0;
  border-radius: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #333;
  &:focus {
    border-color: #f18d1e;
  }
}
.lp_main input {
  height: 3.75rem;
}
.lp_main textarea {
  resize: none;
}
.lp_main select {
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: solid 1px #e0e0e0;
  outline: none;
  background: #fff;
  background-image: none;
  box-shadow: none;
  appearance: none;
  width: 100%;
  color: #333;
  height: 3rem;
  padding: 0 2rem 0 0.625rem;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 700;
  &::-ms-expand {
    display: none;
  }
}
.lp_main .select_box {
  position: relative;
  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 0.625rem;
    aspect-ratio: 1/0.73;
    background: url(../images/icon_equilateral_triangle_orange.png) center / contain no-repeat;
  }
}

.lp_main button,
.lp_main input[type=submit],
.lp_main input[type=button] {
  height: auto;
  appearance: button;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: inherit;
  cursor: pointer;
  transition-duration: 0.3s;
  white-space: normal;
}
.lp_main button::-webkit-search-decoration,
.lp_main input[type=submit]::-webkit-search-decoration,
.lp_main input[type=button]::-webkit-search-decoration {
  display: none;
}
.lp_main button:focus,
.lp_main input[type=submit]:focus,
.lp_main input[type=button]:focus {
  outline-offset: -2px;
  outline: none;
}

.lp_main .inner {
  padding-inline: 14.27%;
}
@media screen and (max-width: 750px) {
  .lp_main .inner {
    padding-inline: 4.66%;
  }
}
.lp_main .bg_l_orange {
  background-color: #fef4eb;
  &.line_wave_before {
    position: relative;
    &::before {
      content: " ";
      position: absolute;
      top: -2.52vw;
      left: 0;
      right: 0;
      width: 100%;
      aspect-ratio: 1/0.068;
      background: url(../images/line_wave_l_orange.png) center / 100% repeat-x;
      pointer-events: none;
      z-index: 1;
    }
    >* {
      position: relative;
      z-index: 2;
    }
  }
  &.line_wave_after {
    position: relative;
    &:after {
      content: " ";
      position: absolute;
      bottom: -26px;
      left: 0;
      right: 0;
      width: 100%;
      aspect-ratio: 1/0.068;
      background: url(../images/line_wave_l_orange.png) center / 100% repeat-x;
      pointer-events: none;
      z-index: 1;
    }
    >* {
      position: relative;
      z-index: 2;
    }
  }
}
@media screen and (max-width: 750px) {
  .lp_main .bg_l_orange {
    &.line_wave_before {
      &::before {
        top: -3.4vw;
      }
    }
    &.line_wave_after {
      &:after {
        bottom: -3.4vw;
      }
    }
  }
}

.lp_main .campaign_simulation_wrap {
  padding: 0 4.98% 10%;
  background-color: #fff;
}
.lp_main .campaign_simulation_grid {
  /* display: flex;
  flex-wrap: wrap;
  margin: -5rem 0 0 -6.05%; */
  margin-top: -5rem;
}
.lp_main .campaign_simulation_content {
  position: relative;
  width: 100%;
  margin: 7rem 0 0; /* PCは大きめ */
  &:nth-child(even) {
    &::before {
      content: " ";
      position: absolute;
      left: 50%;
      bottom: 100%;
      top: auto;
      right: auto;
      transform: translateX(-50%) rotate(90deg);
      width: 1.86%;
      margin: 0 0 7.4%;
      background: url(../images/icon_triangle_orange_right.png) center/ contain no-repeat;
      aspect-ratio: 1 / 2;
    }
  }
  &#step_01 {
    .campaign_simulation_title {
      position: absolute;
      top: 25.72%;
      left: 5.99%;
      width: 54.67%;
      text-align: left;
    }
    .campaign_simulation_area {
      padding-left: 6.34%;
    }
  }
  .question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -1.68rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7rem;
    aspect-ratio: 1/1;
    background-color: #f18d1e;
    border-radius: 50%;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    text-align: center;
    z-index: 1;
  }
}

@media screen and (max-width: 750px) {
  .lp_main .campaign_simulation_content {
    margin: 2.57rem 0 0;
  }
}
.lp_main .campaign_simulation_content_inner {
  position: relative;
  height: 100%;
  padding: 15% 0 0;
  background-color: #fef4eb;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  &::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.56rem;
    background-color: #f18d1e;
    pointer-events: none;
  }
}
.lp_main .campaign_simulation_title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.67;
  z-index: 1;
  text-align: center;
  .title_inner {
    display: inline-block;
    position: relative;
    padding-left: 3.41em;
    &::before {
      content: " ";
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 3.08em;
      aspect-ratio: 1/1;
      background: center / contain no-repeat #fff;
      border: solid 4px #f18d1d;
      border-radius: 50%;
    }
  }
  .icon_area {
    &::before {
      background-image: url(../images/icon_area.png);
    }
  }
  .icon_home {
    &::before {
      background-image: url(../images/icon_home.png);
    }
  }
}
.lp_main .campaign_simulation_area {
  padding: 2.25rem 5.3%;
  .map_area {
    position: relative;
    width: 100%;
    aspect-ratio: 1/0.827;
    button {
      position: absolute;
      display: block;
      background-color: #fff;
      border: solid 0.25rem #f18d1d;
      border-radius: 0.75rem;
      box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.13);
      font-size: 1.3rem;
      font-weight: 700;
      color: #EB5A25;
      line-height: 1.5;
      text-align: center;
      &:hover,&.active {
        background-color: #f18d1d;
        color: #fff;
      }
    }
    .area_01 {
      top: 0;
      right: 0;
      width: 27.72%;
      aspect-ratio: 1/0.72;
    }
    .area_02 {
      top: 25.35%;
      right: 9.3%;
      width: 19%;
      aspect-ratio: 1/1.03;
    }
    .area_03 {
      top: 50%;
      right: 9.3%;
      width: 19%;
      aspect-ratio: 1/0.76;
    }
    .area_04 {
      top: 37.55%;
      right: 29.1%;
      width: 23.96%;
      aspect-ratio: 1/0.56;
    }
    .area_05 {
      top: 55.02%;
      right: 29.1%;
      width: 18.81%;
      aspect-ratio: 1/0.92;
    }
    .area_06 {
      bottom: 16.74%;
      left: 36.63%;
      width: 14.65%;
      aspect-ratio: 1/1.6;
    }
    .area_07 {
      bottom: 31.33%;
      left: 18.81%;
      width: 17.02%;
      aspect-ratio: 1/0.67;
    }
    .area_08 {
      bottom: 16.74%;
      left: 18.81%;
      width: 17.02%;
      aspect-ratio: 1/0.66;
    }
    .area_09 {
      bottom: 17.22%;
      left: 0;
      width: 17.02%;
      aspect-ratio: 1/1.046;
    }
    .area_10 {
      bottom: 0;
      left: 0;
      width: 17.02%;
      aspect-ratio: 1/0.79;
    }
  }
  .people_area {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 -2.12rem 0;
    button {
      width: 47.43%;
      aspect-ratio: 1/0.77;
      margin: 0 0 2.12rem 0;
      background-color: #fff;
      border: solid 0.25rem #f18d1d;
      border-radius: 0.75rem;
      box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.13);
      font-size: 1.2rem;
      font-weight: 700;
      color: #333;
      line-height: 1.5;
      text-align: center;
      &:hover,&.active {
        background-color: #f18d1d;
        color: #fff;
        .icon {
          &.icon_people01 {
            background-image: url(../images/icon_people01_white.png);
          }
          &.icon_people02 {
            background-image: url(../images/icon_people02_white.png);
          }
          &.icon_people03 {
            background-image: url(../images/icon_people03_white.png);
          }
          &.icon_people04 {
            background-image: url(../images/icon_people04_white.png);
          }
          svg {
            color: #fff;
            stroke: #fff;
            fill: #fff;
          }
        }
      }
      .icon {
        display: block;
        width: 4.5rem;
        aspect-ratio: 1/0.84;
        margin: 0 auto;
        background: center / contain no-repeat;
        &.icon_people01 {
          background-image: url(../images/icon_people01.png);
        }
        &.icon_people02 {
          background-image: url(../images/icon_people02.png);
        }
        &.icon_people03 {
          background-image: url(../images/icon_people03.png);
        }
        &.icon_people04 {
          background-image: url(../images/icon_people04.png);
        }
        svg {
          width: 100%;
          aspect-ratio: 1/0.84;
          color: #f18d1d;
          stroke: #f18d1d;
          fill: #f18d1d;
        }
      }
    }
  }
}

.lp_main .campaign_simulation_result_content {
  /* display: none; */
  position: relative;
  margin-bottom: 10%;
  padding: 16% 5.27% 6%;
  &::before {
    content: " ";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1/0.109;
    background: url(../images/divider_white.svg) bottom center / cover no-repeat;
  }
  .apply_btn {
    display: block;
    width: 90%;
    margin: 5% auto 0 auto;
  }
}
.lp_main .campaign_simulation_result_message {
  margin-bottom: 2.17vw;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.lp_main .campaign_compared_company_flex {
  display: block;
  margin-bottom: 10.4vw;
  max-width: 690px;
  margin: 0 auto 5% auto;
  padding: 10% 5%;
  background-color: #fff;
  border-radius: 8px;
  border: 2px solid #f0830f;
}
.lp_main .campaign_compared_savings {
  position: relative;
  margin-bottom: 8%;
  .number {
    position: absolute;
    bottom: 31%;
    right: 11%;
    font-family: "Roboto", sans-serif;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #eb5a24;
    span {
      font-size: 0.56em;
    }
  }
}
.lp_main .campaign_compared_company {
  position: relative;
  .number {
    position: absolute;
    font-family: "Roboto", sans-serif;
    font-size: 4.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #f18d1e;
    span {
      font-size: 0.55em;
    }
    &.looop {
      bottom: 33%;
      right: 73.41%;
      font-size: 2.9rem;
    }
    &.ichiba {
      bottom: 17%;
      right: 18.5%;
      color: #f6e85d;
      text-shadow:
        3px 0 0 #f18d1d,
        2.8px 1.1px 0 #f18d1d,
        2.1px 2.1px 0 #f18d1d,
        1.1px 2.8px 0 #f18d1d,
        0 3px 0 #f18d1d,
        -1.1px 2.8px 0 #f18d1d,
        -2.1px 2.1px 0 #f18d1d,
        -2.8px 1.1px 0 #f18d1d,
        -3px 0 0 #f18d1d,
        -2.8px -1.1px 0 #f18d1d,
        -2.1px -2.1px 0 #f18d1d,
        -1.1px -2.8px 0 #f18d1d,
        0 -3px 0 #f18d1d,
        1.1px -2.8px 0 #f18d1d,
        2.1px -2.1px 0 #f18d1d,
        2.8px -1.1px 0 #f18d1d;
    }
  }
}
.lp_main .campaign_price_info_wrap {
  border-radius: max(0.38rem,5px);
  overflow: hidden;
  isolation: isolate;
}
.lp_main .campaign_price_info_title {
  position: relative;
  padding: 0.625rem 4.125rem;
  background-color: #f18d1e;
  border: solid max(0.15rem,2px) #f18d1e;
  border-radius: max(0.38rem,5px) max(0.38rem,5px) 0 0;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  cursor: pointer;
  text-align: center;
  &.active {
    &::before {
      transform: translateY(-50%) rotate(-90deg);
      opacity: 0;
    }
    &::after {
      transform: translateY(-50%) rotate(0);
    }
  }
  &::before,&::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 1.81rem;
    transform: translateY(-50%);
    width: 1.375rem;
    height: max(0.15rem,2px);
    background-color: #fff;
    transition-duration: 0.3s;
  }
  &::after {
    transform: translateY(-50%) rotate(90deg);
  }
}
.lp_main .campaign_price_info_content {
  display: none;
  padding: 3.12rem 7.7% 5.62rem;
  background-color: #fff;
  border: solid max(0.15rem,2px) #f18d1e;
  border-radius: 0 0 max(0.38rem,5px) max(0.38rem,5px);
}
.lp_main .campaign_price_info_table_group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &:not(:last-child) {
    margin-bottom: 4.75vw;
  }
  .campaign_monthly_fee_table {
    width: 48.14%;
  }
}
.lp_main .campaign_monthly_fee_table {
  width: 100%;
  font-size: 1rem;
  text-align: right;
  line-height: 1.5;
  thead {
    font-size: 1rem;
    color: #f18d1e;
    th {
      padding: 0 0 0.64rem;
      &:first-child {
        text-align: center;
      }
    }
  }
  tbody {
    th,td {
      &:first-child {
        width: 3.25rem;
        padding-inline: 0.31rem;
      }
      &:last-child {
        padding-inline: 0.43rem;
      }
    }
  }
  tr {
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-bottom: dotted 2px #F18D1D;
    }
  }
  th,td {
    padding: 0.64rem 0.43rem 0.64rem 2.25rem;
    font-weight: 700;
  }
  .number {
    font-size: 1.33em;
  }
}
.lp_main .campaign_disclosure_block {
  &:not(:last-child) {
    margin-bottom: 4.75vw;
  }
}
.lp_main .campaign_disclosure_title {
  margin-bottom: 1.48vw;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.77;
  color: #f18d1d;
  text-align: center;
}
.lp_main .campaign_disclosure_content {
  font-size: 1rem;
  font-weight: 700;
  line-height: 2;
}
@media screen and (max-width: 750px) {
  .lp_main .campaign_simulation_section {
    padding-top: 3.46vw;
    .inner {
      padding-inline: 7.06%;
    }
    .headline {
      margin-bottom: 2.13vw;
      font-size: 1.38rem;
    }
  }
  .lp_main .campaign_simulation_wrap {
    padding: 0 7.06% 2.93vw;
  }
  .lp_main .campaign_simulation_grid {
    margin: -3.57rem 0 0;
  }
  .lp_main .campaign_simulation_content {
    width: 100%;
    min-height: 73.33vw;
    margin: 3.57rem 0 0;
    &:nth-child(even) {
      &::before {
        top: auto;
        right: auto;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%) rotate(90deg);
        width: 1.86%;
        margin: 0 0 7.4%;
      }
    }
    &#step_01 {
      .campaign_simulation_title {
        top: 24.72%;
        left: 6.82%;
        width: 50.93%;
        font-size: 1rem;
        .title_inner {
          padding-left: 3.19em;
          &::before {
            width: 2.84em;
          }
        }
      }
      .campaign_simulation_area {
        padding-left: 6.34%;
      }
    }
    .question {
      top: -0.77rem;
      width: 4.19rem;
      font-size: 1.34rem;
    }
  }
  .lp_main .campaign_simulation_content_inner {
    padding: 14.13vw 0 0;
    &::before {
      height: 0.5rem;
    }
  }
  .lp_main .campaign_simulation_title {
    font-size: 1.11rem;
    line-height: 1.46;
    .title_inner {
      padding-left: 3.51em;
      &::before {
        width: 3.17em;
        border-width: max(0.15rem,2px);
      }
    }
  }
  .lp_main .campaign_simulation_area {
    padding: 2.3rem 6.22% 1.46rem;
    &:has(.map_area) {
      padding-block: 0 1.38rem;
    }
    .map_area {
      width: 87.8%;
      margin-left: 6.53%;
      button {
        border-width: max(0.15rem,2px);
        border-radius: max(0.38rem,5px);
        box-shadow: 0 0 max(0.23rem,3px) rgba(0, 0, 0, 0.13);
        font-size: 0.7rem;
      }
    }
    .people_area {
      margin: 0 0 -1.46rem 0;
      padding-inline: 0;
      button {
        width: 47.3%;
        margin: 0 0 1.46rem 0;
        border-width: max(0.15rem,2px);
        border-radius: max(0.38rem,5px);
        box-shadow: 0 0 max(0.23rem,3px) rgba(0, 0, 0, 0.13);
        font-size: 0.9rem;
        .icon {
          width: 3.23rem;
        }
      }
    }
  }
  
  .lp_main .campaign_simulation_result_content {
    padding: 14.66vw 4.66% 9.06vw;
  }
  .lp_main .campaign_simulation_result_message {
    margin-bottom: 6.66vw;
    font-size: 1.53rem;
  }
  .lp_main .campaign_compared_company_flex {
    margin-bottom: 6.4vw;
  }
  .lp_main .campaign_compared_savings {
    width: 100%;
    .number {
      bottom: 31%;
      right: 12%;
      font-size: 4.3rem;
    }
  }
  .lp_main .campaign_compared_company {
    width: 100%;
    .number {
      &.looop {
        /* bottom: 35%;
        right: 71%; */
        font-size: 1.6rem;
      }
      &.ichiba {
        /* bottom: 26%; */
        right: 19.52%;
        font-size: 2.4rem;
      }
    }
  }
  .lp_main .campaign_price_info_title {
    padding: 0.46rem 2.3rem;
    font-size: 1.15rem;
    &::before,&::after {
      right: 0.76rem;
      width: 0.84rem;
    }
  }
  .lp_main .campaign_price_info_content {
    padding: 1.46rem 2.64% 1.3rem;
  }
  .lp_main .campaign_price_info_table_group {
    display: block;
    padding-inline: 4.19%;
    &:not(:last-child) {
      margin-bottom: 15.73vw;
    }
    .campaign_monthly_fee_table {
      width: 100%;
    }
  }
  .lp_main .campaign_monthly_fee_table {
    font-size: 1.07rem;
    &:not(:first-child) {
      thead {
        display: none;
      }
    }
    thead {
      font-size: 1.3rem;
      th {
        padding: 0 0 0.92rem;
      }
    }
    tbody {
      th,td {
        &:first-child {
          width: 3.46rem;
          padding-inline: 0 1rem;
          font-size: 1rem;
        }
        &:last-child {
          padding-inline: 2.3rem 1.61rem;
        }
      }
    }
    th,td {
      padding: 0.615rem 0.23rem 0.615rem 3.9rem;
    }
    .number {
      font-size: 1.28em;
    }
  }
  .lp_main .campaign_disclosure_block {
    &:not(:last-child) {
      margin-bottom: 8vw;
    }
  }
  .lp_main .campaign_disclosure_title {
    margin-bottom: 3.46vw;
    font-size: 1.23rem;
  }
  .lp_main .campaign_disclosure_content {
    line-height: 1.54;
  }
}