@charset "UTF-8";
/* お友達紹介ページPC */
.friend { margin: auto; text-align: center; }

.friend-Head_CpInfo { height: 60px; background: #ffa200; text-align: center; }

.friend-Head { background: url("/images/friend/front/bg_h2.png") repeat; margin-bottom: -5px; }

.friend-Head_Img { position: relative; bottom: -3px; }

.friend-Status { background: #e3efed; padding: 20px 0; position: relative; z-index: 2; }

.friend-Status_Box { width: 630px; padding: 10px; margin: 5px auto 15px auto; background: #FFFFFF; border-radius: 5px; border: 1px solid #1e7772; text-align: center; font-size: 11pt; }

.friend-Status-Title { margin-bottom: 16px; font-size: 17px; }

.friend-Status_Border { width: 100%; border-top: 1px solid #CCCCCC; margin: auto; }

.friend-Status-Count_box { width: 95%; margin: 15px auto; line-height: 20px; }

.friend-Status-CountTitle { float: left; font-size: 16px; }

.friend-Status-Count { float: right; font-weight: bold; color: #1e7772; font-size: 20px; }

.friend-Status-Pt_box { width: 95%; margin: 0 auto 10px auto; line-height: 20px; }

.friend-Status-PtTitle { float: left; font-size: 16px; }

.friend-Status-Pt { float: right; font-weight: bold; color: #FF0000; font-size: 20px; }

.friend-Status_Friends { float: right; padding: 7px 20px 5px; border-radius: 20px; background: #fceb9b; text-align: center; font-weight: bold; color: #670000; }

.friend-Status-Supplement { padding: 5px 0 15px; text-align: center; word-break: break-all; }

.friend-Status-Criterion { text-align: right; font-weight: lighter; color: #525252; font-size: 16px; }

.friend-Head_Btn-box { width: 628px; margin: auto; }

.friend-Head_Btn { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 1px solid #F9F079; background: #F9F079; color: #670000; box-shadow: 0 3px 0 #FBCC41; transition: all 0.2s ease-in-out; margin-bottom: 10px; padding: 1em 0; letter-spacing: 1px; font-size: 20px; }

.friend-Head_Btn:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

.friend-Head_Btn:hover { color: #670000; }

.friend-InActive_Btn { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 1px solid #eeeeee; background: #eeeeee; color: #525252; transition: all 0.2s ease-in-out; margin-bottom: 10px; padding: 1em 0; letter-spacing: 1px; font-size: 20px; }

.friend-ImportantAnnounce { width: 920px; height: 100%; padding-bottom: 20px; margin: 30px auto 0 auto; }

.friend-ImportantAnnounce_Inner { width: 100%; border: 1px solid #ff7373; border-radius: 5px; margin: auto; }

.friend-ImportantAnnounce_Title { width: 100%; height: 40px; background: #ff7373; margin: 0; padding: 0; line-height: 50px; text-align: center; }

.friend-ImportantAnnounce_Main { background: #FFFFFF; border-radius: 0 0 5px 5px; text-align: left; }

.friend-ImportantAnnounce_Main ul { margin: 0; padding: 0; list-style-type: none; }

.friend-ImportantAnnounce_Main ul li { border-top: 1px solid #ff7373; }

.friend-ImportantAnnounce_List { padding: 20px 20px 15px 15px; position: relative; top: 0; left: 0; }

.friend-ImportantAnnounce_TextBox { margin-left: 25px; line-height: 25px; }

.friend-ImportantAnnounce_TextBox p { margin: 0; padding: 0; font-size: 90%; }

.friend-ImportantAnnounce_TextBox p span { color: #ff0000; }

.friend-ImportantAnnounce_Link { color: #0063DC; }

.friend-Campaign { margin-top: 20px; }

.friend-Campaign_Bnr:hover img { background: rgba(255, 255, 255, 0.3); opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; }

.friend-SpecialCp { width: 670px; margin: 20px auto 0; text-align: center; }

.friend-SpecialCp_Btn-box { width: 628px; margin: 20px auto 0; }

.friend-SpecialCp_Btn { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 1px solid #F9F079; background: #F9F079; color: #670000; box-shadow: 0 3px 0 #FBCC41; transition: all 0.2s ease-in-out; margin-bottom: 10px; padding: 1em 0; letter-spacing: 1px; font-size: 20px; }

.friend-SpecialCp_Btn:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

.friend-SpecialCp_Btn:hover { color: #670000; }

.friend-About { width: 100%; height: 100%; }

.friend-About_Inner { width: 90%; margin: 20px auto 10px auto; }

.friend-About_Title { width: 920px; height: 80px; margin: 30px auto 0 auto; background: url("/images/friend/front/h3_title.png") no-repeat; background-position: 0 0; background-size: 920px auto; }

.friend-About_Title span { display: none; }

.friend-About_Contents { width: 900px; margin: 25px auto 0 auto; }

.friend-About_TextCenter { text-align: center; }

.friend-About_TextLeft { text-align: left; font-size: 17px; line-height: 30px; }

.friend-About_TextLeft span { color: #f75c81; }

.friend-About_Remarks { width: 900px; margin: 15px auto 0 auto; border: 1px solid #29b9b5; padding-top: 20px; font-size: 17px; }

.friend-About_Img { margin: 0 auto 20px; display: block; }

.friend-Benefit { width: 100%; height: 100%; }

.friend-Benefit_Inner { width: 900px; margin: 30px auto 10px auto; }

.friend-Benefit_Title { width: 920px; height: 80px; margin: 30px auto 0 auto; background: url("/images/friend/front/h3_title.png") no-repeat; background-position: 0 -80px; background-size: 920px auto; }

.friend-Benefit_Title span { display: none; }

.friend-Benefit_Contents { margin-top: 15px; text-align: center; }

.friend-Benefit_ContentsText { text-align: left; padding-left: 20px; }

.friend-Benefit_ContentsText span { color: #ff0000; }

.friend-Benefit_Img { position: relative; }

.friend-Benefit_ImgArrow { position: absolute; top: 300px; right: -30px; }

.friend-Flow { width: 100%; height: 100%; }

.friend-Flow_Inner { width: 900px; margin: 10px auto; }

.friend-Flow_Title { width: 920px; height: 80px; margin: 30px auto 0 auto; background: url("/images/friend/front/h3_title.png") no-repeat; background-position: 0 -160px; background-size: 920px auto; }

.friend-Flow_Title span { display: none; }

.friend-Flow_Contents { width: 900px; margin: auto; }

.friend-Flow_Contents p { text-align: left; font-size: 17px; margin: 20px 0 30px 0; line-height: 25px; }

.friend-Flow_Step { margin-top: 15px; text-align: center; }

.friend-Flow_Step-title1 { width: 660px; height: 60px; background: url("/images/friend/front/h4_stepTitle.svg") no-repeat; background-position: 0 0; background-size: 660px auto; }

.friend-Flow_Step-title1 span { display: none; }

.friend-Flow_Step-title2 { width: 660px; height: 60px; background: url("/images/friend/front/h4_stepTitle.svg") no-repeat; background-position: 0 -60px; background-size: 660px auto; }

.friend-Flow_Step-title2 span { display: none; }

.friend-Flow_Step-title3 { width: 660px; height: 60px; background: url("/images/friend/front/h4_stepTitle.svg") no-repeat; background-position: 0 -120px; background-size: 660px auto; }

.friend-Flow_Step-title3 span { display: none; }

.friend-Flow_Remarks { width: 900px; margin: 15px auto 40px auto; border: 1px solid #f75c81; padding-top: 20px; font-size: 17px; position: relative; top: 0; left: 0; }

.friend-Flow_Remarks-Text { padding-left: 40px; }

.friend-Flow_Remarks-Text span { color: #f75c81; }

.friend-Flow_AttentionIcon { position: absolute; top: -25px; left: -15px; -webkit-animation: spin 8s infinite linear; animation: spin 8s infinite linear; }

.friend-Flow_AttentionText { position: absolute; top: -25px; left: -15px; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.friend-waraufriendsUrl_Title { margin: 20px 0 16px; }

.friend-Introduce_Inner { background: #e3efed; padding: 30px 0; }

.friend-Introduce_Select { width: 1000px; height: 180px; margin: auto; background: #e3efed; padding: 0; }

.friend-Introduce_Select li { list-style: none; }

.friend-Introduce_Select li:last-child { border-left: none; }

.friend-Introduce_SelectBtn, .friend-AfRatioIntroduce_SelectBtn { width: 500px; height: 180px; border: 2px solid #1e7772; float: left; cursor: pointer; }

.friend-Introduce_SelectBtn img, .friend-AfRatioIntroduce_SelectBtn img { margin-top: 30px; }

.friend-Introduce_SelectBtn:hover, .friend-AfRatioIntroduce_SelectBtn:hover { background: rgba(255, 255, 255, 0.3); }

.friend-Introduce_SelectBtn_active { background: #FFFFFF; cursor: auto; }

.friend-Introduce_SelectBtn_active:hover { background: #FFFFFF; }

.friend-Introduce { width: 1000px; padding: 35px 20px; margin: 30px auto; background: #FFFFFF; border: 2px solid #1e7772; position: relative; top: 0; left: 0; }

.friend-Introduce_Blog:before { content: ""; position: absolute; top: -55px; left: 220px; border: 30px solid transparent; border-bottom: 25px solid #FFFFFF; z-index: 2; }

.friend-Introduce_Blog:after { content: ""; position: absolute; top: -57px; left: 220px; border: 30px solid transparent; border-bottom: 25px solid #1e7772; z-index: 1; }

.friend-Introduce_MailSns:before { content: ""; position: absolute; top: -55px; right: 220px; border: 30px solid transparent; border-bottom: 25px solid #FFFFFF; z-index: 2; }

.friend-Introduce_MailSns:after { content: ""; position: absolute; top: -57px; right: 220px; border: 30px solid transparent; border-bottom: 25px solid #1e7772; z-index: 1; }

.friend-Blog_Title { text-align: left; padding-left: 40px; font-size: 19px; color: #1e7772; }

.friend-Blog_Title:before { display: block; content: ""; width: 6px; height: 19px; background: #FEA000; border-radius: 5px; margin: -2px 10px 0 0; float: left; }

.friend-Blog_BnrList { width: 90%; text-align: left; }

.friend-Blog_BnrList li { list-style: none; }

.friend-MailSns_Contents { width: 900px; margin: auto; }

.friend-MailSns_Notes { width: 900px; background-color: #FFEEEE; padding: 16px; border-radius: 5px; font-size: 17px; margin: 10px auto 0 auto; }

.friend-MailSns_Notes span { color: #ff0000; }

.friend-Bnr_Title { width: 120px; height: 40px; background: #e3efed; border-radius: 25px; line-height: 40px; text-align: center; font-size: 20px; margin-bottom: 15px; }

.friend-URLcopy_BlogURL { width: 100%; height: 110px; border: 1px solid #1e7772; padding: 10px; line-height: 22px; margin: 10px 0 20px 0; }

.friend-URLcopy_MailSns { width: 100%; height: 110px; border: 1px solid #1e7772; padding: 10px; line-height: 22px; margin: 10px 0 20px 0; height: 260px; }

.friend-Introduce_SmsText { font-size: 20px; }

.friend-Introduce_SmsText span { color: #ff0000; }

.friend-Introduce_SmsBtnBox { width: 628px; margin: auto; }

.friend-Introduce_SmsBtn { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 1px solid #F9F079; background: #F9F079; color: #670000; box-shadow: 0 3px 0 #FBCC41; transition: all 0.2s ease-in-out; margin-bottom: 10px; padding: 1em 0; letter-spacing: 1px; font-size: 20px; }

.friend-Introduce_SmsBtn:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

.friend-Introduce_SmsBtn:hover { color: #670000; }

/* Q&A */
.friend-QA { background: #FFFFFF; width: 1000px; margin: auto; }

.friend-QA_Box { width: 100%; margin: 50px auto; border: 1px solid #29b9b5; -webkit-border-radius: 5px 5px 0 0; border-radius: 7px 7px 0 0; }

.friend-QA_Title { background: #29b9b5; padding: 20px 10px; text-align: center; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; }

.friend-QA_Main { background: #FFFFFF; }

.friend-QA_Main ul { list-style: none; padding: 0; margin: 0; }

.friend-QA_Main li { padding: 5px; height: auto; border-bottom: 1px solid #29b9b5; }

.friend-QA_Main li:last-child { border-bottom: none; }

.friend-QA_QuestionInner { height: auto; padding: 20px; position: relative; cursor: pointer; }

.friend-QA_QuestionInner .activeIcon { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); transform: scaleY(-1); }

.friend-QA_Question { width: 93%; color: #525252; font-size: 17px; text-align: left; line-height: 40px; }

.friend-QA_Anser { padding: 20px; margin-left: 5px; color: #525252; font-size: 15px; word-break: break-all; text-align: left; line-height: 30px; }

.friend-Icon_Question { width: 40px; height: 40px; position: relative; top: -5px; right: 7px; float: left; fill: #29b9b5; margin-right: 10px; }

.friend-Icon_Arrow { width: 30px; height: 30px; position: absolute; top: 25px; right: 32px; float: right; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; fill: #29b9b5; }

.iconColorWhite { fill: #FFFFFF; }

.friend-Detail { width: 1000px; height: 100%; background: #FFFFFF; padding-bottom: 20px; border-bottom: #CCCCCC; margin: 20px auto 0; text-align: left; }

.friend-Detail_TextBox { margin-left: 5px; }

.friend-Detail_Title_announce { font-weight: bold; font-size: 17pt; padding: 10px 0; margin: auto; color: #f75c81; }

.friend-Detail_Title { font-weight: bold; font-size: 17pt; padding: 10px 0; margin: auto; background: #f9f9f9; color: #1e7772; }

.friend-Detail_Text { line-height: 30px; font-size: 12pt; margin: 10px 0 20px; }

.friend-Detail_Text span { color: #ff0000; }

.friend-List_TitleBold { font-weight: bold; margin: 5px 0; }

.friend-List_Box { margin-top: 0; margin-left: -15px; }

.friend-List_Text, .friend-List_Box li { line-height: 30px; padding: 5px 5px 5px 0; }

.friend-ListAster_Box { list-style-type: none; margin-left: -30px; }

.friend-ListAster_Box li { line-height: 30px; padding: 5px 5px 5px 10px; }

.friend-ListAster_Box li:before { content: "※"; margin-left: -15px; }

.clearBoth { clear: both; }

.displayNone { display: none; }

.friend-AfRatio_HeaderBnr { margin: 30px auto 0; text-align: center; }

.friend-AfRatio_HeaderBnr a { color: #525252; }

.friend-AfRatio_HeaderBnr p { font-size: 16px; font-weight: bold; }

.friend-AfRatioBenefit { margin: 15px 0; text-align: center; }

.friend-AfRatioCondition_Box { margin: 0 auto 20px; width: 100%; }

.friend-AfRatioCondition_FriendCaption { font-size: 20px; font-weight: bold; color: #ff3869; line-height: 160%; margin: 10px auto; }

.friend-AfRatioCondition_FriendNormal { margin-left: 30px; }

.friend-AfRatioCondition_welcomeCP { margin: 10px 0 30px; }

.friend-AfRatioIntroduce_SelectBtn { width: 333px; }

.friend-AfRatioIntroduce_SelectBtn:first-child { border-right: none; }

.friend-Title_StatusText { width: 630px; height: 40px; margin: 0 auto 20px; padding: 5px; font-weight: bold; color: #FFFFFF; background: #1e7772; border-radius: 30px; text-align: center; line-height: 2; letter-spacing: 3px; position: relative; box-sizing: border-box; }

.friend-Title_StatusText:before { content: ''; position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-bottom: 15px; border-style: solid; border-width: 7px 6px 0 6px; border-color: #1e7773 transparent transparent transparent; }

.friend-Text_Paragraph { margin-bottom: 15px; }

.friend-Text_Link { color: #0063DC; text-decoration: none; }

.friend-Text_Link:hover { color: #FF0084; }

.friend-displayNone_Title { display: none; }

/*# sourceMappingURL=friendFront.css.map */