@charset "UTF-8";
/*==================================================

** index
==================================================*/
@keyframes shinyshiny {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0; }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5; }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1; }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0; } }
#mainvisual {
  background: url("../img/index/mainvisual_bg_pc.webp") no-repeat center center/cover;
  position: relative; }
  #mainvisual .mvl {
    max-width: max-content;
    margin-inline: auto; }
  #mainvisual .ctabtn {
    position: absolute;
    left: 0;
    bottom: -50px;
    z-index: 1;
    width: 100%; }
    #mainvisual .ctabtn-a {
      display: block;
      width: 100%;
      max-width: max-content;
      margin-inline: auto; }
      #mainvisual .ctabtn-a img {
        filter: drop-shadow(0 8px 8px rgba(208, 148, 71, 0.42)); }

#topPoint {
  background: url("../img/index/index_point_bg_pc.webp") no-repeat center center/cover;
  overflow: hidden; }
  #topPoint .wrap {
    padding-block: 100px 80px; }
  #topPoint .secttl {
    width: 620px;
    margin-inline: auto; }
  #topPoint .pointlist {
    margin: 38px auto 0;
    max-width: 809px; }
    #topPoint .pointlist-li {
      width: 30%; }
    #topPoint .pointlist .phtbox {
      position: relative; }
      #topPoint .pointlist .phtbox .foam {
        position: absolute; }
    #topPoint .pointlist .txtbox {
      margin-top: 20px; }
      #topPoint .pointlist .txtbox .ttl {
        display: flex;
        flex-direction: column; }
        #topPoint .pointlist .txtbox .ttl-point {
          border: 1px solid currentColor;
          border-radius: 1000px;
          width: 88px;
          background: #fff;
          text-align: center;
          color: #0063c7;
          font-size: 1.8rem;
          font-weight: 700;
          padding-block: 1px;
          box-shadow: 0 4px 0 rgba(0, 99, 199, 0.2); }
        #topPoint .pointlist .txtbox .ttl-fss {
          font-size: 2.6rem;
          font-weight: 700;
          margin-top: 10px; }
        #topPoint .pointlist .txtbox .ttl-img {
          margin-top: 10px;
          height: 44px; }
          #topPoint .pointlist .txtbox .ttl-img img {
            height: 100%;
            object-fit: contain;
            object-position: left center; }
      #topPoint .pointlist .txtbox .txt {
        font-size: min(2.4vw, 2rem);
        margin-top: 20px;
        color: #000; }
    #topPoint .pointlist-point1 .phtbox .foam {
      width: 29.4%;
      aspect-ratio: 70/94;
      left: -8.4%;
      top: -2.9%; }
    #topPoint .pointlist-point2 .phtbox .foam {
      width: 25.2%;
      aspect-ratio: 60/233;
      right: -7.5%;
      top: 5.4%; }
    #topPoint .pointlist-point3 .phtbox .foam {
      width: 34.8%;
      aspect-ratio: 83/235;
      left: -10.6%;
      top: 0; }

#topTry {
  overflow: hidden; }
  #topTry .try-ttl {
    filter: drop-shadow(0 0 10px #00366c);
    position: relative;
    z-index: 2; }
    #topTry .try-ttl .ttl-wrap {
      background: url("../img/index/index_try_bg_pc.webp") no-repeat center center/cover;
      padding-block: 34px 0;
      clip-path: polygon(0 88%, 0 0, 100% 0, 100% 88%, 50% 100%);
      transform: rotate3d(0); }
    #topTry .try-ttl .ttl-img {
      max-width: max-content;
      margin-inline: auto; }
  #topTry .try-merit {
    background: url("../img/index/index_try_merit_bg_pc.webp") no-repeat center center/cover;
    margin-top: -68px;
    padding-block: 170px 135px;
    position: relative;
    z-index: 1; }
    #topTry .try-merit::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 50%, #fff 100%);
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1; }
    #topTry .try-merit .txt {
      max-width: 1040px;
      margin-inline: auto; }
      #topTry .try-merit .txt img {
        width: 100%; }

