@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{background:#ffecce;font-family:'Noto Sans Japanese';
-webkit-tap-highlight-color:rgba(0,0,0,0);}
input,select,button,select{-webkit-appearance:none;appearance:none;
background-color:#fff;border:none;cursor:pointer;outline:none;
padding:0;color:#000;}
select{text-align-last:center;}
button{border:none;cursor:pointer;}
input:focus,select:focus,textarea:focus,button:focus{outline:none;}
.msg{width:96%;margin:12px auto;}
.msg > dd{padding:8px;margin:6px auto;border:1px solid #777;color:#333;
border-radius:12px;font-size:12px;line-height:22px;}
.msg > .success{border:1px solid #0af;color:#0af;}
.msg > .error{border:1px solid #d55;color:#d55;}
.passwordVsibleToggle{
color:#fff;background:#777;width:24px;height:24px;font-size:12px;line-height:24px;border-radius:12px;
position:absolute;top:9px;right:17px;border:none;}
.passwordVsibleToggle:before{font-family:'Material Icons';content:"visibility";}
.passwordVsibleToggle.visible{color:#777;background:#ddd;}
.passwordVsibleToggle.visible:before{content:"visibility_off";}

#wrap{position:relative;margin:auto;scroll-behavior:smooth;
user-select:none;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;
-webkit-user-select:none;-webkit-touch-callout:none;}
h1{color:#fff;background:#f90;
width:100%;height:50px;position:fixed;top:0px;left:0px;z-index:8;
font-size:20px;text-align:center;line-height:50px;
text-shadow:0px 0px 6px #f90;z-index:8;}
#oldBrowserVeil{width:100%;height:0%;z-index:999;color:#fff;background:#f90;
position:fixed;top:0px;left:0px;padding-bottom:1000%;}
#oldBrowserVeil:before{content:"now loading...";
display:block;width:90%;height:80px;padding-top:40%;text-align:center;
position:absolute;top:30px;left:0px;right:0px;margin:auto;}
#topAlertSec{position:fixed;top:0px;left:0px;right:0px;margin:auto;
border-radius:0px 0px 12px 12px;text-align:center;
width:160px;height:0px;font-size:12px;line-height:30px;overflow:hidden;opacity:0;
transition:all 200ms ease;color:#fff;background:rgba(0,0,0,0.8);z-index:9;}
#topAlertSec.active{height:30px;opacity:1;}
#header{width:100%;position:fixed;top:0px;left:0px;z-index:5;box-shadow:0px 0px 8px #fff;}

.innerContent{width:100%;height:100%;position:relative;overflow:auto;}
.innerContentHeader{position:sticky;z-index:3;width:96%;margin:50px auto auto;padding:50px 0px;
background:#ffe7bb;transition:600ms;border-radius:0px 0px 20px 20px;}
.innerContentHeaderConfirmWindow{
position:absolute;top:0px;left:0px;right:0px;margin:auto;text-align:center;font-size:12px;
width:90%;max-width:200px;height:0px;overflow:hidden;color:#fff;background:rgba(0,0,0,0.8);
padding:0px;transition:all 400ms ease;border-radius:0px 0px 30px 30px;line-height:20px;}
.innerContentHeaderConfirmWindow.active{height:130px;padding:30px 8px 0px 8px;}
.innerContentHeaderConfirmWindowSubmit{display:block;color:#777;background:#fff;font-size:12px;line-height:20px;
width:120px;border-radius:8px;margin:10px auto;text-decoration:none;transition:all 400ms ease;}
.innerContentHeaderConfirmWindowSubmit:hover{color:#fff;background:#d55;}
.innerContentBody{padding:20px 0px 90px 0px;}

.mainList{position:relative;text-align:left;padding-bottom:90px;}
.mainList:empty:before{content:"対象データなし";display:block;
color:#f80;font-size:12px;text-align:center;margin:auto;
position:absolute;top:150px;left:0px;right:0px;width:160px;height:80px;}
.loading .mainList:empty:before{content:"データ検索中";}

#signUpTerm{overflow:auto;width:90%;max-width:600px;margin:20px auto;
background:#fff;border-radius:12px;}
#signUpTerm > p{margin:10px;font-size:14px;}

/* main list */
#mainList_chat{width:94%;max-width:600px;margin:auto;}
#mainList_chat > dd{height:80px;border-radius:12px;background:#fff;margin:12px auto;position:relative;cursor:pointer;
border-left:80px solid #fff;transition:all 160ms ease;}
#mainList_chat > dd:hover{background:#fff5e5;border-left:80px solid #fff5e5;}
#mainList_chat > .new{box-shadow:0px 0px 4px #f90;}
#mainList_chat > .new:after{content:"";display:inline-block;width:16px;height:16px;
border:2px solid #fff;border-radius:10px;color:#fff;background:#d44;position:absolute;left:-76px;top:4px;}
#mainList_chat > dd > .userIcon{position:absolute;top:0px;bottom:0px;left:-74px;margin:auto;
width:68px;height:68px;background-color:#f90;border-radius:34px;
background-position:center center;background-repeat:no-repeat;
background-size:cover;}
#mainList_chat > dd > .userName{position:absolute;top:6px;left:0px;right:0px;margin:auto;
font-size:16px;line-height:34px;width:96%;height:34px;color:#c50;overflow:hidden;}
#mainList_chat > dd > .userComment{position:absolute;bottom:6px;left:0px;right:0px;margin:auto;
font-size:12px;line-height:34px;width:96%;height:34px;color:#333;overflow:hidden;}
#mainList_chat > dd > .datetime{position:absolute;top:6px;right:12px;text-align:right;
font-size:12px;line-height:34px;width:120px;height:34px;color:#333;overflow:hidden;}
#mainList_chat > .new > .userComment{font-weight:bold;}

#mainList_notification{width:94%;max-width:600px;margin:auto;}
#mainList_notification > dd{height:56px;border-radius:12px;background:#fff5e5;margin:12px auto;position:relative;cursor:pointer;
border-left:56px solid #fff5e5;transition:all 160ms ease;}
#mainList_notification > dd:hover{background:#fed;border-left:56px solid #fed;}
#mainList_notification > dd > .userIcon{position:absolute;top:0px;bottom:0px;left:-50px;margin:auto;
width:44px;height:44px;background-color:#f90;border-radius:34px;
background-position:center center;background-repeat:no-repeat;
background-size:cover;}
#mainList_notification > dd > .userName{position:absolute;top:4px;left:0px;right:0px;margin:auto;
font-size:14px;line-height:24px;width:96%;height:24px;color:#c50;overflow:hidden;}
#mainList_notification > dd > .userComment{position:absolute;bottom:4px;left:0px;right:0px;margin:auto;
font-size:12px;line-height:24px;width:96%;height:24px;color:#333;overflow:hidden;}
#mainList_notification > dd > .datetime{position:absolute;top:4px;right:12px;text-align:right;
font-size:12px;line-height:24px;width:120px;height:24px;color:#333;overflow:hidden;}
#mainList_notification > .separator{height:8px;}

#mainList_mypage{width:94%;max-width:600px;margin:auto;}
#mainList_mypage > dd{height:60px;border-radius:12px;
color:#f70;background:#fff;margin:12px auto;position:relative;cursor:pointer;
transition:all 160ms ease;font-size:16px;line-height:60px;text-align:center;}
#mainList_mypage > dd:hover{background:#fff5e5;}

.notificationThreadLinkTag{display:inline-block;color:#fff;background:#f70;border-radius:8px;
padding:0px 4px;margin:auto 6px;}

/* thread details */
#thread{}
#thread:before{content:"";display:block;width:100%;height:40px;
position:fixed;top:50px;left:0px;z-index:2;
background:linear-gradient(to Bottom,rgba(255,255,255,1),rgba(255,255,255,0));}
#threadHeader{top:-236px;height:230px;}
#threadHeader.active{top:50px;}
#threadHeader:after{content:"arrow_drop_down";
display:block;opacity:1;
position:absolute;bottom:0px;left:0px;right:0px;margin:auto;
width:40px;height:30px;z-index:9;overflow:hidden;
border-radius:20px 20px 0px 0px;font-family:'Material Icons';
color:#fff;background:#ffddaa;font-size:30px;text-align:center;line-height:30px;
transition:all 600ms ease;cursor:pointer;}
#threadHeader.active:after{content:"arrow_drop_up";}
#threadHeader > p{height:88%;margin:2% 10px;overflow:auto;padding:8px;
font-size:16px;line-height:24px;color:#222;background:#fff;border-radius:12px;}
#threadHeader + div:before{content:"arrow_drop_up";display:block;opacity:0;
position:fixed;top:350px;height:0px;left:0px;right:0px;margin:auto;
width:40px;height:0px;z-index:9;overflow:hidden;
border-radius:20px 20px 0px 0px;font-family:'Material Icons';
color:#fff;background:#ffddaa;font-size:30px;text-align:center;line-height:0px;
transition:all 600ms ease;cursor:pointer;opacity:0;}
#threadHeader.active + div:before{
opacity:1;top:350px;height:30px;line-height:30px;opacity:0;}

