@charset "utf-8";

h1.title{
    border-bottom: 1px solid #bebebe;
    font-size:17px;
    font-weight: bold;
    text-align: left;
    padding: 8px 0 6px 38px;
    background: url(../img/icon/title/ico_friend.png) no-repeat 3px 2px;
    background-size: 32px auto;
}
.main_area {
    background: #00c300;
}
.main_area h2 {
    padding: 10px 10px 0 10px;
}
.main_area h2 img {
    width: 100%;
    height: auto;
}
.floating{
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-duration: 1.3s;
    -webkit-animation-duration: 1.3s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}
@keyframes floating {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(12%);
    }
    100% {
        transform: translateY(0%);
    }
}
@-webkit-keyframes floating {
    0% {
        -webkit-transform: translateY(0%);
    }
    50% {
        -webkit-transform: translateY(12%);
    }
    100% {
        -webkit-transform: translateY(0%);
    }
}
.main_area a {
    display: block;
    margin: 5px 15px 15px 15px;
    padding: 15px 0;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 100%);
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 100%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 148, 0, 0.55) 1px 1px 2px 1px;
    -webkit-box-shadow: rgba(0, 148, 0, 0.55) 1px 1px 2px 1px;
    -moz-box-shadow: rgba(0, 148, 0, 0.55) 1px 1px 2px 1px;
}
.main_area a span {
    display: block;
    height: 28px;
    background: url(../img/friend/btn_line.png) no-repeat center center;
    background-size: 221px auto;
    -webkit-background-size: 221px auto;
    -moz-background-size: 221px auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.main_area .no-login a span {
    display: block;
    height: 28px;
    background: url(../img/friend/btn_login.png) no-repeat center center;
    background-size: 246px auto;
    -webkit-background-size: 246px auto;
    -moz-background-size: 246px auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.main_area p {
    background: #fff;
    color: #00c300;
    padding: 3px 0;
    font-size: 0.8rem;
    font-weight: bold;
}
.description h2 {
    padding: 10px 10px 0 10px;
}
.description h2 img {
    width: 100%;
    height: auto;
}
.description h3 {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 4px solid #FDAA51;
    display: block;
    text-align: left;
    margin: 25px 20px 0 20px;
    padding: 2px 8px;
}
.description a {
    display: block;
    margin: 15px 25px;
    background: #ffffff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    text-align: left;
    padding: 15px 0 15px 60px;;
    color: #3f3f3f;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: bold;
}
.description a.login {
    display: block;
    margin: 15px 25px;
    padding: 15px 0;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 100%);
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 100%);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.description a.login span {
    display: block;
    height: 28px;
    background: url(../img/friend/btn_login.png) no-repeat center center;
    background-size: 246px auto;
    -webkit-background-size: 246px auto;
    -moz-background-size: 246px auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.description a.line,
.description a.twitter,
.description a.facebook {
    font-size: 1.4rem;
    margin: 25px 20px;
}
.description a.line {
    color:#fff;
    background: url(../img/friend/icon_line.png) no-repeat 10px center #1cc322;
    background-size: 39px auto, 10px auto, 100% 100%;
    -wevlit-background-size: 39px auto, 10px auto, 100% 100%;
    -moz-background-size: 39px auto, 10px auto, 100% 100%;
    box-shadow:0px 4px 0px 0px #41ab41;
    border:none;
}
.description a.twitter {
    color:#fff;
    background: url(../img/friend/icon_x.png) no-repeat 10px center #444;
    background-size: 39px auto, 10px auto, 100% 100%;
    -wevlit-background-size: 39px auto, 10px auto, 100% 100%;
    -moz-background-size: 39px auto, 10px auto, 100% 100%;
    box-shadow:0px 4px 0px 0px #000;
    border:none;
}
.description a.facebook {
    color:#fff;
    margin: 25px 20px 40px;
    background: url(../img/friend/icon_facebook.png) no-repeat 10px center #3c5997;
    background-size: 39px auto, 10px auto, 100% 100%;
    -wevlit-background-size: 39px auto, 10px auto, 100% 100%;
    -moz-background-size: 39px auto, 10px auto, 100% 100%;
    box-shadow:0px 4px 0px 0px #404c65;
    border:none;
}

/* 注意事項 */
.caution {
    color: #4d4d4d;
    text-align: left;
}
.caution h2 {
    background: #6C6C6C;
    color:#fff;
    text-align: center;
    padding: 4px 0;
    font-weight: bold;
}
.caution ul {
    margin: 10px 10px 10px 20px;
}
.caution ul li {
    text-indent: -1.0em;
}
.caution ul ul {
    margin: 0 10px 0 15px;
}
.caution ul ul li {
    text-indent: -1.0em;
}