@charset "euc-jp";

/* friend

友達紹介トップ・紹介者ランキングページで使用するCSS

------------------------------------------------ */

/* friend
------------------------------------------------ */

/* 友達紹介全体　共通 */
.contents { width: auto;}
.contents .friend {
    font-size: 15px;
    line-height: 1.4em;
    letter-spacing: 0;
}
.contents .friend h2 {
    padding: 0;
    height: 340px;
    border: none;
    margin-bottom: 30px;
}
.contents .friend h3 {
    background: #348ee9;
    color: #fff;
    border: none;
    font-size: 28px;
    text-align: center;
    padding: 15px 10px 15px;
    position: relative;
}
.contents .friend h3.balloon:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 48.5%;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #348ee9 transparent transparent;
    border-width: 20px 15px 10px;
}
.contents .friend .block {
    width: 950px;
    margin: 0 auto 30px;
}
.contents .friend span.red {
    color: #ff0000;
    font-weight: bold;
}
.contents .friend span.pink {
    color: #fa4357;
    font-weight: bold;
}
.contents .friend .box01 img {
    padding: 12px;
}
.contents .friend .box02 {
    background: #e3f2ff;
    position: relative;
    margin-top: 40px;
}
.contents .friend .box02 .icon {
    position: absolute;
    top: -28px;
    left: 20px;
}
.contents .friend .box02 .inner {
    padding: 25px 19px;
}
.contents .friend .box02 p {
    background: #fff;
    padding: 10px;
    margin-bottom: 25px;
}
.contents .friend .box03 .inner {
    padding: 40px 25px 25px 25px;
    text-align: center;
}
.contents .friend .box03 .inner p {
    font-size: 24px;
    font-weight: bold;
}
.contents .friend .box03 .inner p span {
    font-size: 26px;
}

