/*-------------------------------------*
 * PCデザイン可変部分
 *-------------------------------------*/
/* 【PC】フォームの項目名ラベル内必須アイコン */
span.form_required_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}
/* 【PC】フォームのセクションラベル */
.landing_form_label_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}
/* 【PC】フォーム入力ボックス内の基本デザイン */
table.landing_form_ec {
  border-top: 1px solid #d0dcec;
  border-right: 1px solid #d0dcec;
  background: #FFF;
  border-bottom: 1px solid #999;
}
/* 【PC】フォーム左側　項目名ラベル */
.landing_form_ec th {
  background-color: #e1edfd;
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #e1edfd;
}
/* 【PC】フォーム右側　入力ボックス */
.landing_form_ec td {
  border-bottom: 1px solid #d0dcec;
  border-left: 1px solid #d0dcec;
  background-color: #ffffff;
}

/* 【PC】購入ボタンのデザイン */
.submit_bottom_ec {
  border: 0px;
  width: 400px;
  height: 150px;
  background-size: 394px auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

/*-------------------------------------*
 * スマートフォンデザイン可変部分
 *-------------------------------------*/
/* 【SP】フォームの項目名ラベル内必須アイコン */
span.form_required_sp_ec{
  /* セクションラベルの色 */
  background: #7E0F09;
  /* セクションラベルのフォント色*/
  color: #ffffff;
}

/* 【SP】フォームのセクションラベル */
.landing_form_label_sp_ec {
  /* セクションラベルの色 */
  background: #203594;
  /* セクションラベルのフォント色*/
  color: #ffffff;
  /* セクションラベルのフォントサイズ */
  font-size: 18px;
}

/* 【SP】フォームの項目名ラベル */
.form_box_label_sp_ec {
  background: #cadefc;
  border-bottom: 1px solid #C3C3C3;
  border-top: 1px solid #C3C3C3;
}

/* 【SP】購入ボタンのデザイン */
.submit_bottom_sp_ec {
  border: 0px;
  width: 100%;
  height: 150px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* ぷるぷる揺れるアニメーション */
@keyframes purupuru {
  0% { transform: skew(9deg); }
  10% { transform: skew(-8deg); }
  20% { transform: skew(7deg); }
  30% { transform: skew(-6deg); }
  40% { transform: skew(5deg); }
  50% { transform: skew(-4deg); }
  60% { transform: skew(3deg); }
  70% { transform: skew(-2deg); }
  80% { transform: skew(1deg); }
  90% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}

/* キラッと光るアニメーション */
@keyframes shiny-brite {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

/* ボタン外枠のスタイル */
.purupuru-container {
  position: relative;
  display: inline-block;
  overflow: hidden; /* 光がはみ出さないようにする */
  text-align: center;
  animation: purupuru 2s linear 0s infinite;
  cursor: pointer;
  width: 100%; /* 親要素に合わせて広げる */
}

/* 光のエフェクト */
.purupuru-container:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-brite 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* クリックした時の凹み効果 */
.purupuru-container:active {
  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
    -4px -4px 6px 0 rgba(116, 125, 136, .2),
    inset -4px -4px 6px 0 rgba(255, 255, 255, .2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}