@charset "UTF-8";

html, body {
  overflow-x: hidden;
  overscroll-behavior: none;
  height: 100%;
}

/* 画像の基本設定 */
img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
  object-fit: contain;
  width: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
}

/* 大枠 */
.wrapper {
  max-width: 500px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.05), -5px 0px 10px rgba(0, 0, 0, 0.05);
}

/* コンテナ */
.container {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ボタン */
.btn-box{
	position: relative;
}

.btn-inner-fv{
	width: 430px;
	position: absolute;
	top: 102px;
	left: 39px;
	animation: squash 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
	will-change: transform;
}
.btn-inner-2{
	width: 430px;
	position: absolute;
	top: 510px;
	left: 39px;
	animation: squash 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
	will-change: transform;
}

.btn-inner-3{
	width: 430px;
	position: absolute;
	top: 495px;
	left: 39px;
	animation: squash 2.2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
	will-change: transform;
}


.btn-inner-fv:hover,.btn-inner-2:hover,.btn-inner-3:hover{
	opacity: 0.8;
}

@keyframes squash {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

/*フッター*/
.footer-inner {
 color: #c2c2c2;
 background: #434343;
 text-align: center;
 padding: 25px 0px 0px 0px;
}
.footer-inner a {
 color: #FFFFFF;
 text-decoration: none;
}
.footer-inner a:hover {
 color: #FF3D40;
}
.footer-inner .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}
.footer-inner .menu li {
 margin: 0;
 padding: 0 20px;
font-size: 11px;
}
.footer-inner .copyright {
 margin: 0;
 padding: 15px 0px 15px 0px;
}

.copyright{
	font-size: 9px;
}




/* スマホ用の全体設定 */
@media screen and ( max-width : 750px ){
  .wrapper {
    max-width: 100%;
  }
}

/* スマホ用のボタン設定 */
@media screen and ( max-width : 750px ){
  .wrapper {
    max-width: 100%;
  }

  .btn-inner-fv{
	width: 85%;
    top: 45%;
	left: 8%;
	}
  .btn-inner-2 {
	width: 85%;
    top: 77%;
	left: 8%;
 	padding: 15px 0px 0px 0px;
	}

  .btn-inner-3 {
	width: 85%;
    top: 75%;
	left: 8%;
 	padding: 15px 0px 0px 0px;
	}

	
	/* フッターのリンクの行間を広げる */
  .footer-inner .menu {
    flex-direction: column;
    gap: 14px; /* または margin-bottom を li に指定 */
  }

  .footer-inner .menu li {
    padding: 0;
  }
}