#threadHeaderDeleteBt{width:48px;height:38px;position:absolute;right:0px;top:10px;
color:#fff;background:#d44;border-radius:14px 0px 0px 14px;display:none;
font-size:24px;line-height:38px;text-align:center;}
#threadHeaderDeleteBt:before{font-family:'Material Icons';content:"delete";}
#thread.self #threadHeaderDeleteBt{display:inline-block;}

#threadHeaderLikeBt{width:48px;height:38px;position:absolute;right:0px;top:10px;
color:#fff;background:#d55;border-radius:14px 0px 0px 14px;display:none;
font-size:24px;line-height:38px;text-align:center;}
#threadHeaderLikeBt:before{font-family:'Material Icons';content:"favorite";}
#thread.else #threadHeaderLikeBt{display:inline-block;}
#thread.liked #threadHeaderLikeBt{color:#fc0;}

#threadHeaderUserIcon{width:48px;height:38px;position:absolute;left:0px;top:10px;
color:#fff;background:#f90;border-radius:0px 14px 14px 0px;text-align:center;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;cursor:pointer;}
#thread.anonymous #threadHeaderUserIcon{cursor:initial;}
#threadHeaderUserName{height:18px;position:absolute;left:56px;top:12px;
color:#fff;background:#777;font-size:12px;line-height:18px;text-align:center;
border-radius:8px;padding:0px 6px;display:inline-block;}
#threadHeaderDatetime{width:120px;height:16px;position:absolute;left:56px;top:32px;
color:#777;font-size:12px;line-height:16px;text-align:left;display:inline-block;}
#threadHeaderCategory{width:120px;height:26px;position:absolute;left:10px;bottom:10px;
color:#f80;background:#fff;border-radius:10px;
font-size:12px;line-height:26px;text-align:center;display:inline-block;}

/* term */
#termHeader{top:50px;z-index:3;height:50px;padding:0px;}
#termHeaderTitle{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
color:#f70;background:#fff;width:200px;height:28px;
font-size:12px;line-height:28px;border-radius:14px;
text-align:center;display:inline-block;}
#termHeaderTitle:after{content:"workspace_premium";font-family:'Material Icons';display:inline-block;
width:28px;height:28px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-14px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f80;text-align:center;}
/* muteList */
#muteListHeader{top:50px;z-index:3;height:50px;padding:0px;}
#muteListHeaderTitle{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
color:#f70;background:#fff;width:200px;height:28px;
font-size:12px;line-height:28px;border-radius:14px;
text-align:center;display:inline-block;}
#muteListHeaderTitle:after{content:"block";font-family:'Material Icons';display:inline-block;
width:28px;height:28px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-14px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f80;text-align:center;}

#muteListDl{width:94%;max-width:600px;margin:auto;position:relative;}
#muteListDl:empty:before{content:"対象データなし";display:block;
color:#f80;font-size:12px;text-align:center;margin:auto;
position:absolute;top:150px;left:0px;right:0px;width:160px;height:80px;}
#muteListDl > dd{height:60px;border-radius:12px;background:#fff;margin:12px auto;position:relative;cursor:pointer;
border-left:60px solid #fff;transition:all 160ms ease;}
#muteListDl > dd:hover{background:#fff5e5;border-left:60px solid #fff5e5;}
#muteListDl > dd > .userIcon{position:absolute;top:0px;bottom:0px;left:-54px;margin:auto;
width:48px;height:48px;background-color:#f90;border-radius:24px;
background-position:center center;background-repeat:no-repeat;
background-size:cover;}
#muteListDl > dd > .userName{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
font-size:16px;line-height:34px;width:96%;height:34px;color:#c50;overflow:hidden;}

/* chat details */
#chatHeader{top:50px;z-index:3;height:50px;padding:0px;}
#chatHeaderUserIcon{display:inline-block;cursor:pointer;
width:32px;height:32px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-274px;right:0px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f90;text-align:center;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;background-size:cover;}
#chatHeaderUserName{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
color:#f70;background:#fff;width:200px;height:28px;
font-size:12px;line-height:28px;border-radius:14px;
text-align:center;display:inline-block;}
#chatHeaderUserName:after{content:"email";font-family:'Material Icons';display:inline-block;
width:28px;height:28px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-14px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f80;text-align:center;}