#topSimulation {
  position: relative;
  z-index: 3; }
  #topSimulation .simulate-sec {
    background: #0063c7;
    max-width: 1040px;
    border-radius: 15px;
    padding: 35px 2.4% 25px;
    margin: -77px auto 0; }
  #topSimulation .simulate-ttl .ttl {
    max-width: 774px;
    margin-inline: auto; }
  #topSimulation .simulate-ttl .txt {
    margin: 32px auto 0;
    max-width: max-content;
    font-size: 1.5rem;
    color: #fff; }
  #topSimulation .simulate-box {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 35px; }
  #topSimulation .simulate-check {
    padding: 50px 5%; }
    #topSimulation .simulate-check .txtbox {
      text-align: center; }
      #topSimulation .simulate-check .txtbox p {
        font-size: 2rem;
        font-weight: 700; }
        #topSimulation .simulate-check .txtbox p .btn {
          display: inline-block;
          width: 66px;
          border-radius: 5px;
          color: #fff;
          background: #fa7500;
          margin-right: 6px; }
      #topSimulation .simulate-check .txtbox .txt2::before {
        content: '';
        display: block;
        width: 26px;
        aspect-ratio: 26/11;
        background: linear-gradient(to bottom, transparent 0%, rgba(131, 179, 228, 0.5) 50%, #0063c7 100%);
        margin: 8px auto;
        clip-path: polygon(50% 100%, 0 0, 100% 0); }
    #topSimulation .simulate-check .type-list {
      margin-top: 50px; }
      #topSimulation .simulate-check .type-list:has(input:checked) .type-list-label {
        opacity: 0.5; }
        #topSimulation .simulate-check .type-list:has(input:checked) .type-list-label:has(input:checked) {
          opacity: 1; }
      #topSimulation .simulate-check .type-list-li {
        width: 30.9%; }
        #topSimulation .simulate-check .type-list-li .type-list-label {
          opacity: 1; }
      #topSimulation .simulate-check .type-list-label {
        display: block;
        border: 1px solid #0063c7;
        border-radius: 10px;
        position: relative;
        transition: opacity 0.4s; }
        #topSimulation .simulate-check .type-list-label:has(input:checked) {
          opacity: 1; }
      #topSimulation .simulate-check .type-list-input {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0; }
    #topSimulation .simulate-check .type-rinse {
      display: none;
      max-width: 333px;
      margin: 30px 0 0 auto; }
      #topSimulation .simulate-check .type-rinse::before {
        content: '';
        display: block;
        width: 10px;
        aspect-ratio: 10/10;
        margin-inline: auto;
        background: #0063c7;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
      #topSimulation .simulate-check .type-rinse .rince-select {
        background: #0063c7;
        border-radius: 5px;
        padding: 12px 20px;
        margin-top: -1px; }
        #topSimulation .simulate-check .type-rinse .rince-select-dt {
          color: #fff;
          width: 94px;
          font-size: 2rem;
          font-weight: 700; }
        #topSimulation .simulate-check .type-rinse .rince-select-dd {
          width: calc(100% - 94px);
          gap: 0 10px; }
          #topSimulation .simulate-check .type-rinse .rince-select-dd .select {
            width: 100%;
            height: 46px;
            flex-grow: 1;
            border: 1px solid #b4b4b4;
            border-radius: 5px;
            padding-inline: 5px 35px;
            text-align: center;
            font-size: 3rem;
            line-height: 1;
            letter-spacing: -0.02em; }
            #topSimulation .simulate-check .type-rinse .rince-select-dd .select option {
              font: normal normal 800 1em/1.5 "Poppins", "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; }
          #topSimulation .simulate-check .type-rinse .rince-select-dd .unit {
            color: #fff;
            font-size: 2rem;
            font-weight: 700; }
      #topSimulation .simulate-check .type-rinse .rince-note {
        margin-top: 10px;
        font-size: 1.2rem; }
    #topSimulation .simulate-check .detergent {
      margin-top: 50px; }
      #topSimulation .simulate-check .detergent-ttl {
        border-radius: 5px 5px 0 0;
        background: #0063c7;
        color: #fff;
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        padding-block: 10px; }
      #topSimulation .simulate-check .detergent-box {
        border: 1px solid #0063c7;
        border-radius: 0 0 5px 5px;
        background: #e8f3ff;
        padding: 40px 5.4% 49px; }
      #topSimulation .simulate-check .detergent-list {
        gap: 38px 0; }
        #topSimulation .simulate-check .detergent-list-row {
          width: 47%; }
        #topSimulation .simulate-check .detergent-list-dt {
          font-size: 2rem;
          font-weight: 700; }
        #topSimulation .simulate-check .detergent-list-dd {
          margin-top: 8px; }
        #topSimulation .simulate-check .detergent-list-note {
          margin-top: 6px;
          font-size: 1.2rem; }
        #topSimulation .simulate-check .detergent-list input,
        #topSimulation .simulate-check .detergent-list select {
          height: 76px;
          text-align: right;
          margin-right: 10px;
          padding-inline: 14px;
          font-size: 5.5rem;
          line-height: 1;
          letter-spacing: -0.02em; }
        #topSimulation .simulate-check .detergent-list input[type="number"]::-webkit-outer-spin-button, #topSimulation .simulate-check .detergent-list input[type="number"]::-webkit-inner-spin-button {
          -webkit-appearance: none;
          margin: 0; }
        #topSimulation .simulate-check .detergent-list .select {
          padding-right: 55px;
          background-size: 12px auto,38px 100%;
          background-position: right 13px center,right top; }
          #topSimulation .simulate-check .detergent-list .select option {
            font: normal normal 800 1em/1.5 "Poppins", "Zen Kaku Gothic New", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif; }
        #topSimulation .simulate-check .detergent-list .txt-after {
          white-space: nowrap;
          font-size: 2rem;
          font-weight: 500; }
      #topSimulation .simulate-check .detergent .checkbtn {
        margin-top: 30px; }
        #topSimulation .simulate-check .detergent .checkbtn-btn {
          border: none;
          display: block;
          margin-inline: auto;
          max-width: 250px;
          width: 100%;
          border-radius: 5px;
          background: #fa7500;
          color: #fff;
          font-size: 2.5rem;
          font-weight: 700;
          padding: 15px; }
          #topSimulation .simulate-check .detergent .checkbtn-btn:hover {
            background: #ff902e; }
          #topSimulation .simulate-check .detergent .checkbtn-btn.clickoff {
            background: #999; }
      #topSimulation .simulate-check .detergent .nocheck {
        margin-top: 38px;
        text-align: center;
        font-size: 2.4rem;
        font-weight: 400; }
        #topSimulation .simulate-check .detergent .nocheck a {
          font-weight: 700;
          color: #3e84ca; }
          #topSimulation .simulate-check .detergent .nocheck a:hover {
            text-decoration: underline; }
  #topSimulation .simulate-result {
    display: none;
    background: #ff0;
    padding: 50px 5%; }
    #topSimulation .simulate-result .result-ttl {
      font-size: 2.5rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center; }
      #topSimulation .simulate-result .result-ttl + .result-list {
        margin-top: 48px; }
    #topSimulation .simulate-result .result-list {
      gap: 48px 0; }
    #topSimulation .simulate-result .result-now, #topSimulation .simulate-result .result-duskin {
      width: 47.5%;
      background: #0063c7;
      border-radius: 6px;
      padding: 18px 24px 24px; }
      #topSimulation .simulate-result .result-now-dt, #topSimulation .simulate-result .result-duskin-dt {
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: min(2.3vw, 2.5rem);
        font-weight: 700;
        text-align: center;
        letter-spacing: 0.1em;
        padding-bottom: 18px; }
      #topSimulation .simulate-result .result-now-dd, #topSimulation .simulate-result .result-duskin-dd {
        margin-top: 25px; }
        #topSimulation .simulate-result .result-now-dd .txt-before, #topSimulation .simulate-result .result-duskin-dd .txt-before {
          display: block;
          color: #fff;
          font-size: 2.4rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          white-space: nowrap;
          width: 76px; }
        #topSimulation .simulate-result .result-now-dd .fee, #topSimulation .simulate-result .result-duskin-dd .fee {
          width: calc(100% - 76px);
          display: block;
          border: 1px solid #b4b4b4;
          border-radius: 6px;
          background: #fff;
          text-align: right;
          padding: 8px 17px;
          font-size: 2rem;
          font-weight: 500; }
          #topSimulation .simulate-result .result-now-dd .fee-num, #topSimulation .simulate-result .result-duskin-dd .fee-num {
            color: #0063c7;
            font-size: 5.5rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1;
            margin-right: 5px; }
    #topSimulation .simulate-result .result-duskin {
      background: #00b5a3; }
      #topSimulation .simulate-result .result-duskin-dt {
        letter-spacing: 0; }
      #topSimulation .simulate-result .result-duskin-dd .fee-num {
        color: #00b5a3; }
    #topSimulation .simulate-result .result-possible {
      margin-block: 50px 70px;
      position: relative; }
      #topSimulation .simulate-result .result-possible::after {
        content: '';
        display: block;
        width: 34px;
        aspect-ratio: 34/23;
        background: #fa7500;
        margin: -1px auto 0;
        clip-path: polygon(50% 100%, 0 0, 100% 0); }
      #topSimulation .simulate-result .result-possible .possiblebox {
        display: none;
        background: #fa7500;
        border-radius: 10px;
        padding: 25px 5%;
        color: #fff; }
      #topSimulation .simulate-result .result-possible .ttl {
        text-align: center;
        font-weight: 700; }
        #topSimulation .simulate-result .result-possible .ttl1 {
          margin-top: 0;
          font-size: 2.5rem; }
        #topSimulation .simulate-result .result-possible .ttl2 {
          margin-top: 0;
          font-size: min(4.3vw, 4.5rem); }
      #topSimulation .simulate-result .result-possible .txt {
        margin-top: 10px;
        padding-top: 10px;
        text-align: center;
        border-top: 1px solid #fff; }
        #topSimulation .simulate-result .result-possible .txt1 {
          margin-top: 0;
          font-size: 3rem;
          font-weight: 700; }
        #topSimulation .simulate-result .result-possible .txt2 {
          margin-top: 5px;
          font-size: 1.8rem;
          font-weight: 500; }
    #topSimulation .simulate-result .result-rate {
      width: 45.6%; }
      #topSimulation .simulate-result .result-rate-dt {
        font-size: 3.5rem;
        font-weight: 700;
        text-align: center;
        color: #0063c7;
        padding-bottom: 20px;
        border-bottom: 1px solid #000; }
      #topSimulation .simulate-result .result-rate-dd {
        color: #0063c7;
        text-align: center;
        margin-top: 10px;
        gap: 0 10px; }
        #topSimulation .simulate-result .result-rate-dd span {
          line-height: 1; }
        #topSimulation .simulate-result .result-rate-dd .minus {
          font-size: 6rem;
          font-weight: 700; }
        #topSimulation .simulate-result .result-rate-dd .num {
          font-size: 8.5rem; }
          #topSimulation .simulate-result .result-rate-dd .num .fsl {
            font-size: 12.2rem;
            line-height: 1; }
        #topSimulation .simulate-result .result-rate-dd .percent {
          font-size: 6rem;
          font-weight: 500;
          line-height: 1;
          padding-bottom: 10px; }
    #topSimulation .simulate-result .result-price-y {
      width: 100%;
      border: 3px solid #fa7500;
      border-radius: 10px;
      background: #fff;
      overflow: hidden; }
      #topSimulation .simulate-result .result-price-y-dt {
        background: #fa7500;
        width: 222px;
        font-size: 3.5rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        text-align: center; }
      #topSimulation .simulate-result .result-price-y-dd {
        width: calc(100% - 222px);
        padding: 15px 30px;
        text-align: right; }
        #topSimulation .simulate-result .result-price-y-dd .num {
          font-size: 13rem;
          font-weight: 700;
          line-height: 1; }
        #topSimulation .simulate-result .result-price-y-dd .yen {
          font-size: 6rem;
          font-weight: 500; }
    #topSimulation .simulate-result .result-price-m {
      width: 100%;
      border: 2px solid #fa7500;
      border-radius: 10px;
      background: #fff;
      overflow: hidden; }
      #topSimulation .simulate-result .result-price-m-dt {
        background: #fa7500;
        width: 347px;
        font-size: 3.5rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        text-align: center; }
      #topSimulation .simulate-result .result-price-m-dd {
        width: calc(100% - 347px);
        padding: 15px 30px;
        text-align: right; }
        #topSimulation .simulate-result .result-price-m-dd .num {
          font-size: 7rem;
          font-weight: 700;
          line-height: 1; }
        #topSimulation .simulate-result .result-price-m-dd .yen {
          font-size: 3.5rem;
          font-weight: 500; }
    #topSimulation .simulate-result .result.possible .result-possible .possible {
      display: block; }
    #topSimulation .simulate-result .result.impossible .result-possible::after {
      background: #7d7d7d; }
    #topSimulation .simulate-result .result.impossible .result-possible .possiblebox {
      background: #7d7d7d; }
    #topSimulation .simulate-result .result.impossible .result-possible .impossible {
      display: block; }
    #topSimulation .simulate-result .result.impossible .result-price-y, #topSimulation .simulate-result .result.impossible .result-price-m {
      border-color: #7d7d7d; }
      #topSimulation .simulate-result .result.impossible .result-price-y-dt, #topSimulation .simulate-result .result.impossible .result-price-m-dt {
        background: #7d7d7d; }
    #topSimulation .simulate-result .frequency {
      margin-top: 74px; }
      #topSimulation .simulate-result .frequency-ttl {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: center; }
      #topSimulation .simulate-result .frequency-times1 {
        margin-top: 30px;
        font-size: 2.5rem;
        font-weight: 700;
        text-align: center; }
        #topSimulation .simulate-result .frequency-times1 .num {
          display: inline-flex;
          justify-content: flex-end;
          color: #0063c7;
          font-size: 7.5rem;
          line-height: 1;
          margin-inline: 15px 10px;
          width: 258px;
          text-align: right;
          padding-bottom: 10px;
          border-bottom: 1px solid #000; }
      #topSimulation .simulate-result .frequency-times2 {
        margin-top: 10px;
        font-size: 2.5rem;
        font-weight: 500;
        text-align: center; }
      #topSimulation .simulate-result .frequency-note {
        margin-top: 24px;
        font-size: 1.2rem;
        font-weight: 400;
        text-align: center; }
    #topSimulation .simulate-result .submit {
      margin-top: 62px; }
      #topSimulation .simulate-result .submit-btn {
        display: block;
        border: none;
        width: 250px;
        background: #fa7500;
        color: #fff;
        font-size: 2.5rem;
        font-weight: 700;
        margin-inline: auto;
        padding: 18px;
        border-radius: 5px;
        position: relative;
        z-index: 1;
        overflow: hidden; }
        #topSimulation .simulate-result .submit-btn::before {
          content: '';
          position: absolute;
          display: inline-block;
          top: -180px;
          left: 0;
          z-index: -1;
          width: 30px;
          height: 100%;
          background-color: #fff;
          transition: 300ms;
          opacity: 0.8;
          animation: shinyshiny 4.0s ease-in-out infinite; }
    #topSimulation .simulate-result.kakunin {
      display: block !important; }
      #topSimulation .simulate-result.kakunin .result-possible .possiblebox {
        display: block !important; }
  #topSimulation .simulate-note .note {
    margin-top: 40px;
    font-size: 1.2rem;
    text-align: center;
    color: #000; }
  #topSimulation .simulate-reset {
    margin-top: 100px; }
    #topSimulation .simulate-reset .reset-btn {
      display: block;
      width: 300px;
      border: 1px solid #b3b3b3;
      border-radius: 1000px;
      color: #808080;
      font-size: 1.8rem;
      font-weight: 700;
      text-align: center;
      margin-inline: auto;
      padding: 20px;
      background: #fff; }
      #topSimulation .simulate-reset .reset-btn:hover {
        background: #808080;
        color: #fff; }

