@charset "utf-8";
/* CSS Document */

/* 共通
-------------------- */
.linka_floating_banner {
    display: none;
    position: fixed; /* 追従 */
    z-index: 9999; /* 他の要素の下に隠れないように */
    bottom: 0; /* バナーの上下の位置 */
    right: 0; /* バナーの左右の位置 */
    background: url("../../../../img-sub/goopit/assets/img/linka/bg_linka_overlay.png") no-repeat 100% 0;
}
/*.linka_floating_banner:hover {
    opacity: .7;  ホバーで少し透過 
}*/
.linka_floating_banner.typeA {
    height: auto;
}
.linka_floating_banner.typeA.first_time_access {
    display: none;
    bottom: 0;
}
.linka_floating_banner.typeA.second_time_access {
    bottom: -173px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.linka_floating_banner.typeA.second_time_access.active {
    display: block;
    bottom: 0;
}

.linka_floating_banner.typeB {
    with: 191px;
    height:166px;
}
.linka_floating_banner.typeB.first_time_access {
    display: none;
    bottom: 0;
}
.linka_floating_banner.typeB.second_time_access {
    bottom: -166px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.linka_floating_banner.typeB.second_time_access.active {
    display: block;
    bottom: 0;
}

@keyframes fluffy {
	0% { transform:translateY(0) }
	5% { transform:translateY(0) }
	10% { transform:translateY(0) }
	20% { transform:translateY(-15px) }
	25% { transform:translateY(0) }
	30% { transform:translateY(-15px) }
	50% { transform:translateY(0) }
	100% { transform:translateY(0) }
}
.linka_floating_banner .inner {padding: 0;}
.linka_floating_banner.first_time_access .linka_button {animation: fluffy 3s ease infinite;}

button.linka_button {
    /* ボーダーをなくす */
    border-style: none;

    /* 背景色を透明にする */
    background-color: transparent;
    
    /* 縦方向に0px、
     * 横方向に0pxの余白を指定 */
    padding: 0px 0px;

    /* ボタンの影の指定
     * 影の横幅を1px
     * 縦長を3px
     * ぼかしを4px
     * 広がりを2px
     * 色を#666（グレー）に指定 */
/*    box-shadow: 1px 3px 4px 2px #666;
    -moz-box-shadow: 1px 3px 4px 2px #666;
    -webkit-box-shadow: 1px 3px 4px 2px #666;*/
}

span.bnr_close {
    float: right;
    /* 背景色 */
    background-color: silver;
}

.work_record_linka {
    background: none;
    width: 300px;
    height: 102px !important;
    padding-right: 54px;
}

.work_record_linka .linka_box {
    position: relative;
    width: 300px;
    height: 102px;
    border: 3px solid #db000c;
    border-bottom: none;
    background-color: #fff9ce;
    padding: 9px 0 0 10px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
}

.work_record_linka .linka_box p.txt {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

.work_record_linka.first_time_access .linka_box .btn_box .linka_button {
    animation: none;
}

.work_record_linka .linka_box .btn_box .shop_linka {
    width: 130px;
    float: left;
    margin-right: 6px;
    background-color: #db000c;
    box-shadow: 0px 3px 1px 0px #900008;
    -moz-box-shadow: 0px 3px 1px 0px #900008;
    -webkit-box-shadow: 0px 3px 1px 0px #900008;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-align: center;
    color: #fff;
}

.work_record_linka .linka_box .btn_box .shop_linka button {
    width: 130px;
    padding: 5px 0px 3px;
}

.work_record_linka .linka_box .btn_box .shop_linka button p {
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

.work_record_linka .linka_box .btn_box .all_linka {
    width: 100px;
    background-color: #22b108;
    float: left;
    box-shadow: 0px 3px 1px 0px #0f6000;
    -moz-box-shadow: 0px 3px 1px 0px #0f6000;
    -webkit-box-shadow: 0px 3px 1px 0px #0f6000;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    text-align: center;
    color: #fff;
}

.work_record_linka .linka_box .btn_box .all_linka button {
    width: 100px;
    padding: 8px 0px 6px;
}

.work_record_linka .linka_box .btn_box .all_linka button p {
    color: #fff;
    font-weight: bold;
    font-size: 13px;
}

.work_record_linka .linka_box .btn_box .shop_linka:hover,
.work_record_linka .linka_box .btn_box .all_linka:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

.work_record_linka .linka_box .linka_img {
    position: absolute;
    right: -50px;
    bottom: -43px;
}