@charset "UTF-8";

/*キービジュアル*/
#mainkey_img { }
/* 獲得ステップ */
#step_block{ width: 100%; margin-bottom: 9%;}
#flow {width: 100%; }
#flow dt{margin-left: 1.8%; margin-right: 1.8%; margin-bottom: 3.34%;cursor: pointer;text-align: center;display: block; }
#flow dd { background: #FFF; width: 100%; text-align: center; padding-top: 2.8%; padding-bottom: 0.1%; margin-top: 0; display: none; }
#flow dd li { margin-left: 1.8%; margin-right: 1.8%; margin-bottom: 2%; }

/************************************************************
Android4.4.2対応 打消し可 
************************************************************/
@media screen and (max-width: 360px) { /* 表示領域が360px以下の場合に適用するスタイル */
 #itemarea .detail .point { font-size: 14px; }
 #itemarea .detail .point b { font-size: 21px; } }
/************************************************************

/************************************************************
1カラムアイテム
************************************************************/
/* c-1item */
#c-1item { background: #e8ecf1; padding-top: 10px; }
#c-2item { padding-bottom: 8.45%; background: #e8ecf1; }
#itemarea #c-1item h3 { width: 100%; height: 0;  padding-top: 11.25% ; margin: 0 0 2.67% 0; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../img/sp/item_title.png") no-repeat; background-size: cover; border: none; }
#itemarea #c-1item h3.login-tit {background: url("../img/sp/item_title.png") no-repeat; background-size: cover; }
#itemarea { background: #e8ecf1; }

/* item-box レイアウト */
#itemarea .item-box { display: block; margin: 0 2.53% 2.67%; padding: 1.8%; border: solid 1px #51637b; background-color: #FFF; position: relative; height: 100%; min-height: 100%; }
#itemarea .item-box a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; }
#itemarea .item-box:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; }
#itemarea .item-box { min-height: 1px; /*IE6、7対策*/ }
#itemarea .item-box ul.fbox { width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -moz-box; display: -ms-box; display: -webkit-flexbox; display: -moz-flexbox; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#itemarea .item-box ul.fbox li.visual, #itemarea .item-box ul.fbox li.detail { margin-bottom: 0; position: relative; font-weight: bold; }
#itemarea .item-box ul.fbox li.visual:first-child, #itemarea .item-box ul.fbox li.detail:first-child { margin-right: 1.69%; }
#itemarea .visual { width: 30%; float: left; padding: 0; margin: 0 2% 0 0; }
#itemarea .detail { float: left; display: block; width: 65%; text-align: justify; border-left: solid 0.13vw #c5bdbd; padding-left: 2%; }

/* item-box コンテンツ */
#itemarea .visual .new { width: 100%; height: 0; padding-top: 20.8%; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("../img/sp/icon_new.png") no-repeat; background-size: cover; display: block; }
#itemarea .visual .new.not { background: none; }
#itemarea .visual .detail-img { width: 100%; height: auto; display: block; text-align: center; margin: 0 auto; position: relative; }
#itemarea .visual .detail-img:before { content: ""; display: block; padding-top: 143%; }
#itemarea .visual .detail-img .img-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#itemarea .visual .detail-img img { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
#itemarea .visual .point { width: 100%; bottom: 3%; position: absolute; display: block; color: #ff3c3c; font-size: 3.4vw; text-align: center; line-height: 1.1; }
#itemarea .visual .point b { font-size: 5vw; }
#itemarea .visual .point em { font-size: 2.9vw; font-style: normal; }
#itemarea .visual .point span { color: #000; display: block; }
#itemarea .detail .detail-icon { margin-bottom: 1.83%; position: relative; height: auto; }
#itemarea .detail .detail-icon:before { content: ""; display: block; padding-top: 8%; }
#itemarea .detail .detail-icon .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.75vw; line-height: 1.37; }
#itemarea .detail .itemname { margin: 1% 0 3%; position: relative; height: auto; }
#itemarea .detail .itemname:before { content: ""; display: block; padding-top: 17%; }
#itemarea .detail .itemname .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 4vw; line-height: 1.3; text-decoration: underline; }
#itemarea .detail .necessary { font-size: 3.3vw; color: #353535; letter-spacing: -0.01em; }
#itemarea .detail .necessary b { font-size: 3.6vw; background-color: #f94949; color: #fff; padding: 2% 1.7%; display: inline-block; margin-bottom: 3.5%; margin-right: 1%; }
#itemarea .detail .necessary span { line-height: 1; display: block; padding-top: 1px; padding-bottom: -1px; }
#itemarea .detail .catchcopy { margin-bottom: 3.5%; position: relative; height: auto; }
#itemarea .detail .catchcopy:before { content: ""; display: block; padding-top: 12%; }
#itemarea .detail .catchcopy .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.75vw; line-height: 1.37; }
#itemarea .detail .company { margin-bottom: 3.5%; position: relative; height: auto; }
#itemarea .detail .company:before { content: ""; display: block; padding-top: 11.9%; }
#itemarea .detail .company .inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; font-size: 2.6vw; color: #959595; line-height: 1.37; }
#itemarea .detail .detail-btn { width: 100%; display: block; }
#itemarea .detail .detail-btn p { display: inline-block; width: 100%; line-height: 1.7; border-radius: 3px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#ff775b 0%, #ff9c82 100%); background-image: linear-gradient(#ff775b 0%, #ff9c82 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
#itemarea .detail .detail-btn b { display: inline-block; position: relative; text-decoration: none; margin: 2%; width: 94.49%; height: 16.9%; border-radius: 3px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#fbf9f9 0%, #dcdcdc 100%); background-image: linear-gradient(#fbf9f9 0%, #dcdcdc 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
#itemarea .detail .detail-btn b span { position: relative; display: inline-block; padding: 0 0 0 16px; color: #000; vertical-align: middle; text-decoration: none; font-size: 3.5vw; }
#itemarea .detail .detail-btn b span::before, #itemarea .detail .detail-btn b span::after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
#itemarea .detail .detail-btn b span::before { left: 4px; box-sizing: border-box; width: 8px; height: 8px; border: 8px solid transparent; border-left: 8px solid #e25933; }

/* c-1item regular-block */
#itemarea .regular-block { margin-top: -2.9%; margin-bottom: 2.9%; }

/* もっとみるボタン */
.moreview { margin: 0 2%; display: inline-block; position: relative; text-decoration: none; width: 96%; border-radius: 5px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#8f8f8f 0%, #c2c2c2 100%); background-image: linear-gradient(#8f8f8f 0%, #c2c2c2 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.moreview a { font-size: 4.7vw; color: #000; display: inline-block; position: relative; text-decoration: none; margin: 1%; width: 98%; line-height: 2.5; border-radius: 5px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; background-image: -webkit-linear-gradient(#fbf9f9 0%, #dcdcdc 100%); background-image: linear-gradient(#fbf9f9 0%, #dcdcdc 100%); text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }



/* ヘッダーアニメーションバッジ */
.animation-badge {
  background-image: url("../img/sp/animation-badge.png");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 87.5%;
  width: 74.5%;
  right: 2.5%;
  height: 107%;
  padding: 3.5%;
  box-sizing: border-box;
  z-index: 10;
  opacity: 0;
  animation: badge-popup 5s ease-in-out 0s 1;
  animation-fill-mode: forwards;
  -webkit-animation: badge-popup 5s ease-in-out 0s 1;
  -webkit-animation-fill-mode: forwards;
}

.animation-badge p {
  font-size: 3.7vw;
  line-height: 1.3;
  font-weight: bold;
  text-align: left;
  color: #ff3c3c;
  margin-top: 2%;
}

@keyframes badge-popup{
  0% {
    top: 70%;
  }
  10% {
    opacity: 1;
    top: 87.5%;
  }

  89% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    
  }
  100% {
    visibility:hidden;
  }
}

@-webkit-keyframes badge-popup{
  0% {
    top: 70%;
  }
  10% {
    opacity: 1;
    top: 87.5%;
  }

  89% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    
  }
  100% {
    visibility:hidden;
  }
}