/* ボタン */
a.btn_detail,
.btn_submit input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 2px;
    background: #fbc600;
    text-shadow: 1px 1px 0 #fcdf72;
    box-shadow: 1px 1px 2px #a8a8a8;
    vertical-align: middle;
    text-decoration: none;
    font-weight: bold;
    font-size: 17px;
    text-align: center;
    color: #000;
    transition: .2s linear;
}
a.btn_detail:hover, .btn_submit input[type="submit"]:hover { background: #fbdb00;}
.btn {
    margin: 25px 0 5px 0;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
}
.btn.yellow a {
    width: 600px;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    border: #fbb700 1px solid;
    border-radius: 4px;
    background: -moz-linear-gradient(top, #fbd690 0%, #fcd440 50%, #fbc600 51%, #fbc600 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbd690), color-stop(50%,#fcd440), color-stop(51%,#fbc600), color-stop(100%,#fbc600));
    background: -webkit-linear-gradient(top,  #fbd690 0%, #fcd440 50%, #fbc600 51%, #fbc600 100%);
    background: linear-gradient(to bottom,  #fbd690 0%, #fcd440 50%, #fbc600 51%, #fbc600 100%);
    box-shadow: inset 0 0 3px 1px #fffdf3;
    text-decoration: none;
    color: #423a20;
}
.btn.yellow a:not(:target) {  background: #fbc600\9; /* ie9対策 */}
.btn.yellow a:hover, .btn.blue input:hover { opacity: 0.7;}
input.btn.blue.disabled:hover { opacity: 1;}
input.btn.blue.disabled {
    border: #5b5b5b 1px solid;
    border-radius: 4px;
    background: #8b8b8b;
    box-shadow: inset 0 0 3px 1px #cdcdcd;
}


/* 友達紹介トップ
------------------------------------------------ */

/* メインビジュアル */
.friend_mainvisual {
    height: 160px;
    background: url(../../../img/15/mypage/friends/bg_coin.png) repeat-x center bottom,
              url(../../../img/15/mypage/friends/bg_stripe01.gif) repeat 0 0;
}
.friend_mainvisual .inner {
    width: 950px;
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
}

/* 友達ステータス */
.friend_status {
    height: 220px;
    border-top: #fff 1px solid;
    background: #6dcbff url(../../../img/15/mypage/friends/bg_stripe02.gif) repeat 0 0;
}
.friend_status .inner {
    width: 950px;
    box-sizing: border-box;
    margin: 0 auto;
    padding-top: 20px;
}
.friend_status .inner ul {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.friend_status .inner li {
    display: table-cell;
    vertical-align: top;
}
.friend_status .inner li:nth-child(1) {
    width: 275px;
    box-sizing: border-box;
    padding-right: 15px;
}
.friend_status .inner li:nth-child(2) {
    width: 400px;
    text-align: center;
}
.friend_status .inner li .date {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    color: #fff;
}
.friend_status .inner li p {
    height: 165px;
    box-sizing: border-box;
    padding: 0 15px;
    border-radius: 2px;
    background: #fff;
}
.friend_status .inner li p .name {
    display: block;
    padding: 15px 0 10px;
    letter-spacing: 0;
    text-align: center;
    font-size: 18px;
    color: #471f03;
}
.friend_status .inner li:nth-child(2) .name,
.friend_status .inner li:nth-child(2) .copy {
    display: table-cell;
    vertical-align: middle;
}
.friend_status .inner li:nth-child(2) .copy {
    padding-left: 7px;
}
.friend_status .inner li:nth-child(2) .copy span {
    width: 200px;
    height: 25px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    padding-top: 3px;
    border-radius: 15px;
    background: #3cb9ff;
    letter-spacing: 0;
    text-align: center;
    font-size: 11px;
    color: #fff;
}
.friend_status .inner li:nth-child(2) .copy span:after {
    width: 0;
    height: 0;
    content: '';
    display: inline-block;
    position: absolute;
    top: 23px;
    left: 50%;
    border-top: #3cb9ff 8px solid;
    border-bottom:8px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-left: -6px;
}
.friend_status .inner li p .status {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    display: block;
    margin-bottom: 15px;
    border: #ccd1d6 1px solid;
    border-radius: 2px;
    background: #f4faff;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #471f03;
}
.friend_status .inner li:nth-child(1) p .status span,
.friend_status .inner li:nth-child(2) p .status span {
    display: inline-block;
    margin-right: 2px;
    font-weight: bold;
    font-size: 25px;
    color: #ff4665;
}
.friend_status .inner li:nth-child(1) p .status { padding-top: 10px;}
.friend_status .inner li:nth-child(2) p .status {
    padding: 1px 10px 0 10px;
    text-align: left;
    font-size: 15px;
}
.friend_status .inner li:nth-child(2) p { position: relative;}
.friend_status .inner li p a.btn_detail {
    height: 50px;
    padding: 17px 0 0;
    font-size: 16px;
}
.friend_status .inner li:nth-child(1) p a.btn_detail { width: 100%;}
.friend_status .inner li:nth-child(2) p a.btn_detail {
    width: 300px;
    margin: 0 auto;
}

/* 開催中のキャンペーン */
.contents .friend .cp { border: 2px solid #fed539;}
.contents .friend .cp h3 {
    background: #fed539;
    color: #F73F5A;
}
.contents .friend .cp .bnr_area { padding: 25px 12px 0;}
.contents .friend .cp .bnr_area a {
    display: block;
    margin-bottom: 25px;
}
.contents .friend .cp .bnr_area a:hover { opacity:0.7;}
.contents .friend .cp .bnr_area a img {
    vertical-align: middle;
    padding: 0;
    width: 100%;
}

/* お友達紹介制度とは */
.friend .about {
    margin-bottom: 75px;
    padding-top: 20px;
}
.friend .about h2 {
    height: 80px;
    box-sizing: border-box;
    margin-bottom: 35px;
    padding-top: 25px;
    background: #fff url(../../../img/15/mypage/friends/bg_about.gif) no-repeat center 0;
    text-align: center;
    letter-spacing: 2px;
    font-size: 42px;
}
.friend .about .txt {
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 1px;
    line-height: 2.1em;
    font-size: 18px;
    color: #333;
}
.friend .about .txt span {
    font-weight: bold;
    color: #ff4665;
}

/* 紹介ボーナスを獲得するには */
.friend .step {
    height: 1000px;
    margin-bottom: 50px;
    padding-top: 50px;
    background: #6dcbff url(../../../img/15/mypage/friends/bg_stripe01.gif) repeat 0 0;
}
.friend .step h2 {
    height: auto;
    margin-bottom: 40px;
    background: none;
    text-align: center;
    letter-spacing: 2px;
    font-size: 42px;
    color: #471f03;
}
.friend .step .inner {
    width: 950px;
    height: 480px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 35px 20px 0;
    border-radius: 4px;
    background: #fff;
}
.friend .step .inner .lead {
    margin-bottom: 35px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 28px;
    color: #471f03;
}
.friend .step .inner ul {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.friend .step .inner ul li {
    display: table-cell;
    vertical-align: top;
}
.friend .step .inner ul li .user,
.friend .step .inner ul li .flow,
.friend .step .inner ul li .txt {
    width: 270px;
}
.friend .step .inner ul li .user {
    display: inline-block;
    margin-bottom: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    color: #26a1e6;
}
.friend .step .inner ul li .user span {
    display: inline-block;
    margin-right: 10px;
    padding:  4px 12px 2px;
    border-radius: 15px;
    background: #3cb9ff;
    font-size: 16px;
    color: #fff;
}
.friend .step .inner ul li .flow {
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: #471f03 1px solid;
    text-align: center;
    line-height: 1.8em;
    font-weight: bold;
    font-size: 19px;
    color: #471f03;
}
.friend .step .inner ul li .txt {
    margin-top: 15px;
    padding-left: 3px;
    line-height: 1.8em;
    font-size: 15px;
}
.friend .step .inner ul li:nth-child(1) {
    width: 317px;
    background: url(../../../img/15/mypage/friends/ico_arrow.gif) no-repeat top 20px right 6px;
}
.friend .step .inner ul li:nth-child(2) {
    width: 270px;
}
.friend .step .inner ul li:nth-child(3) {
    width: 318px;
    background: url(../../../img/15/mypage/friends/ico_arrow.gif) no-repeat top 20px left 10px;
}
.friend .step .inner ul li:nth-child(3) .user,
.friend .step .inner ul li:nth-child(3) .flow,
.friend .step .inner ul li:nth-child(3) .txt {
    margin-left: 48px;
}
.friend .step .check {
    width: 950px;
    height: 340px;
    box-sizing: border-box;
    margin: 50px auto 0;
    padding: 30px 0 0 570px;
    background: url(../../../img/15/mypage/friends/bg_pc_capture.png) no-repeat 0 0;
}
.friend .step .check p {
    width: 380px;
    box-sizing: border-box;
    padding: 0 15px;
}
.friend .step .check span:nth-child(1) {
    width: 350px;
    height: 40px;
    box-sizing: border-box;
    display: block;
    position: relative;
    margin-bottom: 30px;
    padding-top: 10px;
    border-radius: 20px;
    background: #ffc741;
    letter-spacing: 2px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #333;
}
.friend .step .check span:nth-child(1):after {
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
    top: 40px;
    left: 50%;
    border-top: #ffc741 8px solid;
    border-bottom:8px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    margin-left: -6px;
}
.friend .step .check span:nth-child(2) {
    width: 180px;
    height: 40px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 30px;
    padding: 11px 10px 2px;
    border-radius: 2px;
    background: #fff;
    font-size: 20px;
    color: #ff4665;
}
.friend .step .check span:nth-child(3) {
    display: block;
    padding-left: 15px;
    letter-spacing: 1px;
    line-height: 2.0em;
    font-size: 14px;
}

/* 紹介ナビ */
.friend .friend_navi {
    overflow: hidden;
    padding: 30px 0 35px;
    border-bottom: #fff 1px solid;
    background: #fff;
}
.friend .friend_navi p {
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 28px;
    color: #471f03;
}
.friend .friend_navi ul {
    width: 950px;
    margin: 0 auto;
}
.friend .friend_navi li {
    background: #348ee9;
    width: 189px;
    height: 80px;
    float: left;
    border-left: 1px solid #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.friend .friend_navi li:first-child {
    border-left: none;
    width: 188px;
}
.friend .friend_navi li a {
    height: 80px;
    box-sizing: border-box;
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 15px 10px 7px 10px;
}
.friend .friend_navi li a span.small {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: normal;
}
.friend .friend_navi li.mail a {
    background-image: url("../../../img/15/mypage/friends/ico_friends_mail.png");
    background-repeat: no-repeat;
    background-position: 22px center;
    padding-left: 62px;
}
.friend .friend_navi li.blog a {
    background-image: url("../../../img/15/mypage/friends/ico_friends_blog.png");
    background-repeat: no-repeat;
    background-position: 20px center;
    padding-left: 60px;
}
.friend .friend_navi li.url a {
    background-image: url("../../../img/15/mypage/friends/ico_friends_url.png");
    background-repeat: no-repeat;
    background-position: 15px center;
    padding-left: 62px;
}
.friend .friend_navi li.tw a {
    background-image: url("../../../img/15/mypage/friends/ico_friends_tw.png");
    background-repeat: no-repeat;
    background-position: 22px center;
    padding-left: 55px;
}
.friend .friend_navi li.fb a {
    background-image: url("../../../img/15/mypage/friends/ico_friends_fb.png");
    background-repeat: no-repeat;
    background-position: 13px center;
    padding-left: 48px;
}
.friend .friend_navi li a:hover {
    background-color: #5faef6;
}

/* メール・ブログ紹介方法 */
    .friend #introduction {
    background: #f0f0f0;
}
.friend #introduction .intro_inner {
    width: 950px;
    margin: 0 auto 40px;
    padding: 40px 0 45px;
}
.friend #introduction h4 {
    background: #348eef;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 24px 10px 22px 70px;
}
.friend #introduction .section {
    margin-bottom: 30px;
}
.friend #introduction .inner {
    background: #fff;
    padding: 25px;
}

/* メールで送る */
.friend #introduction h4#mail {
    background-image: url("../../../img/15/mypage/friends/ico_friends_mail.png");
    background-repeat: no-repeat;
    background-position: 23px center;
}
.friend #introduction .inner table {
    width: 100%;
    background: #d5ebff;
}
.friend #introduction .inner table tr {
    border-top: 1px solid #fff;
}
.friend #introduction .inner table tr:first-child {
    border: none;
}
.friend #introduction .inner table th {
    font-weight: bold;
    padding: 20px 0 20px 25px;
    width: 185px;
    vertical-align: top;
}
.friend #introduction .inner table span {
    display: block;
    font-size: 12px;
}
.friend #introduction .inner table td {
    padding: 20px 25px 20px 0;
}
.friend #introduction .inner table td input[type="text"] {
    width: 98%;
    border: #ccc 1px solid;
    border-radius: 2px;
    padding: 10px;
}
.friend #introduction .mail .inner p span {
    display: block;
    color: #fa4357;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 5px;
}
.friend #introduction .mail .inner p {
    text-align: center;
    padding-bottom: 15px;
}
.friend #introduction .mail .inner .btn_submit {
    padding-top: 25px;
    text-align: center;
}
.friend #introduction .mail .inner .btn_submit input[type="submit"] {
    width: 600px;
    height: 55px;
    padding: 6px 0 0;
    cursor: pointer;
    letter-spacing: 1px;
    font-size: 21px;
}

