@charset "UTF-8";
body{
	--spacing:2em;
	background:var(--body-background-color,#fff);
}

#header{}
#header>.inner{width:100%;max-width:var(--MaxContentWidth);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;}

#content{display:flex;flex-direction:column;justify-content:center;}
#content>.inner{width:100%;max-width:var(--MaxContentWidth);padding-inline:var(--spacing);margin-inline:auto;box-sizing:border-box;}

#footer{}
#footer>.inner{width:100%;max-width:var(--MaxContentWidth);padding:var(--spacing);margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--spacing);}



#header .logo{display:block;width:9.5em;height:2em;}
#header .logo>img{display:block;width:100%;height:100%;filter:invert(var(--brightness-filter,0));opacity:.75;}
#header .settings{}

#footer>.inner{display:grid;grid:"copyright links settings"/auto 1fr auto;align-items:center;gap:var(--spacing);}
#footer .copyright{grid-area:copyright;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#footer .links{grid-area:links;display:flex;flex-wrap:wrap;align-items:center;gap:1em;}
#footer .links a:not(:hover){color:inherit;}
#footer .settings{grid-area:settings;}
#footer .settings .cpt-select>span[icon]::before{color:var(--body-text-color-a50,rgba(0 0 0/50%));}

#content>.inner{display:grid;grid:"art sso_box" / 1fr clamp(35em,50%,40em);gap:var(--spacing);align-items:center;}
#content .art{grid-area:art;display:flex;justify-content:center;align-items:center;}
#content .art>img{display:block;--size:min(40em);max-width:100%;width:var(--size);height:var(--size);aspect-ratio:1/1;object-fit:contain;position:relative;z-index:1;}


#sso_box{grid-area:sso_box;display:flex;flex-direction:column;gap:var(--spacing);padding:calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);box-sizing:border-box;background-color:var(--background-color-L3,#fff);border-radius:1em;box-shadow:rgba(0 0 0/5%) 0 1em 4em;}
#sso_box:only-child{grid-column:1/-1;width:100%;max-width:50em;margin-inline:auto;}
#sso_box h2{font-size:1.5em;font-weight:var(--CPT-FW-EB);}


#sso_tab{display:flex;align-items:center;gap:calc(var(--spacing) * 1.5);width:100%;max-width:30em;margin-inline:auto;margin-block-end:1em;}
#sso_tab .tab{display:flex;align-items:center;height:var(--CPT-US);position:relative;color:inherit;}
#sso_tab .tab::after{content:'';display:block;position:absolute;inset-inline:0;inset-block-start:100%;z-index:1;height:.25em;pointer-events:none;transition:background-color 300ms;}
#sso_tab .tab>span{display:block;font-size:var(--SiteFS-L);font-weight:var(--CPT-FW-EB);}
#sso_tab .tab:not(.on){cursor:pointer;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#sso_tab .tab.on{}
#sso_tab .tab.on>span{}
#sso_tab .tab.on::after{background-color:var(--SiteTHM);}

#sso_box .cpt-text>span[icon],
#sso_box .cpt-text>span[icon-only],
#sso_box .cpt-select>span[icon],
#sso_box .cpt-select>span[icon-only]{color:var(--body-text-color-a50,rgba(0 0 0/50%));}

#sso_box .tips_wrp{display: flex;flex-direction:column;gap:.5em;}
#sso_box .tips_wrp:not(:has(.tips,.show)),
#sso_box .tips_wrp>*:not(.tips,.show){display:none;}
#sso_box .tips_wrp .tips{color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#sso_box .tips_wrp .alert{color:var(--text-color-alert);font-weight:var(--CPT-FW-B);}
#sso_box .tips_wrp .success{color:var(--text-color-complete);font-weight:var(--CPT-FW-B);}

#sso_sns{display:flex;flex-direction:column;gap:.5em;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;}
#sso_sns h3{font-size:1em;}
#sso_sns .sns_list{display:flex;align-items:center;flex-wrap:wrap;--CPT-US:3em;}
#sso_sns .sns_list .btw{--shadow-color:unset;}
#sso_sns .sns_list .btw:not(:hover){--color:var(--body-text-color-a50,rgba(0 0 0/50%));--background-color:transparent;--border-color:transparent;}
#sso_sns .sns_list .more{display:none;flex-direction:row-reverse;align-items:center;gap:.5em;height:var(--CPT-US);padding-inline:1em;cursor:pointer;color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#sso_sns .sns_list .more::before{content:attr(icon);font-size:1.5em;}

#sso_sns .sns_list:not(.expand) a:nth-of-type(6)~.more{display:flex;}
#sso_sns .sns_list:not(.expand) a:nth-of-type(5)~a{display:none;}
#sso_sns .sns_list.expand .more{display:none;}


/* login */
#login_wrp{display:flex;flex-direction:column;gap:var(--spacing);width:100%;max-width:30em;margin-inline:auto;}

#login_form{display:flex;flex-direction:column;gap:1em;--CPT-US:4em;}
#login_form .cpt-combine .btw:last-child{--CPT-US:3em;margin-inline-end:.5em;}
#login_form .pw_reset{}
#login_form .forget{font-weight:var(--CPT-FW-B);}
#login_form .send_code_combine{display:flex;flex-direction:column;gap:1em;}
#login_form .send_code_combine .cpt-radio{--font-weight:var(--CPT-FW);}
#login_form .send_code_combine .cpt-radio b{font-weight:var(--CPT-FW-EB);}
#login_form .send_code_combine .send_code{align-self:start;--CPT-US:3em;}


#login_seagm{display:flex;flex-direction:column;gap:1em;align-items:start;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0 inset;}
#login_seagm h3{font-size:1em;}
#login_seagm .seagm_login{--icon-size:2em;--shadow-color:transparent;}
#login_seagm .seagm_login:not(:hover){--color:currentColor;--background-color:transparent;--border-color:var(--body-text-color-a10,rgba(0 0 0/10%));}


/* register */
#reg_wrp{display:flex;flex-direction:column;gap:var(--spacing);width:100%;max-width:30em;margin-inline:auto;}

#reg_info{display:flex;flex-direction:column;gap:1em;padding-block-end:var(--spacing);box-shadow:var(--body-text-color-a5,rgba(0 0 0/5%)) 0 1px 0;}
#reg_info .user_email_address{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;}
#reg_info .user_email_address::before{content:attr(icon);display:block;font-size:2em;align-self:start;}
#reg_info .user_email_address>span{font-size:var(--SiteFS-L);font-weight:var(--CPT-FW-B);}
#reg_info .user_sns_info{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1em;padding:var(--spacing);border-radius:var(--CPT-BDR);color:var(--color,inherit);background:var(--background-color,var(--background-color-L3,rgba(0 0 0/5%)));box-shadow:var(--border-color,var(--body-text-color-a10,rgba(0 0 0/10%))) 0 0 0 var(--CPT-BDW) inset;}
#reg_info .user_sns_info .avatar{--avatar-size:3em;width:var(--avatar-size);height:var(--avatar-size);border-radius:100%;overflow:hidden;box-shadow:var(--border-color,var(--body-text-color-a10,rgba(0 0 0/10%))) 0 0 0 var(--CPT-BDW);}
#reg_info .user_sns_info::before{order:9;font-size:2em;}
#reg_info .user_sns_info .avatar>img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover;}
#reg_info .user_sns_info .info{overflow:hidden;}
#reg_info .user_sns_info .name{font-weight:var(--CPT-FW-B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#reg_info .user_sns_info .mail{opacity:.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


#reg_form{display:flex;flex-direction:column;gap:1em;--CPT-US:4em;}
#reg_form h3{font-size:1em;font-weight:var(--CPT-FW-B);}
#reg_form .hr{margin-block:1em;height:1px;background-color:var(--body-text-color-a5,rgba(0 0 0/5%));}
#reg_form .cpt-combine .btw:last-child{--CPT-US:3em;margin-inline-end:.5em;}

#reg_form .send_code_combine{display:flex;flex-direction:column;gap:1em;}
#reg_form .send_code_combine .send_code{align-self:start;--CPT-US:3em;}

#reg_form .password_visibility{}
#reg_form .password_visibility>span::before{content:var(--i,attr(icon-only));}
#reg_form .password_visibility:not(.visible){--color:var(--body-text-color-a50,rgba(0 0 0/50%));}
#reg_form .password_visibility.visible{--i:'visibility_off';}

#reg_form .password_validate_tips{display:flex;flex-direction:column;gap:.5em;}
#reg_form .password_validate_tips .tips{}
#reg_form .password_validate_tips .tips[icon]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;color:var(--color,inherit);}
#reg_form .password_validate_tips .tips[icon]::before{content:var(--i,'check_circle_outline');display:block;font-size:1.5em;align-self:start;color:var(--color,var(--body-text-color-a50,rgba(0 0 0/50%)));}
#reg_form .password_validate_tips .success{--i:'check_circle';--color:var(--text-color-complete);font-weight:var(--CPT-FW-B);}
#reg_form .password_validate_tips .alert{--i:'cancel';--color:var(--text-color-alert);font-weight:var(--CPT-FW-B);}

#reset_wrp{display:flex;flex-direction:column;gap:var(--spacing);width:100%;max-width:30em;margin-inline:auto;}

@media only screen and (max-width:1000px){
	#content>.inner{grid:"sso_box";}
	#content .art{display:none;}

	#sso_box{width:100%;max-width:40em;margin-inline:auto;}

	#footer>.inner{width:100%;max-width:40em;grid:"settings" "links" "copyright";gap:1em;justify-items:start;}
}
@media only screen and (max-width:480px){
	body{background-color:revert;}

	#content{justify-content:unset;}
	#content>.inner{padding-inline:unset;}

	#sso_box{padding:var(--spacing);box-shadow:unset;}
	#sso_tab{gap:var(--spacing);}
}