<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";

.p-stepupdtl__introTopicsblock {
  --mb: 20;
  margin-bottom: calc(var(--mb) * 1em/16);
}

.p-stepupdtl__introTopicsblockBody {
  &amp; .title {
    --mb: 70;
    margin-bottom: calc(var(--mb) * 1em/16);
    @media screen and (max-width: 880px) {
      --mb: 40;
    }
  }
  &amp; .body {
    &amp;.is-mt {
      --mt: 75;
      margin-top: calc(var(--mt) * 1em/16);
    }
  }
  &amp; :where(.body__txt) {
    --sentence-fs-max: 18;
    --sentence-fs-min: 16;
    --sentence-letter-spacing: 0;
    --mt: 0;
    margin-top: calc(var(--mt) * 1em / var(--sentence-fs-max));
    @media screen and (max-width: 880px) {
      margin-top: calc(var(--mt) * 1em / var(--sentence-fs-min));
    }
    &amp;:not(:first-of-type) {
      --mt: 40;
      @media screen and (max-width: 880px) {
        --mt: 25;
      }
    }
    &amp;.is-center {
      display: flex;
      justify-content: center;
    }
  }
  &amp; .body__link {
    --mt: 50;
    @media screen and (max-width: 880px) {
      --mt: 30;
    }
  }
  &amp; .body__caution {
    --sentence-fs-max: 14;
    --sentence-fs-min: 13;
    --mt: 15;
    &amp;.is-nomt {
      --mt: 0;
    }
  }
  &amp; .body__img {
    --mt: 40;
    --mbmax: 25;
    --mbmin: 15;
    margin: calc(var(--mt) * 1em/16) auto clamp(calc(var(--mbmin) * 1em/16), calc(var(--mbmax) /800*100vw), calc(var(--mbmax) * 1em/16));
  }
  &amp; .body__imgTxt {
    --fsmax: 16;
    --fsmin: 13;
    --mt: 0;
    font-size: clamp(calc(var(--fsmin) * 1em/16), calc(var(--fsmax) /800*100vw), calc(var(--fsmax) * 1em/16));
    margin-top: calc(var(--mt) * 1em / var(--fsmax));
    .p-economic &amp; {
      --fsmax: 14;
      --fsmin: 11;
      --mt: 8;
    }
  }
  &amp; .body__numlist {
    --title-width: 76;
    --title-bg: linear-gradient(to right, var(--grad-color02-01), var(--grad-color02-02));
    --mt: 40;
    margin-top: calc(var(--mt) * 1em/16);
    @media screen and (max-width: 880px) {
      --mt: 25;
    }
    &amp;.is-blue  {
      --title-bg: linear-gradient(to right, var(--grad-color03-01), var(--grad-color03-02));
    }
  }
  &amp; .body__numlistItem {
    --br: 12;
    --min-height: 72;
    --shadow: 5;
    --mt: 0;
    display: grid;
    grid-template-columns: calc(var(--title-width) * 1em/16) 1fr;
    overflow: hidden;
    border-radius: calc(var(--br) * 1em/16);
    min-height: calc(var(--min-height) * 1em/16);
    filter: drop-shadow(0 calc(var(--shadow) * 1em/16) 0 #e1e1e1);
    will-change: filter;
    margin-top: calc(var(--mt) * 1em/16);
    @media screen and (max-width: 880px) {
      --title-width: 52;
      --min-height: 68;
    }
    &amp;:not(:first-of-type) {
      --mt: 30;
    }
  }
  &amp; .body__numlistItemNum {
    --fs: 26;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--fs) * 1em/16);
    background: var(--title-bg);
    color: #fff;
    letter-spacing: .08em;
    line-height: 1;
    @media screen and (max-width: 880px) {
      --fs: 18;
    }
  }
  &amp; .body__numlistItemBody {
    --fs: 24;
    --ptb: 18;
    --plr: 24;
    display: flex;
    align-items: center;
    font-size: calc(var(--fs) * 1em/16);
    line-height: 1.3;
    letter-spacing: .04em;
    padding: calc(var(--ptb) * 1em/16) calc(var(--plr) * 1em/16);
    background-color: #efefef;
    @media screen and (max-width: 880px) {
      --fs: 18;
      --ptb: 12;
      --plr: 14;
    }
  }
  &amp; .body__table-wrap {
    @media screen and (max-width: 880px) {
      overflow: hidden;
    }
  }
  &amp; .body__table {
    --mt: 55;
    margin-top: calc(var(--mt) * 1em/16);
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    position: relative;
    z-index: 1;
    @media screen and (max-width: 1024px) {
      font-size: .85em;
    }
    @media screen and (max-width: 880px) {
      font-size: 1em;
      overflow-x: auto;
      overflow-y: hidden;
      overflow-scrolling: touch;
    }
  }
  &amp; .body__tableHead,
  &amp; .body__tableBody {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    @media screen and (max-width: 880px) {
      grid-template-columns: calc(113em/16) repeat(4, calc(192em/16));
    }
  }
  &amp; .body__tableHeadTxt {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(15em/20) 0;
    font-size: calc(20em/16);
    line-height: 1;
    background-color: #c8c9ca;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    letter-spacing: .08em;
    @media screen and (max-width: 880px) {
      padding: calc(10em/14) 0;
      font-size: calc(14em/16);
    }
  }
  &amp; .body__tableBodyTitle,
  &amp; .body__tableBodyTxt {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  &amp; .body__tableBodyTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eeeeef;
    font-size: calc(20em/16);
    line-height: 1;
    letter-spacing: .08em;
    min-height: calc(120em/20);
    @media screen and (max-width: 880px) {
      min-height: calc(87em/14);
      font-size: calc(14em/16);
    }
  }
  &amp; .body__tableBodyTxt {
    padding: calc(10em/16) calc(14em/16);
    line-height: 1.5;
    @media screen and (max-width: 880px) {
      font-size: calc(14em/16);
      padding: calc(5em/14) calc(12em/14);
    }
  }
  &amp; .body__tableInfo {
    display: none;
    @media screen and (max-width: 880px) {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: calc(20em/16);
      margin-top: calc(20em/16);
    }
  }
  &amp; .body__tableInfoIcon {
    width: calc(30em/16);
    animation-name: pointer_swipe;
    animation-timing-function: var(--ease-out-quart);
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
  }
  &amp; .body__tableInfoTxt {
    font-size: calc(15em/16);
    text-decoration: underline;
    text-underline-offset: .5em;
  }

  &amp; .list {
    --mt: 54;
    margin-top: calc(var(--mt) * 1em/16);
    @media screen and (max-width: 880px) {
      --mt: 36;
    }
    &amp; .cm-graylist {
      &amp;:where(:not(:first-of-type)) {
        margin-top: calc(20em/16);
      }
    }
  }

  &amp; .list__graylistImg {
    position: relative;
  }
  &amp; .list__graylistImgLabel {
    position: absolute;
    top: calc(-20em/20);
    left: calc(30/900*100%);
    z-index: 2;
    padding: calc(10em/20) calc(14em/20);
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    color: #fff;
    background-color: #ff5200;
    border-radius: calc(10em/20);
    @media screen and (max-width: 880px) {
      left: calc(15/320*100%);
      font-size: calc(11em/16);
      padding: calc(5em/11) calc(7em/11);
      border-radius: calc(5em/11);
    }
  }

  &amp; .checklist {
    --mt: 40;
    --mb: 40;
    margin-top: calc(var(--mt) * 1em/16);
    margin-bottom: calc(var(--mb) * 1em/16);
    @media screen and (max-width: 880px) {
      --mt: 30;
      --mb: 30;
    }
  }

  &amp; .example {
    margin-top: clamp(calc(48em/16), calc(58/800*100vw), calc(58em/16));
    margin-left: calc(-10em/16);
    width: calc(100% + calc(20em/16));
  }
  &amp; .example__block {
    --br: 10;
    --ptb: 70;
    --plr: 60;
    --bdw: 10;
    --shadow: 8;
    position: relative;
    padding: calc(var(--bdw) * 1em/16);
    &amp;::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--yellow-color);
      border-radius: calc(var(--br) * 1em/16);
      z-index: 1;
    }
    &amp;::before {
      content: "";
      display: block;
      position: absolute;
      top: calc( var(--shadow) * 1em/16);
      left: calc(10em/16);
      width: calc(100% - calc(20em/16));
      height: 100%;
      background-color: #828281;
      border-radius: calc(var(--br) * 1em/16);
      z-index: 0;
    }
    @media screen and (max-width: 880px) {
      --br: 5;
      --bdw: 7;
      --ptb: 30;
      --plr: 16;
      --shadow: 7;
    }
    &amp;:not(:first-of-type) {
      margin-top: calc(28em/16);
    }
  }
  &amp; .example__block-inner {
    position: relative;
    background-color: #fff;
    padding: calc(var(--ptb) * 1em/16) calc(var(--plr) * 1em/16);
    z-index: 2;
  }
  &amp; .example__blockTitle {
    font-size: clamp(calc(31 * .8em/16), calc(32/1150*100vw), calc(32em/16));
    text-align: center;
    line-height: 1.4;
    letter-spacing: .04em;
    text-indent: .04em;
    margin-bottom: calc(40em/32);
    @media screen and (max-width: 880px) {
      font-size: calc(18em/16);
      margin-bottom: calc(20em/18);
    }
  }
  &amp; .example__blockTxt {
    --sentence-fs-max: 18;
    --sentence-fs-min: 16;
    --sentence-line-height: 1.7;
    --sentence-letter-spacing: 0;
    &amp;:not(:first-of-type) {
      margin-top: calc(30em/18);
    }
  }
  &amp; .example__blockTitlePcline {
    display: block;
    @media screen and (max-width: 880px) {
      display: contents;
    }
  }
  &amp; .example__blockTitleSpline {
    @media screen and (max-width: 880px) {
      display: block;
    }
  }
  &amp; .example__blockNum {
    --w: 96;
    --h: 96;
    --brbtmr: 35;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--w) * 1em / 16);
    height: calc(var(--h) * 1em / 16);
    background: linear-gradient(to right, var(--grad-color01-01), var(--grad-color01-02));
    border-bottom-right-radius: calc(var(--brbtmr) * 1em/16);
    color: #fff;
    letter-spacing: .08em;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @media screen and (max-width: 880px) {
      --w: 51;
      --h: 51;
      --brbtmr: 18;
      width: calc(var(--w) * 1em /16);
      height: calc(var(--h) * 1em /16);
      border-bottom-right-radius: calc(var(--brbtmr) * 1em/16);
      border-top-left-radius: calc(var(--brtopl) * 1em/16);
    }
  }
  &amp; .example__blockNumTxt {
    @media screen and (max-width: 880px) {
      font-size: calc(8em/16);
    }
  }
  &amp; .example__blockNumBody {
    --fs: 48;
    font-size: calc(var(--fs) * 1em/16);
    @media screen and (max-width: 880px) {
      --fs: 25;
    }
  }
}

