@import url(sp.css) screen and (max-width: 1024px);
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 8vh; }

body {
  margin: 0;
  font-family: Circular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; }

.main {
  background-image: url(../img/background-img.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 96vh; }

header {
  width: 100%;
  position: relative;
  height: 100px; }
  header .video {
    display: none; }
  header p {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    justify-content: center;
    line-height: 0.5px;
    position: absolute; }

.headerText1 {
  top: 10px; }

.headerText2 {
  top: 40px;
  display: inline-flex;
  align-items: center; }

.headerText3 {
  top: 80px; }

header p img {
  height: 45px; }
header p .engineer {
  height: 60px; }
header p .become {
  height: 40px; }
header .headerText3 img {
  height: 50px; }

main {
  width: 100%; }
  main .sc1 .container1 {
    width: 352px;
    height: 210px;
    margin: 0 auto; }
    main .sc1 .container1 .box1 {
      width: 100%;
      margin: 0 auto;
      position: relative; }
      main .sc1 .container1 .box1 img.top {
        display: none; }
      main .sc1 .container1 .box1 img.fukidashi {
        height: 70px;
        position: absolute;
        top: -20px;
        left: 0px;
        z-index: 30; }
      main .sc1 .container1 .box1 img.sumaho {
        height: 160px;
        position: absolute;
        top: 40px;
        left: 40px;
        z-index: 20; }
      main .sc1 .container1 .box1 img.paso {
        height: 200px;
        position: absolute;
        top: 0px;
        left: 30px;
        z-index: 10; }
    main .sc1 .container1 .textbox {
      display: none; }

.flame {
  border: solid 0.2rem #00b900;
  width: 80%;
  height: 8rem;
  background-color: #fff;
  position: absolute;
  top: 300px;
  transform: translateX(13%); }

.swiper-container {
  width: 100%;
  z-index: 0; }

.swip {
  height: 110px;
  display: flex;
  align-items: center;
  position: relative; }

main .swiper-wrapper {
  width: 100%;
  height: 110px; }
main .swiper-slide {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px; }
  main .swiper-slide p {
    display: table-cell;
    line-height: 1.5;
    vertical-align: middle;
    font-size: 1rem; }
  main .swiper-slide span {
    background: linear-gradient(transparent 60%, #ffda07 0%); }
main .swiper-button-prev, main .swiper-button-next {
  width: 30px;
  height: 30px;
  color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1000; }
main .swiper-button-prev {
  background-image: url(../img/arrow1.png);
  left: 9%; }
main .swiper-button-next {
  background-image: url(../img/arrow2.png);
  right: 9%; }
main .container2 {
  text-align: center;
  font-size: 1rem;
  height: 282px;
  margin: auto 0; }
  main .container2 p.text1 {
    margin: 1rem auto; }
  main .container2 p .yellow {
    background: linear-gradient(transparent 60%, #ffda07 0%); }
  main .container2 .sp {
    display: none; }
  main .container2 .box0 {
    width: 100%;
    height: 262px;
    margin: auto auto; }
    main .container2 .box0 .lineT {
      width: 200px;
      display: flex;
      position: relative;
      margin-bottom: 2rem;
      margin: 0 auto; }
      main .container2 .box0 .lineT img.linelogo {
        height: 35px; }
      main .container2 .box0 .lineT img.lineac1 {
        height: 15px;
        margin-left: 1rem;
        position: relative;
        top: 10px; }
  main .container2 .lineB {
    width: 300px;
    height: auto;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 10px auto; }
    main .container2 .lineB p.linetext {
      width: 100px;
      font-size: 16px;
      text-align: left; }
    main .container2 .lineB .lineButton {
      width: 200px;
      height: 180px; }
      main .container2 .lineB .lineButton img.friendFinger {
        width: 80px;
        position: relative;
        top: -20px;
        left: 40px;
        z-index: 10; }
      main .container2 .lineB .lineButton img.friendButton {
        width: 150px;
        position: relative;
        top: -60px;
        left: 20px;
        z-index: 0; }

footer {
  display: block;
  width: 100%;
  max-height: 4vh;
  background-color: #00b900;
  text-align: center;
  line-height: 4vh;
  position: relative;
  bottom: 0; }
  footer p.pr {
    margin: 0;
    font-size: 0.9rem; }
  footer a {
    text-decoration: none;
    color: #007E00; }

.friendFinger {
  -webkit-animation: fuwafuwa 3s infinite linear alternate;
  animation: fuwafuwa 2s infinite linear alternate; }

@-webkit-keyframes fuwafuwa {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg); }
  50% {
    -webkit-transform: translate(0, -7px) rotate(0deg); }
  70% {
    -webkit-transform: translate(0, 0) rotate(0deg); } }
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(0deg); }
  50% {
    transform: translate(0, -7px) rotate(0deg); }
  100% {
    transform: translate(0, 0) rotate(0deg); } }
/*# sourceMappingURL=sp.css.map */
@media screen and (max-width: 375px) {
  .main {
    width: 375px;
    height: auto; }
    .main .flame {
      width: 300px;
      height: 7.4rem;
      border: solid 0.2rem #00b900;
      position: absolute;
      top: 305px;
      transform: translateX(11%); }
    .main .swiper-slide p {
      font-size: 0.8rem; }
    .main .swiper-button-prev {
      background-image: url(../img/arrow1.png);
      left: 5%; }
    .main .swiper-button-next {
      background-image: url(../img/arrow2.png);
      right: 7%; }

  footer {
    width: 375px; } }
@media screen and (max-height: 720px) {
  .main {
    height: 720px; }

  footer {
    position: static; } }

/*# sourceMappingURL=sp.css.map */