@media screen and (max-width: 960px) and (min-width: 768px) {
  #topSimulation .simulate-check {
    padding: 50px 2.5%; }
    #topSimulation .simulate-check .txtbox p {
      font-size: 1.8rem; }
      #topSimulation .simulate-check .txtbox p .btn {
        width: 58px; }
    #topSimulation .simulate-check .type-list {
      margin-top: 30px; }
    #topSimulation .simulate-check .detergent {
      margin-top: 30px; }
      #topSimulation .simulate-check .detergent-box {
        padding: 40px 2.5% 49px; }
      #topSimulation .simulate-check .detergent-list-dt {
        font-size: 1.8rem; }
      #topSimulation .simulate-check .detergent-list input,
      #topSimulation .simulate-check .detergent-list select {
        height: 68px;
        font-size: 4.2rem; }
      #topSimulation .simulate-check .detergent-list .select {
        padding-right: 55px; }
      #topSimulation .simulate-check .detergent-list .txt-after {
        font-size: 1.6rem; }
      #topSimulation .simulate-check .detergent .nocheck {
        font-size: 2rem; }
  #topSimulation .simulate-result {
    padding: 50px 2.5%; }
    #topSimulation .simulate-result .result-list {
      margin-top: 48px;
      gap: 48px 0; }
    #topSimulation .simulate-result .result-now, #topSimulation .simulate-result .result-duskin {
      width: 48%;
      padding: 18px 18px 24px; }
      #topSimulation .simulate-result .result-now-dt, #topSimulation .simulate-result .result-duskin-dt {
        font-size: 2rem;
        padding-bottom: 18px; }
      #topSimulation .simulate-result .result-now-dd, #topSimulation .simulate-result .result-duskin-dd {
        margin-top: 25px; }
        #topSimulation .simulate-result .result-now-dd .txt-before, #topSimulation .simulate-result .result-duskin-dd .txt-before {
          font-size: 2rem;
          width: 55px; }
        #topSimulation .simulate-result .result-now-dd .fee, #topSimulation .simulate-result .result-duskin-dd .fee {
          width: calc(100% - 55px);
          padding: 8px 10px;
          font-size: 1.8rem; }
          #topSimulation .simulate-result .result-now-dd .fee-num, #topSimulation .simulate-result .result-duskin-dd .fee-num {
            font-size: 3.8rem; }
    #topSimulation .simulate-result .result-rate {
      width: 48%; }
      #topSimulation .simulate-result .result-rate-dt {
        font-size: 3.5rem;
        padding-bottom: 20px; }
      #topSimulation .simulate-result .result-rate-dd {
        gap: 0 10px; }
        #topSimulation .simulate-result .result-rate-dd .minus {
          font-size: 4rem; }
        #topSimulation .simulate-result .result-rate-dd .num {
          font-size: 6rem; }
          #topSimulation .simulate-result .result-rate-dd .num .fsl {
            font-size: 8rem; }
        #topSimulation .simulate-result .result-rate-dd .percent {
          font-size: 4rem; }
    #topSimulation .simulate-result .result-price-y-dt {
      width: 180px;
      font-size: 2.8rem; }
    #topSimulation .simulate-result .result-price-y-dd {
      width: calc(100% - 180px);
      padding: 15px 20px; }
      #topSimulation .simulate-result .result-price-y-dd .num {
        font-size: min(9.3vw, 8rem); }
      #topSimulation .simulate-result .result-price-y-dd .yen {
        font-size: min(5.2vw, 5rem); }
    #topSimulation .simulate-result .result-price-m-dt {
      width: 270px;
      font-size: 2.8rem; }
    #topSimulation .simulate-result .result-price-m-dd {
      width: calc(100% - 270px);
      padding: 15px 20px; }
      #topSimulation .simulate-result .result-price-m-dd .num {
        font-size: min(6.25vw, 6rem); }
      #topSimulation .simulate-result .result-price-m-dd .yen {
        font-size: min(3.1vw, 3rem); }
    #topSimulation .simulate-result .frequency-times1 .num {
      font-size: 5rem;
      width: 258px; } }