#registerHeaderTitle{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
color:#f70;background:#fff;width:200px;height:28px;
font-size:12px;line-height:28px;border-radius:14px;
text-align:center;display:inline-block;}
#registerHeaderTitle:after{content:"person_add";font-family:'Material Icons';display:inline-block;
width:28px;height:28px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-14px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f80;text-align:center;}
#loginHeaderTitle{position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;
color:#f70;background:#fff;width:200px;height:28px;
font-size:12px;line-height:28px;border-radius:14px;
text-align:center;display:inline-block;}
#loginHeaderTitle:after{content:"login";font-family:'Material Icons';display:inline-block;
width:28px;height:28px;border-radius:14px;opacity:1;font-size:20px;line-height:28px;
position:absolute;left:-14px;top:0px;bottom:0px;margin:auto;
color:#fff;background:#f80;text-align:center;}

/*profile details */
#profileHeader{top:0px;z-index:3;height:180px;padding:0px;}
.profileDl{width:96%;max-width:500px;margin:auto;text-align:center;}

#profileUserIcon{width:80px;height:80px;position:absolute;left:0px;right:0px;bottom:20px;
margin:auto;border-radius:40px;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;}
.muted #profileUserIcon:after{width:100%;height:100%;border-radius:50%;
display:inline-block;position:absolute;top:0px;left:0px;
content:"block";font-family:'Material Icons';font-size:48px;line-height:80px;text-align:center;
color:#fff;background:#444;}
#profileUserIcon.sex0{background-color:#ffa500;}
#profileUserIcon.sex1{background-color:#0af;}
#profileUserIcon.sex2{background-color:#f55;}

#profileEditBt{font-family:'Material Icons';position:absolute;right:10px;bottom:10px;
border-radius:18px;transition:all 300ms ease;
width:36px;height:36px;line-height:36px;font-size:22px;display:none;
color:#fff;background:#f90;text-align:center;}
#profile.self #profileEditBt:before{content:"edit";}
#profile.self #profileEditBt{display:inline-block;}
#profile.self.editable #profileEditBt:before{content:"undo";}

#profileUserIconInputLabel{position:absolute;bottom:8px;left:0px;right:0px;margin:auto;
width:0px;height:0px;font-size:0px;line-height:0px;font-family:'Material Icons';text-align:center;
transition:all 400ms ease;color:#fff;background:#999;opacity:0;border-radius:16px;cursor:pointer;}
#profileUserIconInputLabel:before{content:"camera_alt";}
#profile.self.editable #profileUserIconInputLabel{width:32px;height:32px;
font-size:18px;line-height:32px;opacity:1;}
#profileUserIconInput{width:0px;height:0px;opacity:0;position:absolute;}

#profileUserIconRenew{width:0px;height:90px;position:absolute;left:-200px;right:0px;bottom:20px;
margin:auto;border-radius:0px;opacity:0;transition:all 400ms ease;
background-color:#f90;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;}
#profile.self.editable #profileUserIconRenew.active{width:90px;border-radius:45px;opacity:1;}
#profile.self.editable #profileUserIconRenew.active:after{content:"fast_rewind";font-family:'Material Icons';
display:inline-block;position:absolute;right:-22px;top:0px;bottom:0px;margin:auto;
width:32px;height:32px;line-height:32px;font-size:24px;text-align:center;line-height:32px;
color:#fff;background:#f80;border-radius:16px;}
#profileUserIconRenewCancel{width:0px;height:28px;position:absolute;left:-270px;right:0px;bottom:86px;
margin:auto;border-radius:0px;opacity:0;transition:all 400ms ease;
font-size:0px;line-height:0px;text-align:center;overflow:hidden;
color:#fff;background-color:#999;font-family:'Material Icons';}
#profileUserIconRenewCancel:before{content:"";}
#profile.self.editable #profileUserIconRenew.active+#profileUserIconRenewCancel{width:28px;
font-size:16px;line-height:28px;border-radius:14px;opacity:1;cursor:pointer;}
#profile.self.editable #profileUserIconRenew.active+#profileUserIconRenewCancel:before{content:"close";}

#profile #logoutBt{font-family:'Material Icons';position:absolute;left:10px;bottom:10px;
border-radius:18px;text-decoration:none;display:none;transition:all 300ms ease;
width:36px;height:36px;line-height:36px;font-size:22px;color:#fff;background:#d44;text-align:center;}
#profile.self #logoutBt:before{content:"logout";}
#profile.self #logoutBt{display:inline-block;}

#profile #passwordEditBt{font-family:'Material Icons';position:absolute;left:54px;bottom:10px;
border-radius:18px;text-decoration:none;display:none;transition:all 300ms ease;
width:36px;height:36px;line-height:36px;font-size:22px;color:#fff;background:#f90;text-align:center;}
#profile.self #passwordEditBt:before{content:"key";}
#profile.self #passwordEditBt{display:inline-block;}
#profile.self.passwordEditable #passwordEditBt:before{content:"undo";}

#profile.self.editable #logoutBt,
#profile.self.passwordEditable #logoutBt,
#profile.self.editable #passwordEditBt,
#profile.self.passwordEditable #profileEditBt{width:0px;height:0px;opacity:0;font-size:0px;}

#profileEditSubmit,#passwordEditSubmit{width:180px;height:24px;color:#fff;background:#f80;text-decoration:none;border:none;
display:none;margin:20px auto;font-size:12px;line-height:24px;text-align:center;border-radius:10px;cursor:pointer;}
#profileEditSubmit.disable{background:#999;cursor:not-allowed;}
#passwordEditSubmit.disable{background:#999;cursor:not-allowed;}
#profile.self.editable #profileEditSubmit{display:block;}
#profile.self.passwordEditable #passwordEditSubmit{display:block;}

#profile #messageBt{font-family:'Material Icons';position:absolute;left:10px;bottom:10px;
border-radius:18px;transition:all 400ms ease;text-decoration:none;
width:36px;height:36px;line-height:36px;font-size:22px;display:none;
color:#fff;background:#f90;text-align:center;}
#profile #messageBt:before{content:"email";}
#profile.else #messageBt{display:inline-block;}

#profile #muteBt{font-family:'Material Icons';position:absolute;right:10px;bottom:10px;
border-radius:18px;text-decoration:none;
width:36px;height:36px;line-height:36px;font-size:22px;display:none;
color:#fff;background:#777;text-align:center;}
#profile #muteBt:before{content:"visibility_off";}
#profile.muted #muteBt:before{content:"visibility";}
#profile.else #muteBt{display:inline-block;}

#profile #likeBt{font-family:'Material Icons';position:absolute;left:54px;bottom:10px;
border-radius:18px;text-decoration:none;
width:36px;height:36px;line-height:36px;font-size:22px;display:none;
color:#fff;background:#d55;text-align:center;}
#profile #likeBt:before{content:"favorite";}
#profile.liked #likeBt{color:#fc0;}
#profile.else #likeBt{display:inline-block;}

