/* =================================================================================================
■RHYZOME関連
================================================================================================= */

.themeContens dl dt, .themeContens dl dd, .themeContens dl dt .fullname, .themeContens dl dt .college, .topComment ul.topCommentList li .topCommentAuthor .topCommentAuthorName, .topComment ul.topCommentList li .topCommentAuthor .topCommentAuthorTitle, section.fullWidth .bodyBlock ul.raiseList li a .itemContent p.itemTitle, .glowingComment ul.listGlowingComment li .commentItem .commentHead p.CommentTitle, .glowingComment ul.listGlowingComment li .commentItem .commentHead p.CommentSubTitle, .glowingCommentBox .glowingCommentAuthorName, .glowingCommentBox .glowingCommentAuthorAddr, .commentBox .commentContent ul li .commentItemRight p, .themeContens .creationListIcon, .glowingCommentBox .glowingCommentContent, .asideRight .glowingCommentRight .glowingCommentBox .commentContent, .asideRight .glowingCommentRight .glowingCommentBox h3.authorName, .asideRight .glowingCommentRight .glowingCommentBox .authorInfo .address, .glowingComment ul.listGlowingComment li .commentItem p.commentDesciption, .topComment .topCommentPopup p, .topComment .topCommentPopup .topCommentPopupAuthor, .topComment .topCommentPopup .topCommentPopupTitle, .notificationArea ul .itemNotice .itemContent h5.title var, .notificationArea ul .itemNotice .itemContent h5.title em, .myPage .notificationArea ul .itemNotice .itemContent h5.title, .myPage .notificationArea ul .itemNotice .itemContent p.desciption, .listArticle li a .articleContent .likeAndComment, .avatarUser .notificationArea ul .itemNotice .itemContent h5.title, .avatarUser .notificationArea ul .itemNotice .itemContent p.desciption, .commentBox form.frmComment .replyClose, section.fullWidth .raiseList .rhizomeStage dl, section.fullWidth .raiseList .rhizomeStage .creationListIcon {
 word-break: break-all;
}

.commentBox {
 clear: both;
 margin: 30px 0 0;
}
.commentBox h5 {
 font-size: 15px;
 margin-bottom: 20px;
}
.commentBox a {
 font-weight: normal;
}
.rhizomeStage[data-purpose="postArea"] var {
 font-style: normal;
 padding-left: 3px;
}
.commentBox .commentContent {
 height: auto;
 border-top: 1px solid #fff
 box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, 0.15)
}
.commentBox a.readMore {
 display: flex;
 width: 240px;
 border-radius: 4px;
 border: solid 1px #ff6600;
 color: #ff6600;
 font-size: 15px;
 font-weight: 500;
 margin: 0 auto;
  margin-top: 0px;
 position: relative;
 height: 34px;
 justify-content: center;
 align-items: center;
 box-sizing: border-box;
 margin-top: 15px;
 transition: height 0.2s ease-in-out 0s , opacity 0.2s ease-in-out 0s;
}
.commentBox a.readMore {
 color: #ff6600;
 font-size: 15px;
 font-weight: 500;
}
.commentBox a.readMore span {
 position: relative;
}
.commentBox a.readMore span::after {
 content: "";
 display: block;
 border-right: solid 2px #ff6600;
 border-bottom: solid 2px #ff6600;
 width: 6px;
 height: 6px;
 transform: rotate(-135deg);
 position: absolute;
 right: -20px;
 bottom: 5px;
 padding: 0px;
}
.commentBox .commentContent ul li {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin-top: 20px;
 padding-bottom: 20px;
 border-bottom: solid 1px #eee;
}
.commentBox .commentContent ul li .commentItemLeft {
 position: relative;
}
.commentBox .commentContent ul li .commentItemLeft .iconFill {
 position: absolute;
 width: 14px;
 height: 14px;
 background-size: 100% 100%;
 right: -5px;
 top: 21px;
 z-index: 10;
}
.commentBox .avatarCircle {
 width: 32px;
 height: 32px;
 overflow: hidden;
 position: relative;
 border-radius: 50%;
}
.commentBox .avatarCircle img, .commentBox form.frmComment img {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 width: auto;
 height: 110%;
 border-radius: 50%
}