/* ブログで紹介する */
.friend #introduction h4#blog {
    background-image: url("../../../img/15/mypage/friends/ico_friends_blog.png");
    background-repeat: no-repeat;
    background-position: 20px center;
}
.friend #introduction .blog p {
    margin-bottom: 20px;
    line-height: 1.9em;
}
.friend #introduction .blog a.cp_bnr {
    display: block;
    margin: 0 auto 35px auto;
    width: 728px;
    height: 90px;
}
.friend #introduction .blog a.cp_bnr:hover {
    opacity:0.7;
}
.friend #introduction .banner {
    padding: 10px 0 0 0;
}
.friend #introduction .banner ul {
    overflow: hidden;
}
.friend #introduction .banner ul li {
    float: left;
    width: 275px;
    margin-left: 20px;
}
.friend #introduction .banner ul li:first-child {
    margin-left: 0;
}
.friend #introduction .banner ul li textarea {
    width: 247px;
    margin: 0 6px;
    font-size: 12px;
    color: #999;
    padding: 7px;
    word-break: break-all;
}
.friend #introduction .banner h5 {
    color: #fff;
    font-weight: bold;
    background: #5a9fe0;
    background-image: url("../../../img/15/mypage/friends/ico_arrow_white.png");
    background-repeat: no-repeat;
    background-position: 15px center;
    border-radius: 4px;
    padding: 6px 10px 5px 30px;
}
.friend #introduction .banner img {
    display: block;
    margin: 20px auto 10px;
}
.friend #introduction .banner .bnr_block {
    margin-top: 25px;
}
.friend #introduction .banner .bnr_block textarea {
    width: 730px;
    margin: 0 60px;
    font-size: 12px;
    color: #999;
    padding: 7px;
    word-break: break-all;
}
.friend #introduction .column,
.friend #introduction .campaign {
    text-align: center;
    font-size: 14px;
    margin: 10px;
}
.friend #introduction .column .text,
.friend #introduction .campaign .text {
    border: 1px solid #2d94f0;
    padding: 20px;
    text-align: center;
}
.friend #introduction .column p,
.friend #introduction .campaign p {
    padding-top: 20px;
    margin-bottom: 10px;
}
.friend #introduction .column p span,
.friend #introduction .campaign p span {
    padding: 0 10px;
    font-weight: bold;
    font-size: 16px;
}
.friend #introduction .column textarea,
.friend #introduction .campaign textarea {
    padding: 7px;
    font-size: 12px;
    color: #999;
    width: 728px;
    word-break: break-all;
}