.p-stepupdtl__introTopicsblock {
  &amp;.is-last {
    --mb: 120;
    @media screen and (max-width: 880px) {
      --mb: 0;
    }
  }
  &amp;.is-recommend {
    background-color: var(--gray-bg);

    --mb: 0;
    --pt: 110;
    --pb: 100;
    padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
    @media screen and (max-width: 880px) {
      --pt: 62;
      --pb: 75;
    }
    &amp; .p-stepupdtl__introTopicsblock-inner {
      position: relative;
      z-index: 1;
      @media screen and (max-width: 880px) {
        width: 100%;
      }
    }
    &amp; .p-stepupdtl__introTopicsblockBody-top {
      width: calc(900/1200*100%);
      margin-inline: auto;
      @media screen and (max-width: 880px) {
        width: calc(320/400*100%);
      }
      &amp; .u-yellowlinelink {
        margin: 0 .3em;
      }
      &amp; .body {
        &amp;.is-mt {
          --mt: 55;
          @media screen and (max-width: 880px) {
            --mt: 35;
          }
        }
      }
      &amp; .checklist {
        --mt: 55;
        --mb: 65;
        @media screen and (max-width: 880px) {
          --mt: 32;
          --mb: 32;
        }
      }
      &amp; .c-checklist {
        --item-pt: 38;
        --item-pr: 30;
        --item-pb: 38;
        --item-pl: 30;
        @media screen and (max-width: 880px) {
          --item-pt: 23;
          --item-pr: 20;
          --item-pb: 23;
          --item-pl: 20;
        }
      }
    }
    &amp; .p-stepupdtl__introTopicsblockBody {
      &amp; .howto {
        --mt: 76;
        --pt: 72;
        --pb: 72;
        --br: 10;
        width: calc(1060/1200*100%);
        margin-inline: auto;
        background-color: #fff;
        border-radius: calc(var(--br) * 1em/16);
        padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
        margin-top: calc(var(--mt) * 1em/16);
        @media screen and (max-width: 880px) {
          --mt: 40;
          --pt: 43;
          --pb: 43;
          --br: 5;
          width: calc(360/400*100%);
        }
      }
      &amp; .howto-inner {
        width: calc(900/1060*100%);
        margin-inline: auto;
        @media screen and (max-width: 880px) {
          width: calc(320/360*100%);
        }
      }
      &amp; .howto__title {
        --title-fs: 36;
        --title-em-fs: 44;
        --title-kakko-sp-fs: 16;
        display: flex;
        justify-content: center;
        @media screen and (max-width: 1024px) {
          flex-direction: column;
          align-items: center;
        }
        @media screen and (max-width: 880px) {
          --title-fs: 22;
          --title-em-fs: 27;
        }
      }
      &amp; .howto__titleLine {
        font-size: calc(var(--title-fs) * 1em/16);
        line-height: 1.2;
        letter-spacing: .04;
        display: flex;
        align-items: center;
      }
      &amp; .howto__titleLineEm {
        font-size: calc(var(--title-em-fs) * 1em / var(--title-fs));
        letter-spacing: 0.12em;
        text-shadow:
        2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
        -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
        0px 2px 0 var(--main-color),  0 -2px 0 var(--main-color),
        -2px 0 0 var(--main-color), 2px 0 0 var(--main-color);
        color: var(--yellow-color02);
        @media screen and (max-width: 540px){
          text-shadow:
          1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
          -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
          0px 1px 0 var(--main-color),  0 -1px 0 var(--main-color),
          -1px 0 0 var(--main-color), 1px 0 0 var(--main-color);
        }
      }
      &amp; .howto__titleLineKakko {
        @media screen and (max-width: 880px) {
          font-size: calc(var(--title-kakko-sp-fs) * 1em / var(--title-fs));
          align-self: flex-end;
          margin-bottom: calc(4em/var(--title-kakko-sp-fs));
        }
      }
      &amp; .howto__txt {
        --sentence-fs-max: 18;
        --mt: 35;
        --mb: 50;
        margin-top: calc(var(--mt) * 1em / var(--sentence-fs-max));
        margin-bottom: calc(var(--mb) * 1em / var(--sentence-fs-max));
        display: flex;
        justify-content: center;
        @media screen and (max-width: 880px) {
          --mt: 32;
          --mb: 40;
          margin-top: calc(var(--mt) * 1em / var(--sentence-fs-min));
          margin-bottom: calc(var(--mb) * 1em / var(--sentence-fs-min));
        }
      }
      &amp; .howto__cta {
        --cta-bg: var(--gray-bg);
        width: calc(980/1060*100%);
        margin-inline: auto;
        @media screen and (max-width: 880px) {
          width: calc(320/360*100%);
        }
      }
      &amp; .howto__caution {
        --mt: 52;
        margin-top: calc(var(--mt) * 1em/16);
        @media screen and (max-width: 880px) {
          --mt: 22;
        }
      }
      &amp; .howto__cautionItem {
        --sentence-fs-max: 15;
        --sentence-fs-min: 13;
        &amp;:not(:first-of-type) {
          --mt: 20;
          margin-top: calc(var(--mt) * 1em / var(--sentence-fs-max));
          @media screen and (max-width: 880px) {
            margin-top: calc(var(--mt) * 1em / var(--sentence-fs-min));
          }
        }
      }
    }
  }

  .p-dowtheory &amp;.is-08 {
    &amp; .c-topicstitle {
      @media screen and (max-width: 880px) {
        /* font-size: .94em; */
        --topicstitle-main-fs: 31;
        --topicstitle-main-em-fs: 35;
      }
    }
    &amp; .c-topicstitle__main {
      @media screen and (max-width: 880px) {
        letter-spacing: 0;
      }
    }
  }

  /* .p-economic &amp;.is-05 {
    &amp; .c-topicstitle {
      @media screen and (max-width: 880px) {
        --topicstitle-main-fs: 31;
        --topicstitle-main-em-fs: 35;
      }
    }
    &amp; .c-topicstitle__main {
      @media screen and (max-width: 880px) {
        letter-spacing: 0;
      }
    }
  } */
}

@keyframes pointer_swipe {
  0% {
    translate: 0 0;
    rotate: 5deg;
  }
  70% {
    translate: calc(-5em/16) 0;
    rotate: -10deg;
  }
  90% {
    translate: 0 0;
    rotate: 5deg;
  }
  100% {
    translate: 0 0;
    rotate: 5deg;
  }
}</pre></body></html>