.commentBox .commentContent ul li .commentItemRight {
 position: relative;
 margin-left: 10px;
 margin-right: 15px;
 width: 562px;
}
.commentBox .commentContent ul li .commentItemRight a.iconBall, .commentBox .commentContent ul li .commentItemRight a.myIconBall {
 position: absolute;
 top: 0;
 right: 0;
 display: flex;
 padding: 0;
 height: 16px;
 align-items: center;
 z-index: 100;
 opacity: 0.4;
}
.commentBox .commentContent ul li .commentItemRight p.textAuthor {
 font-size: 12px;
 line-height: 1.5;
 margin-top: 0;
 margin-bottom: 0;
 color: #242424;
 font-weight: bold;
}
.commentBox .commentContent ul li .commentItemRight p.textAuthor a {
 color:#242424;
 font-weight: bold;
}
.commentBox .commentContent ul li .commentItemRight p.textAuthor, .commentBox .commentContent ul li .commentItemRight p.textAuthorTitle {
 word-break: break-all;
 padding-right: 25px;
}
.commentBox .commentContent ul li .commentItemRight p.textAuthorTitle {
 color: #666;
 font-size: 12px;
 line-height: 1.4;
 margin-top: 2px;
 margin-bottom: 0;
}
.commentBox .commentContent ul li .commentItemRight .commentItemRightContent {
 overflow: hidden;
 position: relative;
}
.commentBox .commentContent ul li .commentItemRight p {
 line-height: 1.71;
 font-size: 16px;
}
.commentBox .commentContent ul li .commentItemRight .commentReadmore a {
 color: #7a7a7a;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon {
 color: #7a7a7a;
 margin-top: 5px;
 font-size: 12px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon {
 color: #7a7a7a;
 font-size: 12px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon span.commentlike {
 margin-left: 20px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon span.commentlike a {
 cursor: default;
 color: #7a7a7a;
}
.icon {
 display: inline-block;
}
.icon.iconLike {
 background: url("/images/terrace/2019/iconLike.png") no-repeat;
  background-size: auto;
 width: 20px;
 height: 20px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon span.commentlike .iconLike {
 width: 14px;
 height: 14px;
 background-size: 100% 100%;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon {
 color: #7a7a7a;
 font-size: 12px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon span.commentReply {
 margin-left: 20px;
 float: right;
 color: #ff6600;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon {
 color: #7a7a7a;
 font-size: 12px;
}
.commentBox .commentContent ul li .commentItemRight .commentIcon span.commentVoteLike {
 float: right;
 color: #ff6600;
 margin-left: 20px;
}


.commentBox .commentContent ul li .commentItemRight .commentShowReply {
 font-size: 14px;
 color: #ff6600;
 margin-top: 17px;
 text-align: center;
 letter-spacing: normal;
}
.commentBox .commentContent ul li .commentItemRight .commentShowReply:hover {
 text-decoration: underline;
}
.commentBox .commentContent ul li .commentItemRight .commentShowReply {
 font-size: 14px;
 color: #ff6600;
 text-align: center;
 letter-spacing: normal;
}
.icon.iconReplyDown {
 background: url("/images/terrace/2019/iconReplyDown.svg") no-repeat;
  background-size: auto;
 width: 20px;
 height: 20px;
}
.commentBox .commentContent ul li .commentItemRight .commentShowReply .iconReplyDown {
 width: 14px;
 height: 14px;
 background-size: 100% 100%;
 margin-left: 4px;
}

.commentBox .commentContent ul li .commentItemRight .replySection li {
 flex-direction: inherit;
}
.commentBox .commentContent ul li .commentItemRight .replySection li:last-child {
 border: none;
 padding-bottom: 0;
}
.commentBox .commentContent ul li .commentItemLeft {
 position: relative;
}
.commentBox .commentContent ul li .commentItemRight .replySection li .commentItemRight {
 width: calc(100% - 42px);
 margin-right: 0;
}
.buttomCommentBoxZero {
 width: 536px;
 height: 36px;
 line-height: 36px;
 font-size: 13px;
 font-weight: 500;
 color: #666666;
 display: block;
 margin: 5px auto 0;
 text-align: center;
 background-color: #F6F6F6;
}


.commentBox form.frmComment {
 display: flex;
 margin-top: 20px;
 border-bottom: 1px solid #EEEEEE;
 padding-bottom: 20px;
 align-items: center;
 position: relative;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: flex-start;
}
.commentBox form.frmComment textarea {
 margin-left: 11px;
 margin-right: 8px;
 width: 518px;
 padding-left: 10px;
 padding-top: 2%;
 min-height: 49px;
 border: 1px solid #ffd9c1;
 background: #fff7f2;
 background-position: center;
 font-size: 15px;
 color: #666666;
 border-radius: 4px;
 line-height: 1.67;
 transition: 0.3s;
 box-sizing: border-box;
 resize: vertical !important;
}

.commentBox form.frmComment button {
 width: 51px;
 height: 49px;
 border-radius: 4px;
 border: solid 1px #EAEAEA;
 background: transparent;
 font-size: 13px;
 font-weight: bold;
 align-self: flex-end;

}
.commentBox .commentContent ul li form.frmComment textarea {
 width: 460px;
}
.commentBox form.frmComment .replyClose {
 display: none;
 font-size: 12px;
 font-weight: 500;
 color: #666666;
 margin-left: 43px;
 position: relative;
 padding-left: 19px;
 margin-top: 8px;
}
.icon {
 display: inline-block;
 font-style: normal;
}
.icon.iconClose_18x18 {
 background: url("/images/onb/2019/iconClose_18x18.png") no-repeat;
 width: 20px;
 height: 20px;
}
.commentBox form.frmComment .replyClose i.iconClose_18x18 {
 background-size: 100%;
 width: 15px;
 height: 15px;
 position: absolute;
 top: 2px;
 left: 0;
}

.commentBox .signUp {
 width: 620px;
 height: 52px;
 border-radius: 2px;
 border: solid 1px #eeeeee;
 background-color: #ffffff;
 margin: 20px 0;
 display: table;
}
.commentBox .signUp .signUpContent {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 color: #242424;
}
.commentBox .signUp .signUpContent p {
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 color: #242424;
}
.commentBox .signUp .signUpContent .signUpConTentRed {
 color: #ff6600;
 letter-spacing: 0.3px;
 padding-left: 5px;
}
.commentBox .signUp .signUpContent .signUpConTentRed {
 color: #ff6600;
 letter-spacing: 0.3px;
}

.commentBox .signUp ul{
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.commentBox .signUp ul li:first-child{
	margin-right:8px;
}
.commentBox .signUp ul li a{
	padding: 0 20px;
	height: 30px;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	border-radius: 52px;
	transition: 0.3s;
	display: inline-block;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 30px;
	float: left;
}
.commentBox .signUp ul li.login a{
	width: 170px;
	color: #ff6600;
	background: #ffffff;
	border: solid 1px #ff6600;
	letter-spacing: 0.4px;
}
.commentBox .signUp ul li.application a,
.commentBox .signUp ul li.rhizomeUserRegistrationBtn a{
	color: #ffffff;
	background-color: #ff6600;
	border: 1px solid #ff6600;
	letter-spacing: 0.2px;
}
.commentBox .signUp ul li.login a:hover {
 border: solid 2px #ff6600;
}
.commentBox .signUp ul li.application a:hover {
 opacity: 0.7;
}













.rhizomeStage[data-purpose="postArea"] .commentItemRight .commentItemRightContent p del{
 text-decoration:none;
 display:none;
}
.rhizomeStage[data-purpose="postArea"] .commentItemRight .commentItemRightContent p del.show{
 display:inline;
}
.rhizomeStage[data-purpose="postArea"] var{
 font-style:normal;
 padding-left:3px;
}
.commentBox .commentContent{
  border-top:1px solid #fff;
}
.commentBox a.readMore{
  display: flex;
  width: 240px;
  border-radius: 4px;
  border: solid 1px #ff6600;
  color: #ff6600;
  font-size: 15px;
  font-weight: 500;
  margin: 0 auto;
  position: relative;
  height: 34px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-top:15px;
  transition: height 0.2s ease-in-out 0s , opacity 0.2s ease-in-out 0s;
}
.commentBox a.readMore.hide{
 height:0;
 opacity:0;
 pointer-events: none;
}
.commentBox a.readMore:hover{
 border: 2px solid #ff6600;
}
.commentBox a.readMore span{
 position:relative;
}
.commentBox a.readMore span:after{
 content:"";
 display:block;
 border-right:solid 2px #ff6600;
 border-bottom:solid 2px #ff6600;
 width: 6px;
 height: 6px;
 transform: rotate(-135deg);
 position:absolute;
 right:-20px;
 bottom:5px;
 padding:0px;
}

/* rhizome_authなしポップアップ */
#rhizomePopupNrhizome.rhizomePopup > div div p{
 font-size: 15px;
 font-weight: 500;
}

#rhizomePopupNrhizome.rhizomePopup > div div ul{
 width: 348px;
 margin: 20px auto 0 auto;
 padding:0;
 border:0;
}
#rhizomePopupNrhizome.rhizomePopup > div div ul li{
 margin-bottom:11px;
 align-items: center;
}
#rhizomePopupNrhizome.rhizomePopup > div div ul div{
 display:inline-block;
 width:50px;
 height:auto;
 margin:0;
 padding:0;
 border:0;
}
#rhizomePopupNrhizome.rhizomePopup > div div ul p{
 display:inline-block;
 width:294px;
 height:auto;
 margin:0;
 padding:0 0 4px 15px;
 border:0;
 text-align:left;
 /*line-height: 1;*/
 font-size: 17px;
 overflow:hidden;
 align-items: center;
 box-sizing: border-box;
}
#rhizomePopupNrhizome.rhizomePopup > div div a{
 background: linear-gradient(135deg, #5eb8a7 0%, #3daa94 100%);
 width:348px;
 height: 56px;
 line-height: 56px;
 font-size: 17px;
 color: #FFFFFF;
 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 border:none;
}
#rhizomePopupNrhizome.rhizomePopup > div div a:hover{
 border: solid 2px #1b9b82;
 background-image: none;
 box-shadow: none;
 color: #1b9b82;
 box-sizing: border-box;
 border-radius: 4px;
}
#rhizomePopupNrhizome.rhizomePopup > div div a.aboutRhizome{
 border:none;
 color:black;
 background:none;
 display:inline;
 box-shadow: none;
}
#rhizomePopupNrhizome.rhizomePopup > div div a.aboutRhizome:hover{
 text-decoration:underline;
}

