@charset "utf-8";

@layer reset , base, layout, components , utilities;

@layer reset{
  *{
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img{
    text-align: center;
    vertical-align: middle;
    max-width: 100%;
  }
  em{
    font-weight: bold;
    font-style: normal;
  }
  a{
    text-decoration: none;
  }
  li{
    list-style: none;
  }
}
@layer base{
  :root{
    --color-base: #222;
    --color-main: #006CBA;
    --color-primary: #DC002F;
    --color-white: #ffffff;
    --color-faq: #42A08A;
    font-size: 10px;
    color: var(--color-base);
  }
  body{
    font-family: source-han-sans-japanese, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    min-width: 320px;
  }
}
@layer layout{
  .l-header{
    position: fixed;
    width: 100%;
    z-index: 10;
    background: #fff;
    height: 7rem;
  }
  .l-main{
    background: linear-gradient(90deg, #FAFEFF 0%, #E6EDF2 100%);
  }
  .l-main-inner{
    position: relative;
    display: flex;
    justify-content: center;
    margin-inline: auto;
    padding: 0 9rem 0 0;
  }
  .c-scroll-arrow{
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    right: 10px;
    top: calc(100vh - 230px);

    &::after{
    content: "";
    display: inline-block;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%227%22 height=%2260%22 viewBox=%220 0 7 60%22 fill=%22none%22%3E%3Cpath d=%22M2 49.5H7L2 60H0V0H2V49.5Z%22 fill=%22%23006CBA%22/%3E%3C/svg%3E");
    width: 7px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: bounce 1.5s infinite alternate;
    }
  }
  @keyframes bounce {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .c-scroll-arrow-text {
    color: #006CBA;
    font-size: 1.4rem;
    font-weight: 700;
    writing-mode: vertical-rl;
  }
  .l-sticky-contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    height: 100vh;
    top: 0;
    flex-shrink: 1;
    padding-top: 7rem;
    padding-bottom: 6rem;
    padding-left: clamp(1em, calc(1rem + (140 - 10) * (100vw - 100rem) / (1920 - 1000)), 14rem);
    padding-right: clamp(2.2rem, calc(2.2rem + (380 - 22) * (100vw - 100rem) / (1920 - 1000)), 3.8rem);
  }
  .l-scroll-contents{
    padding: 7rem 0 6rem;
    flex-basis: 64rem;
    flex-shrink: 0;
    box-shadow: 0px 0px 8px rgba(207, 220, 229);
  }
  .l-section-inner{
    padding: 5rem 4rem 4rem;
  }
  .l-section-introduction{
    background: #F2F2F7;
  }
  .l-section-issue{
    background: url(/img/products/rk/188022001/bg_section-issue.png) no-repeat center / cover;
    background-color: #F2F2F7;
    width: 100%;
    height: 37.5rem;
    flex-shrink: 0;

    .l-section-inner{
      padding: 4rem 4rem 2rem;
      height: 100%;
    }
  }
  .l-section-solution{
    background-color: var(--color-white);

    .l-section-inner{
      padding: 4.8rem 4rem 5.2rem;
    }
  }
  .l-section-faq{
    background: #F2F2F7;

    .l-section-inner{
      padding: 4.8rem 5rem 8rem;
    }
  }
  .l-section-announcement{
    background: var(--color-white);

    .l-section-inner{
      padding: 4.8rem 4rem 5.2rem;
    }
  }
  .l-footer{
    position: fixed;
    width: 100%;
    z-index: 10;
    bottom: 0;
    height: 6rem;
  }
}
@layer components{
  .lp_header .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 1.2rem 3.2rem;
    width: 100%;
    max-width: 126.4rem;
  }
  
  .lp_header .inner .logo img {
    width: 124px;
  }
  
  .lp_header .utility_group {
    display: flex;
  }
  
  .lp_header .utility {
    margin-left: 15px;
  }
  
  .lp_header .utility>*:last-child {
    margin-bottom: 0;
  }
  /* lp-textPhone */
  .lp-textPhone-outer {
    margin-bottom: calc((100vw/1200)*80);
    padding: 0 20px;
  }

  .lp-textPhone-outer>*:last-child {
    margin-bottom: 0;
  }

  .lp-textPhone {
    display: block;
    margin-bottom: 24px;
  }

  .lp-textPhone>*:last-child {
    margin-bottom: 0;
  }

  .lp-textPhone-body>*:last-child {
    margin-bottom: 0;
  }

  .lp-textPhone-number {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
  }

  .lp-textPhone-numberGroup {
    display: flex;
    align-items: flex-start;
    margin-top: 0 !important;
    margin-bottom: 8px;
  }

  .lp-textPhone-note {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.2;
  }

  .lp-textPhone-icon {
    width: 36px;
    min-width: 36px;
    height: 20px;
    min-height: 20px;
    margin-top: 0.2em;
    margin-right: 8px;
  }

  .lp-textPhone-icon .of-iconColor-primary {
    fill: #00a23f;
  }

  .lp-textPhone-icon .of-iconColor-secondary {
    fill: #fe8800;
  }

  .lp-textPhone-icon .of-iconColor-tertiary {
    fill: #0086b1;
  }

  .lp-textPhone-icon .of-iconColor-quaternary {
    fill: #319F2D;
  }

  .lp-textPhone-icon .of-iconColor-quinary {
    fill: #1e1c1c;
  }

  .lp-textPhone.of-center {
    text-align: center;
  }

  .lp-textPhone.of-center .lp-textPhone-numberGroup {
    justify-content: center;
  }

  a.lp-textPhone-body,
  a:hover.lp-textPhone-body {
    display: inline-block;
    color: #333;
    text-decoration: none;
    cursor: default;
    opacity: 1;
  }
 
  /* lp_footer */
  .lp_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    padding: 2rem 2rem;
    background: #333;
    gap: 6rem;
  }
  .lp_footer .copy {
    font-size: 1.3rem;
    position: relative;
    color: #fff;
  }
  .lp_footer .copy::before {
    position: absolute;
    left: -3rem;
    display: block;
    width: 1px;
    height: 100%;
    background: #ccc;
    content: "";
  }
  .lp_footer .link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;
  }
  .lp_footer .link li {
    position: relative;
    font-size: 1.3rem;
    line-height: 1em;
  }
  .lp_footer .link li a {
    font-size: 1.3rem;
    color: #fff;
  }
  .lp_footer .link li + li::before {
    position: absolute;
    left: -3rem;
    display: block;
    width: 1px;
    height: 100%;
    background: #ccc;
    content: "";
  }

  .c-mv-pc{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    overflow-y: auto;
    .c-main-title{
      font-size: clamp(3.2rem , calc(3.2rem + (48 - 32) * (100vw - 100rem) / (1920 - 1000)), 4.8rem);
      font-weight: 700;
      text-align: center;
      background: linear-gradient(90deg, #1494F0 0%, #006CBA 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 0 3.2rem;
      justify-content: center;
  
      .c-main-title-underline{
        border-bottom-width: 0.2rem;
        border-style: solid;
        border-image-source: linear-gradient(90deg, #0DAFE9 0%, #006CBA 100%);
        border-image-slice: 1;
        border-top: transparent;
        border-right: transparent;
        border-left: transparent;
      }
    }
    .c-series-title{
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color-base);
      font-size: clamp(1.8rem,  calc(1.8rem + (24 - 18) * (100vw - 100rem) / (1920 - 1000)), 2.4rem);
      margin: 0 0 2.4rem 0;
      flex-wrap: wrap;
      gap: 1.6rem;
    }
    .c-icon-new{
      display: inline-flex;
      padding: 0.3rem 0.8rem;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      background: var(--color-primary);
      color: #FFF;
      text-align: center;
      font-size: 1.6rem;
      font-weight: 700;
    }
    .c-mv-image{
      width: clamp(40rem, calc(21.087rem + 18.913vw) , 57.4rem);
    }
  }
  .c-mv-sp{
    background: url(/img/products/rk/188022001/bg_sp-mv.png) no-repeat center / cover;
    background-color: #ffffff;
    padding: 3.2rem 4rem 5.2rem;
    .c-main-title-wrap{
      display: flex;
      flex-direction: column;
    }
    .c-main-title-sub{
      font-size: 4rem;
      display: inline-flex;
      align-items: baseline ;
      letter-spacing: 0.16rem;
    }
    .c-main-title-font-small{
      font-size: 3.2rem;
      font-weight: normal;
      letter-spacing: -0.128rem;
    }
    .c-main-title{
      display: flex;
      align-items: center;
      font-size: 4rem;
      position: relative;
      font-weight: 700;
      margin: 0 0 2rem;
    }
    
    .c-main-title-text{
      position: static;
      padding-left: 4.6rem;
      z-index: 1;
      font-size: 8.8rem;
      display: flex;
      align-items: center;
      word-break: keep-all;
      line-height: 1;
    }

    .c-main-title-text__font-large {
      font-size: 10rem;
    }
    .c-icon-navi{
      display: inline-flex;
      justify-content: center;
      align-items: center;
      color: var(--color-main);
      font-size: 2rem;
      font-style: normal;
      font-weight: 700;
      line-height: 120%;
      width: 8rem;
      height: 8rem;
      flex-shrink: 0;
      aspect-ratio: 1/1;
      position: absolute;
      left: -1.4rem;
      z-index: 0;
    }
    
    .c-icon-navi::after {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #e3eeff;
      border-radius: 50%;
      filter: blur(6px);
      z-index: -1;
    }
    .c-main-image-wrap{
      margin-bottom: 4.6rem;
    }
    .c-main-image{
      position: relative;
    }
    .c-main-video{
      width: 53.6rem;
      height: 32rem;
      flex-shrink: 0;
      aspect-ratio: 536 / 320;
      content: "";
      position: absolute;
      left: 1.1rem;
      top: 1.2rem;
    }
    .c-main-image-copy{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 5rem;
      color: #FFF;
      text-shadow: 0px 0px 4px rgba(26, 40, 51, 0.25);
      font-family: "Source Han Sans JP";
      font-size: 1.8rem;
      letter-spacing: 0.36px;
      background: linear-gradient(to right, #1494F0, #006CBA);
      border-radius: 100px;
      margin: 0 0 2rem;
    }
    .c-main-image-copy::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -0.8rem;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 1.15rem solid transparent;
      border-right: 1.15rem solid transparent;
      border-top: 1rem solid #0b81d7;
    }
  }

  .c-btn-download{
    display: flex;
    justify-content: center;
    margin: 3.2rem 0 0;
  }

  .c-btn-download--narrow {
    margin-top: 1rem;
  }

  .c-mv-sp .c-btn-download{
    margin: 1.2rem 0 0;
  }
  .c-btn-link{
    display: flex;
    justify-content: flex-start;
    align-content: center;
    width: 33.5rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M16 16H0V8.88889H1.77778V14.2222H15.1111V8.88889H16.8889V16H16ZM3.55556 6.10311H6.08622V0H10.8036V6.1049H13.3333L8.44444 11.5556L3.55556 6.10311Z' fill='white'/%3E%3C/svg%3E") no-repeat left 1.8rem center /contain;
    background-size: 1.7rem 1.6rem;
    padding: 1.4rem 12rem 1.5rem 4.7rem;
    position: relative;
    color: #fff;
    font-size: 1.6rem;
    transition: all .3s ease 0s;
    background-color: var(--color-primary);

    &:hover{
      background-color: #c6002a;
    }
  }
  .c-btn-image{
    content: "";
    position: absolute;
    right: 1.8rem;
    top: 50%;
    transform: translateY(-50%);
    margin: auto 0;
    display: block;
    width: 9rem;
  }
  .c-section-title{
    font-size: 2.4rem;
    margin: 0 0 2.4rem;
    text-align: center;
    line-height: 1.4;
    font-feature-settings: "palt";

    .c-section-title-underline{
      border-bottom-width: 0.1rem;
      border-style: solid;
      border-image-source: var(--color-white);
      border-image-slice: 1;
      border-top: transparent;
      border-right: transparent;
      border-left: transparent;
    }
  }
  .c-section-title-xxlarge{
    font-size: 5.6rem;
  }
  .c-section-title-xlarge{
    font-size: 7rem;
  }
  .c-section-title-large-other {
    font-size: 7rem;
  }
  .c-section-title-large{
    font-size: 4.8rem;
  }
  .c-section-title-middle{
    font-size: 4rem;
  }
  .c-section-title-small{
    font-size: 2.4rem;
    line-height: 1.4;
  }
  .c-section-title-extra-small{
    font-size: 2.2rem;
    line-height: 1.4;
  }
  .l-section-issue .c-section-title{
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.50);
  }
  .l-section-faq .c-section-title{
    position: relative;
  }
  .l-section-announcement .c-section-title{
    position: relative;
    max-width: 400px;
    min-height: 162px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    margin-bottom: 3.2rem;
    padding: 2.4rem 5rem;
    background: linear-gradient(to right, #1494F0, #006CBA);
    border-radius: 5px;
  }
  .l-section-announcement .c-section-title::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.8rem;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 1.15rem solid transparent;
    border-right: 1.15rem solid transparent;
    border-top: 1rem solid #0b81d7;
  }

  .c-feature{
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    .c-feature-item{
      display: flex;
      flex-direction: column;
      justify-content: center;
      row-gap: 1.6rem;
      padding: 3.2rem;
      background-color: #ffffff;
    }
    .c-feature-title{
      display: flex;
      align-items: center;
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1.4;
      color: var(--color-main);
      padding: 0 0 0 8.8rem;
      min-height: 6.6rem;
      position: relative;

      &::before{
        content: "";
        position: absolute;
        width: 7.6rem;
        height: 6.6rem;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .c-feature-item-operation .c-feature-title::before{
      background: url(/img/products/rk/188022001/icon_feature-operation.png) no-repeat center / contain;
    }

    .c-feature-item-efficiency .c-feature-title::before{
      background: url(/img/products/rk/188022001/icon_feature-efficiency.png) no-repeat center / contain;
    }

    .c-feature-item-productivity .c-feature-title::before{
      background: url(/img/products/rk/188022001/icon_feature-productivity.png) no-repeat center / contain;
    }
    .c-feature-image{
      font-size: 2rem;
      line-height: 1.4;
    }
  }

  .c-icon-faq-new{
    content: "";
    position: absolute;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 11rem;
    height: 11rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='65' height='66' viewBox='0 0 65 66' fill='none'%3E%3Cpath d='M42.1218 64.1817C36.0288 65.894 29.5649 65.7611 23.5475 63.7997C17.53 61.8384 12.2294 58.1367 8.31571 53.1628C4.40206 48.1889 2.05124 42.1662 1.56051 35.8562C1.06979 29.5463 2.4612 23.2325 5.55879 17.7134C8.65639 12.1942 13.321 7.71753 18.9629 4.84944C24.6047 1.98136 30.9703 0.850678 37.2548 1.60039C43.5392 2.3501 49.4602 4.94653 54.269 9.06134C59.0778 13.1762 62.5585 18.6245 64.2708 24.7175' stroke='%23E9002E'/%3E%3C/svg%3E") no-repeat center / contain;
    color: var(--color-primary);
    font-size: 2.4rem;
    font-weight: 700;
    left: 10.4rem;
    top: -2.5rem;

    span{
      margin: 0;
    }
  }
  .c-faq-contents{
    display: flex;
    flex-direction: column;
    row-gap: 2.4rem;
  }
  .c-faq-content{
    
  }
  .c-faq-title{
    font-weight: 700;
    text-align: center;
    color: #00A896;
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 1.2rem;
  }
  .c-faq-items{
    row-gap: 1.4rem;
    display: flex;
    flex-direction: column;
  }
  .c-faq-item{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 15rem;
    background: #FFF;
    border-radius: 1rem;
    line-height: 1.5;
    font-size: 2rem;
    font-weight: 500;
    position: relative;

    &::before{
      content: "";
      position: absolute;
      display: block;
    }
  }
  .c-faq-question{
    border: 0.2rem solid #808588;
    color: #808588;
    padding: 2.4rem;
    padding-left: 18.6rem;

    &::before{
      width: 17.6rem;
      height: 16rem;
      background: url(/img/products/rk/188022001/icon_question.png) no-repeat center / contain;
      left: -2.4rem;
      top: -1.4rem;
    }
  }
  .c-faq-answer{
    border: 0.2rem solid #00A896;
    color: #00A896;
    padding: 2.4rem;
    padding-right: 18.6rem;

    &::before{
      width: 17.6rem;
      height: 16rem;
      background: url(/img/products/rk/188022001/icon_answer.png) no-repeat center / contain;
      right: 0.1em;
      bottom: -0.2rem;
    }
  }
  .c-image{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.2rem auto 2.4rem;
  }
  
  .c-text{
    margin: 0 0 3.2rem;
    font-size: 1.6rem;
  }
  .c-text-xl{
    margin: 0 0 3.2rem;
    font-size: 2.0rem;
  }
  .c-text-l{
    margin: 0 0 3.2rem;
    font-size: 1.8rem;
  }
  .c-text-s{
    margin: 0 0 3.2rem;
    font-size: 2rem;
  }
  .c-text-xs{
    margin: 0 0 3.2rem;
    font-size: 1.2rem;
  }
}
@layer utilities{
  .u-font-color-main{
    color: var(--color-main);
  }
  .u-font-color-white{
    color: var(--color-white);
  }
  .u-font-color-faq{
    color: var(--color-faq);
  }
  .u-font-weight-bold{
    font-weight: bold;
  }
  .u-font-weight-normal{
    font-weight: normal;
  }
  .u-ls-ajust-negative-0_016{
    letter-spacing: -0.016rem;
  }
  .u-ls-ajust-negative-0_032{
    letter-spacing: -0.032rem;
  }
  .u-ls-ajust-negative-0_06{
    letter-spacing: -0.06rem;
  }
  .u-ls-ajust-negative-1_35{
    letter-spacing: -1.35rem;
  }
  .u-ls-ajust-negative-2_8{
    letter-spacing: -2.8rem;
  }
  .u-ls-ajust-0_028{
    letter-spacing: 0.028rem;
  }
  .u-ls-ajust-0_036{
    letter-spacing: 0.036rem;
  }
  .u-margin-top-5{
    margin-top: 0.5rem;
  }
  .u-margin-top-10{
    margin-top: 1rem;
  }
  .u-negative-margin-left-4{
    margin-left: -0.4rem;
  }
  .u-negative-margin-left-5{
    margin-left: -0.5rem;
  }
  .u-negative-margin-left-7{
    margin-left: -0.7rem;
  }
  .u-negative-margin-left-12{
    margin-left: -1.2rem;
  }
  .u-line-height-1{
    line-height: 1;
  }
  .u-inline-flex{
    display: inline-flex;
  }
  .u-flex{
    display: flex;
  }
  .u-jc-center{
    justify-content: center;
  }
  .u-ai-center{
    align-items: center;
  }
  .u-flex-wrap{
    flex-wrap: wrap;

    &.--center{
      justify-content: center;
    }
  }
  .u-width-200{
    width: 200px;
  }
  .u-width-400-pc{
    width: 400px;
  }
}


/* mode mini pc */ 
@media screen and (max-width:1280px){
.c-mv-pc{
  .c-series-title{
    gap: 0.8rem;
  }
  .c-icon-new{
    font-size: 1.4rem;
  }
}
}

@media screen and (min-width:1600px) {
  .c-scroll-arrow {
    right: calc(50% - 820px);
  }
}


/* mode tablet */
@media screen and (max-width:1279px) { 
  .l-sticky-contents{
    display: none;
  }
  .c-scroll-arrow {
    display: none;
  }
  .l-main-inner{
    column-gap: 0;
    padding: 0;
    justify-content: center;
  }
  .l-header{
    height: auto;
    position: relative;
  }
  .l-scroll-contents{
    padding: 0;
  }
  .l-footer{
    position: relative;
  }
  .lp_header{
    .inner{
      padding: 2rem;
      justify-content: center;

      .logo{

        img{
          width: 12.4rem;
        }
      }
    }
    .utility_group{
      display: none;
    }
  }

  .lp-textPhone-outer{
    margin-bottom: 4rem;
  }
  .lp-textPhone-numberGroup{
    margin-bottom: 0.8rem;
  }
  .lp-textPhone-icon{
    width: 3.6rem;
    min-width: 3.6rem;
    height: 2rem;
    min-height: 2rem;
    margin-right: 0.8rem;
  }
  .lp-textPhone-number{
    font-size: 2.4rem;
  }
  .lp-textPhone-note{
    font-size: 1.2rem;
  }
  .lp_footer{
    padding: 2rem;
    flex-direction: column;
    gap: 1rem 0;
    color: var(--color-white);
    height: auto;
  }
  .lp_footer .link{
    gap: 3rem;
  }
  .lp_footer .link li{
    gap: 3rem;
  }
  .lp_footer .link li a{
    color: var(--color-text);
    font-size: 1.4rem;
  }
  .lp_footer .link li + li::before{
    left: -1.5rem;
  }
  .lp_footer .copy{
    color: var(--color-text);
    text-align: center;
    font-size: 1.4rem;
  }
  .lp_footer .copy::before{
    content: none;
  }
}

/* mode smartphone */
@media screen and (max-width:750px) {
  .l-scroll-contents {
    flex-basis: 37.5rem;
  }
  .u-width-400-pc{
    width: auto;
  }
  .u-width-200-sp{
    width: 200px;
  }
  .c-btn-link {
    width: 100%;
    font-size: 1.4rem;
  }
  .c-mv-sp {
    padding: 3.2rem 2rem 3.6rem;
  }
  .c-main-title {
    font-size: 4rem;
    margin: 0 0 0.6rem;
  }
  .c-main-title-sub{
    font-size: 2.4rem;
    letter-spacing: 0.048rem;
  }
  .c-main-title-font-small{
    font-size: 1.8rem;
    letter-spacing: 0.036rem;
  }
  .c-main-title{
    font-size: 4rem;
    margin: 0 0 0.6rem;
  }
  .c-main-title-text{
    padding-left: 4.6rem;
    font-size: 5.0rem;
    line-height: normal;
  }
  .c-main-title-text__font-large {
    font-size: 5.0rem;
  }
  .c-main-image-copy {
    width: 100%;
    font-size: 1.8rem;
    letter-spacing: 0.36px;
    margin: 0 0 1.5rem;
  }
  .c-main-image-wrap {
    margin-bottom: 0;
  }
  .l-section-inner {
    padding: 3.2rem 2rem 2.4rem;
  }
  .c-section-title {
    font-size: 2.4rem;
    margin: 0 0 1.8rem;
  }
  .c-section-title-xxlarge{
    font-size: 5.6rem;
  }
  .c-section-title-large-other {
    font-size: 3.2rem;
  }
  .c-section-title-xlarge{
    font-size: 3.6rem;
  }
  .c-section-title-large{
    font-size: 3.2rem;
  }
  .c-section-title-middle{
    font-size: 2.2rem;
  }
  .c-section-title-small{
    font-size: 1.8rem;
  }
  .c-section-title-extra-small{
    font-size: 1.6rem;
  }
  .c-main-video{
    width: calc(100% * 312 / 335);
    height: calc(100% * 176 / 285);
    left: 3vw;
    top: 3vw;
  }
  .c-feature {
    row-gap: 0.8rem;
  }
  .c-feature-item {
    row-gap: 1.2rem;
    padding: 1.6rem;
  }
  .c-feature-title{
    font-size: 1.6rem;
    padding: 0 0 0 5.2rem;
    min-height: 3.8rem;

    &::before{
      width: 4.4rem;
      height: 3.8rem;
    }
  }
  .c-feature-image {
    font-size: 1.4rem;
  }
  .l-section-issue{
    width: 100%;
    height: 22.0rem;

    .l-section-inner{
      padding: 1.2rem 2rem 2rem;
      height: 100%;
    }
  }
  .l-section-solution{
    .l-section-inner{
      padding: 3.2rem 2rem 3.6rem;
    }
  }
  .c-text-s {
    margin: 0 0 2.4rem;
    font-size: 1.4rem;
  }
  .c-icon-faq-new{
    width: 6.4rem;
    height: 6.4rem;
    font-size: 1.4rem;
    left: calc(50% - 100px);
    top: -0.4rem;
  }
  .c-faq-contents{
    row-gap: 2.4rem;
  }
  .c-faq-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
  }
  .c-faq-items {
    row-gap: 0.5rem;
  }
  .c-faq-question {
    padding: 0.7rem 1rem 0.7rem 13rem;
    &::before{
      width: 12.4rem;
      height: 9.7rem;
      left: -0.5rem;
      top: -0.9rem;
    }
  }
  .c-faq-item {
    width: 100%;
    min-height: 9.5rem;
    font-size: 1.6rem;
  }
  .c-faq-answer {
    padding: 1rem 12rem 1rem 1rem;

    &::before{
      width: 11.9rem;
      height: 9.7rem;
      right: 0.3rem;
      bottom: -0.2rem;
    }
  }
  .l-section-faq{
    .l-section-inner{
      padding: 3.2rem 2rem 3.2rem;
    }
  }
  .l-section-announcement{
    .l-section-inner{
      padding: 3.2rem 2rem 3.6rem;
    }
  }
  .l-section-announcement .c-section-title{
    width: 266px;
    height: 108px;
    min-height: auto;
    margin-inline: auto;
    padding: 0 0 0.7rem;
  }
}

@media screen and (max-width: 396px) {
  .l-main-inner {
    display: block;
  }
  .c-main-title-sub{
    font-size: 2.1rem;
  }
  .c-section-title-extra-small {
    font-size: 1.4rem;
  }
  .c-faq-item {
    font-size: 1.4rem;
  }
}