#profileEditDl{display:none;}
#passwordEditDl{display:none;}
.editable #profileDl, .passwordEditable #profileDl{display:none;}
.editable #profileEditDl{display:block;}
.passwordEditable #passwordEditDl{display:block;}
.profileDl > dt{color:#fff;background:#fa1;font-size:12px;line-height:36px;
border:1px solid #f90;border-radius:18px;
display:inline-block;width:30%;margin-bottom:14px;
vertical-align:top;}
.profileDl > dd{position:relative;font-size:14px;line-height:24px;
border-top:1px solid #f90;border-right:1px solid #f90;
border-radius:0px 18px 0px 0px;padding:6px;
display:inline-block;width:60%;margin-bottom:14px;
text-wrap:wrap;min-height:24px;}
.profileDl > dd:last-child{border-bottom:1px solid #f90;
border-radius:0px 18px 18px 0px;}
.profileDl > dd > input[type="text"],.profileDl > dd > input[type="date"],.profileDl > dd > input[type="password"],.profileDl > dd > select{
width:96%;height:28px;line-height:28px;border-radius:14px;
border:1px solid #ccc;text-align:center;}
.profileDl > dd > textarea{line-height:18px;min-height:70px;resize:vertical;border:1px solid #ccc;text-align:center;
width:92%;padding:6px 2%;border-radius:14px;text-align:left;}
#profileUserComment{text-align:left;}
.profileDl > dd.error:first-child{content:"99";}
.profileDl > dd.mandatoryError:after{display:inline-block;color:#d44;content:"未入力";}
.profileDl > dd.tooLongError:after{display:inline-block;color:#d44;content:"なげぇ";}
.profileDl > dd.alreadyTakenError:after{display:inline-block;color:#d44;content:"取得済ID";}
.profileDl > dd.idLengthError:after{display:inline-block;color:#d44;content:"6～16文字必要";}
.profileDl > dd.passwordLengthError:after{display:inline-block;color:#d44;content:"6～20文字必要";}
.profileDl > dd.passcodeLengthError:after{display:inline-block;color:#d44;content:"4文字必要";}
.profileDl > dd.idFormartError:after{display:inline-block;color:#d44;content:"英数字のみ";}
.profileDl > dd.passwordFormartError:after{display:inline-block;color:#d44;content:"英数字のみ";}
.profileDl > dd.passcodeFormartError:after{display:inline-block;color:#d44;content:"数字のみ";}
.profileDl > dd.notMatchError:after{display:inline-block;color:#d44;content:"一致せぬ";}
.profileDl > dd.idUndefinedError:after{display:inline-block;color:#d44;content:"予期せぬエラー";}


#topCategory{position:fixed;bottom:70px;left:-180px;right:0px;margin:auto;
width:150px;height:36px;line-height:36px;font-size:14px;color:#fff;background:#f70;
border-radius:18px;text-align:center;border:none;box-shadow:0px 0px 4px #fc0;}
#threadAddBt{width:150px;height:36px;border-radius:18px;color:#f70;background:#fff;
position:fixed;bottom:70px;left:0px;right:-180px;margin:auto;display:block;font-size:14px;line-height:36px;
text-align:center;border:none;box-shadow:0px 0px 4px #fc0;}
#threadAddBt:before{content:"edit";font-family:'Material Icons';width:32px;height:32px;display:inline-block;
position:absolute;top:0px;bottom:0px;left:6px;margin:auto;font-size:22px;text-align:center;line-height:32px;}
#commonNaviSec{position:fixed;bottom:-50px;left:0px;right:0px;opacity:0;
color:#ffce80;background:#fff;width:100%;height:50px;z-index:9;transition:all 300ms ease;
box-shadow:0px 0px 4px #ffecce;
}
#commonNaviSec.active{bottom:0px;opacity:1;}
#commonNavi{width:100%;max-width:400px;text-align:center;margin:auto;}
#commonNavi > dd{font-size:24px;line-height:50px;text-align:center;
display:inline-block;width:24%;position:relative;}
#commonNavi > dd > button{width:50px;height:50px;text-align:center;font-family:'Material Icons';
font-size:24px;line-height:50px;color:#ffce80;background:#fff;}
#commonNavi > dd > button:hover{color:#f70;}
#commonNavi > .active > button{color:#f90;}
#commonNavi > .post > button:before{content:"forum";}
#commonNavi > .chat > button:before{content:"email";}
#commonNavi > .notification > button:before{content:"notifications_none";}
#commonNavi > .mypage > button:before{content:"account_circle";}
#commonNavi > .active > button:before{content:"refresh";}
#commonNavi > .new:after{content:"";display:inline-block;width:8px;height:8px;border-radius:4px;
background:#f90;position:absolute;bottom:6px;left:0px;right:0px;margin:auto;}

#selfProfile{position:fixed;z-index:10;border-radius:18px;cursor:pointer;
top:6px;right:10px;border:1px solid #fa0;
width:36px;height:36px;line-height:36px;font-size:22px;color:#fff;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;background-size:cover;
background-color:#f70;}
#loginBt{position:fixed;z-index:10;border-radius:10px;
top:12px;right:10px;border:1px solid #fa0;
width:78px;height:24px;line-height:24px;font-size:12px;color:#fff;
background-color:#f70;text-decoration:none;display:block;text-align:center;}
#signupBt{position:fixed;z-index:10;border-radius:10px;
top:12px;right:94px;border:1px solid #fa0;
width:78px;height:24px;line-height:24px;font-size:12px;color:#f70;
background-color:#fff;text-decoration:none;display:block;text-align:center;}

#body{padding-top:90px;max-width:900px;margin:auto;}
#mainList_thread{width:98%;max-width:1200px;margin:12px auto 100px auto;display:flex;flex-wrap:wrap;}
#mainList_thread > dd{flex-basis:20%;margin:0;padding:0;position:relative;}
#mainList_thread > dd:before{content:"";display:block;width:100%;padding-top:80%;}
#mainList_thread > dd > div{border-radius:12px;color:#222;background:#fff;
position:absolute;top:0px;bottom:0px;left:0px;right:0px;
width:80%;height:74%;margin:auto;padding:6%;transition:all 140ms ease;transform:scale(1);
cursor:pointer;}
#mainList_thread > dd > div:hover{transform:scale(1.06);}
#mainList_thread > dd > div > a{display:block;width:100%;height:100%;border-radius:4%;
position:absolute;top:0px;bottom:0px;left:0px;right:0px;}
#mainList_thread > dd > div > time{display:block;height:18%;overflow:hidden;font-size:12px;}
#mainList_thread > dd > div > .userIcon{position:absolute;top:0px;right:0px;
width:26%;padding-top:26%;border-radius:0% 12px 0% 0%;overflow:hidden;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%);
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;}
#mainList_thread > dd > div > .userIcon.userSex0{background-color:#f70;}
#mainList_thread > dd > div > .userIcon.userSex1{background-color:#0af;}
#mainList_thread > dd > div > .userIcon.userSex2{background-color:#f55;}
#mainList_thread > dd > div > p{height:66%;overflow:hidden;border-bottom:1px solid #fff;
font-size:14px;line-height:20px;}
#mainList_thread > dd > div > .info{height:16%;display:flex;}
#mainList_thread > dd > div > .info > dd{color:#f90;flex-basis:33%;font-size:16px;line-height:32px;text-align:right;}
#mainList_thread > dd > div > .info > .cat > span{display:inline-block;
position:absolute;bottom:0px;left:0px;
font-size:10px;line-height:18px;padding:2px;width:40%;height:18px;overflow:hidden;
color:#fff;background:#f90;border-radius:0px 8px 0px 8px;text-align:center;}
#mainList_thread > dd > div > .info > .favorite:before{content:"favorite";font-family:'Material Icons';}
#mainList_thread > dd > div > .info > .chat:before{content:"chat";font-family:'Material Icons';}

iframe{width:96%;margin:auto;}
.mainHeaderAdSec{padding:20px 0px;text-align:center;}
.bodySec{display:none;transition:all 600ms ease;}
.bodySec.active{display:block;}
.bodyNavi{display:none;}
.bodyNavi.active{display:block;}
.bodyNavi{
color:#fff;background:linear-gradient(to Bottom,rgba(255,206,128,1),#ffce80 30%,#ffce80 70%,rgba(255,206,128,1));
width:100%;height:40px;position:fixed;top:50px;left:0px;z-index:5;text-align:center;
vertical-align:top;}
.bodyNavi > dt, .bodyNavi > dd{display:inline-block;padding:0px 4px;margin:6px 8px;
height:28px;font-size:20px;line-height:28px;cursor:pointer;}
.bodyNavi > dt{background:#fd9;padding:0px 12px;border-radius:12px;font-family:'Material Icons';}
.bodyNavi > dd{text-shadow:0px 0px 6px #f90;}

#threadNavi > .icon{font-family:'Material Icons';}
#threadNavi > dt{}
#threadNavi_searchInput{width:100px;height:20px;border-radius:8px;padding:2px 4px;
text-align:center;font-size:14px;line-height:20px;margin:auto auto 6px auto;color:#f50;}
#threadNavi_self.active{color:#f70;}
#threadNavi_posted.active{color:#f70;}
#threadNavi_liked.active{color:#d55;}
#threadNavi_reset{transition:all 300ms ease;opacity:1;color:#fff;background:#777;
width:20px;height:20px;font-size:14px;line-height:20px;border-radius:10px;
font-family:'Material Icons';text-align:center;}
#threadNavi_searchInput:placeholder-shown+#threadNavi_reset{opacity:0;
width:0px;height:0px;font-size:0px;line-height:0px;border-radius:0px;}

body.mordalActive{overflow:hidden;}
#slot{display:none;}
#mordal{width:100vw;height:0vh;position:fixed;top:50px;left:0px;right:0px;margin:auto;
z-index:7;background:rgba(255,255,255,0.8);opacity:0;transition:all 600ms ease;}
#innerWindow{width:100vw;height:0vh;max-width:700px;overflow:hidden;box-shadow:0px 0px 6px #ddd;
position:fixed;top:0px;left:0px;right:0px;margin:auto;padding-bottom:0vh;
z-index:7;background:rgba(255,250,230,1);opacity:0;transition:all 600ms ease;}
#mainRefresh{position:fixed;top:5px;left:-50px;width:50px;height:40px;transition:all 600ms ease;
font-family:'Material Icons';z-index:9;overflow:hidden;
border-radius:0px 12px 12px 0px;color:#fff;background:#f70;text-align:center;
font-size:30px;line-height:40px;opacity:0;}
#mainRefresh.active{left:0px;opacity:1;}
#mainRefresh:before{content:"refresh";}
#mainChatNotification{position:fixed;top:5px;left:60px;width:0px;height:40px;transition:all 600ms ease;
font-family:'Material Icons';z-index:9;overflow:hidden;
border-radius:0px;color:#ffc;background:#f90;text-align:center;
font-size:0px;line-height:40px;opacity:0;animation:bounce 2s ease infinite;
}
@keyframes bounce{
70%{transform:translateY(0%);}
80%{transform:translateY(-15%);}
90%{transform:translateY(0%);}
95%{transform:translateY(-7%);}
97%{transform:translateY(0%);}
99%{transform:translateY(-3%);}
100%{transform:translateY(0);}
}
#mainChatNotification.active{opacity:1;font-size:30px;width:50px;border-radius:12px;}
#mainChatNotification:before{content:"email";}
#innerWindowClose{position:fixed;top:5px;left:-50px;width:50px;height:40px;transition:all 600ms ease;
font-family:'Material Icons';z-index:9;overflow:hidden;
border-radius:0px 12px 12px 0px;color:#fff;background:#f70;text-align:center;
font-size:30px;line-height:40px;opacity:0;}
#textInputSec{color:#fff;background:#f90;width:96%;max-width:672px;height:0px;overflow:hidden;
position:fixed;bottom:0px;left:0px;right:0px;margin:auto;
z-index:9;opacity:0;transition:all 300ms ease;border-radius:8px 8px 0px 0px;}
#textInputSec.onFocus{bottom:initial;}
#textInputSec button,#textInputSec .imageUpload{width:50px;height:40px;position:absolute;margin:auto;cursor:pointer;
border:none;color:#fff;background:#f70;font-family:'Material Icons';font-size:24px;display:inline-block;text-align:center;}
#textInputSec .chatRefresh{left:0px;top:-46px;border-radius:18px;
width:36px;height:36px;line-height:36px;}
#textInputSec .chatRefresh:before{content:"refresh";}
#textInputSec .chatRefresh.loading:before{content:"";}
#textInputSec .imageUpload > input{width:0px;height:0px;opacity:0;position:absolute;}
#textInputSec .imageUpload{left:0px;top:4px;border-radius:4px 12px 12px 0px;}
#textInputSec .imageUpload:before{content:"image";}
#textInputSec .imageUpload.loading:before{content:"";}
#commentImagePreview{position:absolute;overflow:hidden;border-radius:0px;width:70px;height:0px;top:0px;left:0px;
background:#f70;transition:all 400ms ease;text-align:center;z-index:3;}
#commentImagePreview.active{border-radius:8px;height:60px;top:-64px;box-shadow:0px 0px 4px #f90;}
#commentImagePreview.active:after{content:"添付中";font-size:10px;width:90%;height:12px;line-height:12px;
position:absolute;left:0px;right:0px;top:2px;margin:auto;color:#f70;background:#fff;border-radius:6px;}
#commentImagePreview.active > img{max-width:100%;height:auto;}
#commentImageCancel{width:0px;height:40px;position:absolute;left:0px;top:4px;cursor:pointer;
border-radius:0px;opacity:0;transition:all 400ms ease;
color:#fff;background:#f70;font-family:'Material Icons';font-size:0px;display:inline-block;text-align:center;}
#commentImageCancel:before{content:"";}
#commentImagePreview.active+#commentImageCancel{width:50px;opacity:1;font-size:24px;border-radius:4px 12px 12px 0px;}
#commentImagePreview.active+#commentImageCancel:before{content:"delete";}