/* KV下ログインボタン */
.login-btn {
  width: 92%;
  height: auto;
  margin: 4% auto 5%;
}
.login-btn a img{
	width: 100%;
	height: auto;
}
/* 追尾ログインボタン */
.tracking-btn-area{
  width: 96%;
  position: fixed;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
.tracking-btn{
  display: block;
}
.close-btn{
  display: block;
  width: 7.8%;
  position: absolute;
  top: -13%;
  left: -1.5%;
}
.close-btn img{
  width: 100%;
}

/* 動画広告掲載対応 */
.movie_bnr{
  margin-bottom: 6%;
}

.movie_content{
  display: block;
  padding-top: 1.8%;
  border-bottom: 4px solid #1a74c7;
  background: #eaeaea;
}
.movie_content a{
  display: block;
  padding: 2%;
  background: #ffffff;
  margin: 0px 1.8% 1.8%;
}
.movie_content a img{
  width: 32.3%;
  display: inline-block;
  margin: 0 2%;
}
.movie_content a span{
  display: inline-block;
  width: 100%;
  color: #000000;
  font-weight: bold;
  font-family: HiraKakuProN-W6;
}

.movie_content a img + span{
  width: 63.7%;
}

.movie_content a img + span .movie_content_title{
  font-size: 5.4vw;
  height: 12vw;
  line-height: 1.1;
}

.movie_content a img + span span:nth-child(2){
  font-size: 3.6vw;
  margin-bottom: 3.4%;
}

.movie_content a img + span span:nth-child(3){
  font-size: 4.8vw;
}

.movie_content a img + span span:nth-child(3) .point{
  font-size: 6.9vw;
  color: #ff0000;
  width: auto;
}