/* キャンペーンバナー */
.friend #introduction p.blog_ban{
    text-align:center;
}
.friend #introduction p.blog_ban:hover{
    transition: .2s linear;
    opacity:0.7;
}

/* 紹介用URLで紹介する */
.friend #introduction h4#url {
    background-image: url("../../../img/15/mypage/friends/ico_friends_url.png");
    background-repeat: no-repeat;
    background-position: 20px center;
    padding: 14px 10px 12px 70px
}
.friend #introduction .url p {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}
.friend #introduction .url .inblock {
    border: 1px solid #fbc500;
    text-align: center;
    margin-top: 20px;
}
.friend #introduction .url h5 {
    background: #fbc500;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 5px 8px 5px;
}
.friend #introduction .url .inblock span {
    font-size: 20px;
    font-weight: bold;
    display: block;
    padding: 25px 10px;
}
.friend #introduction .url .inblock span input {
    width: 550px;
    height: 50px;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 15px;
    padding: 5px 10px;
    border: #ccd1d6 1px solid;
    border-radius: 2px;
    background: #f4faff;
    text-align: left;
    font-weight: bold;
    font-size: 17px;
    color: #471f03;
}

/* 紹介状況 */
.friend #introduction .syoukai .arrow {
    position: relative;
    margin: 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 26px;
}
.friend #introduction .syoukai .arrow:before,
.friend #introduction .syoukai .arrow:after {
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    border-top: #333 18px solid;
    border-bottom:18px solid transparent;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    margin-left: -14px;
}
.friend #introduction .syoukai .arrow:before { right: 150px;}
.friend #introduction .syoukai .arrow:after { left: 160px;}
.friend #introduction .syoukai .syoukai_stauts {
    text-align: center;
}
.friend #introduction .syoukai .syoukai_stauts a {
    width: 600px;
    height: 55px;
    margin-top: 20px;
    padding: 19px 0 0;
    cursor: pointer;
    letter-spacing: 1px;
    font-size: 26px;
}