/* ポップアップ */
.rhizomePopup{
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
 z-index:100001;
 transition-property:opacity;
 transition-duration: 0.3s;
 opacity:0;
 display:block;
 pointer-events:none;
}
.rhizomePopup.show{
 background:rgba(0,0,0,0.7);
 opacity:1;
 pointer-events:auto;
}
.rhizomePopup > div{
 width:620px;
 height: auto;
 padding: 0;
 background: transparent !important;
 overflow: inherit;
 position: absolute;
 left: 50%;
 top: 50%;
 max-height: 80%;
 max-width: 100%;
 z-index: 100002;
 transform: translate(-50%,-50%);
}
.rhizomePopup > div div{
 text-align: center;
 background: white;
 border-radius: 4px;
 padding: 22px 40px;
}
.rhizomePopup > div div p{
 font-size: 17px;
 line-height: 1.67;
 font-weight: bold;
 letter-spacing: 0.2px;
 margin:0;
}
.rhizomePopup > div div a{
 margin-top: 20px;
 border-radius: 4px;
 font-size: 17px;
 border:1px solid #ff6600;
 background: white;
 color: #ff6600;
 display: inline-block;
 width: 238px;
 height: 38px;
 line-height: 40px;
 font-size: 15px;
 text-align: center;
 text-decoration:none;
}
.rhizomePopup > div span{
 display:block;
 top: -34px;
 position: absolute;
 right: 0;
 color: #242424;
 cursor:pointer;
}
.rhizomePopup > div span:before{
 color: #ffffff;
 font-size: 45px;
 width: 32px;
 line-height: 32px;
 position: absolute;
 right: 3px;
 display: inline-block;
 text-align: center;
 content: "\00d7";
}

