@charset "utf-8";
@import url("https://use.typekit.net/xmb4cnz.css");
*, *::before, *::after {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, input, select, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, header, footer, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; vertical-align: baseline; border: 0;}
article, aside, hgroup, header, footer, figure, figcaption, nav, section,time, mark, canvas, video, audio, details, summary {display: block;}

html {
/* Prevent font scaling in landscape */
-webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
-moz-text-size-adjust: none; /*Firefox*/
-ms-text-size-adjust: none; /*Ie*/
-o-text-size-adjust: none; /*old versions of Opera*/
}

/* root */
:root {
--hard : 'hardcover-vf', sans-serif;
--pac : 'pacaembu', sans-serif;
--rbt : 'roboto', sans-serif;
--lig : "wght" 300;
--reg : "wght" 400;
--semi : "wght" 600;
--bold : "wght" 700;
--ext : "wght" 800;
}

html {width: 100%; height: 100%; font-size: 62.5%; scroll-behavior: smooth;}
body {width: 100%; height: 100%; font-size: 1.4rem; color: #000; font-weight: 400; line-height: 1; text-align: center; font-family: var(--pac), sans-serif; background:#000;}
menu, ol, ul, li {list-style: none; list-style-image: none; vertical-align: top;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
table {table-layout: fixed; word-break: break-all; white-space: pre-wrap; border-collapse: collapse; border-spacing: 0;}
table caption {display: none;}
ul {font-size: 0;}
li {font-size: 1.6rem; letter-spacing: 0;}
img {line-height: inherit; vertical-align: top; -ms-interpolation-mode: bicubic !important; max-width:100%;}
h1, h2, h3, h4, h5, h6 {color: #fff; font-weight: 700; font-family: var(--pac);}
a {color: #fff; font-weight: 400; text-decoration: none; font-family: var(--pac); display: inline-block; outline: none; cursor: pointer; transition:all ease-in-out 0.2s;}
a:focus {outline: none;}
button {font-family: var(--pac), sans-serif;}

.mobile {display:none;}
.inner {max-width:1324px; margin-left:auto; margin-right:auto; padding-left:3rem; padding-right:3rem; position:relative;}
.dst {display:table; width:100%; height:100%;}
.dstc {display:table-cell; vertical-align: middle;}
.obj {position:absolute;}

.cha {position:absolute;}
.cha01 {top: -84px; left: -610px; opacity:0;}
.cha02 {top: 270px; right: -642px; opacity:0;}
.animated .cha01 {animation: slide-in-tl 0.3s 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.animated .cha02 {animation: slide-in-br 0.3s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

.obj_leaf01 {bottom:1.5rem; left:4.2rem;}
.obj_leaf02 {bottom:1rem; right:5.6rem;}
.obj_leaf03 {bottom:-1.2rem; left:-3.6rem;}
.obj_leaf04 {bottom:-0.5rem; right:-5.5rem;}

.bg_leaf {bottom:0; max-height:125.8rem;}
.bg_leaf01 {left:0;}
.bg_leaf02 {right:0;}

.container {overflow:hidden; position:relative; background:#031d00;}

.btn {display:flex; width:120px; height:48px; position:relative; align-items:center; justify-content:center;}
.btn span {font-size:14px;}

.btn_gr {box-shadow:5px 2px 5px rgba(0, 0, 0, 0.5); cursor:pointer; border-radius:5px; padding-bottom:0.5rem; position:relative; display: flex; align-items: center; justify-content: center; width:132px; height:40px; background-repeat: no-repeat; background-position: 0 0; background-size:100% auto; transition:none; background-image:url('/images/common/event/2026/invite/btn.jpg');}
.btn_gr:before {border-radius:5px; content: ""; position: absolute; inset: 0; padding: 1px; background: linear-gradient(to bottom, #6eff4c, #00ff16); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.btn_gr span {color:#fff; text-transform: uppercase; font-size:16px; font-weight:700; letter-spacing:0.04em; text-shadow: 0 0 5px rgba(24, 47, 15, 0.5);}
.btn_gr:hover {background-position:0 100%;}
.btn_gr:hover span {text-shadow:none;}

.sub_tit {flex-direction: column; position: relative; z-index: 1; font-size:0; margin-bottom:3rem; background:url('/images/common/event/2026/invite/bg_sub_tit.png') center center no-repeat; padding:1rem 3rem; background-size:auto 100%; min-height:8rem; display:flex; align-items:center; justify-content:center;}
.sub_tit:before {content:''; display:block; position:absolute; left:50%; top:-10rem; margin-left:-63.1rem; width:126.2rem; height:18rem; background:url('/images/common/event/2026/invite/tit_vine.png') center center no-repeat; background-size:100% auto;}
.sub_tit span {display:block; font-family:var(--hard); letter-spacing:0.1em; color:#fff; filter:drop-shadow(1px -1px 0px rgba(253, 255, 232, 0.7)) drop-shadow(2px 5px 2px rgba(0, 0, 0 ,0.7)); font-variation-settings:var(--ext); text-transform:uppercase; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.sub_tit span.c01 {font-size:30px; background: linear-gradient(to bottom, #fff, #ffcd00);}
.sub_tit span.c02 {font-size:42px; background: linear-gradient(to bottom, #a5f74e, #fdd031);}
.sub_tit span.c03 {font-size:42px; background: linear-gradient(to bottom, #fdff61 40%, #ffcd00);}

.bg_tit {margin:0 auto 4rem; display:flex; align-items:center; justify-content: center; width:32rem; height:10.7rem; background:url('/images/common/event/2026/invite/bg_tit.png') 0 0 no-repeat; background-size:100% auto;}
.bg_tit span {font-family:var(--hard); font-size:36px; letter-spacing:0.04em; color:#fff; filter:drop-shadow(2px 5px 2px rgba(0, 0, 0 ,0.7)); font-variation-settings:var(--bold); text-transform:uppercase; background: linear-gradient(to bottom, #fff, #fdff61); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;}
.bg_tit02 span {background: linear-gradient(to bottom, #fff, #97f155);}

header {text-align:left; position:absolute; top:0; left:0; right:0; z-index: 20; padding:3.6rem 58px 0;}
header .bi img {max-width:160px;}
.user {z-index:2; top:2.4rem; position:absolute; border-radius:24px; background:url('/images/common/event/2026/invite/ptn.png') 0 0 repeat , #008711; left:50%; transform:translate(-50% , 0); display:flex; vertical-align:top; padding:0 2.4rem 0.4rem; width:27.6rem; height:48px; align-items:center; justify-content:center;}
.user:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; background:#000; border-radius:20px;}
.user span {font-size:18px; color:#fdff61; position:relative; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; max-width: 100%; white-space: nowrap; word-wrap: normal;}
header .btn {transition:none; font-size:0; color:transparent; position:fixed; top:2.4rem; right:30.8rem; width:48px; height:48px; background-repeat: no-repeat; background-position: 0 0; background-size:100% auto;}
header .btn_logout {background-image:url('/images/common/event/2026/invite/btn_logout.jpg');}
header .btn_login {background-image:url('/images/common/event/2026/invite/btn_login.jpg');}
header .btn:hover {background-position:0 100%;}

.section01 {position:relative; padding:12.8rem 0 10rem; background:url('/images/common/event/2026/invite/bg01.jpg') center 0 no-repeat;}
.section01 .title_wrap {z-index:1; display: inline-block; text-align:center; padding-bottom:15.3rem; position:relative;}
.section01 .title_wrap:before {transform-origin:top; z-index:1; content:''; display:block; position:absolute; top: -56.5%; left: -8.6%; width: 119.573%; height: 90.214%; background:url('/images/common/event/2026/invite/obj_vine.png') 0 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .title {z-index: -1; position: relative; display:inline-block; background:url('/images/common/event/2026/invite/bg_title.png') center 0 no-repeat; background-size:100% auto;}
.section01 .title_wrap .date {transform-origin:top; z-index:-1; position:relative; padding-top:8rem; align-items: center; justify-content: center; font-family:var(--hard); display: flex; width:61.3rem; height:15.4rem; background:url('/images/common/event/2026/invite/bg_date.png') center 0 no-repeat; background-size:100% auto; margin:-7.2rem auto 0;}
.section01 .title_wrap .date span {font-size:28px; letter-spacing:0.1em; color:#fff; filter:drop-shadow(2px 5px 2px rgba(0, 0, 0 ,0.7)); font-variation-settings:var(--bold); text-transform:uppercase; background: linear-gradient(to bottom, #fff, #fdff61); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.section01 .title_wrap .user {display:none;}
.animated .title_wrap:before {animation:fid 1s , sway 6s 1.5s infinite linear;}
.animated .title_wrap .td_wrap {animation:fid 1s; position:relative; z-index:-1;}
.animated .title_wrap .date {animation:sway 3s 1s infinite linear;}

.code_wrap {position:relative; padding-bottom:6rem; z-index:1;}
.code_wrap .sub_tit {flex-direction: row; gap:1.5rem;}
.code_wrap .my_code {position:relative; z-index:1; min-height:60px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; padding:0.5rem; border-radius:30px; background:url('/images/common/event/2026/invite/ptn.png') 0 0 repeat , #fdff61; padding:0.5rem 2.5rem 0.5rem 4rem;}
.code_wrap .my_code:before {z-index:-1; content:''; display:block; position:absolute; top:0.5rem; bottom:0.5rem; left:0.5rem; right:0.5rem; background:rgba(0, 0, 0, 0.89); border-radius:25px;}
.code_wrap .my_code .tit {font-size:16px; color:#fdff61; letter-spacing:0.1em; text-transform:uppercase; flex-shrink: 0; font-weight:600;}
.code_wrap .my_code .code {font-size:24px; position:relative; flex:1; font-weight:600; letter-spacing:0.1em; word-break: break-all; padding:0 2.4rem 0.5rem;}
.code_wrap .my_code .code span {background: linear-gradient(to bottom, #fdff61, #03d366); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.code_wrap .my_code .btn_copy {padding-left: 4px; flex-shrink: 0;}
.code_wrap .info {font-size:16px; color:#ffffff; margin-top:2rem; font-weight:200;}
.code_wrap .info span {color:#fdff61; padding-left:4rem; position:relative;}
.code_wrap .info span:before {content:''; display:block; position:absolute; top:-1px; left:0; width:3.1rem; height:2.7rem; background:url('/images/common/event/2026/invite/obj_flower.png') 0 0 no-repeat; background-size:100% auto;}

.reward_wrap {position:relative; z-index:1;}
.reward_wrap .bg_tit {margin-bottom:11rem;}
.reward_wrap .reward {position: relative; z-index: 1;}
.reward_wrap .reward .graph {height:3.6rem; width:100%; display:flex; flex-direction:column-reverse; align-items:flex-start; background:url('/images/common/event/2026/invite/bg_bar.png') 0 0 repeat-x; margin-bottom:1.6rem;}
.reward_wrap .reward .graph li {height:0.8rem; position:relative;}
.reward_wrap .reward .graph li span {display: block; position:absolute; left:0; height:100%; top:0; width:0; background:url('/images/common/event/2026/invite/grp_on.jpg') 0 bottom repeat-x;}
.reward_wrap .reward .graph li.clear:before {content:''; display:block; position:absolute; width:100%; height:3.6rem; background:url('/images/common/event/2026/invite/bg_bar_on.jpg') 0 bottom repeat-x;}
.reward_wrap .reward .graph li.clear span {width:100%; z-index:1;}
.reward_wrap .reward.animated .graph li.clear span {animation-name:graph_fill; animation-duration:0.2s; animation-timing-function:linear; animation-fill-mode:both;}
.reward_wrap .reward.animated .graph li.clear:before {animation:graph_bar 0.2s linear both;}
.reward_wrap .reward .graph .gr01 {width:calc(10% - 1.28rem);}
.reward_wrap .reward .graph .gr02 {width:calc(30% - 0.64rem);}
.reward_wrap .reward .graph .gr03 {width:50%;}
.reward_wrap .reward .graph .gr04 {width:calc(70% + 0.64rem);}
.reward_wrap .reward .graph .gr05 {height:0.4rem; width:100%;}
.reward_wrap .reward .graph .gr01.clear span {animation-delay:0s;}
.reward_wrap .reward .graph .gr02.clear span {animation-delay:0.2s;}
.reward_wrap .reward .graph .gr03.clear span {animation-delay:0.4s;}
.reward_wrap .reward .graph .gr04.clear span {animation-delay:0.6s;}
.reward_wrap .reward .graph .gr05.clear span {animation-delay:0.8s;}
.reward_wrap .reward .graph .gr01.clear:before {animation-delay:0s;}
.reward_wrap .reward .graph .gr02.clear:before {animation-delay:0.2s;}
.reward_wrap .reward .graph .gr03.clear:before {animation-delay:0.4s;}
.reward_wrap .reward .graph .gr04.clear:before {animation-delay:0.6s;}
.reward_wrap .reward .graph .gr05.clear:before {animation-delay:0.8s;}
.reward_wrap .reward .graph .gr01.clear:before {top:-2.8rem;}
.reward_wrap .reward .graph .gr02.clear:before {top:-2rem;}
.reward_wrap .reward .graph .gr03.clear:before {top:-1.2rem;}
.reward_wrap .reward .graph .gr04.clear:before {top:-0.4rem;}
.reward_wrap .reward .graph .gr05.clear:before {top:0;}
.reward_wrap .reward .item_list {margin-left:-3.2rem; display: flex; align-items: stretch; justify-content: flex-start;}
.reward_wrap .reward .item_list li {padding-left:3.2rem; display:inline-block; vertical-align:top; width:20%; position:relative;}
.reward_wrap .reward .con {flex-direction: column; height:100%; position:relative; display:flex; background:url('/images/common/event/2026/invite/bg_reward.jpg') 0 0 repeat; background-size:22.8rem auto; border-radius:3rem;}
.reward_wrap .reward .con:before, .reward_wrap .reward .con:after {z-index:1; content:''; display:block; position:absolute; left:50%; transform:translate(-50% , 0);}
.reward_wrap .reward .con:before {width:1px; height:5.6rem; background:#063a1c; top:-5.6rem;}
.reward_wrap .reward .con:after {top:-12rem; width:5.6rem; height:6.4rem; background-repeat: no-repeat; background-position: 0 0; background-size:100% auto; background-image:url('/images/common/event/2026/invite/prg_check.png');}
.reward_wrap .reward .complete {flex-shrink:0; padding-bottom:0.5rem; z-index:1; position:relative; flex-direction:column; text-shadow:0 0 5px rgba(24, 47, 15, 0.5) , 5px 2px 3px rgba(0, 0, 0, 0.5); font-size:15px; color:#ffffff; text-transform:uppercase; font-weight:600; height:48px; border-radius: 3rem 3rem 0 0; background:#393939; line-height:1.2; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.reward_wrap .reward .complete:before {z-index:-1; mix-blend-mode: luminosity; content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; border-radius:3rem 3rem 0 0; background:url('/images/common/event/2026/invite/bg_ms_t.jpg') 0 0 repeat; opacity:0.4;}
.reward_wrap .reward .complete span {color:#fdff61;}
.reward_wrap .reward .item_wrap {flex:1; padding:1.2rem; display:flex; flex-direction:column;}
.reward_wrap .reward .item {position:relative; margin-top:2rem; background:#fff; border-radius:2rem; border:1px solid #89dc5c; flex:1; display: flex; flex-direction: column;}
.reward_wrap .reward .item:first-child {margin-top:0 !important;}
.reward_wrap .reward .item .img {height:10rem; display:flex; align-items: center; justify-content: center;}
.reward_wrap .reward .item .img > img {max-height:100%;}
.reward_wrap .reward .name {padding:0 1.2rem; word-break: break-word; flex: 1; overflow:hidden; position:relative; border-radius:0 0 2rem 2rem; font-size:14px; line-height:1.1; color:#0b3a10; font-weight:600; justify-content: center; align-items: center; display:flex; min-height:40px; background:url('/images/common/event/2026/invite/ptn03.jpg') 0 0 repeat;}
.reward_wrap .reward .item .day {position:absolute; top:-4px; right:-4px; background:#ff9a17; padding:0 3px 3px; min-width:24px; border-radius:5px 5px 5px 0; height:25px; text-align:center; display:flex; align-items:center; justify-content:center; font-size:12px; color:#ffffff; text-transform:uppercase;}
.reward_wrap .reward .item .day.txt {background:#ff5917; padding:0 5px 3px; text-transform: none;}
.reward_wrap .reward .in_three .item {margin-top:0.8rem;}
.reward_wrap .reward .in_three .item .img {height:7.6rem;}
.reward_wrap .reward .in_three .name {min-height:20px;}
.reward_wrap .reward.animated .item_list li.clear .complete {background:#89dc5c;}
.reward_wrap .reward.animated .item_list li.clear .complete:before {opacity:0.75;}
.reward_wrap .reward.animated .item_list li.clear .con:before {background: #66ff88;}
.reward_wrap .reward .item_list li.clear .con:after {background-position: 0 100%;}
.reward_wrap .reward.animated .item_list li.clear .con:after {animation:graph_check 0.2s step-end both;}
.reward_wrap .reward.animated .item_list li.clear:nth-child(1) .con:after {animation-delay:0s;}
.reward_wrap .reward.animated .item_list li.clear:nth-child(2) .con:after {animation-delay:0.2s;}
.reward_wrap .reward.animated .item_list li.clear:nth-child(3) .con:after {animation-delay:0.4s;}
.reward_wrap .reward.animated .item_list li.clear:nth-child(4) .con:after {animation-delay:0.6s;}
.reward_wrap .reward.animated .item_list li.clear:nth-child(5) .con:after {animation-delay:0.8s;}
.reward_wrap .reward .item_list li .complete {transition:background 0.2s linear, color 0.2s linear;}
.reward_wrap .reward .item_list li .complete span {transition:color 0.2s linear;}
.reward_wrap .reward .item_list li .complete:before {transition:opacity 0.2s linear;}
.reward_wrap .reward .item_list li .con:before {transition:background 0.2s linear;}
.reward_wrap .reward .item_list li:nth-child(1) .complete, .reward_wrap .reward .item_list li:nth-child(1) .complete span, .reward_wrap .reward .item_list li:nth-child(1) .complete:before, .reward_wrap .reward .item_list li:nth-child(1) .con:before {transition-delay:0s;}
.reward_wrap .reward .item_list li:nth-child(2) .complete, .reward_wrap .reward .item_list li:nth-child(2) .complete span, .reward_wrap .reward .item_list li:nth-child(2) .complete:before, .reward_wrap .reward .item_list li:nth-child(2) .con:before {transition-delay:0.2s;}
.reward_wrap .reward .item_list li:nth-child(3) .complete, .reward_wrap .reward .item_list li:nth-child(3) .complete span, .reward_wrap .reward .item_list li:nth-child(3) .complete:before, .reward_wrap .reward .item_list li:nth-child(3) .con:before {transition-delay:0.4s;}
.reward_wrap .reward .item_list li:nth-child(4) .complete, .reward_wrap .reward .item_list li:nth-child(4) .complete span, .reward_wrap .reward .item_list li:nth-child(4) .complete:before, .reward_wrap .reward .item_list li:nth-child(4) .con:before {transition-delay:0.6s;}
.reward_wrap .reward .item_list li:nth-child(5) .complete, .reward_wrap .reward .item_list li:nth-child(5) .complete span, .reward_wrap .reward .item_list li:nth-child(5) .complete:before, .reward_wrap .reward .item_list li:nth-child(5) .con:before {transition-delay:0.8s;}

.section02 {position:relative; padding-bottom:10rem; background:url('/images/common/event/2026/invite/bg02.jpg') center bottom no-repeat;}

.mission_wrap {position:relative; padding:7.2rem 4.8rem 6rem; border:0.4rem solid #226c31; background:linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(34, 108, 49, 0.3)), #031600; border-radius:3rem; box-shadow:5px 3px 5px rgba(0, 0, 0, 0.4), inset 0 0 1.8rem rgba(0, 0, 0, 0.2);}
.mission_wrap:before, .mission_wrap:after {content:''; display:block; position:absolute;}
.mission_wrap:before {top: -3.6rem; left: -3.2rem; width:29.6rem; height:28.5rem; background:url('/images/common/event/2026/invite/obj_ms_l.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap:after {top:-3.6rem; right:-3.6rem; width:31.1rem; height:28.5rem; background:url('/images/common/event/2026/invite/obj_ms_r.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list {display: flex; flex-wrap: wrap; gap:2.8rem; justify-content: center;}
.mission_wrap .list > li {flex: 1 1 30%; margin-bottom:1.2rem; display:flex; flex-direction:column;}
.mission_wrap .list .num {z-index: 3; position:relative; font-family:var(--hard); font-size:24px; color:#fdff61; letter-spacing:0.1em; font-variation-settings: var(--bold); text-transform:uppercase; text-shadow: 0 1px 0 #fff;}
.mission_wrap .list .num span {color:#fff;}
.mission_wrap .list .con {flex:1; justify-content: center; align-items: center; display:flex; flex-direction: column; margin-top:1rem; padding:1.6rem; border-radius:3rem; background:url('/images/common/event/2026/invite/n_ptn03.jpg') 0 0 repeat; width:100%; position: relative; font-size:20px; min-height:26.8rem; position:relative;}
.mission_wrap .list .con:before, .mission_wrap .list .con:after {content:''; display:block; position:absolute;}
.mission_wrap .list .con:before {border-radius:3rem; top:0.4rem; bottom:0.4rem; left:0.4rem; right:0.4rem; box-shadow:inset 0 0 0 0.4rem #fff;}
.mission_wrap .list .con:after {border-radius: 2rem; inset: 1.2rem; padding: 0.4rem; background:url('/images/common/event/2026/invite/bg_ms_t.jpg') 0 0 repeat; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.mission_wrap .list .mission {text-transform: uppercase; padding: 3rem; font-size:20px; font-weight:700; color:#000000; letter-spacing:0.02em; line-height:1.4; text-shadow:0 0.3rem 0 #fff;}
.mission_wrap .list .mission > span {color:#e20000;}
.mission_wrap .list > li.clear .mission:before {content:''; z-index:4; display:block; position:absolute; top:1.2rem; bottom:1.2rem; left:1.2rem; right:1.2rem; border-radius:3rem; background:url('/images/common/event/2026/invite/img_clear.png') center center no-repeat, rgba(0, 0, 0 ,0.5); background-size:18.4rem auto;}
.mission_wrap .count {position: relative; z-index: 1; font-size:0; margin-top:2.4rem;}
.mission_wrap .count li {padding-bottom:2px; font-size:16px; font-weight:400; text-shadow:none; color:#377b14; border:1px solid #7ebf5b; position:relative; display:inline-flex; align-items:center; justify-content:center; vertical-align:top; width:32px; height:32px; margin:2px; border-radius:50%; background:rgba(20, 47, 15, 0.2);}
.mission_wrap .count li.clear:before {border-radius:50%; width:36px; box-shadow:0 0 5px #5eff34; height:36px; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); background:url('/images/common/event/2026/invite/clear_on.png') 0 0 no-repeat; background-size:100% auto;}
.mission_wrap .list .state {border:1px solid #142f0f; gap:1rem; border-radius:20px; background:#142f0f; font-size:20px; color:#c0ff9e; font-weight:700; letter-spacing:0.1em; position: relative; z-index: 1; min-width:16rem; padding:0 2.4rem 0.4rem; margin:-1.5rem auto 3rem; display:flex; height:40px; align-items:center; justify-content:center;}
.mission_wrap .list .state font {color:#fdff61;}
.mission_wrap .list .txt {z-index:1; line-height:1.4; border-radius:0 0 1.5rem 1.5rem; font-size:14px; font-family:var(--rbt); color:#c0ff9e; position:absolute; bottom:1.6rem; left:1.6rem; right:1.6rem; justify-content: center; align-items: center; display:flex; height:48px; padding: 0 3rem; background:#498017;}
.mission_wrap .list .txt span {color:#fdff61;}
.mission_wrap .info_wrap {margin-top:2.4rem; text-align:center;}
.mission_wrap .info_wrap ul {display:inline-block;}
.mission_wrap .info_wrap li {position:relative; text-align:left; font-size:14px; color:#f0ffdf; letter-spacing:0.02em; line-height:2.1; font-weight:200;}
.mission_wrap .info_wrap li span {color:#fdff61;}
.mission_wrap .info_wrap li:last-child {margin-bottom:0;}

.mission_wrap.type01 .list > li {flex:none; width:calc((100% - 5.6rem) / 3);}
.mission_wrap.type01 .list > li.ms2 .con, .mission_wrap.type01 .list > li.ms5 .con {padding-bottom:64px;}
.mission_wrap.type01 .list > li.ms2 .mission:after {z-index: 2; content:''; display: block; position:absolute; width: 11.6rem; height: 14.7rem; left: -4%; top: -34%; background:url('/images/common/event/2026/invite/obj_leaf01.png') 0 0 no-repeat; background-size:100% auto;}

.binding {border-radius:3rem; padding:0 5rem 5rem; position:relative; margin-top:7rem; background:rgba(0, 0, 0, 0.5); z-index:1;}
.binding:after {content:''; display:block; position:absolute; border-radius: 3rem; inset:0; padding: 0.4rem; background:url('/images/common/event/2026/invite/ptn.png') 0 0 repeat , #fdff61; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.binding .desc:before, .binding .desc:after {top:-3.1rem; content:''; display:inline-block; position:absolute; width:62.3rem; height:12rem; background-repeat:no-repeat; background-position:0 0; background-size:100% auto;}
.binding .desc:before {background-image:url('/images/common/event/2026/invite/obj_bind_l.png'); left:-1.8rem;}
.binding .desc:after {background-image:url('/images/common/event/2026/invite/obj_bind_r.png'); right:0;}
.binding .desc > .tit {position: relative; z-index: 1; font-size:34px; font-family:var(--hard); letter-spacing:0.04em; text-transform:uppercase; font-variation-settings:var(--ext); letter-spacing:0.04em; padding:4rem 0 3.6rem;}
.binding .desc > .tit span {filter: drop-shadow(2px 5px 2px rgba(0, 0, 0, 0.7)); background: linear-gradient(to bottom, #97f155, #fdff61); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.binding .list {position:relative; z-index:1; font-size:0; display: flex; flex-wrap: wrap; gap:2.8rem;}
.binding .list > li {flex: 1 1 20%;}
.binding .list .con {padding:0 1.6rem 1.6rem; height:100%; position:relative; background:#fff; border-radius:3rem; display:flex; flex-direction:column;}
.binding .list .con:after {content:''; display:block; position:absolute; border-radius: 3rem; inset: 0.4rem; padding: 0.4rem; background:url('/images/common/event/2026/invite/bg_ms_t.jpg') 0 0 repeat; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.binding .list .con .person {text-transform:uppercase; font-size:20px; font-weight:700; color:#0b3a10; padding:1.8rem 0;}
.binding .item_wrap {font-size:0; display: flex; flex-wrap: wrap; gap:0.8rem; position:relative; z-index:1; flex:1;}
.binding .item_wrap .item {padding:2rem 8px 0; width:calc((100% - 0.8rem) / 2); vertical-align:top; display:flex; flex-direction:column; position:relative; border-radius:2rem; background:url('/images/common/event/2026/invite/o_ptn01.jpg') 0 0 repeat;}
.binding .item_wrap .item .img {display: flex; align-items: center; justify-content: center; background:#fff; border-radius:1rem; height:9.6rem;}
.binding .item_wrap .item .img > img {max-height:100%;}
.binding .item_wrap .item .name {justify-content: center; min-height:4.8rem; padding:1rem; align-items: center; display:flex; flex:1; font-size:14px; color:#0b3a10; font-weight:600; line-height:1.1;}
.binding .item_wrap .item .day {position:absolute; top:-4px; right:-4px; background:#ff9a17; padding:0 3px 3px; min-width:24px; border-radius:5px 5px 5px 0; height:25px; text-align:center; display:flex; align-items:center; justify-content:center; font-size:12px; color:#ffffff; text-transform:uppercase;}
.binding .item_wrap .item .day.txt {background:#ff5917; padding:0 5px 3px; text-transform: none;}

.reward_wrap.type02 {margin-bottom:7rem;}
.reward_wrap.type02 .reward .graph {height:2rem; background: url(/images/common/event/2026/invite/bg_bar_y.jpg) 0 0 repeat-x;}
.reward_wrap.type02 .reward .graph li span {background: url(/images/common/event/2026/invite/grp_on_y.jpg) 0 bottom repeat-x;}
.reward_wrap.type02 .reward .graph li.clear:before {height:2rem; background: url(/images/common/event/2026/invite/bg_bar_on_y.jpg) 0 bottom repeat-x;}
.reward_wrap.type02 .reward .graph .gr01 {width:calc(16.667% + 6.07rem);}
.reward_wrap.type02 .reward .graph .gr02 {width:50%;}
.reward_wrap.type02 .reward .graph .gr03 {height:0.4rem; width:100%;}
.reward_wrap.type02 .reward .graph .gr01.clear:before {top:-1.2rem;}
.reward_wrap.type02 .reward .graph .gr02.clear:before {top:-0.4rem;}
.reward_wrap.type02 .reward .graph .gr03.clear:before {top:0;}
.reward_wrap.type02 .reward .item_list {margin-left:-6.2rem; padding:0 12.2rem;}
.reward_wrap.type02 .reward .item_list li {padding-left:6.2rem; width:calc(100% / 3);}
.reward_wrap.type02 .reward .con:before {background:#4e4e21;}
.reward_wrap.type02 .reward .con:after {width:5.7rem; background-image: url(/images/common/event/2026/invite/prg_check_y.png);}
.reward_wrap.type02 .reward.animated .item_list li.clear .con:before {background:#fff662;}
.reward_wrap.type02 .reward .complete {height:36px; flex-direction: row; text-shadow: none; gap:0.5rem;}
.reward_wrap.type02 .reward .complete span {color:#ff7676;}
.reward_wrap.type02 .reward.animated .item_list li.clear .complete {background:#ffdb4a; color:#000;}
.reward_wrap.type02 .reward.animated .item_list li.clear .complete span {color:#e20000;}
.reward_wrap.type02 .reward.animated .item_list li.clear .complete:before {mix-blend-mode: screen;}
.reward_wrap.type02 .reward .item {border-color:#ffdb4a;}
.reward_wrap.type02 .reward .name {background: url(/images/common/event/2026/invite/o_ptn02.jpg) 0 0 repeat;}

.mission_wrap.type02 {border-color:#fdff61; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(229, 230, 121, 0.3)), #031600;}
.mission_wrap.type02 .list {gap:4.8rem;}
.mission_wrap.type02 .list > li {width: calc((100% - 4.8rem) / 2); flex: none;}
.mission_wrap.type02 .list .num {color:#97f155;}
.mission_wrap.type02 .list .con {padding-bottom:72px; min-height:28rem;}
.mission_wrap.type02 .list .con {margin-top:1.2rem; background: url(/images/common/event/2026/invite/o_ptn03.jpg) 0 0 repeat;}
.mission_wrap.type02 .list > li.ms1 {width: 100%;}
.mission_wrap.type02 .list > li.ms1 .con {padding:1.6rem 5.6rem 4.8rem;}
.mission_wrap.type02 .list > li.ms1 .mission {padding-top:2rem; padding-bottom:2rem;}
.mission_wrap.type02 .list .state {background:rgba(20, 47, 15, 0.8);}
.mission_wrap.type02 .list .txt {background:#42592d; color:#c0ff9e; height:56px; line-height:1.7;}
.mission_wrap.type02 .list .txt span {color:#fdff61;}
.mission_wrap.type02 .info_wrap {margin-top:4rem;}

.invite_area {position:relative; width:100%; z-index: 3;}
.invite_area .invite_input {margin-bottom:3.2rem; height:48px; position:relative; padding:0 160px; background:#000000; border-radius:10px;}
.invite_area .invite_input .btn_enter {position:absolute; right:5px; top:50%; transform:translate(0 , -50%); height:40px; width:132px;}
.invite_area .invite_input input {font-family: var(--pac), sans-serif; background: linear-gradient(to bottom, #fdff61, #03d366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing:0.1em; text-align:center; caret-color: #fff; width:100%; height:100%; font-size:14px;}
.invite_area .invite_input input::placeholder {background: linear-gradient(to bottom, #fdff61, #03d366); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.invite_area .invite_input input:focus {border:none; outline:none;}
/* .invite_area .invite_input input:-webkit-autofill, .invite_area .invite_input input:-webkit-autofill:hover, .invite_area .invite_input input:-webkit-autofill:focus, .invite_area .invite_input input:-webkit-autofill:active { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0px 1000px gba(135, 207, 255, 0.2) inset; transition: background-color 5000s ease-in-out 0s;} */
.invite_area .friend {font-size:0; margin-left:-1.2rem;}
.invite_area .friend li {display:inline-block; vertical-align:top; width:20%; padding-left:1.2rem;}
.invite_area .friend .box {position:relative; height:8.4rem; display:flex; align-items:center; justify-content:center; flex-direction:column; padding: 0 36px; background:#fff; border-radius:2rem; box-shadow:inset 0 0 0 0.4rem #3d9b5e;}
.invite_area .friend .name {font-size:14px; color:#006824; font-family:var(--rbt); overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; word-wrap: normal; white-space: nowrap; max-width:100%;}
.invite_area .friend .date {font-size:14px; margin-top:1.2rem; color:#3d9b5e; font-family:var(--rbt);}
.invite_area .friend .bin .box {box-shadow:none; background:rgba(51, 51, 51, 0.3);}
.invite_area .friend .bin .name {color:#fff;}
.invite_area .friend .bin .date {color:#fff;}
.invite_area .friend .complete .box {background:none; position:relative; z-index:1;}
.invite_area .friend .complete .box:before {content:''; display:block; position:absolute; top:0.4rem; bottom:0.4rem; right:0.4rem; left:0.4rem; box-shadow:inset 0 0 0 0.4rem #fff; border-radius:2rem; z-index:-1}
.invite_area .friend .complete .box:after {top:-4px; left:-4px; content:''; display:block; position:absolute; width:28px; height:28px; background:url('/images/common/event/2026/invite/icon_complete.png') 0 0 no-repeat; background-size:100% auto;}
.invite_area .friend .complete .name {color:#e20000;}
.invite_area .friend .complete .date {color:#000000;}

.mission_wrap .btn_facebook {letter-spacing:0.02em; transition:all ease-in-out 0.2s; background:#008a31; text-shadow:none; line-height:1.25; position:relative; margin:0 auto; padding-left:1rem; z-index:1; font-size:16px; color:#ffffff; display:block; width:34rem; height:6.8rem; border-radius:34px; display:flex; align-items: center; justify-content: center; flex-direction: column;}
.mission_wrap .btn_facebook:before {mix-blend-mode: overlay; content:''; display:block; position:absolute; top:0; left:0; bottom:0; right:0; border-radius:34px; background:url('/images/common/event/2026/invite/bg_ms_t.jpg') 0 0 repeat; opacity:0.5;}
.mission_wrap .btn_facebook:after {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:50%; left:0.8rem; width:5.2rem; height:5.2rem; margin-top:-2.6rem; background-color:rgba(0, 255, 12, 0.5); background-image:url('/images/common/event/2026/invite/icon_fb.png'); background-repeat: no-repeat; background-size: 100% auto; border-radius: 50%;}
.mission_wrap .btn_facebook:hover {background:#00b942; color:#f4f65e;}
.mission_wrap .btn_facebook:hover:after {background-color:rgba(122, 255, 128, 0.5);}

.section03 {text-align:left; padding:3.6rem 0; position:relative; background:url('/images/common/event/2026/invite/ptn_line.png') 0 0 repeat;}

.caution {padding:0 3.6rem;}
.caution li {font-size:14px; line-height:1.5; margin-bottom:2rem; padding-left:3.8rem; position:relative; color:#f0ffdf; letter-spacing:0.02em; font-weight:200;}
.caution li:before {top:-1px; left:0; content:''; display:block; position:absolute; width:2.6rem; height:2.6rem; background:url('/images/common/event/2026/invite/li_dot.png') 0 0 no-repeat; background-size:100% auto;}
.caution li span {color:#fdff61;}
.caution li:last-child {margin-bottom:0;}

footer {width: 100%; padding:9rem 2.4rem; z-index: 3; font-family:var(--rbt); font-size:12px; color:#ffffff; text-transform:uppercase;}
footer > img {margin-bottom: 2rem;}
footer .footer {position: relative; z-index: 2;}
footer .footer .age {margin-bottom:2rem;}
footer .footer .age img {max-width:6rem;}
footer .footer .cs > a {color:#fdff61; text-transform: uppercase; font-family:var(--rbt);}
footer .footer .cs > a:hover {text-decoration: underline;}
footer .footer .copy {margin-top: 0.8rem; font-size:11px;}

.toast_wrap {position:fixed; bottom:6rem; left:50%; transform:translate(-50% , 0); z-index:99; width:calc(100% - 5rem); max-width:100%; font-family:var(--rbt);}
.toast_msg {width:100%; display:none; text-align:center;}
.toast_msg span {line-height:1.2; display:inline-block; max-width:100%; word-break: break-word; overflow:hidden; position:relative; margin:1rem auto 0; padding:1.8rem 2.1rem 1.8rem 7.7rem; font-family:'Roboto'; color:#66ff88; font-size:16px; background:#001515; border-radius:1.2rem; box-shadow:0 2rem 4rem rgba(0, 0, 0, 0.5); border:0.2rem solid #66ff88; width:max-content; text-align:left;}
.toast_msg span:before {background-size:3rem auto; content:''; display:block; position:absolute; top:0; bottom:0; left:0; width:5.8rem; background-image:url('/images/common/event/2026/invite/toast_sc.png'); background-position:center center; background-repeat:no-repeat; background-color:rgba(102, 255, 136, 0.7); max-width: 100%;}
.toast_msg span font {color:#fff;}
.toast_msg.warning span {color:#ff9090; background:#221100; border-color:#e20000;}
.toast_msg.warning span:before {background-image:url('/images/common/event/2026/invite/toast_wn.png'); background-color:rgba(226, 0, 0, 0.7);}

@media screen and (max-width: 1800px) {
.cha01 {width:65%; top:0; left:-36%;}
.cha02 {width:60%; right:-30%; top:40%;}

.section01 .title_wrap {width:70%; padding-bottom: 8.6%;}
}

@media screen and (max-width: 1280px) {
.obj_leaf01 {left:7px; bottom:7px;}
.obj_leaf02 {right:7px; bottom:7px;}

.user {display:none; width:290px; max-width:100%; height:58px; border-radius:29px;}
.user:before {border-radius:25px;}

.section01 {padding-top:17%;}
.section01 .title_wrap .user {display:flex; top:0;}

.reward_wrap .reward .graph .gr01 {width:calc(10% - 0.64rem);}
.reward_wrap .reward .graph .gr02 {width:calc(30% - 0.32rem);}
.reward_wrap .reward .graph .gr04 {width:calc(70% + 0.32rem);}
.reward_wrap .reward .item_list {margin-left:-1.6rem;}
.reward_wrap .reward .item_list li {padding-left:1.6rem;}

.mission_wrap .count li {min-width:0;}

.mission_wrap.type01 .list > li {flex: 1 1 40%; width:auto;}

.binding .desc:before {left:-12rem;}
.binding .desc:after {right:-12rem;}

.reward_wrap.type02 .reward .item_list {padding:0 5rem;}

.mission_wrap.type02 .list {gap:2.8rem;}
.mission_wrap.type02 .list > li {width: calc((100% - 2.8rem) / 2);}
}

@media screen and (max-width: 1023px) {
.obj_leaf01, .obj_leaf02, .obj_leaf04, .obj_leaf03 {display:none;}

.cha01 {top: 41%; left: -15%; width:90%;}
.cha02 {top: 63%; right: -17%; width: 75%;}

.sub_tit span.c02 {font-size:40px;}
.sub_tit span.c03 {font-size:40px;}

header {text-align:center; padding-top:16px;}
header .btn {top:0; right:0; width:54px; height:54px;}

.section01 {background-size: 230% auto; padding-bottom:7.5rem;}
.section01 .title_wrap {width:auto; padding-bottom:46%;}

.code_wrap .sub_tit {flex-direction: column; margin-bottom:4.5rem; gap: 0;}

.reward_wrap .reward {padding:0 7.4rem;}
.reward_wrap .bg_tit {margin-bottom:4rem;}
.reward_wrap .reward .graph {height:auto; position:absolute; top: 12rem; bottom: 14rem; left:2rem; width:0.4rem; background:#063a1c; flex-direction: column;}
.reward_wrap .reward .graph li {height:24%; margin-bottom:1%;}
.reward_wrap .reward .graph li span {background:#66ff88;}
.reward_wrap .reward .graph li.clear:before {display:none;}
.reward_wrap .reward .graph .gr01 {width:0; height:0;}
.reward_wrap .reward .graph .gr02 {width:100%;}
.reward_wrap .reward .graph .gr03 {width:100%;}
.reward_wrap .reward .graph .gr04 {width:100%;}
.reward_wrap .reward .graph .gr05 {width:100%; height:25%;}
.reward_wrap .reward .item_list {display:block; margin-left:0;}
.reward_wrap .reward .item_list li {padding-left:0; width:100%; display:block; margin-bottom:2rem;}
.reward_wrap .reward .item_list li:last-child {margin-bottom:0;}
.reward_wrap .reward .con:before, .reward_wrap .reward .con:after {top:50%; transform: translate(0 , -50%);}
.reward_wrap .reward .con:before {width:8rem; height:0.4rem; left:-6rem; background:#063a1c; z-index:-1;}
.reward_wrap .reward .con:after {left:-8rem; width:6.4rem; height:5.6rem; background-image: url(/images/common/event/2026/invite/prg_check_m.png);}
.reward_wrap .reward .complete {flex-direction: row; gap:0.5rem;}
.reward_wrap .reward .item_wrap {flex-direction: row; gap:1.6rem; flex-wrap: wrap; justify-content: center; flex: none; padding:2rem;}
.reward_wrap .reward .item {flex:none; width:calc((100% - 1.6rem) / 2); margin-top:0;}
.reward_wrap .reward .name br {display:none;}
.reward_wrap .reward .in_three .item {margin-top:0;}
.reward_wrap .reward .in_three .name {min-height:40px;}

.section02 {padding-bottom:8rem;}

.mission_wrap .list {display:block;}
.mission_wrap .list > li {margin:0 0 4rem;}
.mission_wrap .info_wrap {padding:0;}

.binding .list {display:block;}
.binding .list > li {margin:0 0 3.6rem;}
.binding .list > li:last-child {margin:0;}
.binding .item_wrap {gap:1.6rem;}
.binding .item_wrap .item {width: calc((100% - 1.6rem) / 2); padding: 10px 10px 0;}
.binding .item_wrap .item .name {align-items: center;}
.binding .item_wrap .item .name br {display: none;}

.reward_wrap.type02 .reward .graph {background:#3e3f22; height:auto; top:15rem; bottom:15rem;}
.reward_wrap.type02 .reward .graph li span {background:#fff662;}
.reward_wrap.type02 .reward .graph .gr01 {width:0; height:0;}
.reward_wrap.type02 .reward .graph .gr02 {width:100%; height:50%;}
.reward_wrap.type02 .reward .graph .gr03 {width:100%; height:50%;}
.reward_wrap.type02 .reward .item_list {padding:0; margin-left:0;}
.reward_wrap.type02 .reward .item_list li {width:100%; padding-left:0;}
.reward_wrap.type02 .reward .con:before {width:8rem; height:0.4rem; left:-6rem; background:#3e3f22; z-index:-1;}
.reward_wrap.type02 .reward .con:after {background-image: url(/images/common/event/2026/invite/prg_check_y_m.png); width:6.4rem;}

.mission_wrap.type02 .list > li {width:auto;}
.mission_wrap.type02 .list > li.ms1 {width:auto;}
.mission_wrap.type02 .list > li.ms1 .con {padding-left:3.6rem; padding-right:3.6rem;}

.invite_area .invite_input {padding-left:1.5rem; text-align:left;}
.invite_area .invite_input input {text-align:left;}
.invite_area .friend {margin-left:0;}
.invite_area .friend li {display:block; width:auto; padding-left:0; margin-bottom:8px;}
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}
.mobile {display:block;}

.btn_gr {width:100px; height:36px;}
.btn_gr span {font-size:2.5rem;}

.sub_tit span.c01 {font-size:3.9rem;}
.sub_tit span.c02 {font-size:4.5rem;}
.sub_tit span.c03 {font-size:4.5rem;}
.sub_tit:before {width: 130%; height: 170%; margin-left: -65%; top: -93%;}

.bg_tit span {font-size:4rem;}

.user {height:40px; width:190px;}
.user span {font-size:2.7rem;}

.section01 {padding-top:25%;}
.section01 .title_wrap .date span {font-size:3.7rem;}
.section01 .title_wrap .user {top:-4%;}

.code_wrap .my_code .tit {font-size:2.5rem; line-height:1.2;}
.code_wrap .my_code .code {font-size:3.3rem;}
.code_wrap .info {font-size:2.5rem; line-height:1.6;}
.code_wrap .info span:before {top:3px;}

.reward_wrap .reward .complete {font-size:2.3rem; height:30px;}
.reward_wrap .reward .complete:before {background-size:22.4rem auto;}
.reward_wrap .reward .name {font-size:2.3rem; min-height:24px;}
.reward_wrap .reward .item .day {font-size:2rem; min-width:20px; height:20px; padding-bottom:1px;}
.reward_wrap .reward .item .day.txt {padding:0 3px 1px;}
.reward_wrap .reward .in_three .name {min-height:24px;}

.mission_wrap > .tit {font-size:3.7rem;}
.mission_wrap .list .num {font-size:3.3rem}
.mission_wrap .list .mission {font-size:2.9rem;}
.mission_wrap .count li {font-size:2.5rem; width:28px; height:28px;}
.mission_wrap .count li.clear:before {width:31px; height:31px;}
.mission_wrap .list .state {height:26px; font-size:2.9rem;}
.mission_wrap .list .txt {font-size:2.3rem;}
.mission_wrap .info_wrap li {font-size:2.3rem;}

.binding .desc:before {left:-30rem;}
.binding .desc:after {right:-25rem;}
.binding .desc > .tit {font-size:4.3rem;}
.binding .list .con .person {font-size:2.9rem;}
.binding .item_wrap .item .name {font-size:2.3rem;}
.binding .item_wrap .item .day {font-size:2rem; min-width:20px; height:20px; padding-bottom:1px;}
.binding .item_wrap .item .day.txt {padding:0 3px 1px;}

.reward_wrap.type02 .reward .graph {top:20rem; bottom:20rem;}
.reward_wrap.type02 .reward .in_three .item .img {height:10rem;}

.invite_area .invite_input {padding-right:112px;}
.invite_area .invite_input .btn_enter {width:100px; height:36px;}
.invite_area .invite_input input {font-size:2.3rem;}
.invite_area .friend .name {font-size:2.3rem;}
.invite_area .friend .date {font-size:2.3rem;}

.mission_wrap .btn_facebook {font-size:2.5rem; height: 10rem; width: 100%; max-width: 250px;}
.mission_wrap .btn_facebook:after {width:8rem; height:8rem; margin-top:-4rem;}

.caution li {font-size:2.3rem;}
.caution li:before {top:4px;}

footer > img {width:100px;}
footer .footer {position: relative; z-index: 2; font-size:2.1rem;}
footer .footer .copy {font-size:2rem;}

.toast_msg span {font-size:2.5rem; padding-top:1.6rem; padding-bottom:2rem;}
}

@keyframes graph_fill {
0% {width:0;}
100% {width:100%;}
}

@keyframes graph_bar {
0% {opacity:0;}
100% {opacity:1;}
}

@keyframes graph_check {
0% {background-position:0 0;}
100% {background-position:0 100%;}
}

@keyframes fid {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sway {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes slide-in-br {
  0% {
    -webkit-transform: translateY(1000px) translateX(1000px);
            transform: translateY(1000px) translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-tl {
  0% {
    -webkit-transform: translateY(-1000px) translateX(-1000px);
            transform: translateY(-1000px) translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
    opacity: 1;
  }
}