@charset "utf-8";
/* CSS Document */

/* clampは(最小値,可変値(vwなど),最大値) の順に指定してください */

  #hero {
	  top: -33px;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  body {
    font-size: 1.6rem;
    max-width: 1920px;
    margin: auto;
  }

  .hero {
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  @media (orientation: landscape) {
    .hero {
      background-image: url("../images/main-visual.jpg");
    }
  }

  @media (orientation: portrait) {
    .hero {
      background-image: url("../images/spfv.jpg");
    }
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0px;
  }

  .hero .hero-text {
    position: absolute;
    color: #fff;
	  line-height:700%;
    padding-right: clamp(10px, 2.6666666666666665vw, 30px);
    padding-left: clamp(10px, 2.6666666666666665vw, 30px);
	  text-shadow: 5px 5px 5px #454545;
  }

  @media (min-width: 1025px) {
    .hero .hero-text {
      padding-right: clamp(30px, 3.125vw, 60px);
      padding-left: clamp(30px, 3.125vw, 60px);
      bottom: clamp(140px, 14.583333333333334vw, 300px);
		right:  clamp(40px, 14.583333333333334vw, 80px);
    }
  }

  @media (max-width: 1024px) {
    .hero .hero-text {
      inset: 0px;
      margin: auto;
      height: -moz-fit-content;
      height: -webkit-fit-content;
      height: fit-content;
      text-align: center;
    }
  }

  .hero-text .main-text {
    font-weight: 700;
    font-size: clamp(38px, 6.4vw, 48px);
  }

  @media (min-width: 1025px) {
    .hero-text .main-text {
      font-size: clamp(80px, 4.166666666666667vw, 80px);
    }
  }

  @media (max-width: 1024px) and (orientation: landscape) {
    .hero-text .main-text {
      font-size: clamp(24px, 6.4vw, 32px);
    }
  }

  @media (max-width: 1024px) {
    .hero-text .main-text {
      line-height: 2;
    }
  }