@charset "utf-8";

@media screen and (min-width: 1024px) {
  body {
    font-size: 1.8em; /*18px*/
  }
  .container {
    padding: 10rem 0;
    margin: 0 auto;
  }
  .pc-none {
    display: none;
  }
  a[href^='tel:'] {
    pointer-events: none;
  }

  /*====================================
	 HEADER
	====================================*/
  .header .container {
    padding: 20px 0;
  }
  .header .logo {
    margin: 0 auto;
    max-width: 260px;
  }

  /*====================================
	 MAIN
	====================================*/
  .mv .container {
    max-width: 1000px;
  }
  .mv .mv-bdr {
    border-radius: 5rem;
    padding: 1.2rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  }
  .mv .mv-bg {
    padding-top: 6rem;
    border-radius: 4rem;
  }
  .mv h2 {
    margin-bottom: 5rem;
    font-size: 3.6rem;
    text-align: center;
  }
  .mv h2 .w-bg {
    padding: 1rem 2rem;
    border-bottom: 6px solid;
  }
  .mv h2 .w-bg2 {
    padding: 5rem 2rem 1rem;
  }
  .mv h2 .fc-bgrade {
    font-size: 6.4rem;
  }
  .mv h2 .dot {
    background-size: 9px auto;
  }
  /*
	.mv h2 .dot::before{
		font-size: 18%;
	}
	*/
  .mv p {
    padding: 0 0 5rem 0;
    font-size: 2.4rem;
    text-align: center;
  }
  .mv figure {
    width: 60%;
  }

  /*====================================
	 cta
	====================================*/

  .cta {
    margin-bottom: -8rem;
  }
  .cta .container {
    max-width: 800px;
    padding: 5rem 0 14rem;
  }
  .cta .container::before {
    width: 105px;
    height: 186px;
    left: 5rem;
    top: 5rem;
  }
  .cta ul {
    padding-left: 0rem;
  }
  .cta li:nth-of-type(1) {
    font-size: 2.5rem;
  }
  .cta li:nth-of-type(2) {
    margin: 4rem auto;
  }
  .cta li:nth-of-type(2) a {
    padding: 3.25rem 8rem 2.5rem;
  }
  .cta li:nth-of-type(2) a span {
    font-size: 3.6rem;
  }
  .cta li:nth-of-type(2) a span::before {
    right: -0.5rem;
  }

  /*====================================
	 contents
	====================================*/
  h2 {
    margin-bottom: 4rem;
    font-size: 4.8rem;
  }
  h2 .f-en {
    font-size: 2rem;
  }
  h3 {
    font-size: 3.2rem;
  }

  /*trouble*/
  .trouble {
    border-radius: 8rem 8rem 0 0;
  }
  .trouble .container {
    max-width: 1000px;
  }
  .trouble h2 {
    font-size: 4.8rem;
  }
  .trouble h2 .fuki {
    margin-bottom: 5rem;
  }
  .trouble h2 .fuki span {
    padding: 1.5rem 3rem;
  }
  .trouble h2 .fuki span::after {
    width: 40px;
    height: 18px;
    bottom: -17px;
  }
  .trouble figure {
    width: 70%;
    margin: 0 auto;
  }
  .trouble ul {
    margin-top: 6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
  }
  .trouble li {
    margin: 0;
    padding: 3rem;
    width: calc((100% / 2) - 9rem);
    font-size: 2.2rem;
  }
  .trouble li span {
    display: inline;
  }
  .trouble li::before {
    font-size: 4.8rem;
    left: 2.5rem;
    top: -3rem;
  }

  /*robot*/
  .robot {
    margin-bottom: -8rem;
  }
  .robot::before {
    width: 90px;
    height: 36px;
  }
  .robot .container {
    max-width: 1000px;
  }
  .robot h2 {
    margin-bottom: 2rem;
    font-size: 3.6rem;
  }
  .robot h2 .fc-bgrade {
    font-size: 4.8rem;
  }
  .robot h2 .txt-bg {
    padding: 1.5rem 2rem;
  }
  .robot figure {
    margin: 6rem auto 0;
    width: 50%;
  }
  .robot figure::before {
    width: 220px;
    height: 319px;
    left: -12rem;
    bottom: 11rem;
  }
  .robot ul {
    margin: 0 0 6rem 0;
    gap: 20px;
  }
  .robot li {
    padding: 3rem 1rem;
    width: calc(31% - 2rem);
  }
  .robot li h3 {
    font-size: 2.4rem;
  }
  .robot li span {
    font-size: 3rem;
  }
  .robot li::before {
    width: 50px;
    height: 50px;
    top: -3rem;
  }

  /*service*/
  .service {
    border-radius: 8rem 8rem 0 0;
  }
  .service figure {
    width: 50%;
    margin: 0 auto;
  }
  .service ul {
    display: flex;
    justify-content: center;
    gap: 3rem;
  }
  .service li {
    width: calc(100% / 3);
  }
  .service dl {
    margin-top: 4rem;
  }
  .service h3 {
    padding-left: 0;
    font-size: 2.4rem;
    text-align: center;
  }
  .service h3 span {
    font-size: 3rem;
  }
  .service dt {
    padding: 5rem 2rem 2rem;
  }
  .service dt::before {
    left: 50%;
    transform: translateX(-50%);
    top: 0%;
    font-size: 3rem;
  }
  .service dd {
    padding: 3rem;
  }

  /*voice*/
  .voice .swiper {
    padding: 3%;
  }
  .voice .box {
    padding: 4rem 3rem;
  }
  .voice ul {
    margin-top: 2rem;
  }

  /*reason*/
  .reason .container {
    max-width: 1000px;
  }
  .reason .box {
    margin-top: 3rem;
    padding: 0rem 3rem;
  }
  .reason dl {
    gap: 2rem;
  }
  .reason dt {
    min-width: 44px;
    max-width: 44px;
  }
  .reason .txt-box {
    flex: 1;
  }
  .reason figure {
    width: 45%;
  }

  /*flow*/
  .reason,
  .flow {
    border-radius: 8rem 8rem 0 0;
  }
  .flow ul {
    margin-top: 6rem;
    display: flex;
    justify-content: center;
    gap: 4rem;
  }
  .flow ul::after {
    width: 90%;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #8dd1ee 0%, #7cb4e5 100%);
  }
  main .reason li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 3rem;
    margin-bottom: 5rem;
    padding: 5rem;
  }
  .reason li,
  .flow li {
    margin: 0;
    padding: 5rem 3rem 3rem;
  }
  .flow li {
    width: calc(100% / 3);
  }
  .reason li::before {
    width: 80px;
    height: 80px;
    top: -36px;
    right: 30px;
  }
  .reason li h3 {
    font-size: 2.4rem;
  }
  .reason li h3::before {
    width: 40px;
  }
  .reason li h3::after {
    left: 5rem;
    top: -1.5rem;
    font-size: 2rem;
  }
  .flow li h3 {
    font-size: 3rem;
    margin-bottom: 2rem;
  }
  .flow figure {
    width: 100px;
    margin: 1rem auto 3rem;
  }

  /*faq*/
  .faq .container {
    max-width: 1000px;
  }
  .faq dl {
    margin-bottom: 4rem;
  }
  .faq dt {
    margin-bottom: 2rem;
    padding: 3rem;
    font-size: 2.8rem;
  }
  .faq dt::after {
    font-size: 2.8rem;
    right: 3rem;
  }
  .faq dd {
    padding: 3rem;
  }

  /*====================================
	 FOOTER
	====================================*/
  footer {
    padding: 3rem 0;
  }

  /*pagescroll*/
  #scrollUp img {
    width: 80px;
  }
  #scrollUp:hover {
    opacity: 0.7;
  }
}