#textInputSec .imgSelect{left:0px;top:0px;bottom:0px;border-radius:4px 12px 12px 0px;}
#textInputSec .imgSelect:before{content:"image";}
#textInputSec .textSubmit{right:0px;top:4px;border-radius:12px 4px 0px 12px;}
#textInputSec .textSubmit:before{content:"send";}
#textInputSec.anonymousInputable .textSubmit.anonymous:after{content:"key";display:inline-block;color:#ec0;
position:absolute;bottom:0px;right:5px;font-size:24px;width:24px;height:24px;line-height:24px;}
#textInputSec textarea{position:absolute;left:0px;right:0px;bottom:6px;margin:0px auto 0px auto;
transition:all 300ms ease;border-radius:10px;resize:none;z-index:5;
width:50%;max-width:360px;height:0px;border:0px solid #f90;padding:0vh;}
#inputReplyTo{position:absolute;top:0px;left:0px;right:0px;margin:auto;
width:90px;height:30px;border-radius:15px 15px 0px 0px;color:#fff;background:#0af;
transition:all 300ms ease;font-size:12px;line-height:30px;text-align:center;}
#inputReplyTo.active{top:-30px;}
#inputReplyToDelete{width:22px;height:22px;text-align:center;color:#777;background:#fff;
position:absolute;right:-22px;top:0px;border-radius:50%;font-family:'Material Icons';
font-size:12px;line-height:22px;border:4px solid #0af;}
#inputReplyToDelete:before{content:"close";}
.mordalActive #mordal{height:100vh;opacity:1;}
.mordalActive #innerWindow{height:100vh;opacity:1;overflow:auto;}
.mordalActive #innerWindowClose.active{left:0px;opacity:1;}
.mordalActive #innerWindowClose.active:before{content:"close";}
.mordalActive #textInputSec.active{height:56px;font-size:24px;line-height:36px;opacity:1;overflow:visible;}
.mordalActive #textInputSec.active textarea{height:36px;border:5px solid #f90;padding:2px 4px;z-index:5;}
.mordalActive #textInputSec.active textarea:focus{height:80px;margin-bottom:30px;}
.mordalActive #textInputSec.active textarea:focus+#inputReplyTo{top:-44px;}
.mordalActive #textInputSec.active textarea:focus+#inputReplyTo.active{top:-104px;}
#textTextCounter{color:#777;background:rgba(255,255,255,0.6);font-size:12px;line-height:30px;
width:60px;height:0px;font-size:0px;line-height:20px;text-align:center;border-radius:10px;
position:absolute;bottom:12px;left:0px;right:0px;margin:auto;opacity:0;
transition:all 300ms ease;}
.mordalActive #textInputSec.active textarea:focus+#inputReplyTo+#textTextCounter{opacity:1;height:20px;z-index:9;font-size:12px;}

