@charset "Shift_JIS";

/*-- 位置調整用 --*/

.ml15{margin-left:15px;}

/*-- 上部（メインバナー・右側メニュー） --*/


#mainimage{
	width:680px;
	height: 300px;
	float:left;
	display:inline;
	background:url("../images/top/bg_mainimage.jpg") no-repeat left top;
	position: relative;
}

#parts_mainimage_person{
	position: absolute;
	top: 0;
	right: 0;
	animation-delay: 1.2s;
}

#parts_mainimage_catchphrase{
	position: absolute;
	top: 0;
	right: 0;
	animation-delay: 2.0s;
}

#parts_mainimage_396, 
#parts_mainimage_198 {
  position: absolute;
  opacity: 0; /* 初期状態は透明 */
  transform-origin: center center;
}

#parts_mainimage_396 {
  top: 175px;
  left: 192px;
  /* 1. fade-in-only: 0.5秒かけて1回だけフェードイン
    2. zoom-loop-only: 3秒かけて無限にズーム（2.5秒待機は共通）
  */
  animation: 
    fade-in-only 0.5s ease-out 2.5s forwards,
    zoom-loop-only 1.2s ease-in-out 2.5s infinite;
}

#parts_mainimage_198 {
  top: 227px;
  left: 302px;
  animation: 
    fade-in-only 0.5s ease-out 2.5s forwards,
    zoom-loop-only 1.2s ease-in-out 2.5s infinite;
}


/* 共通のアニメーション設定 */
.animate-item {
  opacity: 0; /* 最初は隠しておく */
  animation: fade-up-animation 0.5s ease-out forwards;
}

@keyframes fade-up-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 1回限りのフェードイン */
@keyframes fade-in-only {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 無限ループするズーム（透明度は変えない） */
@keyframes zoom-loop-only {
  /* 0%から30%の間は、小さい状態（0.6）で静止 */
  0%, 30% {
    transform: scale(0.6);
  }
  /* 65%の瞬間に最大（1.0）へ。ここを「点」にすることで静止させない */
  65% {
    transform: scale(1);
  }
  /* 100%（最後）でまた最小（0.6）へ戻る */
  100% {
    transform: scale(0.6);
  }
}