@charset "utf-8";
@media (max-width: 768px) {
  /*header ++++++++++++++++++++*/
  .head-inner {
    justify-content: space-between;
  }
  #hum-button {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
  .h-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: min(256px, 30vw);
  }
  .head_button {
    width: auto;
    margin-left: 0;
  }
  .head_button a {
    padding-left: .85em;
    padding-right: .85em;
    font-size: min(1.6rem, 2.6vw);
  }
  .g-nav {
    display: none;
  }
  #l-nav.is-view {
    opacity: 1;
    visibility: visible;
  }
  #l-nav.is-view .l-nav-wrap {
    translate: 0 0;
  }
  #l-nav.is-view #hum_close{
    opacity: 1;
  }
  /*hero ++++++++++++++++++++++*/
  .hero-main {
    height: auto;
  }
  .hero-main_inner {
    padding-top: 15px;
  }
  .hero-main_wrapper {
    width: 100%;
    aspect-ratio: 1/1.3093;
    height: auto;
  }
  .hero_mask {
    mask-image: url("../img/top_new/wall/hero_mask_sp.svg");
    -webkit-mask-image: url("../img/top_new/wall/hero_mask_sp.svg");
  }
  .main-hero_contents {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .hero-title {
    grid-area: 1 / 1 / 2 / 2;
  }
  .hero-title picture{
    display: block;
  }
  .hero-title span{
    display: none;
  }
  .hero_app {
    grid-area: 2 / 1 / 3 / 2;
    display: grid;
    grid-template-columns: min(252px, 33vw);
    margin-left: auto;
    translate:0 0;
  }
  .box-hero_app{
    grid-template-columns: 1fr;
  }
  .item-hero_app{
    aspect-ratio:1/.9;
  }
  .item-hero_app.price::before{
    rotate:110deg;
  }
  .hero_app .img-tablet{
    display: none;
  }
  .hero-cta_wrap {
    grid-area: 3 / 1 / 4 / 2;
    margin-top: 0;
    width: min(495px, 82vw);
  }
  .hero-cta_wrap::before {
    translate: 50% 0%;
  }
  .hero-cta__title {
    width: 75%;
  }
  .hero-cta_wrap .set-button-wrap {
    width: 85%;
    margin-top: min(100px, 12vw);
  }
  .hero-cta_wrap .set-button-wrap .dl-button-set {
    width: 100%;
  }
  .dl-button-set .fkds {
    width: min(9.6rem, 14vw);
    translate: -80% -50%;
  }
  .hero-cta_wrap .set-button-wrap .dl-button-set .round-button {
    width: 100%;
  }
  .hero-cta_wrap .set-button-wrap .round-button.inq {
    width: min(455px, 60vw);
  }
  /*intro*/
  .box-index-intro {
    padding-left: 0;
    padding-right: 0;
  }
  .box-index-intro .app {
    width: 100%;
    padding-bottom: calc(100vw*0.55);
  }
  .item-index-intro::before {
    top: 100%;
    translate: -50% calc(-100% + max(-60px, -14vw));
    background-image: url("../img/top_new/wall/intro_ccl_sp.png");
    aspect-ratio: 1/0.6623;
  }
  .box-index-intro .num-att-list {
    padding-left: min(35px, 3.5vw);
    padding-right: min(35px, 3.5vw);
    width: 85%;
  }
  /*case*/
  .intro-case-list {
    gap: min(3rem, 7vw);
    grid-template-columns: repeat(2, 1fr);
    scale: 1.1;
  }
  .intro-case-list > li .case-in {
    scale: 1.2;
    border: min(10px, 1.2vw) solid #f7f5f0;
  }
  .intro-case-list > li:nth-child(odd) .case-in {
    transform-origin: left center;
  }
  .intro-case-list > li:nth-child(2), .intro-case-list > li:nth-child(5) {
    translate: 0 0;
  }
  .intro-case-list > li:nth-child(1), .intro-case-list > li:nth-child(4), .intro-case-list > li:nth-child(5) {
    z-index: 1;
  }
  .intro-case-list > li:nth-child(even) .case-in {
    translate: 0 20%;
    transform-origin: right center;
  }
  .intro-case-list > li .in-title h3 {
    font-size: min(14px, 2.8vw);
  }
  .intro-case-list > li .att-text {
    display: none;
  }
  .item-intro-case .title {
    position: relative;
    width: min(400px, 80%);
    height: auto;
    translate: 0 0;
    top: 0;
    left: 0;
    margin-top: min(120px, 20vw);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .item-intro-case .att-text.sp{
    display: block;
    width: min(30em,100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
  }
  /*system*/
  .index-sysytem-list {
    grid-template-columns: repeat(2, 1fr);
  }
  /*feature*/
  .index-feature-blc {
    padding-left: 0;
    padding-right: 0;
  }
  .item-index-feature {
    grid-template-columns: min(600px, calc(100% - min(100px, 20vw)));
    gap: min(30px, 5vw);
    border-radius: 0;
    padding-top: min(100px, 20vw);
    mask-image:url("../img/top_new/mask_egg.png");
    -webkit-mask-image:url("../img/top_new/mask_egg.png");
    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
  }
  .box-index-feature > li::before{
    translate: 70% 50%;
  }
  .box-index-feature >li:nth-child(even)::before{
    translate: -70% 50%;
  }
  .item-feat01, .item-feat03 {
    padding-bottom: min(120px, 20vw);
  }
  .item-feat02 {
    padding-bottom: min(1180px, calc(100vw*1.68));
  }
  .item-feat02 .btm-thumb {
    aspect-ratio: 1/1.6527;
    border-radius: 0 0 40vw 40vw;

  }
  .item-index-feature::before {
    border-radius: 0;
  }
  .item-index-feature .comment {
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
  }
  .item-feat02 .thumb {
    display: none;
  }
  .item-feat02 .comment {
    grid-area: 1 / 1 / 2 / 2;
  }
  .feature03-list {
    padding-left: 0;
    padding-right: 0;
  }
  .feature03-list li {
    width: calc((100% - min(3.6rem, 6vw))/3);
  }
  /*support*/
  .index-support-blc{
    padding-left: 0;
    padding-right: 0;
  }
  .box-index-support .sec-title{
    padding-left: min(3.5rem, 3.2vw);
    padding-right: min(3.5rem, 3.2vw);
  }
  .link-aws.sp{
    display: block;
  }
  .link-aws.pc{
    display: none;
  }
  .box-index-support {
    grid-template-columns: 1fr;
  }
  .box-index-support .thumb {
    width: 100%;
    translate: 0 0;
    grid-column: auto;
    grid-row: auto;
    margin-top: min(30px, 4vw);
  }
  .box-index-support .thumb picture {
    display: block;
  }
  .box-index-support .thumb img {
    object-fit: cover;
    height: 100%;
    object-position: center;
    width: 100%;
    max-width: inherit;
  }
  .box-index-support .comment {
    margin-top: min(15px, 2.5vw);
    padding-left: min(3.5rem, 3.2vw);
    padding-right: min(3.5rem, 3.2vw);
  }
  /*howto*/
  .howto-step-list {
    grid-template-columns: 1fr;
    gap: min(60px, 10vw);
  }
  .howto-step-list li::before, .howto-step-list li::after {
    opacity: 1;
    z-index: 2;
  }
  .howto-step-list li:nth-child(n+2)::before, .howto-step-list li:nth-child(n+2)::after {
    background-image: url("../img/top_new/c-line_sp.svg");
    aspect-ratio: 1 / 7.8182;
    top: max(-30px, -5vw);
  }
  .howto-step-list li .in-text {
    width: auto;
  }
  /*cta*/
  .cta-title {}
  .cta-inquiry-wrap {
    display: grid;
    grid-template-columns: min(600px, 100%);
    justify-content: center;
  }
  .cta-pic{
    translate: -50% -25%;
  }
}
@media (max-width: 480px) {
  .round-button.l-org a{
    border-width: 1px;
  }
  .sec-title {
    padding-left: 1.5em;
  }
  .index-banner-blc {
    padding-top: min(56px, 12vw);
    padding-bottom: min(56px, 8vw);
    background: url("../img/top_new/wall/round.svg") no-repeat top center/100%, linear-gradient(rgba(247, 245, 240, 0) calc(100vw*0.06), rgba(247, 245, 240, 1) calc(100vw*0.06), rgba(247, 245, 240, 1) calc(100% - (100vw*0.06)), rgba(247, 245, 240, 0) calc(100% - (100vw*0.06))), url("../img/top_new/wall/round.svg") no-repeat bottom center/100%;
    z-index: 1;
    position: relative;
  }
  .box-index-banner {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }
  .item-banner_award, .item-banner_area {
    width: 100%;
  }
  /*sec intro*/
  .index-intro-blc {
    background-size: 140vw;
    margin-top: calc(-100vw*0.06);
  }
  .box-index-intro::before {
    background-image: url("../img/top_new/wall/fkds_wht_sp.png");
  }
  .item-index-intro::before{
    translate: 0 calc(-100% + max(-70px, -18vw));
    left: 0;
    width: calc(100vw - 10px);
  }
  /*system*/
  .index-sysytem-list {
    column-gap: 0;
  }
  .system-item {
    padding-bottom: 0;
  }
  .system-item::before {
    height: 100%;
    width: 95%;
    aspect-ratio: auto !important;
  }
  .system-item dl dd ul > li {
    font-size: min(12px, 2.6vw);
  }
  .item-system-thumb {
    margin-top: min(40px, 8vw);
  }
  .item-system-thumb .thumb {
    position: relative;
    z-index: 1;
  }
  .item-system-thumb .thumb::before {
    content: "";
    width: 100vw;
    aspect-ratio: 1/0.4627;
    background: url("../img/top_new/system/thumb_wave.png") no-repeat center/cover;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
  }
  /*support*/
  .box-index-support .sec-title{
    padding-left: min(calc(3.5rem + 1.5em), calc(3.2vw + 1.5em));
  }
  /*review*/
  .index-review-blc{
    margin-top: 0;
    padding-top: min(30px,8vw);
  }
  .box-intro-case{
    padding-bottom: min(250px, 30vw);
  }
  .box-intro-case::before{
    background:url(../img/top_new/wall/wid_wave.svg) no-repeat bottom 2px center / 180%, linear-gradient(rgba(247, 245, 240, 1) calc(100% - (100vw * 0.2733)), rgba(247, 245, 240, 0) calc(100% - (100vw * 0.2733)));
  }
  .item-review-set{
    width: min(480px,64vw);
    margin-left: auto;
    margin-right: auto;
  }
  .index-review-blc .button-wrap{
    margin-top: min(50px,6.7vw);
  }
  /*system*/
  .box-index-system .top-text{
    text-align: left;
    width: min(23em,100%);
  }
  .system-item:nth-child(-n+2) .icon{
    width: calc(100%/2.8);
  }
  .system-item:nth-child(1) .icon{
    translate: -50% -10%;
  }
  .system-item:nth-child(5) .icon{
    translate: -50% 15%;
  }
  .item-system-thumb .num-att-list{
    width: min(470px,65vw);
  }
  /*feature*/
  .feature03-list li {
    width: calc((100% - min(1.8rem, 3vw))/2);
  }
  /*wall*/
  .item-index-feature::before
  ,.box-cta-contents{
    background-size: 250%;
  }
  .box-cta-contents::before, .box-cta-contents::after{
    aspect-ratio: 1 / 0.055;
  }
  .box-cta-contents{
    padding-bottom: min(290px,35vw);
  }
  /*cta*/
  .cta-inquiry-wrap{
    z-index: 4;
  }
  .cta-pic{
    width: 100vw;
    left: 50%;
    translate: -50% -15%;
  }
}