#settingIcon{position:fixed;top:5px;right:60px;width:40px;height:40px;transition:all 600ms ease;
font-family:'Material Icons';z-index:9;overflow:hidden;
border-radius:12px;color:#fff;background:#f70;text-align:center;
font-size:30px;line-height:40px;opacity:0;}
.mordalActive #settingIcon.active{opacity:1;}
.mordalActive #settingIcon.active:before{content:'settings';}
#innerWindow .settingSec{border-radius:0px 0px 0px 0px;
width:96%;max-width:700px;height:0px;overflow:hidden;z-index:4;
color:#fff;background:#f70;text-align:center;opacity:0;
transition:all 600ms ease;position:fixed;top:0px;left:0px;right:0px;margin:auto;}
#innerWindow .settingSec.active{border-radius:0px 0px 20px 20px;
opacity:1;top:50px;height:340px;overflow:hidden;}
.settingSec > dl{margin:12px auto;width:90%;}
.settingSec > dl > dd{}
.settingSec > dl > dd > label{width:90%;max-width:320px;display:block;
color:#f70;background:#fff;border-radius:16px;margin:6px auto;
font-size:14px;text-align:center;line-height:36px;position:relative;cursor:pointer;}
.settingSec > dl > dd > input[type="checkbox"]{display:none;}
.settingSec > dl > dd > input[type="checkbox"] + label:before{
content:"";display:inline-block;width:28px;height:28px;border-radius:14px;
position:absolute;top:0px;bottom:0px;left:4px;margin:auto;background:#f90;}
.settingSec > dl > dd > input[type="checkbox"]:checked + label:after{
border-right:6px solid #fff;border-bottom:4px solid #fff;
content:"";display:inline-block;
width:9px;height:16px;top:6px;left:10px;position:absolute;
transform:rotate(45deg);z-index:7;}

#loginForm{text-align:center;padding:36px 0px;width:90%;max-width:500px;margin:auto;}
#loginForm > dl{}
#loginForm > dl > dd{margin-bottom:12px;;}
#loginForm > dl > dd > input{text-align:center;}

#loginList > dt{color:#fff;background:#fa1;font-size:12px;line-height:36px;
border:1px solid #f90;border-radius:18px;
display:inline-block;width:30%;margin-bottom:14px;
vertical-align:top;}
#loginList > dd{position:relative;font-size:14px;line-height:24px;
border-top:1px solid #f90;border-right:1px solid #f90;
border-radius:0px 18px 0px 0px;padding:6px;
display:inline-block;width:60%;margin-bottom:14px;
text-wrap:wrap;min-height:24px;}
#loginList > dd:last-child{border-bottom:1px solid #f90;
border-radius:0px 18px 18px 0px;}
#loginList > dd > input[type="text"],#loginList > dd > input[type="date"],#loginList > dd > input[type="password"],#loginList > dd > select{
width:96%;height:28px;line-height:28px;border-radius:14px;
border:1px solid #ccc;text-align:center;}

