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

/*-----------------------------
/ base
/------------------------------*/
body {
  color: #434343;
  font-family: "Noto Sans JP",sans-serif;
}
img {
    max-width: 100%;
    height: auto;
}
#spmain {
    margin: 0 auto;
    width: 100%;
    max-width: 640px
}
button {
	border:none;
	padding:0;
	background-color:transparent;
}
.rel {
	position: relative;
}	

.tel_head {
  max-width: 640px;
  margin: 0 auto;
}

/*-----------------------------
/ header
/------------------------------*/
.telbtn {
	position: absolute;
	top: 12%;
	right: 27%;
	width: 18%;
}
.rebtn {
	position: absolute;
	top: 12%;
	left: 75%;
	width: 22.5%;
}

/*-----------------------------
/ contents
/------------------------------*/
.contents {
	margin-bottom: 5%;
}

/*-----------------------------
/ sns
/------------------------------*/
.sns_cont {
  overflow: hidden;
}

.loop_wrap {
  position: absolute;
  top: 24%;
  display: -webkit-flex;
  display: flex;
  width: 100vw;
  height: 350px;
  overflow: hidden;
}

@media screen and (min-width:641px) { 
  /*　画面サイズが641pxからはここを読み込む　*/
  .loop_wrap { 
    height: 600px;
  }
}

.loop_wrap img {
  max-width: initial ;
  width: auto;
  height: 100%;
}

/*-----------------------------
/ ofr
/------------------------------*/
.ofr_area {
  margin-bottom: 5%;
}
.henkin {
	margin: 5% 0;
}
.btn0 {
	margin-bottom: 48%;
}
.linkbtn {
	position: absolute;
	display: inline-block;
	top: 0;
	left: 5%;
	width: 90%;
	overflow: hidden;
}
.btn1 {
	position: absolute;
	display: inline-block;
	top: 51%;
	left: 10%;
  width: 80%;
	overflow: hidden;
}
.annotation {
  position: absolute;
  top: 66%;
  left: 8%;
  width: 83%;
  line-height: 1.2em;
  text-align: justify;
  font-size: 135%;
}
@media screen and (max-width:480px) {
  .annotation {
    font-size: 77%;
  } 
}

.annotation span {
  color: red;
  font-weight: bold;
}
.btn1:before,
.linkbtn:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height:100%;
  display: block;
  position: absolute;
  top: 0;
  left: -120%;
  transform: skewX(-45deg) translateX(0);
  animation: bright 6s ease-in-out 1s infinite;
  padding:0;
}

@keyframes bright {
  0% {
     transform: skewX(-45deg) translateX(0);
  }
  50% {
    transform: skewX(-45deg) translateX(600%);
  }
  100% {
    transform: skewX(-45deg) translateX(600%);
  }
}
.buruburu {
	display: inline-block;
	animation: hurueru 5s ease-in-out 1s infinite;
}

@keyframes hurueru {
	0% {transform: scale(1.1)}
    25% {transform: scale(1)}
    50% {transform: scale(1.1)}
    75% {transform: scale(1)}
    100% {transform: scale(1.1)}
}

.injustice {
	margin: 5% 0;
}