@media screen and (max-width: 767px) {
  #mainvisual {
    background: none; }
    #mainvisual .ctabtn {
      position: static; }
      #mainvisual .ctabtn .wrap {
        width: 100%; }
      #mainvisual .ctabtn-a {
        max-width: 100%;
        width: 100%; }

  #topPoint {
    background-image: url("../img/index/index_point_bg_sp.webp"); }
    #topPoint .wrap {
      padding-block: 40px 80px; }
    #topPoint .secttl {
      width: 100%; }
    #topPoint .pointlist {
      margin: min(12.7%, 50px) auto 0;
      max-width: 100%; }
      #topPoint .pointlist-li {
        width: 100%; }
      #topPoint .pointlist .phtbox {
        position: absolute;
        width: 67.4%;
        aspect-ratio: 238/238;
        top: 50%;
        transform: translateY(-50%); }
      #topPoint .pointlist .txtbox {
        margin-top: 0; }
        #topPoint .pointlist .txtbox .ttl-point {
          width: 16.7vw;
          font-size: 3.5vw;
          box-shadow: 0 3px 0 rgba(0, 99, 199, 0.2); }
        #topPoint .pointlist .txtbox .ttl-fss {
          font-size: 5vw;
          margin-top: 2vw; }
        #topPoint .pointlist .txtbox .ttl-img {
          margin-top: 2vw;
          height: 8.3vw; }
        #topPoint .pointlist .txtbox .txt {
          font-size: 3.8vw;
          margin-top: 3.8vw; }
      #topPoint .pointlist-point1 .phtbox {
        left: 46vw; }
      #topPoint .pointlist-point2 {
        margin-top: 19.5vw;
        display: flex;
        justify-content: flex-end; }
        #topPoint .pointlist-point2 .phtbox {
          right: 46vw; }
      #topPoint .pointlist-point3 {
        margin-top: 13.7vw; }
        #topPoint .pointlist-point3 .phtbox {
          left: 46vw; }

  #topTry .try-ttl .ttl-wrap {
    background: none;
    padding-block: 0;
    clip-path: polygon(0 87.5%, 0 0, 100% 0, 100% 87.5%, 50% 100%); }
  #topTry .try-merit {
    background: none;
    margin-top: -17.8vw;
    padding-block: 0; }
    #topTry .try-merit .txt {
      max-width: 100%; }

  #topSimulation .simulate-sec {
    padding: 35px 3.8% 15px;
    margin: -25px auto 0; }
  #topSimulation .simulate-ttl .ttl {
    max-width: 83.4%; }
  #topSimulation .simulate-ttl .txt {
    margin: 24px auto 0;
    max-width: 88.9%;
    font-size: 1.2rem; }
  #topSimulation .simulate-box {
    margin-top: 25px; }
  #topSimulation .simulate-check {
    padding: 20px 4.1%; }
    #topSimulation .simulate-check .txtbox p {
      font-size: 1.6rem; }
      #topSimulation .simulate-check .txtbox p .btn {
        width: 54px;
        border-radius: 4px;
        margin-right: 4px; }
    #topSimulation .simulate-check .txtbox .txt2::before {
      margin: 4px auto; }
    #topSimulation .simulate-check .type-list {
      margin-top: 25px;
      gap: 10px 0; }
      #topSimulation .simulate-check .type-list-li {
        width: 100%; }
      #topSimulation .simulate-check .type-list-label {
        border-radius: 5px; }
    #topSimulation .simulate-check .type-rinse {
      max-width: 100%;
      margin: 14px auto 0; }
      #topSimulation .simulate-check .type-rinse .rince-select {
        padding-inline: 5.7%; }
        #topSimulation .simulate-check .type-rinse .rince-select-dt {
          width: min(23.9vw, 94px);
          font-size: min(5vw, 2rem); }
        #topSimulation .simulate-check .type-rinse .rince-select-dd {
          width: calc(100% - min(23.9vw,94px));
          gap: 0 10px; }
          #topSimulation .simulate-check .type-rinse .rince-select-dd .select {
            padding-inline: 5px 35px;
            font-size: min(7.6vw, 3rem); }
          #topSimulation .simulate-check .type-rinse .rince-select-dd .unit {
            font-size: min(5vw, 2rem); }
    #topSimulation .simulate-check .detergent {
      margin-top: 30px; }
      #topSimulation .simulate-check .detergent-ttl {
        font-size: min(4.5vw, 1.8rem);
        padding-block: 9px; }
      #topSimulation .simulate-check .detergent-box {
        padding: 15px 4.5% 19px; }
      #topSimulation .simulate-check .detergent-list {
        gap: 38px 0; }
        #topSimulation .simulate-check .detergent-list-row {
          width: 100%; }
        #topSimulation .simulate-check .detergent-list-dt {
          font-size: 1.6rem; }
        #topSimulation .simulate-check .detergent-list input,
        #topSimulation .simulate-check .detergent-list select {
          height: 60px;
          margin-right: 8px;
          padding-inline: 11px;
          font-size: min(11.4vw, 4.5rem); }
        #topSimulation .simulate-check .detergent-list .select {
          padding-right: 45px;
          background-size: 8px auto,30px 100%;
          background-position: right 9px center,right top; }
        #topSimulation .simulate-check .detergent-list .txt-after {
          font-size: min(4vw, 1.6rem); }
      #topSimulation .simulate-check .detergent .checkbtn {
        margin-top: 25px; }
        #topSimulation .simulate-check .detergent .checkbtn-btn {
          max-width: 75%;
          width: 100%;
          padding: 18px; }
      #topSimulation .simulate-check .detergent .nocheck {
        margin-top: 24px;
        font-size: 1.5rem; }
  #topSimulation .simulate-result {
    padding: 30px 4.1%; }
    #topSimulation .simulate-result .result-ttl {
      font-size: 2rem; }
    #topSimulation .simulate-result .result-list {
      margin-top: 10px;
      gap: 25px 0; }
    #topSimulation .simulate-result .result-now, #topSimulation .simulate-result .result-duskin {
      width: 100%;
      border-radius: 5px;
      padding: 15px 6% 20px; }
      #topSimulation .simulate-result .result-now-dt, #topSimulation .simulate-result .result-duskin-dt {
        font-size: min(5vw, 2rem);
        padding-bottom: 15px; }
      #topSimulation .simulate-result .result-now-dd, #topSimulation .simulate-result .result-duskin-dd {
        margin-top: 20px; }
        #topSimulation .simulate-result .result-now-dd .txt-before, #topSimulation .simulate-result .result-duskin-dd .txt-before {
          font-size: min(5vw, 2rem);
          width: min(15.7vw, 62px); }
        #topSimulation .simulate-result .result-now-dd .fee, #topSimulation .simulate-result .result-duskin-dd .fee {
          width: calc(100% - min(15.7vw,62px));
          padding: 4px min(3.5vw, 14px);
          font-size: 1.6rem; }
          #topSimulation .simulate-result .result-now-dd .fee-num, #topSimulation .simulate-result .result-duskin-dd .fee-num {
            font-size: min(11.4vw, 4.5rem);
            margin-right: 4px; }
    #topSimulation .simulate-result .result-possible {
      margin-block: 30px 40px; }
      #topSimulation .simulate-result .result-possible::after {
        width: 24px;
        aspect-ratio: 24/15; }
      #topSimulation .simulate-result .result-possible .possiblebox {
        border-radius: 5px;
        padding: 14px 0 16px; }
      #topSimulation .simulate-result .result-possible .ttl1 {
        font-size: min(3.8vw, 1.5rem); }
      #topSimulation .simulate-result .result-possible .ttl2 {
        font-size: min(6.6vw, 3rem); }
      #topSimulation .simulate-result .result-possible .txt {
        margin-top: 20px;
        margin-inline: 4.5%;
        padding-block: 20px; }
        #topSimulation .simulate-result .result-possible .txt1 {
          font-size: min(6.3vw, 2.5rem); }
        #topSimulation .simulate-result .result-possible .txt2 {
          margin-top: 14px;
          font-size: min(4vw, 1.6rem); }
    #topSimulation .simulate-result .result-rate {
      width: 100%; }
      #topSimulation .simulate-result .result-rate-dt {
        font-size: 3rem;
        padding-bottom: 15px; }
      #topSimulation .simulate-result .result-rate-dd {
        margin-top: 10px;
        gap: 0; }
        #topSimulation .simulate-result .result-rate-dd .minus {
          font-size: min(12.7vw, 5rem);
          margin-right: min(2.5vw, 10px); }
        #topSimulation .simulate-result .result-rate-dd .num {
          font-size: min(21.8vw, 7rem); }
          #topSimulation .simulate-result .result-rate-dd .num .fsl {
            font-size: min(25.6vw, 10.1rem); }
        #topSimulation .simulate-result .result-rate-dd .percent {
          font-size: min(12.7vw, 5rem);
          padding-bottom: 5px;
          margin-left: min(2rem, 8px); }
    #topSimulation .simulate-result .result-price-y {
      width: 100%;
      border-radius: 5px;
      border-width: 5px; }
      #topSimulation .simulate-result .result-price-y-dt {
        width: 100%;
        font-size: min(7.6vw, 3rem);
        padding: 12px 0; }
      #topSimulation .simulate-result .result-price-y-dd {
        width: 100%;
        padding: 15px min(2.5vw, 10px); }
        #topSimulation .simulate-result .result-price-y-dd .num {
          font-size: min(16.2vw, 6.4rem); }
        #topSimulation .simulate-result .result-price-y-dd .yen {
          font-size: min(9.6vw, 3.8rem); }
    #topSimulation .simulate-result .result-price-m {
      width: 100%;
      border-radius: 5px;
      border-width: 4px; }
      #topSimulation .simulate-result .result-price-m-dt {
        width: 100%;
        font-size: min(7.6vw, 3rem);
        padding: 12px 0; }
      #topSimulation .simulate-result .result-price-m-dd {
        width: 100%;
        padding: 15px min(2.5vw, 10px); }
        #topSimulation .simulate-result .result-price-m-dd .num {
          font-size: min(12.7vw, 5rem); }
        #topSimulation .simulate-result .result-price-m-dd .yen {
          font-size: min(7.6vw, 2.4rem); }
    #topSimulation .simulate-result .frequency {
      margin-top: 50px; }
      #topSimulation .simulate-result .frequency-ttl {
        font-size: 2rem; }
      #topSimulation .simulate-result .frequency-times1 {
        margin-top: 30px;
        font-size: min(5vw, 2rem);
        white-space: nowrap; }
        #topSimulation .simulate-result .frequency-times1 .num {
          font-size: min(15.2vw, 6rem);
          margin-inline: min(2vw, 8px);
          width: min(52.1vw, 205px);
          padding-bottom: 5px; }
      #topSimulation .simulate-result .frequency-times2 {
        margin-top: 10px;
        font-size: 2rem; }
      #topSimulation .simulate-result .frequency-note {
        text-align: left; }
    #topSimulation .simulate-result .submit {
      margin-top: 27px; }
  #topSimulation .simulate-note .note {
    margin-top: 30px;
    text-align: left; }
  #topSimulation .simulate-reset {
    margin-top: 30px; }
    #topSimulation .simulate-reset .reset-btn {
      width: 250px;
      font-size: 1.5rem;
      padding: 16px; } }