/* 未ログインポップアップ */
#rhizomePopupXwoman.rhizomePopup > div div{
 padding:30px 15px;
}
#rhizomePopupXwoman.rhizomePopup > div div p{
 font-size: 17px;
 margin:0;
 padding:0;
}
#rhizomePopupXwoman.rhizomePopup > div div p var{
 font-style:normal;
}
#rhizomePopupXwoman.rhizomePopup > div div ul{
 align-items: flex-end;
 padding-left: 0;
 display:flex;
 justify-content: space-around;
}
#rhizomePopupXwoman.rhizomePopup > div div ul li{
 font-size: 15px;
 font-weight: bold;
 color: #666666;
}

#rhizomePopupXwoman.rhizomePopup > div div ul li div{
 margin:0;
 padding:0;
 padding: 15px 0 15px 0;
}
#rhizomePopupXwoman.rhizomePopup > div div a{
 display:block;
 background: linear-gradient(135deg, #ee4d62 0%, #ee4d62 9%, #e70d2a 100%);
 color: #FFFFFF;
 font-weight: bold;
 text-align: center;
 box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 width: 284px;
 height: 56px;
 padding:0;
 border:none;
 margin:0;
 line-height: 56px;
 font-size: 17px;
}
#rhizomePopupXwoman.rhizomePopup > div div a.login{
 background: linear-gradient(135deg, #ee4d62 0%, #ee4d62 9%, #e70d2a 100%);
 margin-right:3px;
}
#rhizomePopupXwoman.rhizomePopup > div div a.login:hover{
 box-sizing: border-box;
 background: #f6f6f6;
 box-shadow: inset 0 0 0 2px #ff6600;
 color: #ff6600;
}
#rhizomePopupXwoman.rhizomePopup > div div a.register{
background: linear-gradient(135deg, #5eb8a7 0%, #3daa94 100%);
}
#rhizomePopupXwoman.rhizomePopup > div div a.register:hover{
 box-sizing: border-box;
 background: #f6f6f6;
 box-shadow: inset 0 0 0 2px #1b9b82;
 color: #1b9b82;
}

