@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
}

img {
  display: block;
}

/* スライダー全体のサイズ調整 */
.swiper {
  width: 100%;
  height: auto; /* 高さを固定せず、中身の画像に合わせる */
}

/* 各スライドの調整 */
.swiper-slide {
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* スライダー内の画像設定 */
.swiper-slide img {
  width: 100%;
  height: auto;       /* 横幅に合わせて縦幅を自動計算（比率を維持） */
  display: block;
  /* もし画像の比率があらかじめ決まっている場合（例: 16:9）は、
    aspect-ratio: 16 / 9; を指定すると画像読み込み前のガタつきを防げます。
  */
}

/* 左右の矢印を薄くする（0.4 = 透明度40%） */
.swiper-button-prev,
.swiper-button-next {
  opacity: 0.2;
  transition: opacity 0.3s ease; /* ふんわりと透明度を変化させるアニメーション */
}

/* マウスを乗せた（ホバーした）ときはくっきり表示する（1.0 = 透明度100%） */
.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
}
a{
	text-decoration: none;
}

.bt{
	text-align: center;
	background-color: red;
	color: white;
	font-size: 1.3rem;
	font-weight: bold;
	border-radius: 20px;
	margin-bottom: 15px;
	padding: 5px 0px;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

/* ホバー時の挙動 */
.bt:hover {
  /* 2. 元のサイズの1.05倍（5%アップ）に拡大 */
  transform: scale(1.05);
}

.green{
	background-color: #00c297;
}

.green-bg{
	background-color: #00c297;
	padding: 10px;
}
.sec3-inner{
	background-color: white;
	padding: 20px 10px;
	border-radius: 15px;
	margin-bottom: 15px;
}
.sec3 p{
	color: white;
	font-family: sans-serif;
	font-size: 13px;
	margin: 0;
}
.sec3 img{
	margin-bottom: 10px;
}


.sec4{
	padding: 40px 0 20px;
}

.sec4 .inner{
	padding: 10px;
}
.sec4 .inner img{
	margin-bottom: 15px;
}
.sec4 h2{
	text-align: center;
	color: white;
	font-size: 32px;
	font-weight: bold;
}

.sec5{
	background-color: #ffffc3;
	padding: 40px 0 20px;
}

.sec5 h2{
	text-align: center;
	color: #00c297;
	font-size: 35px;
	font-weight: bold;
}

.sec5 h3,.sec5 p{
	text-align: left;
}

.footer{
	padding: 30px 15px;
}
.footer p{
	margin: 0;
}

.swipe-animation {
  /* 4秒周期でアニメーションを無限に繰り返す */
  animation: swipeRepeat 3s ease-in-out infinite;
}

@keyframes swipeRepeat {
  0% {
    transform: translateX(0);
  }
  /* 0%〜15%（約0.6秒）で左から右へスーッと動く */
  10% {
    transform: translateX(35px); /* 動かす距離。お好みで調整してください */
  }
  /* 15%〜30%（約0.6秒）で元の位置に戻る */
  25% {
    transform: translateX(0);
  }
  /* 30%〜100%（約2.8秒間）は何もせず静止（これが「間」になります） */
  30% {
    transform: translateX(0);
  }
}