@charset "UTF-8";
#howtorefrelabo {
  font-family: "Zen Kaku Gothic New", sans-serif; }
  #howtorefrelabo p {
    font-family: "Zen Kaku Gothic New", sans-serif; }
  #howtorefrelabo #pageTtl {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    /* 文字を折り返さない */
    border: 0; }

@media screen and (min-width: 751px) {
  #howtorefrelabo .sp {
    display: none; }
  #howtorefrelabo #kv {
    padding-top: 140px; }
    #howtorefrelabo #kv .kvWrap {
      padding: 0 10px; }
    #howtorefrelabo #kv .kvInner {
      position: relative;
      margin: 0 auto;
      width: 100%;
      border-radius: 60px;
      background-image: url(../images/beginner_renewal/kvBgImage.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      box-shadow: inset 0px 0px 72px 0px rgba(255, 94, 157, 0.2); }
    #howtorefrelabo #kv .pankuzu {
      z-index: 1;
      position: absolute;
      top: 53px;
      left: 58px;
      display: flex; }
      #howtorefrelabo #kv .pankuzu .pankuzuLink {
        position: relative;
        padding-right: 20px;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0em; }
        #howtorefrelabo #kv .pankuzu .pankuzuLink::before {
          content: ">";
          position: absolute;
          bottom: 2px;
          right: 4px;
          font-size: 13px;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0em;
          color: #FF5E9D; }
      #howtorefrelabo #kv .pankuzu .pankuzuTxt {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 13px;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0em; }
    #howtorefrelabo #kv .kvContentInner {
      z-index: 0;
      position: relative;
      display: flex;
      align-items: start;
      justify-content: space-between;
      margin: 0 auto;
      padding: 90px 80px 110px 90px;
      max-width: 1420px; }
    #howtorefrelabo #kv .kvContentTtlInner {
      z-index: 1;
      position: relative;
      width: 470px; }
      #howtorefrelabo #kv .kvContentTtlInner .kvContentTtl {
        margin-top: 20px;
        margin-bottom: 30px;
        white-space: nowrap;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 48px;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: 0.15em; }
      #howtorefrelabo #kv .kvContentTtlInner .kvContentCopy {
        font-size: 22px;
        font-weight: 500;
        line-height: 190%;
        letter-spacing: 0.15em; }
    #howtorefrelabo #kv .kvContentTxtInner {
      z-index: 1;
      position: relative;
      flex: 1;
      max-width: 590px; }
      #howtorefrelabo #kv .kvContentTxtInner .kvContentTxt {
        font-size: 18px;
        font-weight: 400;
        line-height: 280%;
        letter-spacing: 0.05em; }
        #howtorefrelabo #kv .kvContentTxtInner .kvContentTxt .highlight {
          font-weight: 500;
          color: #FF5E9D; }
    #howtorefrelabo #kv .kvCopyImageInner {
      z-index: 0;
      position: absolute;
      bottom: 30px;
      left: 40px; }
      #howtorefrelabo #kv .kvCopyImageInner .kvCopyImage {
        display: block;
        width: 100%; }
  #howtorefrelabo #support {
    padding: 60px 0 178px 0; }
    #howtorefrelabo #support .supportTtlInner {
      margin-bottom: 60px; }
      #howtorefrelabo #support .supportTtlInner .supportTtl .supportTtl_sub {
        display: block;
        margin-bottom: 15px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em; }
      #howtorefrelabo #support .supportTtlInner .supportTtl .supportTtl_main {
        display: block;
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
    #howtorefrelabo #support .supportContentInner {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 1200px; }
    #howtorefrelabo #support .supportImageList {
      position: relative;
      width: 518px;
      height: 488px; }
      #howtorefrelabo #support .supportImageList .supportImageInner {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.5s ease-in-out; }
        #howtorefrelabo #support .supportImageList .supportImageInner .supportImage {
          display: block;
          width: 100%; }
        #howtorefrelabo #support .supportImageList .supportImageInner.active {
          opacity: 1; }
    #howtorefrelabo #support .supportBookList {
      position: relative;
      width: 615px;
      height: 400px; }
      #howtorefrelabo #support .supportBookList .supportBookItem {
        opacity: 0;
        transform: translate3d(10px, 10px, 0) rotate3d(0, 0, 1, 2deg);
        position: absolute;
        top: 0;
        left: 0;
        padding: 95px 50px 0 70px;
        width: 100%;
        height: 100%;
        background-image: url(../images/beginner_renewal/support_book_bg_01.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: all 0.5s ease-in-out; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookCopy {
          margin-bottom: 10px;
          font-size: 20px;
          font-weight: 700;
          line-height: 120%;
          letter-spacing: 0.1em;
          color: #21B7F2; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookTtl {
          margin-bottom: 20px;
          font-size: 28px;
          font-weight: 500;
          line-height: 120%;
          letter-spacing: 0.05em; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookTxt {
          font-size: 16px;
          font-weight: 400;
          line-height: 180%;
          letter-spacing: 0.05em; }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(1) {
          background-image: url(../images/beginner_renewal/support_book_bg_01.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(2) {
          background-image: url(../images/beginner_renewal/support_book_bg_02.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(3) {
          background-image: url(../images/beginner_renewal/support_book_bg_03.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem.active {
          opacity: 1;
          transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
      #howtorefrelabo #support .supportBookList::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -5px;
        display: block;
        width: 640px;
        height: 445px;
        background-image: url(../images/beginner_renewal/support_book_bg_base.svg); }
    #howtorefrelabo #support .supportPagenation {
      position: absolute;
      top: 50%;
      left: calc(100% + 64px);
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transform: translate3d(0, -50%, 0); }
      #howtorefrelabo #support .supportPagenation span {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #C9C9C9;
        border: 1px solid #C9C9C9; }
        #howtorefrelabo #support .supportPagenation span.active {
          background-color: #FFFFFF; }
  #howtorefrelabo #problem {
    overflow-x: clip;
    position: relative;
    background-color: #EBF9FF; }
    #howtorefrelabo #problem::before {
      content: "";
      z-index: 0;
      position: absolute;
      top: 300px;
      left: calc(50% + 90px);
      display: block;
      width: 1800px;
      height: 1653px;
      background-image: url(../images/beginner_renewal/problem_bg_deco.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transform: translate3d(-50%, 0, 0); }
    #howtorefrelabo #problem .problemWaveTopInner {
      position: absolute;
      bottom: 100%;
      left: 0;
      display: flex;
      align-items: end;
      justify-content: stretch;
      width: 100%;
      height: 78px; }
      #howtorefrelabo #problem .problemWaveTopInner picture {
        display: block;
        width: 100%; }
      #howtorefrelabo #problem .problemWaveTopInner .problemWaveTop {
        display: block;
        width: 100%;
        height: 100%; }
    #howtorefrelabo #problem .problemWaveBottomInner {
      position: absolute;
      top: 100%;
      left: 0;
      display: flex;
      align-items: start;
      justify-content: stretch;
      width: 100%;
      height: 78px; }
      #howtorefrelabo #problem .problemWaveBottomInner picture {
        display: block;
        width: 100%; }
      #howtorefrelabo #problem .problemWaveBottomInner .problemWaveBottom {
        display: block;
        width: 100%;
        height: 100%; }
    #howtorefrelabo #problem .problemWrap {
      z-index: 1;
      position: relative;
      padding: 60px 0; }
    #howtorefrelabo #problem .problemInner {
      margin: 0 auto;
      width: 1200px; }
    #howtorefrelabo #problem .problemCopy {
      margin-bottom: 10px;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      line-height: 120%;
      letter-spacing: 0.1em; }
    #howtorefrelabo #problem .problemTtl {
      margin-bottom: 185px;
      text-align: center;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 120%;
      letter-spacing: 0.1em;
      color: #0088BE; }
    #howtorefrelabo #problem .problemContentListInner {
      padding-bottom: 80px; }
    #howtorefrelabo #problem .problemContentList {
      display: flex;
      align-items: start;
      justify-content: space-between; }
    #howtorefrelabo #problem .problemContentItem {
      position: relative;
      padding: 40px 30px 23px 30px;
      width: 370px;
      background-color: #FFFFFF;
      border-radius: 20px;
      box-shadow: 4px 4px 0px 0px #7ad4f7; }
      #howtorefrelabo #problem .problemContentItem .problemContentTtl {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 15px;
        font-size: 26px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.05em; }
        #howtorefrelabo #problem .problemContentItem .problemContentTtl .problemContentTtlIcon {
          display: block;
          width: 40px; }
      #howtorefrelabo #problem .problemContentItem .problemContentTxt {
        margin-bottom: 30px;
        font-size: 18px;
        font-weight: 500;
        line-height: 180%;
        letter-spacing: 0em; }
        #howtorefrelabo #problem .problemContentItem .problemContentTxt .problemContentTxt_highlight {
          font-size: 20px;
          font-weight: 500;
          color: #FF5E9D;
          text-decoration: underline;
          /* 下線 */
          text-decoration-thickness: 0.7em;
          /* 線の太さ */
          text-decoration-color: #FFFAC7;
          /* 線の色 */
          text-underline-offset: -0.4em;
          /* 線の位置。テキストに重なるようにやや上部にする */
          text-decoration-skip-ink: none;
          /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */ }
      #howtorefrelabo #problem .problemContentItem .problemContentItemImageInner {
        width: 100%;
        aspect-ratio: 300 / 146; }
        #howtorefrelabo #problem .problemContentItem .problemContentItemImageInner .problemContentItemImage {
          display: block;
          width: 100%; }
      #howtorefrelabo #problem .problemContentItem .problemContentBubble {
        position: absolute;
        top: -128px;
        left: 0;
        box-sizing: border-box;
        padding: 42px 10px 10px 35px;
        width: 330px;
        height: 168px;
        background-image: url(../images/beginner_renewal/problem_content_bubble_01.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
        #howtorefrelabo #problem .problemContentItem .problemContentBubble .problemContentBubbleTxt {
          font-size: 20px;
          font-weight: 500;
          line-height: 120%;
          letter-spacing: 0em; }
      #howtorefrelabo #problem .problemContentItem:nth-child(1) .problemContentBubble {
        top: -128px;
        left: 0;
        padding: 42px 10px 10px 35px;
        width: 330px;
        height: 168px;
        background-image: url(../images/beginner_renewal/problem_content_bubble_01.svg); }
      #howtorefrelabo #problem .problemContentItem:nth-child(2) {
        margin-top: 30px; }
        #howtorefrelabo #problem .problemContentItem:nth-child(2) .problemContentBubble {
          top: -139px;
          left: 0;
          padding: 50px 10px 10px 64px;
          width: 307px;
          height: 177px;
          background-image: url(../images/beginner_renewal/problem_content_bubble_02.svg); }
      #howtorefrelabo #problem .problemContentItem:nth-child(3) .problemContentBubble {
        top: -115px;
        left: 0;
        padding: 50px 10px 10px 50px;
        width: 296px;
        height: 161px;
        background-image: url(../images/beginner_renewal/problem_content_bubble_03.svg); }
    #howtorefrelabo #problem .problemSubContentCopy {
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px; }
      #howtorefrelabo #problem .problemSubContentCopy .problemSubContentCopyTxt {
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0em;
        color: #0088BE; }
      #howtorefrelabo #problem .problemSubContentCopy::before {
        content: "";
        display: block;
        width: 17px;
        height: 30px;
        background-image: url(../images/beginner_renewal/problem_subContent_copy_deco.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
      #howtorefrelabo #problem .problemSubContentCopy::after {
        content: "";
        display: block;
        width: 17px;
        height: 30px;
        background-image: url(../images/beginner_renewal/problem_subContent_copy_deco.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: scale3d(-1, 1, 1); }
    #howtorefrelabo #problem .problemSubContentInner {
      margin-bottom: 120px;
      background-color: #FFFFFF;
      border-radius: 20px;
      border: 1px solid #21B7F2; }
    #howtorefrelabo #problem .problemSubContentList {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      padding: 40px 50px; }
    #howtorefrelabo #problem .problemSubContentItem {
      position: relative;
      width: 220px; }
      #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.02em; }
        #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl .problemSubContentTtlIcon {
          display: block;
          width: 100%;
          height: 43px;
          object-fit: contain;
          object-position: center; }
        #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl .problemSubContentTtl_txt {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          min-height: 70px;
          text-align: center;
          font-size: 24px;
          font-weight: 700;
          line-height: 140%;
          letter-spacing: 0.02em; }
      #howtorefrelabo #problem .problemSubContentItem .problemSubContentTxt {
        font-size: 16px;
        font-weight: 400;
        line-height: 187.5%;
        letter-spacing: 0.02em; }
      #howtorefrelabo #problem .problemSubContentItem::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 33px);
        width: 1px;
        height: 90%;
        border-right: 1px dashed #FF5E9D;
        transform: translateY(-50%); }
      #howtorefrelabo #problem .problemSubContentItem:last-child::after {
        display: none; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(1) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 32px; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(3) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 40px; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(4) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 27px; }
    #howtorefrelabo #problem .problemMovieTtlInner {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-bottom: 50px; }
      #howtorefrelabo #problem .problemMovieTtlInner .problemMovieTtl {
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
      #howtorefrelabo #problem .problemMovieTtlInner::after {
        content: "";
        display: block;
        width: 80px;
        height: 4px;
        background-color: #FF5E9D; }
    #howtorefrelabo #problem .problemMovieInner {
      position: relative; }
      #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor {
        z-index: 1;
        position: relative;
        display: block;
        margin: 0 auto;
        width: 800px;
        height: 440px;
        border-radius: 80px; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieThumbnailInner {
          overflow: clip;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 80px;
          border: 4px solid #FF5E9D; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieThumbnailInner .problemMovieThumbnail {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: all 0.3s ease-in-out; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieDecoInner {
          position: absolute;
          bottom: -13px;
          right: -36px;
          width: 122px; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieDecoInner .problemMovieDeco {
            display: block;
            width: 100%; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover {
          opacity: 1; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover img {
            opacity: 1; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover .problemMovieThumbnailInner .problemMovieThumbnail {
            transform: scale3d(1.1, 1.1, 1); }
      #howtorefrelabo #problem .problemMovieInner::before {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 50%;
        display: block;
        width: 936px;
        height: 52px;
        background-color: #D3F0FD;
        border-radius: 50%;
        transform: translate3d(-50%, 0, 0); }
  #howtorefrelabo #recommendation {
    margin-top: 3000px;
    padding: 178px 0; }
    #howtorefrelabo #recommendation .recommendationInner {
      margin: 0 auto;
      width: 1200px; }
    #howtorefrelabo #recommendation .recommendationTtlInner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 80px; }
      #howtorefrelabo #recommendation .recommendationTtlInner .recommendationTtl {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 13px;
        width: 374px;
        height: 100%;
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
        #howtorefrelabo #recommendation .recommendationTtlInner .recommendationTtl .recommendationTtlIcon {
          display: block;
          margin-top: 7px;
          width: 40px; }
      #howtorefrelabo #recommendation .recommendationTtlInner .recommendationDescInner {
        flex: 1;
        padding-left: 45px;
        border-left: 1px solid #21B7F2; }
        #howtorefrelabo #recommendation .recommendationTtlInner .recommendationDescInner .recommendationDescription {
          margin-bottom: 25px;
          font-size: 18px;
          font-weight: 500;
          line-height: 150%;
          letter-spacing: 0em; }
        #howtorefrelabo #recommendation .recommendationTtlInner .recommendationDescInner .recommendationInnerNote {
          font-size: 16px;
          font-weight: 400;
          line-height: 150%;
          letter-spacing: 0em; }
    #howtorefrelabo #recommendation .recommendationContentInner {
      display: flex;
      align-items: stretch;
      justify-content: space-between; }
    #howtorefrelabo #recommendation .recommendationContentItem {
      padding: 30px;
      width: 570px;
      background-color: #FFEFF5;
      border-radius: 20px; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationThumbnailInner {
        overflow: clip;
        margin-bottom: 20px;
        width: 100%;
        aspect-ratio: 51 / 25; }
        #howtorefrelabo #recommendation .recommendationContentItem .recommendationThumbnailInner .recommendationThumbnail {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transition: all 0.3s ease-in-out; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationContentTtl {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: 0em;
        transition: all 0.3s ease-in-out; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationContentTxt {
        font-size: 16px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0em;
        transition: all 0.3s ease-in-out; }
      #howtorefrelabo #recommendation .recommendationContentItem:hover {
        text-decoration: none; }
        #howtorefrelabo #recommendation .recommendationContentItem:hover .recommendationThumbnailInner .recommendationThumbnail {
          transform: scale3d(1.1, 1.1, 1);
          opacity: 1; }
        #howtorefrelabo #recommendation .recommendationContentItem:hover .recommendationContentTtl {
          text-decoration: none;
          opacity: 0.7; }
        #howtorefrelabo #recommendation .recommendationContentItem:hover .recommendationContentTxt {
          text-decoration: none;
          opacity: 0.7; } }