.poweredBy {
 color: #666 !important;
 font-size: 10px !important;
}
article .poweredBy {
 text-align: right;
 padding: 3px 0 0;
}

/* いいねボタン */
.socialButtons .iconLikes a:before{
 content:"";
 width:28px;
 height:25px;
 display:block;
 background-image:url(/images/terrace/2019/iconLikes.svg);
 margin-right:10px;
}
.socialButtons .iconLikes a:hover:before{
 background-image:url(/images/terrace/2019/iconLikes_hover.svg);
}
.socialButtons .iconLikes a var{
 font-style:normal;
}
.socialButtons .iconLikes a.liked:before, .iconLikes a.liked:hover:before{
 background-image:url(/images/terrace/2019/iconLiked.svg);
}


/* アンバサダーブログトップ */
.articleUserBlogWriterHeaderFOLLOW p.follow{
 visibility:hidden;
}
.articleUserBlogWriterHeaderFOLLOW p.follow var{
 font-style:normal;
}
.btnAmbassadorFollow a{
 cursor:pointer;
}
.btnAmbassadorFollow .follow{
 text-indent:12px;
}
.btnAmbassadorFollow .follow:before{
 content:"";
 display:flex;
 background: url("/images/terrace/2019/iconFollow.svg") no-repeat;
 width: 12px;
 height: 12px;
}
.btnAmbassadorFollow .follow:after{
 content:"このTerraceアンバサダーをフォロー";
}
.btnAmbassadorFollow .followed:after{
 content:"このTerraceアンバサダーのフォローを解除";
}