.contentDl{position:relative;padding-bottom:0vh;}
.contentDl:empty:before{text-align:center;content:"noMessage/まだメッセージがありません";
display:block;color:#f80;font-size:12px;text-align:center;margin:auto;}
#innerWindow .contentDl{padding-bottom:130px;}
.contentDl:after{content:"";clear:both;display:block;}
.contentDl > dd{position:relative;min-width:90px;max-width:60%;padding:14px 18px 14px 26px;margin:12px 18px 12px 26px;
background:#fff;box-shadow:0px 0px 4px #eee;border-radius:14px;clear:both;transition:all 400ms ease;border:1px solid #eee;opacity:1;}
.contentDl > .else{float:left;}
.contentDl > .owner{background:#ffedcb;}
.contentDl > .self{float:right;color:#fff;background:#f80;}
.contentDl > .self a{color:#fff;}
.contentDl > .self.owner{color:#fff;background:#f80;}
.contentDl > .mentioned{box-shadow:0px 0px 6px #f90;}
.contentDl > .scrollTo{box-shadow:0px 0px 8px #fc0;}
.contentDl > .deleted{color:#d77;}
.contentDl > .self.deleted{color:#777;}
.contentDl > .muted{color:#999;}
.contentDl > dd > .icon{width:30px;height:30px;border-radius:50%;position:absolute;top:10px;left:-15px;
background:#999 url('/common/img/common/noProfile.png') no-repeat center center;background-size:cover;
border:1px solid #eee;transition:all 400ms ease;}
.contentDl > dd > .icon.sex0{background-color:#ffa500;}
.contentDl > dd > .icon.sex1{background-color:#0af;}
.contentDl > dd > .icon.sex2{background-color:#f55;}
.contentDl > dd.anonymous > .icon{background-color:#777;}
.contentDl > dd.deletedUser > .icon{background-color:#777;}
.contentDl > dd.muted > .icon:after{width:100%;height:100%;border-radius:50%;
display:inline-block;position:absolute;top:0px;left:0px;
content:"block";font-family:'Material Icons';font-size:18px;line-height:30px;text-align:center;
color:#fff;background:#444;}
.contentDl > dd > p{word-wrap:break-word;font-size:14px;line-height:20px;}
.contentDl > dd > img{width:60%;margin:10px auto;display:block;transition:all 400ms ease;}
.contentDl > .imgExpand{width:70%;max-width:70%;}
.contentDl > .imgExpand:after{position:absolute;width:24px;height:24px;border-radius:12px;
top:4px;right:4px;color:#fff;background:#777;font-size:20px;line-height:24px;text-align:center;
content:"open_in_full";font-family:'Material Icons';}
.contentDl > .imgExpand > img{width:98%;}
.contentDl > dd > .replyToTag{display:inline-block;color:#fff;background:#fa0;
font-size:12px;line-height:20px;border-radius:8px;padding:0px 6px;}
.contentDl > dd.self > .replyToTag{color:#f70;background:#fff;}
.contentDl > .deleted > .replyToTag{display:none;}
.contentDl > dd > .userName{display:inline-block;
position:absolute;top:-8px;left:6px;padding:0px 6px;
height:18px;font-size:10px;line-height:18px;text-align:left;
color:#fff;background:#777;border-radius:12px;}
.contentDl > .anonymous > .userName:before{content:"匿名ユーザー";}
.contentDl > .self > .userName{display:none;}
.contentDl > .muted > .userName{display:none;}
.contentDl > .deletedUser > .userName:before{content:"退会済ユーザー";}
.contentDl > dd > .noDiv{position:absolute;top:6px;right:-34px;
width:30px;height:20px;font-size:10px;line-height:20px;text-align:left;
color:#999;}
.contentDl > dd > time{position:absolute;top:26px;right:-34px;
width:30px;height:16px;font-size:10px;line-height:16px;text-align:left;
color:#ffa500;position:inline-block;}
.contentDl > dd > time > .dateDiff{display:inline-block;text-align:center;
position:absolute;bottom:-16px;left:0px;width:100%;height:16px;}
.contentDl > .self > .noDiv{right:initial;left:-54px;text-align:right;}
.contentDl > .self > time{right:initial;left:-54px;text-align:right;}
.contentDl > .deleted > p,.contentDl > .muted > p{display:none;}
.contentDl > .muted > .replyToTag{display:none;}
.contentDl > .deleted:after{content:"削除済";font-size:12px;line-height:20px;display:block;}
.contentDl > .muted:after{content:"ミュートちう";font-size:12px;line-height:20px;display:block;}

.contentDl.mutedHidden > .muted{height:0px;overflow:hidden;padding:0px;border:0px;margin:auto;opacity:0;}
.contentDl.deletedHidden > .deleted{height:0px;overflow:hidden;padding:0px;border:0px;margin:auto;opacity:0;}

.commentTool{width:220px;height:0px;padding:0px;transition:all 400ms ease;
border-radius:12px;border-left:0px solid #f90;border-right:0px solid #fa0;border-bottom:0px solid #f90;
overflow:hidden;text-align:center;}
.commentTool > button{font-family:'Material Icons';border:none;
color:#fff;background:#fa0;border-radius:8px;height:22px;line-height:22px;
width:56px;margin:auto 6px;display:inline-block;overflow:hidden;}
.commentTool > button{display:none;}
.contentDl > .toolActive{margin-bottom:36px;}
.contentDl > dd > .commentTool{position:absolute;bottom:0px;}
.contentDl > .self > .commentTool{right:0px;}
.contentDl > .else > .commentTool{left:0px;}
.contentDl > .toolActive > .commentTool{bottom:-30px;height:22px;padding:6px 0px 2px 0px;
border-left:1px solid #f90;border-bottom:1px solid #f90;}
.contentDl > .self.toolActive > .commentTool{
border-left:0px solid #f90;border-right:1px solid #f90;}

/* button label */
.commentTool > .replyBt:before{content:"reply";}
.commentTool > .muteBt:before{content:"visibility_off";}
.commentTool > .profileBt:before{content:"person";}
.commentTool > .deleteBt:before{content:"delete";}
.commentTool > .anonymousToggle:before{content:"key";}
/* button toggle label */
.contentDl > .muted > .commentTool > .muteBt:before{content:"visibility";}
.contentDl > .anonymous > .commentTool > .anonymousToggle:before{content:"key_off";}
/* not allowed button */
.contentDl > .anonymous > .commentTool > .profileBt{background:#999;cursor:not-allowed;}
.contentDl > .deletedUser > .commentTool > .profileBt{background:#999;cursor:not-allowed;}
.contentDl > .deletedUser > .commentTool > .muteBt{background:#999;cursor:not-allowed;}
.contentDl > .deleted > .commentTool > .deleteBt{background:#999;cursor:not-allowed;}
.contentDl > .deleted > .commentTool > .anonymousToggle{background:#999;cursor:not-allowed;}

/* visibility */
.contentDl .commentTool > .replyBt{display:inline-block;}
/* self button */
.contentDl .self .commentTool > .deleteBt{display:inline-block;}
#thread .contentDl .self .commentTool > .anonymousToggle{display:inline-block;}
/* else thread button */
#thread .contentDl .else .commentTool > .muteBt{display:inline-block;}
#thread .contentDl .else .commentTool > .profileBt{display:inline-block;}

/* add */
#postHeader{top:0px;height:230px;}
#postHeaderSubmitBt{width:48px;height:38px;position:absolute;right:0px;top:10px;
color:#fff;background:#f90;border-radius:14px 0px 0px 14px;display:inline-block;
font-size:24px;line-height:38px;text-align:center;}
#postHeaderSubmitBt:before{font-family:'Material Icons';content:"send";}
#postHeaderSubmitBt.disabled{background:#777;cursor:not-allowed;}

#postHeaderUserIcon{width:48px;height:38px;position:absolute;left:0px;top:10px;
color:#fff;background:#f90;border-radius:0px 14px 14px 0px;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;}
#postHeaderUserName{height:18px;position:absolute;left:56px;top:12px;
color:#fff;background:#777;font-size:12px;line-height:18px;text-align:center;
border-radius:8px;padding:0px 6px;display:inline-block;}
#postHeaderAnonymousBt{width:32px;height:32px;line-height:32px;font-size:20px;
position:absolute;left:0px;right:0px;top:14px;margin:auto;
color:#fff;background:#f70;border-radius:16px;text-align:center;}
#postHeaderAnonymousBt:before{font-family:'Material Icons';content:"key";}
#postHeaderCategory{width:120px;height:26px;position:absolute;left:10px;bottom:10px;
color:#f80;background:#fff;border-radius:10px;
font-size:12px;line-height:26px;text-align:center;display:inline-block;}
#postInputTextCounter{width:120px;height:26px;position:absolute;right:10px;bottom:10px;
color:#f80;background:background:rgba(255,255,255,0.2);border-radius:10px;
font-size:12px;line-height:26px;text-align:center;display:inline-block;}
#postInputText{width:92%;height:88%;margin:2% auto;overflow:auto;display:block;
resize:vertical;padding:8px;border-radius:12px;color:#222;background:#fff;
border:none;font-size:14px;line-height:24px;}

#postHeaderUserIcon:after{opacity:0;transition:all 400ms ease;
content:"";
width:100%;height:100%;border-radius:0px 14px 14px 0px;color:#fff;background:#777;
position:absolute;left:0px;bottom:0px;left:0px;right:0px;margin:auto;
background-image:url('/common/img/common/noProfile.png');
background-repeat:no-repeat;background-position:center center;
background-size:cover;}
#postHeaderUserName:after{opacity:0;transition:all 400ms ease;
content:"匿名";
width:100%;height:100%;border-radius:8px;color:#fff;background:#777;
position:absolute;left:0px;bottom:0px;left:0px;right:0px;margin:auto;}
.anonymous #postHeaderUserIcon:after{opacity:1;}
.anonymous #postHeaderUserName:after{opacity:1;}
.anonymous #postHeaderAnonymousBt:before{content:"key_off";}


.commentTool > .commentSubTool{color:#fff;background:rgba(0,0,0,0.8);border-radius:12px;opacity:0;
width:100%;height:0%;position:absolute;bottom:0px;left:0px;right:0px;margin:auto;overflow:hidden;
transition:all 400ms ease;}
.commentTool > .commentSubTool.active{opacity:1;height:100%;}
.commentTool > .commentSubTool.active:before{display:inline-block;
font-family:'Material Icons';font-size:20px;line-height:22px;
width:22px;height:22px;position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;}
.commentTool > .commentSubTool.active.delete:before{content:"delete";}
.commentTool > .commentSubTool.active.anonymous:before{content:"key";}
.anonymous > .commentTool > .commentSubTool.active.anonymous:before{content:"key_off";}
.commentTool > .commentSubTool.active.mute:before{content:"visibility_off";}
.muted > .commentTool > .commentSubTool.active.mute:before{content:"visibility";}
.commentSubTool > button{font-family:'Material Icons';border:none;text-align:center;
color:#fff;border-radius:10px;width:30px;height:20px;font-size:14px;line-height:20px;
position:absolute;top:0px;bottom:0px;margin:auto;display:inline-block;overflow:hidden;
transition:all 300ms ease;opacity:1;}
.commentSubTool > button.commentSubToolSubmit{left:4px;background:#0af;}
.commentSubTool > button.commentSubToolCancel{right:4px;background:#f55;}
.commentSubTool > button.commentSubToolSubmit:before{content:"done";}
.commentSubTool > button.commentSubToolCancel:before{content:"close";}
.commentSubTool.loading > button{width:0px;opacity:0;}


#scrollControl{width:200px;height:36px;position:fixed;left:0px;right:0px;bottom:-44px;margin:auto;z-index:7;
transition:all 300ms ease;}
#scrollControl.active{bottom:66px;}
.scrollBt{font-family:'Material Icons';border-radius:18px;position:absolute;bottom:0px;
width:36px;height:36px;line-height:36px;font-size:22px;color:#fff;background:#f70;text-align:center;}
.scrollBt:before{content:"last_page";}
#singleScrollTop{transform:rotate(-90deg);left:0px;}
#singleScrollBottom{transform:rotate(90deg);left:46px;}
#singleSelfScrollTop{transform:rotate(-90deg);right:46px;background:#fb0;}
#singleSelfScrollBottom{transform:rotate(90deg);right:0px;background:#fb0;}

.loading:before{content:"";display:block;width:100%;height:100%;
background:radial-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0));
position:absolute;top:0px;bottom:0px:left:0px;right:0px;margin:auto;z-index:9;}
.loading:after{content:"";display:block;
border:4px solid #fd0;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
position:absolute;top:0px;bottom:0px;left:0px;right:0px;margin:auto;z-index:9;}
@keyframes lds-ripple {
	0%{width:0;height:0;opacity:0;}
	4.9%{width:0;height:0;opacity:0;}
	5%{width:0;height:0;opacity:1;}
	100%{width:40px;height:40px;opacity:0;}
}

@keyframes float{
  0%{box-shadow:-4px 0px 6px #999;}
	33%{box-shadow:0px 2px 6px #999;}
	66%{box-shadow:4px 0px 6px #999;}
	100%{box-shadow:0px 2px 6px #999;}
}

#term p{color:#d80;width:90%;margin:12px auto;padding:12px 0px;font-size:14px;line-height:22px;}
#termList{background:#fff;width:96%;margin:12px auto;padding:12px 0px;border-radius:12px;
font-size:14px;line-height:22px;}
#termList > dt{color:#fff;background:#fa0;width:96%;margin:6px auto;border-radius:6px;text-align:center;}
#termList > dd{color:#222;background:#fffaed;margin:4px 2%;border-radius:6px;padding:6px 8px;}
#termFooter{font-size:12px;text-align:center;color:#444;}

@media(orientation:portrait){
}
@media(orientation:landscape){
}

@media(max-width:1000px){
#mainList_thread > dd{flex-basis:20%;}
}
@media(max-width:900px){
#mainList_thread > dd{flex-basis:25%;}
}
@media(max-width:700px){
#mainList_thread > dd{flex-basis:33%;}
}
@media(max-width:600px){
#mainList_thread > dd{flex-basis:50%;}
#signupBt{right:initial;left:10px;}
}