@charset "EUC-JP";
/*
landing page
*/

.content_bg{
background:url('/img/campaign/newyear2022/content_bg.jpg') center top no-repeat #fefdfa;
width:950px;
padding:0 0 1px;
margin:0 auto;
}

.head_block{
margin: 0 0 40px;
}
.head_img_wrap{
position: relative;
z-index:2;
width: 850px;
height:688px;
margin: 0 auto;
}

.cv_block {
display:table;
margin:0 auto 80px;
padding:0;
position:relative;
z-index:3;
}

.cv_block a.newyear2022_button{
background-color:#d80000;
border-bottom:3px solid #8c0000;
border-radius:7px;
width:500px;
height:86px;
margin:0 0 10px;
box-sizing:border-box;
padding:18px 0 0;
}
.glow{
font-size:18px;
color:#8c0000 !important;
text-shadow:
white 1px 1px 5px, white -1px 1px 5px,
white 1px -1px 5px, white -1px -1px 5px,
white 1px 0 5px, white -1px 0 5px,
white 0 -1px 5px, white 0 1px 5px;
}

.content_block_title{
text-align:center;
}
.content_block {
border:2px solid #EBC659;
border-radius:10px;
background:#fff;
box-sizing:border-box;
line-height:150%;
width:800px;
padding:20px 15px;
margin: 0 auto 80px;
}

/* campaign_info_block */

.campaign_info_block{
text-align:center;
}
.result_table{
margin:0 auto;
}
.result_table li{
padding:8px 0;
}

/* summary_block */

.summary_block dl{
width:680px;
margin:40px auto;
}
.summary_block dt{
margin: 0 0 16px;
font-size:16px;
font-weight:bold;
}
.summary_block dd{
font-size:14px;
line-height:150%;
margin: 0 0 20px 3em;
}
.summary_block p {
margin-bottom:0.5em;
}
.summary_block ul {
margin-bottom:1em;
}
.cmp_summary_li li {
margin-left:1em;
text-indent:-1em;
}
.contact_form_link{
font-size:16px;
text-align:center;
margin:40px 0;
}

/*
result page
*/

#kuji_result_wrap{
position:relative;
width:500px;
height:500px;
margin:0 auto 10px;
overflow:hidden;
background:url(/img/campaign/newyear2022/bg_board.jpg) no-repeat center center #F9EED2;
}

#kuji_box_wrap{
width:100%;
height:100%;
box-sizing:border-box;
position:relative;
z-index:1;
padding-top:10%;
}
#kuji_box{
width:100px;
margin:0 auto;
transform:rotate(-160deg);
position:relative;
}
#stick_wrap{
position:absolute;
left:45px;
bottom:192px;
height: 0;
overflow: hidden;
}
#result_wrap{
width:100%;
height:100%;
box-sizing:border-box;
position:absolute;
left:0;
top:0;
z-index:2;
}
.white_paper_wrap{
opacity:0;
transform:scale(0.6);
}
.white_paper_wrap .paper{
width:200px;
height:166px;
margin:0 auto;
background:#fff;
box-sizing:border-box;
}
.white_paper_wrap .paper img{
opacity:0.7;
}
.result_img{
position:absolute;
top:0;
display:none;
text-align:center;
width:100%;
height:100%;
padding:20px 0 0;
box-sizing:border-box;
}
.result_img img{
max-width:100%;
height:82%;
margin:0 0 10px;
}
.result_img.lost img{
height:90%;
}
.coupon_img{
position:absolute;
right:-240px;
bottom:38%;
display:none;
width:210px;
height:70px;
}
.coupon_img img{
max-width:100%;
max-height:100%;
}
.coupon_mypage_link_wrap{
height:1.5em;
margin:0 0 1em;
}
.coupon_mypage_link{
text-align:center;
opacity:0;
width:0;
display:inline-block;
transform:scale(1.0);
vertical-align:middle;
}
.text_button{
box-sizing:border-box;
}
.text_button.link{
font-size:18px;
}

.result_bottom_text{
position:absolute;
bottom:0.4em;
line-height:2em;
display:block;
width:100%;
}
.completed{
background:#999;
color:#fff;
font-weight:bold;
transform:rotate(-45deg);
position:relative;
left:-60px;
top:20px;
padding: 0 60px;
line-height:40px;
display:inline-block;
font-size:16px;
}