/* 通知　※追加スタイル */
.avatarUser{
 margin:0!important;
 width: 80px!important;
 height: 100%!important;
}
.avatarUser .avatarCircle img {
 width: 36px;
 height: 36px;
 border-radius: 50%;
}



/* ブログページ内関連リンク */
.articleUserBlogWriterHeaderCONTENTLink a.blank:after {
  width: 14px;
  height: 14px;
  content: "";
  display: inline-block;
  margin-left: 4px;
  background: url(/images/terrace/2019/icon_arrow.png);
}




/* 通知エリア */
#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification {
  display: none;
  width: 400px;
  height: auto;
  max-height: 700px;
  position: absolute;
  right: 0;
  z-index: 9999;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  border-top: 2px solid #ff6600;
  background: #FFFFFF;
  z-index: 9999;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification.modalRequiredRegister, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification.modalRequiredRegister {
  height: 642px;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification:before, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification:before {
  content: '';
  position: absolute;
  right: 30px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ff6600;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul {
  display: flex;
  flex-direction: column;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li {
  width: auto;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice {
  padding: 15px;
  border-bottom: 1px solid #EEEEEE;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice:hover, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice:hover {
  background: #fffcf8;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice:hover a, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice:hover a {
  background: transparent;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice.noiticeIsActive, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice.noiticeIsActive {
  background: #fffcf8;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice {
  display: flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: flex-start;
  height: auto;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemAvata img, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemAvata img {
  width: 24px;
  height: 24px;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent {
  margin-left: 11px;
  text-align: left;
  width: 335px;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.title, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.title {
  font-weight: bold;
  font-size: 14px;
  line-height: 1.41;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.title span, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.title span {
  font-weight: 500;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.desciption, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemNotice .itemContent p.desciption {
  font-size: 12px;
  color: #666666;
  margin-top: 5px;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate, .headerFix>header 
.loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: auto;
  height: auto;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate .date, .headerFix>header 
.loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate .date {
  font-size: 12px;
  color: #666666;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate .date span, .headerFix>header 
.loginBox ul.menuLogin li.avatarUser .modalNotification ul li.noitice .itemDate .date span {
  font-size: 10px;
  color: #ff6600;
  margin-left: 12px;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li:last-child, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li:last-child {
  margin-left: 0;
  margin-right: 0;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li:last-child:before, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification ul li:last-child:before {
  content: '';
  width: 0;
  height: 0;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification a.notificationSeeMore, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification a.notificationSeeMore {
  width: 100%;
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #ff6600;
  background: #EEEEEE;
  font-size: 14px;
  font-weight: 500;
}

#wrapper>header .loginBox ul.menuLogin li.avatarUser .modalNotification a.notificationSeeMore:hover, 
.headerFix>header .loginBox ul.menuLogin li.avatarUser .modalNotification a.notificationSeeMore:hover {
  text-decoration: underline;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser:hover .modalNotification{
	display:none;
}
#wrapper > header .loginBox ul.menuLogin li.avatarUser.notLogin:hover .modalNotification{
	display:block;
}
#wrapper > header .loginBox ul.menuLogin li.avatarUser.active .modalNotification{
	display:block;
}
section.myPage .tabWrapper{
	border-bottom:none;
}
.notificationArea ul li{
	height: auto;
}
.notificationArea ul li.active {
	background: #fffcf8;
	box-sizing:border-box;
}
	.notificationArea ul .itemNotice{
	display: flex;
}
.notificationArea ul .itemNotice .itemIcon{
	text-align:center;
}
.notificationArea ul .itemNotice .itemContent{
	}
.notificationArea ul .itemNotice .itemContent h5.title{
	font-style:normal;
	font-weight: 500;
}
.notificationArea ul .itemNotice .itemContent h5.title span{
	font-weight: 500;
}
.notificationArea ul .itemNotice .itemContent h5.title var,
.notificationArea ul .itemNotice .itemContent h5.title em{
	font-style:normal;
	font-weight: bold;
}
.notificationArea ul .itemNotice .itemContent p.desciption{
	font-weight: 500;
	color: #666666;
	margin-top: 5px;
}
.notificationArea ul .itemNotice .itemDate{
align-self: flex-end;
}
.notificationArea ul .itemNotice .itemDate p span{
	font-size: 10px;
	color: #ff6600;
	font-family:serif;
}
/* メディアごとにclassが出し分けされるのでそれに従う。色を変えるかどうかは後で決まるらしい20190405 */
.notificationArea ul .itemNotice .itemDate p span.ONB::before {
    color: #ff6600;
    content:'NB';}
.notificationArea ul .itemNotice .itemDate p span.NXW::before {
    color: #f13c5d;
    content:'xwoman';}
.notificationArea ul .itemNotice .itemDate p span.NXWT::before {
    color: #ff6600;
    content:'Terrace';}
.notificationArea ul .itemNotice .itemDate p span.ARIA::before {
    color: #937e28;
    content:'ARIA';}        
.notificationArea ul .itemNotice .itemDate p span.DUAL::before {
    content:'DUAL';}        
.notificationArea ul .itemNotice .itemDate p span.DRS::before {
    color: #ff6600;
    content:'doors';}
.notificationArea ul .itemNotice .itemDate p span.NXR::before {
    color: #d32f2f;
    content:'xTREND';}
.notificationArea ul .itemNotice .itemDate p var{
	font-style:normal;
}

section.myPage .tabWrapper .tabContent.notificationArea ul.tabItem li{
	height:auto;
}
.myPage .notificationArea ul .itemNotice{
	padding-top: 15px;
	padding-bottom: 17px;
	padding-left: 30px;
	padding-right: 30px;
	height:auto;
}
.myPage .notificationArea ul .itemNotice .itemIcon{
	width: 40px;
	height: 40px;
}
.myPage .notificationArea ul .itemNotice .avatar img{
	width: 40px;
	height: 40px;
}
.myPage .notificationArea ul .itemNotice .itemIcon img{
	width: 30px;
}
.myPage .notificationArea ul .itemNotice .itemIcon.info img{
	width: 8px;
}
.myPage .notificationArea ul .itemNotice .itemContent{
	margin-left: 20px;
	width: 508px;
}
.myPage .notificationArea ul .itemNotice .itemContent h5.title{
	margin-top: 5px;
	font-size: 17px;
	line-height: 1.41;
}
.myPage .notificationArea ul .itemNotice .itemContent p.desciption{
	margin-top: 5px;
}
.myPage .notificationArea ul .itemNotice .itemDate{
	margin-left: 22px;
	align-self: flex-end;
}
.myPage .notificationArea ul .itemNotice .itemDate p span{
	margin-left: 8px;
}

.avatarUser .notificationArea ul li{
	font-size: 14px;
	text-align:left;
	border-bottom: 1px solid #eee;
}
#wrapper > header .loginBox ul.menuLogin .avatarUser .notificationArea ul li a{
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: left;
	padding:15px;
	box-sizing:border-box;
}
.avatarUser .notificationArea ul .itemNotice .avatarCircle,
.avatarUser .notificationArea ul .itemNotice .itemIcon{
	width: 24px;
	height: 24px;
	min-width:24px;
	flex-basis:24px;
	box-sizing:border-box;
}
#wrapper > header .loginBox ul.menuLogin .avatarUser .notificationArea ul .avatorCircle img{
	width: 24px;
	height: 24px;
}
#wrapper > header .loginBox ul.menuLogin .avatarUser .notificationArea ul .itemIcon img{
	width: 20px;
	height: auto;
}
#wrapper > header .loginBox ul.menuLogin .avatarUser .notificationArea ul .itemIcon.info img{
	width: 5px;
	height: auto;
}
.avatarUser .notificationArea ul .itemNotice .itemContent{
  margin-left: 10px;
  min-width:335px;
  flex-basis:335px;
  box-sizing:border-box;
}
.avatarUser .notificationArea ul .itemNotice .itemContent h5.title{
  font-size: 14px;
  line-height: 1.41;
}
.avatarUser .notificationArea ul .itemNotice .itemContent p.desciption{
  margin-top: 5px;
}
.avatarUser .notificationArea ul .itemNotice .itemDate{
  margin-left: 22px;
  align-self: flex-end;
  flex-basis: 335px;
  text-align: right;
  color:#666;
  font-weight:500;
  font-size: 12px;
}
.avatarUser .notificationArea ul .itemNotice .itemDate p span{
  margin-left: 8px;
}
.avatarUser .notificationArea ul .itemNotice .avatarCircle,
.avatarUser .notificationArea ul .itemNotice .itemIcon {
  width: 24px;
  height: 24px;
  min-width:24px;
  flex-basis:24px;
  box-sizing:border-box;
}
.avatarUser .notificationArea ul .itemNotice .avatarCircle img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.avatarUser .notificationArea ul .itemNotice .itemDate .date {
  margin: 0;
}
#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNotification a.notificationSeeMore {
  color: #F13C5D;
  background-color: #FAFAFA;
}

/* 通知エリア：リゾーム未ログイン */
#wrapper > header .loginBox ul.menuLogin li.avatarUser ul.modalNoticemenuSub {
  display: none;
  position: fixed;
  margin-left: -60px;
  margin-top: 0px;
  width: 200px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  border: solid 1px #eeeeee;
  border-top: 2px solid #ff6600;
  background-color: #ffffff;
  z-index: 9999;
  transition: all 0.9s ease-in-out;
  width: 400px;
  border-radius: 0;
  margin-left: -322px;
  margin-top: 0px;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser.active .modalNoticemenuSub {
  display:block;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub:before {
  content: ""; position: absolute;
  top: -17px;
  left: 361px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid #ff6600;
  width: 0;
  height: 0;
  content: ""; position: absolute;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li {
  position: relative;
  display: block;
  float:none;
  width:100%;
  font-size: 14px;
  height: auto;
  letter-spacing: 0.2px;
  color: #121212;
  line-height:1.4;
  margin:0;
  padding:20px 0 5px 0;
  text-align: left;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .registerForUse {
  padding-top: 0;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .articleRegisterForUse {
  margin: 0;
  box-shadow: none;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .articleRegisterForUse .imgExample {
  display: block;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .articleRegisterForUse .registerForUse .noticeText {
  margin: 0 0 25px;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .articleRegisterForUse .boxActionRegister .noticeText {
  margin: 10px 0 14px;
}

#wrapper > header .loginBox ul.menuLogin li.avatarUser .modalNoticemenuSub li .articleRegisterForUse .boxActionRegister .btnGreenGradientPc {
  width: 344px;
  height: 100%;
  margin: 0 auto;
  color: #FFF !important;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
  line-height: 56px;
  border-radius: 28px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #f5748c 0%, #f13d5e 100%);
}

.btnFollowDiscussion a {
  width: 182px;
  height: 24px;
  margin: 30px 0 10px;
  color: #ff6600;
  border: solid 1px #ff6600;
  border-radius: 15px;
  background: #ffffff;
  text-align: center;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  float: right;
  cursor: pointer;
}

.btnFollowDiscussion a:hover {
  border: 2px solid #ff6600;
  line-height: 20px !important
}

.btnFollowDiscussion a.active {
  color: #fff;
  background-color: #ff6600;
}

.btnFollowDiscussion a.active:hover {
  background-color: #ff6600;
}

.btnFollowDiscussion a .icon.iconFollow{
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-size: 12px 12px;
  background-size: 100%;
}