body{
background-color: #FFF2E6;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.container{
    text-align:center;
    max-width:750px;
    width:100%;
    margin:0 auto;
    padding:0;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.container img{
    margin:0 ;
    padding:0;
    vertical-align: bottom;
    width:100%;
}

.footer{
 background-color:#ffffff;
    text-align:center;
    max-width:750px;
    width:100%;
    margin:0 auto;
    padding:40px 0 10px;
}

.footer a{
    color:#F1925A;
    font-weight:bold;
    font-size:0.75em;
    text-decoration: none
}

.footer img{
    padding-top:20px;
    max-width:300px;
}

.shine-wrapper {
  position: relative; /* 光の基準点 */
  overflow: hidden;    /* はみ出た光をカット */
  width: 100%;         /* 親に合わせる */
  max-width: 900px;    /* 画像の最大幅（任意） */
  margin: 0 auto;      /* 中央寄せ */
  cursor: pointer;
  line-height: 0;      /* 画像の下にできる謎の隙間を消す */
}

.target-img {
  width: 100%;         /* 画像を横幅いっぱいにする */
  height: auto;
}

/* 光のエフェクト */
.shine-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* 左側に隠しておく */
  width: 50%;
  height: 100%;
  
  /* 白い光のグラデーション */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  
  transform: skewX(-30deg); /* 斜めにする */
}

/* つねに「きらっ」とさせたい場合 */
.shine-wrapper::after {
  animation: shine-animation 3s infinite; /* 3秒ごとに無限ループ */
}

@keyframes shine-animation {
  0% {
    left: -100%;
  }
  20% {
    left: 100%; /* 20%の時点で右に突き抜ける（素早く動く） */
  }
  100% {
    left: 100%; /* その後、次の開始まで待機 */
  }
}