/* tab_area タブ */
.tab_area .tab ul {
    display: table;
    table-layout: fixed;
    width: 97%;
    margin: 0 auto;
}
.tab_area #tab_menu01 li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 155px;
}
.tab_area #tab_menu01 li span {
    display: block;
    background: #5faef6;
    color: #fff;
    cursor: pointer;
    list-style: none outside none;
    padding: 12px 0 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 15px !important;
    margin-left: 5px;
}
.tab_area #tab_menu02 li {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 155px;
}
.tab_area #tab_menu02 li span {
    display: block;
    background: #5faef6;
    color: #fff;
    cursor: pointer;
    list-style: none outside none;
    padding: 12px 0 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 16px !important;
    margin-left: 5px;
}
.tab_area #tab_menu01 li:first-child span,
.tab_area #tab_menu02 li:first-child span {
    margin-left: 0;
}
.tab_area #tab_menu01 li.select span,
.tab_area #tab_menu02 li.select span {
    background: #348ee9;
    color: #fff;
}
.tab_area .disnon {
    display: none;
}
.tab_area .area {
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    padding: 15px;
    text-align: center;
}
.tab_area .area_box {
    border: 1px solid #2d94f0;
    background: #fff;
    padding: 15px;
}

/* 浮遊アニメーション */
.floatobj {
  position: absolute;
}

/* 注意事項 */
.friend .notice {
    width: 950px;
    margin: 0 auto;
}
.friend .notice h4 {
    clear: both;
    border-bottom: #2879c4 1px solid;
    background: url(../../../img/15/detail/ico_arrow7.gif) no-repeat 10px 15px;
    margin-bottom: 15px;
    padding: 12px 0 9px 25px;
    letter-spacing: 1px;
    font-size: 17px;
    font-weight: bold;
    color: #3b3b3b;
}
.friend .notice { margin-bottom: 20px;}
.friend .notice ul { margin-bottom: 40px;}
.friend .notice ul.indent {
    padding-left:1em;
    text-indent:-1em;
}
.friend .notice li {
    line-height: 2.0em;
    font-size: 13px;
}
.friend .notice li a { color: #2b2b2b;}
.friend .notice li a:hover {    color: #2882d6;}
.friend .notice li.bottom { margin-bottom: 25px;}