@charset "UTF-8";
.sw-Pt_Icon { margin: 0 4px 5px 0; vertical-align: middle; }

.sw-Pt { color: #da0201; font-size: 22px; font-weight: bold; font-family: "Karla", sans-serif; margin-right: 2px; }

.sw-PtUnit { color: #da0201; font-size: 15px; font-weight: bold; font-family: "Karla", sans-serif; }

.sw-Pt_Before { position: relative; display: inline-block; margin-right: 5px; font-size: 15px; color: #525252; }
.sw-Pt_Before:before { content: ""; width: 100%; height: 1px; display: block; position: absolute; top: 10px; left: 0; background-color: #525252; }
.sw-Pt_Before:after { position: absolute; top: 0; right: -20px; content: "→"; }

/* PCフッター注意事項等 */
.sw-FooterNoteBox { width: 1000px; margin: 60px auto; background: #ffffff; border-radius: 5px; }

.sw-FooterNote { background: #ffffff; border-radius: 5px; border: 1px solid #e2e2e2; padding: 20px 40px; text-align: left; }

.sw-FooterNote a, .sw-FooterNote a:visited { color: #0063dc; text-decoration: none; cursor: pointer; }

.sw-FooterNote_TextRed { color: #da0201; font-weight: bold; }

.sw-FooterNote_Content { padding-bottom: 30px; line-height: 1.8; margin-left: 0; }

.sw-FooterNote_Content li { line-height: 2; }

.sw-FooterNote_Content:last-child { padding-bottom: 0; }

.sw-FooterNote_Content-textNormal { margin: 0; padding: 10px 0 10px 11px; font-size: 15px; }

.sw-FooterNote_ListCircle { list-style-type: disc; margin: 0; padding: 10px 0 0 24px; font-size: 15px; }

.sw-FooterNote_ListCircle-indent { list-style-type: circle; padding: 2px 0 20px 25px; font-size: 15px; }

.sw-FooterNote_ListNumber { padding: 10px 0 10px 12px; list-style-type: none; list-style-position: inside; }

.sw-FooterNote_ListNumber-contents { counter-increment: cnt; margin-left: 1.7em; text-indent: -1.7em; }

.sw-FooterNote_ListNumber-contents:before { display: marker; content: "(" counter(cnt) ") "; }

.sw-FooterNote_ListNumber .sw-FooterNote_ListCircle:last-child { padding-bottom: 0; }

.sw-FooterNote_ListCircle .sw-FooterNote_ListNumber:last-child { padding-bottom: 0; }

.sw-FooterNote_ListNumber .sw-FooterNote_ListCircle .sw-FooterNote_ListCircle-indent:last-child { padding-bottom: 0; }

.sw-FooterNote_ListNumber-first { padding: 10px 0; list-style-type: none; list-style-position: inside; }

.sw-FooterNote_listStyleNone { list-style: none; margin-left: -1em; }

.sw-FooterNote_HeadingBox { margin-top: 23px; text-align: center; }

.sw-FooterNote_HeadingBox + p, .sw-FooterNote_HeadingBox + ol.sw-FooterNote_ListNumber-first, .sw-FooterNote_HeadingBox + ul.sw-FooterNote_ListCircle-first { padding-top: 0; }

.sw-FooterNote_Heading { font-size: 16px; margin-bottom: 28px; position: relative; padding: 0 30px 9px; display: inline-block; }

.sw-FooterNote_Heading:after { display: inline-block; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); transform: translate(-50%); min-width: 200px; width: 100%; height: 2px; content: ""; background-color: #fea000; }

.sw-FooterNote_MiddleHeading { font-size: 15px; position: relative; display: inline-block; margin-bottom: 5px; padding-left: 0.8em; height: 20px; line-height: 20px; }

.sw-FooterNote_MiddleHeading:before { display: inline-block; position: absolute; content: ""; top: 30%; bottom: 0; left: 0; width: 9px; height: 9px; background: #525252; }

.sw-FooterNote_SmallHeading { position: relative; display: inline-block; margin-left: 1.2em; height: 20px; line-height: 20px; }

.sw-FooterNote_SmallHeading:before { left: -1em; content: "【"; position: absolute; }

.sw-FooterNote_SmallHeading:after { content: "】"; position: absolute; }

.sw-FooterNote_SmallHeading-first { font-size: 10pt; position: relative; display: inline-block; margin-left: 0.5em; height: 20px; line-height: 20px; }

.sw-FooterNote_SmallHeading-first:before { left: -1em; content: "【"; position: absolute; }

.sw-FooterNote_SmallHeading-first:after { content: "】"; position: absolute; }

/* お友達紹介ページ */
.friendIntroduce-Head_Img { vertical-align: bottom; }

.friendIntroduce-Summary_MenuBox { margin: 0 0 30px; padding: 5px 0; background: #e0f3f2; }

.friendIntroduce-Summary_MenuBoxFriend { margin: 0 0 30px; padding: 5px 0; background: #fff6d2; }

.friendIntroduce-Summary_Menu { margin: 20px auto; padding: 0; list-style-type: none; width: 820px; height: 58px; }

.friendIntroduce-Summary_MenuBtn { float: left; margin: 0 30px 0 0; }

.friendIntroduce-Summary_MenuBtn:last-child { margin: 0; }

.friendIntroduce-Summary_MenuBtn-link { font-size: 18px; position: relative; padding: 1em 4.9em; border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 1px solid #c3c4c5; background: #ffffff; color: #525252; box-shadow: 0 3px 0 #c3c4c5; transition: all 0.2s ease-in-out; }

.friendIntroduce-Summary_MenuBtn-link:hover { transform: translateY(3px); box-shadow: 0 0 0 #c3c4c5; }

.friendIntroduce-Summary_MenuBtn-link:hover .icon { animation: animate-rotateModify 0.5s linear infinite; }

.friendIntroduce-Summary_MenuBtn-link.active { color: #777777; background-color: #eeeeee; border-bottom: 1px #cccccc solid; box-shadow: none; }

.friendIntroduce-Summary_MenuBtn-link.active:hover { transform: none; }

.friendsAcquire-Main_BtnWrap { display: block; width: 590px; height: 80px; margin: 0 auto 20px; text-decoration: none; border: none; background: none; }

.friendsAcquire-Main_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: auto; height: 65px; font-size: 24px; line-height: 250%; letter-spacing: 0.1em; border-radius: 8px; box-shadow: 0 6px 0 #fbcc41, 0 12px 0 rgba(0, 0, 0, 0.2); cursor: pointer; }
.friendsAcquire-Main_Btn:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

.friend-Body { margin: auto; text-align: center; padding: 0 0 40px; border-bottom: 1px solid #cccccc; background-color: #ffffff; }

.friend-Body_Inner { margin-right: auto; margin-left: auto; width: 1000px; text-align: left; }
.friend-Body_Inner:after { display: table; clear: both; content: " "; }

.friendIntroduce-TopTitle { margin: 0; background: #54c4c0; }

.friendIntroduce-TopTitle_Friends { margin: 0; text-align: center; background: #ffffff; }

.friendIntroduce-Campaign_BnrBox { text-align: center; margin-bottom: 30px; }

.friendsAcquire-Main { width: 670px; margin: auto; }

.friendsAcquire-MainSection { border: 1px solid #cccccc; background-color: #ffffff; }

.friendsAcquire-Total_Title { font-size: 16px; color: #525252; padding: 13px 0 10px; border-bottom: 2px solid #feb302; margin: 0; }

.friendsAcquire-Total_Title-icon { vertical-align: middle; margin: 0 5px; display: inline-block; position: relative; top: -0.1em; }

.friendsAcquire-PointDetail_ListItem-top { border-top: 1px #cccccc solid; width: 94%; height: 1px; margin-right: auto; margin-left: auto; }
.friendsAcquire-PointDetail_ListItem-top:after { display: table; clear: both; content: " "; }

.friendsAcquire-PointDetail_ListItem-Space { border-bottom: 1px #cccccc solid; width: 100%; margin: 20px 0 0 auto; }
.friendsAcquire-PointDetail_ListItem-Space:after { display: table; clear: both; content: " "; }

.friendsAcquire-PointDetail_ListItem { height: 44px; box-sizing: border-box; margin: 0 auto; padding: 0; font-size: 15px; }
.friendsAcquire-PointDetail_ListItem:after { display: table; clear: both; content: " "; }

.friendsAcquire-PointDetail_Details { height: 44px; box-sizing: border-box; margin: 0 auto 0 30px; padding: 0; font-size: 15px; }
.friendsAcquire-PointDetail_Details:after { display: table; clear: both; content: " "; }

.friendsAcquire-PointDetail_ListItem:after { display: table; clear: both; content: " "; }

.friendsAcquire-PointDetail_ListItem-titleMain { width: 50%; float: left; margin: 0; text-align: left; list-style-type: none; padding: 12px 0 10px 30px; box-sizing: border-box; font-weight: bold; }

.friendsAcquire-PointDetail_ListItem-title { width: 50%; float: left; margin: 0; text-align: left; list-style-type: none; padding: 12px 0 10px 30px; box-sizing: border-box; }

.friendsAcquire-PointDetail_ListItem-detail { width: 50%; float: left; margin: 0; list-style-type: none; text-align: right; padding: 12px 30px 10px 0; box-sizing: border-box; }

.friendsAcquire-UserPoint_PointTotal { padding-left: 1.2em; color: #da0201; font-size: 13pt; font-weight: bold; font-family: "Karla", sans-serif; margin-right: 5px; position: relative; }

.friendsAcquire-UserPoint_PointTotal:after { position: absolute; content: ""; top: 2px; left: 0; width: 17px; height: 17px; display: block; display: block; background-image: url("/images/home/sprite_content.png"); background-repeat: no-repeat; background-position: 0 -580px; }

.friendsAcquire-UserPoint_Point { padding-left: 1.2em; color: #da0201; font-size: 13pt; font-weight: bold; font-family: "Karla", sans-serif; margin-right: 5px; position: relative; }

.friendsAcquire-NoteBox { text-align: left; margin: 10px 20px; }

.friendsAcquire-NoteText { font-size: 14px; line-height: 27px; }

.friendsAcquire-NoteText_attention { font-size: 9pt; line-height: 1.7; color: #da0201; }

.friendsAcquire-Mission_Title { font-size: 16px; color: #525252; padding: 13px 0 10px; border-bottom: 2px solid #feb302; margin: 0; }

.waraufriends-StatusCard_Icon-clear span.sub:before, .waraufriends-StatusCard_Icon-more span.sub:before, .waraufriends-StatusCard_Icon-good span.sub:before { width: 100%; }

.friendsAcquire-Sub { width: 300px; border: 1px solid #cccccc; background-color: #ffffff; float: right; }

.friendsAcquire-Sub_Wrap { width: 300px; float: right; }

.friendsAcquire-Sub_Wrap:after { display: table; clear: both; content: " "; }

.friendsAcquire-Sub_Title { font-size: 16px; position: relative; padding: 13px 0 10px; border-bottom: 2px solid #feb302; background-color: #ffffff; text-align: center; line-height: 1; }

.friendsAcquire-Sub_Inner { margin: 12px; }

.friendsAcquire-Sub_Inner-title { margin-top: 30px; text-align: center; font-weight: bold; }

.friendsAcquire-Sub_Inner-title-bottom { margin-top: 0; text-align: center; }

.friendsAcquire-Sub_NoteBox { margin: 12px auto; }

.friendsAcquire-Sub_NoteBoxCenter { margin-top: 6px; font-size: 9pt; text-align: center; }

.friendsAcquire-Sub_NoteBoxLeft { margin-top: 6px; font-size: 9pt; text-align: left; }

.friendsAcquire-Sub_NoteBoxRight { margin-top: 6px; font-size: 9pt; text-align: right; }

.friendsAcquire-Sub_BtnWrap { display: block; text-decoration: none; }

.friendsAcquire-Sub_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: auto; height: 40px; font-size: 14px; line-height: 3; letter-spacing: 0.1em; }
.friendsAcquire-Sub_Btn:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

.friendsAcquire-Data { margin: 0; padding: 0; list-style: none; }

.friendsAcquire-Data-StatusText { text-align: right; font-weight: bold; color: #1e7772; font-size: 18px; display: block; margin: 0 5px 12px 0; }

.friendsAcquire-Data_List { border-bottom: 1px solid #cccccc; padding: 12px 5px; }

.friendsAcquire-Data_List:first-child { content: ""; border-top: 1px solid #cccccc; }

.friendsAcquire-Data_ListItem-name { text-align: left; display: inline-block; font-size: 15px; }

.friendsAcquire-Data_ListItem-content { width: 100%; display: inline-block; text-align: right; vertical-align: top; font-size: 10pt; }

.friendsAcquire-Data_ListItem-result { padding-left: 1em; font-size: 19pt; font-weight: bold; font-family: "Karla", sans-serif; }

.friendIntroduce-SortBox:after { display: table; clear: both; content: " "; }

.friendIntroduce-Sort { margin: 18px 0 5px 30px; padding-left: 0; padding-right: 0; float: left; width: 602px; overflow-x: hidden; border: 1px solid #feb302; border-radius: 5px; }

.friendIntroduce-Sort_Btn-month, .friendIntroduce-Sort_Btn { font-size: 15px; font-weight: bold; line-height: 1; display: block; float: left; width: 100px; padding: 0.7em 0 0.5em; cursor: pointer; text-align: center; color: #ef9c07; border: none; border-right: 1px solid #feb302; background-color: #ffffff; text-decoration: none; transition: all 0.2s ease-in-out; }
.friendIntroduce-Sort_Btn-month:hover, .friendIntroduce-Sort_Btn-month.active, .friendIntroduce-Sort_Btn:hover, .friendIntroduce-Sort_Btn.active { color: #ffffff; background-color: #feb302; }
.friendIntroduce-Sort_Btn-month:last-child, .friendIntroduce-Sort_Btn:last-child { border-right: none; }
.friendIntroduce-Sort_Btn-month[aria-pressed=true], .friendIntroduce-Sort_Btn[aria-pressed=true] { color: #ffffff; background-color: #feb302; }

.sort_AreaMonth ul { display: none; }

.sort_AreaMonth ul.show { display: block; padding-left: 0; margin: 0 0 3px; }

.sort_AreaMonth ul li { text-align: left; list-style: none; }

.friendIntroduce-Title_Box { width: 1000px; height: 45px; margin: 50px auto 20px; position: relative; }

.friendIntroduce-Title_Box:first-child { content: ""; margin: 0 auto 20px; }

.friendIntroduce-Title_Background { width: 1000px; height: 4px; background: #54c4c0; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.friendIntroduce-Title { width: 600px; height: 45px; color: #ffffff; font-size: 25px; font-weight: bold; letter-spacing: 2px; line-height: 170%; text-align: center; border-radius: 30px; background: #54c4c0; position: absolute; z-index: 100; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "M PLUS Rounded 1c", sans-serif; }

.friendIntroduce-Title_Min { margin: 12px; padding: 6px; color: #ffffff; font-weight: bold; text-align: center; border-radius: 30px; background: #54c4c0; }

.friendIntroduce-wfStatus_Images { width: 100%; margin-bottom: 5px; text-align: center; display: block; }

.friendIntroduce-TextBox { padding: 0 20px; overflow: hidden; line-height: 1.5; text-align: left; }

.friendIntroduce-TextBox_Center { padding: 0 20px; line-height: 1.5; text-align: center; }
.friendIntroduce-TextBox_Center a { color: #0063dc; text-decoration: none; }
.friendIntroduce-TextBox_Center a:visited { color: #0063dc; }
.friendIntroduce-TextBox_Center a:hover { color: #ff0084; }

.friendIntroduce-TextBox_Acquire { margin: 10px 0 30px 0; line-height: 1.5; text-align: left; font-size: 15px; }
.friendIntroduce-TextBox_Acquire a { color: #0063dc; text-decoration: none; }
.friendIntroduce-TextBox_Acquire a:visited { color: #0063dc; }
.friendIntroduce-TextBox_Acquire a:hover { color: #ff0084; }

.friend-Cp_Lead { padding-top: 40px; }

/*
.friendIntroduce-Benefit_Container { text-align: center; margin: 20px auto 30px; }*/
.friendIntroduce-Benefit_Container::after { content: ""; display: block; clear: both; }

.friendIntroduce-Benefit_RegularBox { height: 630px; margin: 20px auto 30px; padding: 15px 20px 20px; color: #808080; border-radius: 8px; position: relative; background: #e0f3f2 url(/images/friend/front2021/bg_star.png); text-align: center; }
.friendIntroduce-Benefit_RegularBox:after { display: table; clear: both; content: " "; }

.friendIntroduce-Benefit_CharaYou { position: absolute; top: -104px; height: 100px; left: 200px; }

.friendIntroduce-Benefit_CharaFriend { position: absolute; top: -104px; height: 100px; right: 200px; }

.friendIntroduce-Benefit_YouBox { float: right; width: 49%; }

.friendIntroduce-Benefit_FriendBox { float: left; width: 49%; }

.friendIntroduce-Benefit_InnerBox { padding: 15px; background: #ffffff; border-radius: 8px; border: 3px solid #1e7772; }

.friendIntroduce-Benefit_AboutText { margin: 0 0 15px 0; text-align: left; font-size: 15px; line-height: 180%; }

.friendIntroduce-Benefit_AboutText-link { color: #0063dc; text-decoration: none; }

.friendIntroduce-Benefit_Summary-title { margin: 0 auto; text-align: center; font-weight: bold; font-size: 15pt; }

.friendIntroduce-Benefit_Pt { margin: 0 auto; text-align: center; font-weight: bold; font-size: 25pt; }

.friendIntroduce-Benefit_RegularInner-titile { width: 200px; padding: 5px 10px; display: block; font-size: 17pt; font-weight: bold; border-radius: 20px; color: #ffffff; background: #1e7772; margin: 0 auto 15px; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; }

.friendIntroduce-Benefit_Plus { width: 58%; margin: 10px auto 25px; display: block; }

.friendIntroduce-Benefit_PtBoxLeft { float: left; }

.friendIntroduce-Benefit_PtBoxRight { float: right; }

.friendIntroduce-Benefit_Head { vertical-align: bottom; }

.friendIntroduce-Benefit_Cp { font-size: 15px; color: #0063dc; text-decoration: none; text-align: center; margin-bottom: 20px; }

.friendIntroduce-Benefit_Cp-link { display: inline-block; margin-bottom: 10px; color: #0063dc; text-decoration: none; }

.friendIntroduce-Modal { display: none; height: 100vh; position: fixed; top: 0; width: 100%; }

.friendIntroduce-Modal_bg { background: rgba(0, 0, 0, 0.8); height: 100vh; position: absolute; width: 100%; z-index: 999; }

.friendIntroduce-Modal_content { background: #ffffff; left: 50%; padding: 20px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 60%; z-index: 1000; }

.friendIntroduce-GrayBtn { color: #777777; background-color: #eeeeee; border: 1px #cccccc solid; border-radius: 8px; box-shadow: none; cursor: default; font-size: 24px; font-weight: bold; line-height: 3; }

.friendIntroduce-QrModal_Close { font-size: 22px; color: grey; text-align: right; cursor: pointer; }

.friendIntroduce-QrModal_Loading { width: 100%; }

#friend-QR_Iframe { display: block; margin: 0 auto; }

.friendIntroduce-Title, .friendIntroduce-Title_Background, .friendIntroduce-Balloon_Down:before { z-index: 0; }

.friendIntroduce-Modal { z-index: 999; }

.friendIntroduce-Modal_ImgSns { margin: 0 auto 30px; display: block; }

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

.friendIntroduce-Modal_BtnWrap { display: block; width: 80%; height: 90px; margin: 0 auto 20px; text-decoration: none; border: none; background: none; }

.friendIntroduce-Modal_BtnSns { 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: auto; font-size: 24px; line-height: 250%; letter-spacing: 0.1em; border-radius: 8px; box-shadow: 0 6px 0 #fbcc41, 0 12px 0 rgba(0, 0, 0, 0.2); cursor: pointer; }
.friendIntroduce-Modal_BtnSns:hover { transform: translateY(3px); box-shadow: 0 0 0 #FBCC41; }

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

.friend-URLcopy_MailSns { width: 950px; padding: 10px; line-height: 22px; border: 1px solid #1e7772; margin: 5px 0 8px; height: 260px; text-align: left; }

.friend-URLcopy_BlogURL { width: 950px; padding: 10px; line-height: 22px; border: 1px solid #1e7772; height: 110px; margin: 20px auto 8px; display: block; }

.friend-MailSns_Notes { width: 960px; margin: 12px auto; padding: 16px; border-radius: 5px; font-size: 14px; line-height: 1.7; text-align: left; background-color: #ffeeee; list-style-type: none; }

.friend-MailSns_NotesIcon { color: #da0201; }

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

.friend-Bnr_Title { margin: 0 auto 20px; background: #ffffff; padding: 10px 10px 10px 0; font-size: 20px; }
.friend-Bnr_Title:before { content: "▽ "; }

.friendIntroduce-TextCopy_Img { width: 400px; margin: 12px auto 0; text-align: center; display: block; }

.friendIntroduce-Balloon_Down { width: 100%; height: 60px; margin: 0 auto 10px; position: relative; display: inline-block; padding: 17px 10px 7px; box-sizing: border-box; border-radius: 30px; color: #3fafac; font-size: 25px; font-weight: bold; text-align: center; line-height: 150%; letter-spacing: 1px; font-family: "M PLUS Rounded 1c", sans-serif; }

.friendIntroduce-Balloon_Down:before { content: ""; position: absolute; bottom: -17px; left: 50%; border: 10px solid transparent; border-top: 8px solid #ffffff; z-index: 2; }

.friendIntroduce-Balloon_Down:after { content: ""; position: absolute; bottom: -20px; left: 50%; border: 10px solid transparent; border-top: 8px solid #3fafac; }

.sort_AreaBanner ul { display: none; }

.sort_AreaBanner ul.show { display: block; padding-left: 0; }

.sort_AreaBanner ul li { padding-bottom: 5px; text-align: left; list-style: none; background: #e0f3f2; border-radius: 5px; }

.friend-SortBtn_Box { margin: 20px 15px; }
.friend-SortBtn_Box:after { display: table; clear: both; content: " "; }

.friend-SortBtn_list { list-style-type: none; padding: 0; margin: 0; margin: 0 -4px; }

.friend-SortBtn_ItemBanner { width: 150px; float: left; margin: 0 6px; background: #ffffff; border: 3px solid #cccccc; border-radius: 20px; transition: 0.3s; cursor: pointer; padding: 10px 40px; text-decoration: none; font-size: 12pt; line-height: 16px; letter-spacing: 0.4px; color: #525252; font-weight: 600; }
.friend-SortBtn_ItemBanner:hover { background: #fffae8; }

.friend-SortBtn_Item { flex-shrink: 0; margin: 0 4px; background: #ffffff; border: 1px solid #cccccc; border-radius: 6px; transition: 0.3s; cursor: pointer; padding: 7px 30px; text-decoration: none; font-size: 12pt; line-height: 16px; letter-spacing: 0.4px; color: #525252; font-weight: 400; }

.friend-SortBtn_ItemBanner.active, .friend-SortBtn_Item.active { border: 3px solid #54c4c0; background: #54c4c0; cursor: auto; color: #ffffff; font-weight: bold; }

.friend-Bnr_Img { margin: 0 auto; display: block; }

.friendIntroduce-SnsList_Caption { margin: 0; }

.friendIntroduce-SnsList_SidebarComment { font-size: 9pt; line-height: 1.7; margin: 8px auto; }

.friendIntroduce-SnsList { margin: 20px auto 40px; padding: 20px 0 0; background: #e0f3f2; border: 4px solid #54c4c0; border-radius: 8px; position: relative; }

.friendIntroduce-SnsList_Item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; clear: both; }

.friendIntroduce-SnsList_Item-aBox { width: 140px; padding: 0 10px 15px; margin: 0 10px 20px; text-align: center; text-decoration: none; color: #525252; vertical-align: top; position: relative; border-radius: 6px; background: #ffffff; display: block; transition: 0.2s; border: none; cursor: pointer; }
.friendIntroduce-SnsList_Item-aBox:hover { background: #fffae8; }

.friendIntroduce-Campaign_Container { margin: 80px auto 30px; }
.friendIntroduce-Campaign_Container:after { display: table; clear: both; content: " "; }

.friendIntroduce-Campaign_RegularBox { height: 450px; margin: 10px auto; padding: 15px 20px 20px; color: #808080; border-radius: 8px; position: relative; width: 60%; background: #e0f3f2; border: 4px solid #54c4c0; }

.friendIntroduce-Campaign_FriendsBox { height: 380px; margin: 10px 10px 0 10px; padding: 15px 20px 20px; color: #808080; border-radius: 8px; position: relative; width: 48%; float: right; background: #fff6d2; border: 4px solid #ebc24d; }

.friendIntroduce-Campaign_InnerBox { height: 360px; margin-top: 15px; padding: 15px; background: #ffffff; border-radius: 4px; }

.friendIntroduce-Af { width: 100%; margin: 0 auto 60px; text-align: left; padding: 20px 0 1px; background: #e0f3f2; border-radius: 5px; }

.friendIntroduce-Af_LinkBox { display: block; text-decoration: none; color: #525252; }

.friendIntroduce-Af_Container { width: 960px; margin: 0 auto 20px; background: #ffffff; border: 2px solid #1e7772; border-radius: 5px; display: block; box-shadow: 0 5px 0 #bfe0df; }

.friendIntroduce-Af_Inner { margin: 20px 80px 30px; position: relative; }

.friendIntroduce-Af_BnBox { float: left; margin: 0 10px 0 0; text-align: center; }

.friendIntroduce-Af_BnImgBox { background-size: 85px; }

.friendIntroduce-Af_BnImg { width: 120px; border: 0; line-height: 65px; }

.friendIntroduce-Af_Detail { width: 89%; height: auto; float: right; }

.friendIntroduce-Af_DetailBox { padding-left: 145px; }

.friendIntroduce-Af_Title { margin: 0 0 12px; line-height: 1.5; font-weight: bold; font-size: 15pt; }

.friendIntroduce-Af_DetailText { margin-bottom: 10px; }

.friendIntroduce-Af_PtBox { vertical-align: 50%; }

.friendIntroduce-Af_Pt { height: 22px; overflow: hidden; background: url("/images/common/icon/pointFront.svgz") no-repeat; background-position: 0 0; background-size: 14px auto; padding-left: 18px; }

.friendIntroduce-Af_Message { margin: 12px 20px; padding: 12px; font-size: 15px; line-height: 180%; overflow: hidden; border: 3px solid #ffffff; border-radius: 6px; background: #fffae8; }

.friendIntroduce-Af_Title-bannerLink { width: 85px; height: 85px; display: table-cell; text-align: center; vertical-align: middle; layout-grid-line: 140px; overflow: hidden; }

.friendIntroduce-Af_Title-textLink { font-size: 20px; font-weight: bold; margin-bottom: 0.5em; line-height: 1.2; color: #525252; text-decoration: none; }

.friendIntroduce-Af_listMark { position: absolute; top: -6px; left: -6px; z-index: 2; border-radius: 5px 0 0; }

.friendIntroduce-Af_BtnMini { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 2px solid #1e7772; background: #ffffff; color: #1e7772; box-shadow: 0 3px 0 #1e7772; transition: all 0.2s ease-in-out; width: 240px; height: 50px; font-size: 17px; line-height: 45px; font-weight: bold; border-radius: 6px; position: absolute; bottom: 0; right: 0; }

.friendIntroduce-Af_BtnMini:hover { box-shadow: 0 0 0 #1e7772; transform: translateY(3px); }

.friendIntroduce-AfURL_Textarea { width: 540px; height: 50px; padding: 0 5px; line-height: 22px; border: 1px solid #525252; margin-bottom: 8px; display: block; background: #e0f3f2; }

.friendIntroduce-Main_BtnWrap { display: block; width: 240px; height: 50px; text-decoration: none; border: none; background: none; position: absolute; bottom: 2px; right: 5px; }

.friendIntroduce-Main_Btn { border-radius: 5px; display: block; text-decoration: none; font-weight: bold; line-height: 1; width: 100%; text-align: center; border: 2px solid #1e7772; background: #1e7772; color: #ffffff; box-shadow: 0 3px 0 #15615C; transition: all 0.2s ease-in-out; width: 240px; height: 50px; font-size: 17px; line-height: 45px; font-weight: bold; border-radius: 6px; cursor: pointer; }

.friendIntroduce-Main_Btn:hover { box-shadow: 0 0 0 #15615C; transform: translateY(3px); }

.friendIntroduce-GrayBtn { color: #777777; background-color: #eeeeee; border: 1px #cccccc solid; border-radius: 4px; box-shadow: none; cursor: default; line-height: 2.7; }

.friendIntroduce-GrayBtn:hover { pointer-events: none; }

.PtInfo-Point { color: #da0201; font-size: 16px; font-weight: bold; font-family: "Karla", sans-serif; font-size: 150%; }

.ptItem-PtInfo-unit { color: #da0201; font-size: 16px; font-weight: bold; font-family: "Karla", sans-serif; }

.friend-QA { background: #ffffff; width: 1000px; margin: auto; }

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

.friend-QA_Title { background: #29b9b5; margin: 50px 0 0; padding: 15px 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_A { 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; }

.friendIntroduce-TextBold { font-weight: bold; }

.friendIntroduce-Center { margin: 0 auto; display: block; }

.clearfix::after { content: ""; display: block; clear: both; }

.friendIntroduce-DisplayNone { display: none; }

.friendIntroduce-Remaining_Text { text-align: center; padding: 20px 10px; font-size: 17px; }
.friendIntroduce-Remaining_Text a { color: #0063dc; text-decoration: none; }
.friendIntroduce-Remaining_Text a:visited { color: #0063dc; }
.friendIntroduce-Remaining_Text a:hover { color: #ff0084; }

.friendIntroduce-Remaining_Img { margin: 0 auto 20px; display: block; }

.friendIntroduce-Notes { margin-right: auto; margin-left: auto; width: 1000px; background: #ffffff; border-radius: 5px; border: 1px #cccccc solid; padding: 35px 20px 20px; text-align: left; margin: 60px auto; }
.friendIntroduce-Notes:after { display: table; clear: both; content: " "; }

.friendIntroduce-Notes_Title { letter-spacing: 1px; }
.friendIntroduce-Notes_Title:after { display: table; clear: both; content: " "; }
.friendIntroduce-Notes_Title:before { display: block; content: ""; width: 6px; height: 20px; background: #fea000; border-radius: 5px; margin: -5px 10px 0 0; float: left; }

.friendIntroduce-Notes_Box { font-size: 15px; line-height: 1.8; margin-bottom: 0.5em; margin: 0; padding: 0 20px 30px; }
.friendIntroduce-Notes_Box a { color: #0063dc; text-decoration: none; }
.friendIntroduce-Notes_Box a:visited { color: #0063dc; }
.friendIntroduce-Notes_Box a:hover { color: #ff0084; }

.friendIntroduce-Notes_Box-listStyleNone { list-style: none; margin-left: -1em; }

.h4_rank.svg { width: 100%; margin: 0 auto 20px; border: 1px solid #808080; border-collapse: collapse; }

.friendIntroduce-Notes_Table { width: 100%; margin-top: 30px; border-collapse: collapse; }

.friendIntroduce-Notes_Td { border: 1px solid #808080; border-collapse: collapse; padding: 10px; }

.friendIntroduce-Notes_TdTitle { border: 1px solid #808080; border-collapse: collapse; padding: 10px; text-align: center; }

.friendIntroduce-Notes_Th { border: 1px solid #808080; border-collapse: collapse; padding: 10px; font-weight: bold; text-align: center; }

.friendIntroduce-Notes_TableInner { margin: 0; padding: 0 0 0 1.5em; }

.friendsAcquire-Summary_Campaign { margin-bottom: 50px; }

.friendIntroduce-Title_MarginTop { margin-top: 30px; }

.friendIntroduce-Text_CenterLarge { margin: 0; font-size: 22px; color: #1e7772; line-height: 1.8; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; }

.friendIntroduce-Point { color: #da0201; font-weight: bold; font-family: "Karla", sans-serif; margin: 0 0.5rem; font-size: 1.2em; }

.friendIntroduce-Delete { margin: 0 0.5rem; text-decoration: line-through; }

.friendIntroduce-TextRed { color: #da0201; }

.friendIntroduce-Benefit_Title { width: 900px; padding: 10px; display: block; font-size: 17pt; font-weight: bold; border-radius: 20px; color: #ffffff; background: #1e7772; margin: 0 auto 15px; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; }

.friendIntroduce-Benefit_Box { width: 900px; border: 2px solid #1e7772; border-radius: 5px; box-sizing: border-box; padding: 20px 10px; margin: 20px auto; text-align: center; background: #ffffff; }
.friendIntroduce-Benefit_Box:after { display: table; clear: both; content: " "; }

.friendIntroduce-BenefitInner_Left { float: left; width: 400px; padding: 10px; margin: 25px 10px 0; }

.waraufriends-Benefit_LabelBox { border-bottom: 1px solid #1e7772; padding-bottom: 10px; display: flex; align-items: center; }
.waraufriends-Benefit_LabelBox:after { display: table; clear: both; content: " "; }

.friendIntroduce-Benefit_Label { color: #ffffff; font-size: 16px; font-weight: bold; font-family: "M PLUS Rounded 1c", sans-serif; line-height: 200%; letter-spacing: 0.1em; background: #1e7772; border-radius: 30px; box-sizing: border-box; width: 110px; height: 45px; padding: 5px; margin: 15px auto; position: relative; float: left; }

.friendIntroduce-Benefit_Chara { position: absolute; left: 15px; bottom: 45px; }

.friendIntroduce-Benefit_MainText { font-size: 22px; font-weight: bold; font-family: "M PLUS Rounded 1c", sans-serif; color: #1e7772; width: 260px; margin-left: 10px; text-align: left; line-height: 130%; float: left; }

.friendIntroduce-Benefit_SubText { ont-size: 15px; color: #525252; text-align: left; margin-top: 25px; line-height: 180%; }

.friendIntroduce-Benefit_Notes { font-weight: bold; color: #da0201; }

.friendIntroduce-Benefit_FriendsBox { height: auto; margin: 20px auto 30px; padding: 20px 0 1px; color: #808080; border-radius: 8px; position: static; background: #e0f3f2 url(/images/friend/front2021/bg_star.png); text-align: center; }

.friendIntroduce-Info { display: none; width: 100%; text-align: center; border: 1px solid #cccccc; border-radius: 5px; margin: 10px auto 10px; }

.friendIntroduce-Info_Detail { width: 100%; height: auto; border-top: 1px solid #cccccc; margin: 0; }
.friendIntroduce-Info_Detail:after { display: table; clear: both; content: " "; }

.friendIntroduce-Info_Detail:first-child { border: none; }

.friendIntroduce-Info_Detail dt { line-height: 25px; color: #525252; font-weight: bold; font-size: 17px; text-align: left; padding: 10px; }

.friendIntroduce-Info_Detail dt:hover { cursor: pointer; }

.friendIntroduce-Info_Detail dt img.inverted { transform: scaleY(-1); -webkit-transform: scaleY(-1); }

.friendIntroduce-Info_Detail dd { display: none; width: 100%; margin-left: 0; padding: 10px; text-align: left; font-size: 15px; line-height: 25px; }

.friendIntroduce-Info_Detail_Warning { width: 100%; height: auto; margin: 10px auto 10px; border: 1px solid #cccccc; border-radius: 5px; }
.friendIntroduce-Info_Detail_Warning:after { display: table; clear: both; content: " "; }
.friendIntroduce-Info_Detail_Warning dt { line-height: 25px; color: #525252; font-weight: bold; font-size: 17px; text-align: left; padding: 10px; }
.friendIntroduce-Info_Detail_Warning dt:hover { cursor: pointer; }
.friendIntroduce-Info_Detail_Warning dt img.inverted { transform: scaleY(-1); -webkit-transform: scaleY(-1); }
.friendIntroduce-Info_Detail_Warning dd { display: none; width: 100%; margin-left: 0; padding: 10px; text-align: left; }

.friendIntroduce-Info_Lavel { margin: 0 10px 0 0; }

.friendIntroduce-Info_DetailBtn-down { float: right; margin-right: 3px; }

.friendIntroduce-Info_DetailBtn-up { float: right; margin-right: 3px; }

.friendIntroduce-InfoLight { width: 100%; text-align: center; }

.friendIntroduce-InfoLight_Detail { width: 100%; height: auto; margin: 10px auto 10px; border: 1px solid #cccccc; border-radius: 5px; }
.friendIntroduce-InfoLight_Detail:after { display: table; clear: both; content: " "; }
.friendIntroduce-InfoLight_Detail dt { line-height: 25px; color: #525252; font-weight: bold; font-size: 17px; text-align: left; padding: 10px; }
.friendIntroduce-InfoLight_Detail dt:hover { cursor: pointer; }
.friendIntroduce-InfoLight_Detail dt img.inverted { transform: scaleY(-1); -webkit-transform: scaleY(-1); }
.friendIntroduce-InfoLight_Detail dd { display: none; width: 100%; margin-left: 0; padding: 10px; text-align: left; }

.friendIntroduce-InfoLight_Detail a { color: #0063dc; text-decoration: none; }