@media screen and (max-width: 750px) {
  #howtorefrelabo .pc {
    display: none; }
  #howtorefrelabo #kv {
    padding-top: 85px; }
    #howtorefrelabo #kv .kvInner {
      margin: 0 auto;
      width: 100%; }
    #howtorefrelabo #kv .pankuzu {
      display: flex;
      padding-left: 5.1282051282vw; }
      #howtorefrelabo #kv .pankuzu .pankuzuLink {
        position: relative;
        padding-right: 5.1282051282vw;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 3.3333333333vw;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0em; }
        #howtorefrelabo #kv .pankuzu .pankuzuLink::before {
          content: ">";
          position: absolute;
          bottom: 0.5128205128vw;
          right: 1.0256410256vw;
          font-size: 3.3333333333vw;
          font-weight: 400;
          line-height: 1;
          letter-spacing: 0em;
          color: #FF5E9D; }
      #howtorefrelabo #kv .pankuzu .pankuzuTxt {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 3.3333333333vw;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 0em; }
    #howtorefrelabo #kv .kvContentInner {
      z-index: 0;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: stretch;
      justify-content: stretch;
      gap: 7.6923076923vw;
      margin-top: 5.1282051282vw;
      padding: 15.3846153846vw 7.6923076923vw 12.8205128205vw 7.6923076923vw;
      border-radius: 7.6923076923vw;
      background-image: url(../images/beginner_renewal/kvBgImage_sp.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      box-shadow: inset 0px 0px 72px 0px rgba(255, 94, 157, 0.2); }
    #howtorefrelabo #kv .kvContentTtlInner {
      z-index: 1;
      position: relative; }
      #howtorefrelabo #kv .kvContentTtlInner .kvContentTtl {
        margin-bottom: 2.5641025641vw;
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-size: 7.6923076923vw;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.15em; }
      #howtorefrelabo #kv .kvContentTtlInner .kvContentCopy {
        font-size: 4.358974359vw;
        font-weight: 500;
        line-height: 170%;
        letter-spacing: 0.15em; }
    #howtorefrelabo #kv .kvContentTxtInner {
      z-index: 1;
      position: relative; }
      #howtorefrelabo #kv .kvContentTxtInner .kvContentTxt {
        font-size: 3.8461538462vw;
        font-weight: 400;
        line-height: 200%;
        letter-spacing: 0em; }
        #howtorefrelabo #kv .kvContentTxtInner .kvContentTxt .highlight {
          font-weight: 500;
          color: #FF5E9D; }
    #howtorefrelabo #kv .kvCopyImageInner {
      z-index: 0;
      position: absolute;
      top: 4.6153846154vw;
      right: 1.7948717949vw;
      width: 64.1025641026vw; }
      #howtorefrelabo #kv .kvCopyImageInner .kvCopyImage {
        display: block;
        width: 100%; }
  #howtorefrelabo #support {
    padding: 10.2564102564vw 0 28.2051282051vw 0; }
    #howtorefrelabo #support .supportTtlInner {
      margin-bottom: 2.5641025641vw; }
      #howtorefrelabo #support .supportTtlInner .supportTtl .supportTtl_sub {
        display: block;
        text-align: center;
        font-size: 5.1282051282vw;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.1em; }
      #howtorefrelabo #support .supportTtlInner .supportTtl .supportTtl_main {
        display: block;
        text-align: center;
        font-size: 7.6923076923vw;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
    #howtorefrelabo #support .supportContentWrap {
      margin: 0 auto;
      width: 89.7435897436vw;
      height: 128.2051282051vw; }
    #howtorefrelabo #support .supportContentInner {
      position: relative;
      width: 100%;
      height: 100%; }
    #howtorefrelabo #support .supportImageList {
      z-index: 3;
      position: absolute;
      top: 0;
      left: 16.6666666667vw;
      width: 56.4102564103vw;
      height: 51.2820512821vw; }
      #howtorefrelabo #support .supportImageList .supportImageInner {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all 0.5s ease-in-out; }
        #howtorefrelabo #support .supportImageList .supportImageInner .supportImage {
          display: block;
          width: 100%; }
        #howtorefrelabo #support .supportImageList .supportImageInner.active {
          opacity: 1; }
    #howtorefrelabo #support .supportBookList {
      z-index: 2;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 82.8205128205vw; }
      #howtorefrelabo #support .supportBookList .supportBookItem {
        opacity: 0;
        transform: translate3d(10px, 10px, 0) rotate3d(0, 0, 1, 2deg);
        position: absolute;
        top: 0;
        left: 0;
        padding: 13.3333333333vw 3.8461538462vw 0 8.9743589744vw;
        width: 100%;
        height: 100%;
        background-image: url(../images/beginner_renewal/support_book_bg_01.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: all 0.5s ease-in-out; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookCopy {
          margin-bottom: 2.5641025641vw;
          font-size: 4.1025641026vw;
          font-weight: 700;
          line-height: 120%;
          letter-spacing: 0.1em;
          color: #21B7F2; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookTtl {
          margin-bottom: 5.1282051282vw;
          font-size: 5.1282051282vw;
          font-weight: 500;
          line-height: 120%;
          letter-spacing: 0.05em; }
        #howtorefrelabo #support .supportBookList .supportBookItem .supportBookTxt {
          font-size: 3.8461538462vw;
          font-weight: 400;
          line-height: 180%;
          letter-spacing: 0.05em; }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(1) {
          background-image: url(../images/beginner_renewal/support_book_bg_01_sp.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(2) {
          background-image: url(../images/beginner_renewal/support_book_bg_02_sp.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem:nth-child(3) {
          background-image: url(../images/beginner_renewal/support_book_bg_03_sp.svg); }
        #howtorefrelabo #support .supportBookList .supportBookItem.active {
          opacity: 1;
          transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); }
      #howtorefrelabo #support .supportBookList::before {
        content: "";
        position: absolute;
        top: -0.5128205128vw;
        left: -1.2820512821vw;
        display: block;
        width: 92.5641025641vw;
        height: 85.8974358974vw;
        background-image: url(../images/beginner_renewal/support_book_bg_base_sp.svg);
        background-repeat: no-repeat;
        background-size: contain; }
    #howtorefrelabo #support .supportPagenation {
      position: absolute;
      top: calc(100% + 2vw);
      left: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.5641025641vw;
      transform: translate3d(-50%, 0, 0); }
      #howtorefrelabo #support .supportPagenation span {
        display: block;
        width: 2.0512820513vw;
        height: 2.0512820513vw;
        border-radius: 50%;
        background-color: #C9C9C9;
        border: 1px solid #C9C9C9; }
        #howtorefrelabo #support .supportPagenation span.active {
          background-color: #FFFFFF; }
  #howtorefrelabo #problem {
    position: relative;
    background-color: #EBF9FF; }
    #howtorefrelabo #problem::before {
      content: "";
      z-index: 0;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(../images/beginner_renewal/problem_bg_deco_sp.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    #howtorefrelabo #problem .problemWaveTopInner {
      position: absolute;
      bottom: 100%;
      left: 0;
      display: flex;
      align-items: end;
      justify-content: stretch;
      width: 100%;
      height: 7.1794871795vw; }
      #howtorefrelabo #problem .problemWaveTopInner picture {
        display: block;
        width: 100%; }
      #howtorefrelabo #problem .problemWaveTopInner .problemWaveTop {
        display: block;
        width: 100%;
        height: 100%; }
    #howtorefrelabo #problem .problemWaveBottomInner {
      position: absolute;
      top: 100%;
      left: 0;
      display: flex;
      align-items: start;
      justify-content: stretch;
      width: 100%;
      height: 7.1794871795vw; }
      #howtorefrelabo #problem .problemWaveBottomInner picture {
        display: block;
        width: 100%; }
      #howtorefrelabo #problem .problemWaveBottomInner .problemWaveBottom {
        display: block;
        width: 100%;
        height: 100%; }
    #howtorefrelabo #problem .problemWrap {
      z-index: 1;
      position: relative;
      padding: 2.5641025641vw 0 9.7435897436vw 0; }
    #howtorefrelabo #problem .problemInner {
      margin: 0 auto;
      width: 89.7435897436vw; }
    #howtorefrelabo #problem .problemCopy {
      margin-bottom: 10px;
      text-align: center;
      font-size: 5.1282051282vw;
      font-weight: 700;
      line-height: 140%;
      letter-spacing: 0.1em; }
    #howtorefrelabo #problem .problemTtl {
      margin-bottom: 26.9230769231vw;
      text-align: center;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-size: 7.6923076923vw;
      font-weight: 700;
      line-height: 140%;
      letter-spacing: 0.1em;
      color: #0088BE; }
    #howtorefrelabo #problem .problemContentListInner {
      padding-bottom: 10.2564102564vw; }
    #howtorefrelabo #problem .problemContentList {
      display: flex;
      flex-flow: column;
      align-items: stretch;
      justify-content: stretch;
      gap: 23.5897435897vw; }
    #howtorefrelabo #problem .problemContentItem {
      position: relative;
      padding: 10.2564102564vw 7.6923076923vw 9.2307692308vw 7.6923076923vw;
      width: 100%;
      background-color: #FFFFFF;
      border-radius: 5.1282051282vw;
      box-shadow: 4px 4px 0px 0px #7ad4f7; }
      #howtorefrelabo #problem .problemContentItem .problemContentTtl {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        gap: 2.5641025641vw;
        margin-bottom: 2.5641025641vw;
        font-size: 6.1538461538vw;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.05em; }
        #howtorefrelabo #problem .problemContentItem .problemContentTtl .problemContentTtlIcon {
          display: block;
          width: 10.2564102564vw; }
      #howtorefrelabo #problem .problemContentItem .problemContentTxt {
        margin-bottom: 7.6923076923vw;
        font-size: 4.1025641026vw;
        font-weight: 400;
        line-height: 180%;
        letter-spacing: 0em; }
        #howtorefrelabo #problem .problemContentItem .problemContentTxt .problemContentTxt_highlight {
          font-size: 4.6153846154vw;
          font-weight: 500;
          color: #FF5E9D;
          text-decoration: underline;
          /* 下線 */
          text-decoration-thickness: 0.7em;
          /* 線の太さ */
          text-decoration-color: #FFFAC7;
          /* 線の色 */
          text-underline-offset: -0.4em;
          /* 線の位置。テキストに重なるようにやや上部にする */
          text-decoration-skip-ink: none;
          /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */ }
      #howtorefrelabo #problem .problemContentItem .problemContentItemImageInner {
        width: 100%;
        aspect-ratio: 300 / 146; }
        #howtorefrelabo #problem .problemContentItem .problemContentItemImageInner .problemContentItemImage {
          display: block;
          width: 100%; }
      #howtorefrelabo #problem .problemContentItem .problemContentBubble {
        position: absolute;
        top: -21.2820512821vw;
        left: 0;
        box-sizing: border-box;
        padding: 11.0256410256vw 0 0 8.9743589744vw;
        width: 69.7435897436vw;
        height: 36.9230769231vw;
        background-image: url(../images/beginner_renewal/problem_content_bubble_01.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
        #howtorefrelabo #problem .problemContentItem .problemContentBubble .problemContentBubbleTxt {
          font-size: 4.1025641026vw;
          font-weight: 500;
          line-height: 120%;
          letter-spacing: 0em; }
      #howtorefrelabo #problem .problemContentItem:nth-child(1) .problemContentBubble {
        top: -21.7948717949vw;
        left: 4.8717948718vw;
        padding: 11.0256410256vw 0 0 8.9743589744vw;
        width: 69.7435897436vw;
        height: 36.9230769231vw;
        background-image: url(../images/beginner_renewal/problem_content_bubble_01.svg); }
        #howtorefrelabo #problem .problemContentItem:nth-child(1) .problemContentBubble .problemContentBubbleTxt {
          transform: rotate3d(0, 0, 1, 1.5deg); }
      #howtorefrelabo #problem .problemContentItem:nth-child(2) .problemContentBubble {
        top: -25.641025641vw;
        left: 3.8461538462vw;
        padding: 12.3076923077vw 0 0 14.358974359vw;
        width: 66.6666666667vw;
        height: 39.7435897436vw;
        background-image: url(../images/beginner_renewal/problem_content_bubble_02.svg); }
      #howtorefrelabo #problem .problemContentItem:nth-child(3) .problemContentBubble {
        top: -21.7948717949vw;
        left: 4.6153846154vw;
        padding: 12.3076923077vw 0 0 12.3076923077vw;
        width: 64.1025641026vw;
        height: 36.4102564103vw;
        background-image: url(../images/beginner_renewal/problem_content_bubble_03.svg); }
    #howtorefrelabo #problem .problemSubContentCopy {
      margin-bottom: 5.1282051282vw;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2.0512820513vw; }
      #howtorefrelabo #problem .problemSubContentCopy .problemSubContentCopyTxt {
        font-size: 4.6153846154vw;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: 0em;
        color: #0088BE; }
      #howtorefrelabo #problem .problemSubContentCopy::before {
        content: "";
        display: block;
        width: 6.6666666667vw;
        height: 12.8205128205vw;
        background-image: url(../images/beginner_renewal/problem_subContent_copy_deco_sp.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
      #howtorefrelabo #problem .problemSubContentCopy::after {
        content: "";
        display: block;
        width: 6.6666666667vw;
        height: 12.8205128205vw;
        background-image: url(../images/beginner_renewal/problem_subContent_copy_deco_sp.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: scale3d(-1, 1, 1); }
    #howtorefrelabo #problem .problemSubContentInner {
      margin-bottom: 10.2564102564vw; }
    #howtorefrelabo #problem .problemSubContentList {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: space-between;
      row-gap: 2.5641025641vw; }
    #howtorefrelabo #problem .problemSubContentItem {
      position: relative;
      padding: 6.6666666667vw 5.1282051282vw;
      width: 43.5897435897vw;
      background-color: #FFFFFF;
      border-radius: 3.5897435897vw;
      border: 1px solid #21B7F2; }
      #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: start;
        gap: 1.5384615385vw; }
        #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl .problemSubContentTtlIcon {
          display: block;
          object-position: center;
          height: auto;
          min-height: 9.7435897436vw; }
        #howtorefrelabo #problem .problemSubContentItem .problemSubContentTtl .problemSubContentTtl_txt {
          display: flex;
          align-items: center;
          text-align: center;
          margin-bottom: 3.8461538462vw;
          white-space: nowrap;
          font-size: 4.6153846154vw;
          font-weight: 700;
          line-height: 120%;
          letter-spacing: 0.02em; }
      #howtorefrelabo #problem .problemSubContentItem .problemSubContentTxt {
        font-size: 3.8461538462vw;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0.02em; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(1) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 6.6666666667vw; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(2) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 7.6923076923vw; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(3) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 8.7179487179vw; }
      #howtorefrelabo #problem .problemSubContentItem:nth-child(4) .problemSubContentTtl .problemSubContentTtlIcon {
        width: 7.1794871795vw; }
    #howtorefrelabo #problem .problemMovieTtlInner {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      gap: 2.5641025641vw;
      margin-bottom: 5.1282051282vw; }
      #howtorefrelabo #problem .problemMovieTtlInner .problemMovieTtl {
        text-align: center;
        font-size: 5.641025641vw;
        font-weight: 700;
        line-height: 130%;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
      #howtorefrelabo #problem .problemMovieTtlInner::after {
        content: "";
        display: block;
        width: 11.7948717949vw;
        height: 0.7692307692vw;
        background-color: #FF5E9D; }
    #howtorefrelabo #problem .problemMovieInner {
      position: relative; }
      #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor {
        z-index: 1;
        position: relative;
        display: block;
        margin: 0 auto;
        width: 100%;
        aspect-ratio: 35 / 23;
        border-radius: 8.7179487179vw; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieThumbnailInner {
          overflow: clip;
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 8.7179487179vw;
          border: 1.0256410256vw solid #FF5E9D; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieThumbnailInner .problemMovieThumbnail {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: all 0.3s ease-in-out; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieDecoInner {
          position: absolute;
          bottom: -1.5384615385vw;
          right: -3.3333333333vw;
          width: 18.4615384615vw; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor .problemMovieDecoInner .problemMovieDeco {
            display: block;
            width: 100%; }
        #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover {
          opacity: 1; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover img {
            opacity: 1; }
          #howtorefrelabo #problem .problemMovieInner .problemMovieAnchor:hover .problemMovieThumbnailInner .problemMovieThumbnail {
            transform: scale3d(1.1, 1.1, 1); }
      #howtorefrelabo #problem .problemMovieInner::before {
        content: "";
        position: absolute;
        bottom: -4.6153846154vw;
        left: 50%;
        display: block;
        width: 100%;
        height: 13.3333333333vw;
        background-color: #D3F0FD;
        border-radius: 50%;
        transform: translate3d(-50%, 0, 0); }
  #howtorefrelabo #recommendation {
    margin-top: 3000px;
    padding: 17.4358974359vw 0; }
    #howtorefrelabo #recommendation .recommendationInner {
      margin: 0 auto;
      width: 89.7435897436vw; }
    #howtorefrelabo #recommendation .recommendationTtlInner {
      margin-bottom: 7.6923076923vw; }
      #howtorefrelabo #recommendation .recommendationTtlInner .recommendationTtl {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 3.8461538462vw;
        margin-bottom: 6.1538461538vw;
        height: 100%;
        font-size: 7.6923076923vw;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.1em;
        color: #FF5E9D; }
        #howtorefrelabo #recommendation .recommendationTtlInner .recommendationTtl .recommendationTtlIcon {
          display: block;
          margin-top: 1.0256410256vw;
          width: 8.2051282051vw; }
      #howtorefrelabo #recommendation .recommendationTtlInner .recommendationDescInner .recommendationDescription {
        margin-bottom: 2.5641025641vw;
        font-size: 4.6153846154vw;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0em; }
      #howtorefrelabo #recommendation .recommendationTtlInner .recommendationDescInner .recommendationInnerNote {
        font-size: 3.3333333333vw;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0em; }
    #howtorefrelabo #recommendation .recommendationContentInner {
      display: flex;
      flex-flow: column;
      align-items: stretch;
      justify-content: stretch;
      gap: 6.1538461538vw; }
    #howtorefrelabo #recommendation .recommendationContentItem {
      padding: 5.1282051282vw;
      width: 100%;
      background-color: #FFEFF5;
      border-radius: 3.8461538462vw; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationThumbnailInner {
        margin-bottom: 5.1282051282vw;
        width: 100%;
        aspect-ratio: 31 / 18; }
        #howtorefrelabo #recommendation .recommendationContentItem .recommendationThumbnailInner .recommendationThumbnail {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationContentTtl {
        margin-bottom: 2.5641025641vw;
        font-size: 4.6153846154vw;
        font-weight: 500;
        line-height: 120%;
        letter-spacing: 0em; }
      #howtorefrelabo #recommendation .recommendationContentItem .recommendationContentTxt {
        font-size: 3.8461538462vw;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: 0em; } }