/* animation */
.shake {
animation-name: shake;
animation-fill-mode:backwards;
animation-duration:0.3s;
animation-iteration-count:5;
animation-timing-function:ease-in-out;
animation-delay: 0.6s;
animation-direction:alternate;
}
@keyframes shake{
  0% {
    transform:rotate(-180deg);
  }
  100% {
    transform:rotate(-160deg);
  }
}

.pull_out {
animation-name: pull_out;
animation-fill-mode:forwards;
animation-duration:0.5s;
animation-iteration-count:1;
animation-timing-function:ease-out;
animation-delay: 1.9s;
animation-direction:normal;
}
@keyframes pull_out{
  0% {
    height:0;
  }
  100% {
    height:150px;
  }
}
.hide_kuji_box {
animation-name: hide_kuji_box;
animation-fill-mode:forwards;
animation-duration:0.5s;
animation-iteration-count:1;
animation-timing-function:ease-in;
animation-delay: 2.9s;
animation-direction:normal;
}
@keyframes hide_kuji_box{
  0% {
    opacity:1.0;
  }
  100% {
    opacity:0;
  }
}


.white_paper_wrap{
transform-origin:center 10%;
animation-name: paper_show;
animation-fill-mode:forwards;
animation-duration:2.0s;
animation-iteration-count:1;
animation-timing-function:ease-in;
animation-delay: 3.4s;
animation-direction:normal;
}
@keyframes paper_show{
  0% {
  opacity:1.0;
  transform:scale(0.5);
  }
  75% {
  opacity:1.0;
  transform:scale(0.5);
  }
  100% {
  opacity:0;
  transform:scale(1.0);
  }
}

.white_paper_wrap .paper2{
position:relative;
top:-166px;
transform-origin:bottom;
animation-name: paper_open2;
animation-fill-mode:forwards;
animation-duration:0.6s;
animation-iteration-count:1;
animation-timing-function:ease-in-out;
animation-delay: 3.4s;
animation-direction:normal;
}
@keyframes paper_open2{
  0% {
  transform:rotateX(0deg);
  background-color:#fff;
  }
  50% {
  background-color:#ccc;
  }
  100% {
  transform:rotateX(-180deg);
  background-color:#fff;
  }
}
.white_paper_wrap .paper3{
position:relative;
top:0;
opacity:0;
transform-origin:top;
animation-name: paper_open3;
animation-fill-mode:forwards;
animation-duration:0.6s;
animation-iteration-count:1;
animation-timing-function:ease-in-out;
animation-delay: 4.0s;
animation-direction:normal;
}
@keyframes paper_open3{
  0% {
  transform:rotateX(-180deg);
  background-color:#fff;
  opacity:1;
  }
  50% {
  background-color:#ccc;
  }
  100% {
  transform:rotateX(0deg);
  background-color:#fff;
  opacity:1;
  }
}
.result_img{
opacity:0;
animation-name: result_img_show;
animation-fill-mode:forwards;
animation-duration:0.4s;
animation-iteration-count:1;
animation-timing-function:ease-in-out;
animation-delay: 0s;
animation-direction:normal;
}
@keyframes result_img_show{
  0% {
  opacity:0;
  }
  100% {
  opacity:1;
  }
}
.coupon_img{
transform:rotate(-20deg);
animation-name: coupon_show;
animation-fill-mode:forwards;
animation-duration:0.4s;
animation-iteration-count:1;
animation-timing-function:linear;
animation-delay: 0.4s;
animation-direction:normal;
}
@keyframes coupon_show{
  0% {
  right:-240px;
  bottom:38%;
  }
  100% {
  right:50px;
  bottom:15%;
  }
}
.coupon_mypage_link_show{
width:auto;
animation-name: coupon_mypage_link_show;
animation-fill-mode:forwards;
animation-duration:0.5s;
animation-iteration-count:1;
animation-timing-function:linear;
animation-delay: 0s;
animation-direction:normal;
}
@keyframes coupon_mypage_link_show{
  0% {
  transform:scale(1.0);
  opacity:1;
  }
  50% {
  transform:scale(1.1);
  }
  100% {
  transform:scale(1.0);
  opacity:1;
  }
}