.select-format
{
	display: grid;
	grid-template:
	" label ..... format ..... commit " auto
	/ auto 0.25em 1fr 0.25em auto;

    font-size:16px;

    background-color:#EFEFEF;
    border-radius: 0.25em;
    padding:0.25em;
}
.select-format .label
{
	grid-area: label;
	place-items: center;
    padding:0.5em;
}
.select-format .format
{
	grid-area: format;
	place-items: center;
    padding:0.5em;
}
.select-format .commit
{
	grid-area: commit;
	place-items: center;
    padding:0.5em;

    background-color:#FFFFFF;
    border:1px solid #CCCCCC;
}

#spinner-wrapper
{
	display: none;
}
body.show-spinner #spinner-wrapper
{
	z-index: 10000;

	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;

	background-color:rgba(0,0,0,0.0);

	display: grid;
	grid-template:
	" ..... ..... ..... " 1fr
	" ..... label ..... " auto
	" ..... ..... ..... " 1fr
	/ 1fr   auto  1fr;
}
body.show-spinner #spinner-wrapper .label
{
	grid-area: label;
	color:#EFEFEF;
	
	animation-name:anmFlashing;
	animation-duration:1.0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
}

#spinner-wrapper-loading
{
	display: none;
}
body.show-spinner-loading #spinner-wrapper-loading,
body.connected #spinner-wrapper-loading
{
	z-index: 10000;

	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;

	background-color:rgba(0,0,0,0.2);

	display: grid;
	grid-template:
	" ..... ..... ..... " 1fr
	" ..... label ..... " auto
	" ..... ..... ..... " 1fr
	/ 1fr   auto  1fr;
}
body.show-spinner-loading #spinner-wrapper-loading .label,
body.connected #spinner-wrapper-loading .label
{
	grid-area: label;
	font-size:16px;
	font-weight: bold;
	color:#A8852D;
	
	animation-name:anmFlashing;
	animation-duration:1.0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
}

#spinner-wrapper-upload
{
	display: none;
}
body.show-spinner-upload #spinner-wrapper-upload
{
	z-index: 10000;

	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;

	background-color:rgba(0,0,0,0.3);

	display: grid;
	grid-template:
	" ..... ..... ..... " 1fr
	" ..... label ..... " auto
	" ..... ..... ..... " 1fr
	/ 1fr   auto  1fr;
}
body.show-spinner-upload #spinner-wrapper-upload .label
{
	grid-area: label;
	color:#EFEFEF;
	font-size: 1.8em;
	
	animation-name:anmFlashing;
	animation-duration:1.0s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
}

@keyframes anmFlashing
{
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
/*
.miniblog-blk-list .miniblog-thumbnail {
    position: relative;
}
*/

.news-blk-detail-body
{
	font-size: 1.6rem;
    line-height: 1.6;
	font-weight: normal !important;
}

.news-blk-detail-body p
{
	font-weight: normal !important;
}

.posts-list-txt.compress
{
	position: relative;
	height:calc(var(--row, 8em) + 1em * 1.7);
	overflow: hidden;
}
.posts-list-txt.compress::after
{
	content:"";
	display: block;
	height: 2em;
	width:100%;

	position: absolute;
	bottom:0;
	left:0;
	right:0;

	background: rgb(255,255,255);
	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

.miniblog-blk-form-gallery-blk .image-preview .upload-img {
    -o-object-fit: cover;
    object-fit: cover;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
}

.inline-block-list > .inline-block-list-item
{
	display:inline-block;
	margin-right:0.5em;
}
.inline-block-list > .inline-block-list-item:last-child
{
	margin-right:0.0em;
}

.setting-faq-list .editor
{
	font-weight:normal;
}

@media only screen and (min-width: 767px) and (max-width: 1180px) {
	.community-thread .thread-input .content-up-area.ipad {
	  width: 62%;
	}
}/*# sourceMappingURL=extra.css.map */

.archive-area .archive-blk .archive-list li.new a::before {
	/*
	top: 7px;
	left: 5px;
	position: absolute;
	*/
	content: "NEW";
	background: #F43C30;
	border-radius: 7px;
	font-weight: bold;
	font-size: 1.2rem;
	padding: 3px 9px;
	color: #fff;
	margin-right:0.25em;
}

.msg-block
{
	scroll-margin-top: 50px;
}

img
{
	-webkit-touch-callout: none;
	user-select:none;
}


/* コミュニティ一覧調整 */
.communityblk.renew .community-wrapper
{
	row-gap: 3em;
}

/*
**************************************************
1行お知らせ
**************************************************
*/
.online-topics
{
	margin-bottom:3em;
}
.online-topics > .inner
{

}
.online-topics > .inner > .online-topics-box
{
	font-size:1.4em;

	padding:1.5em;
	border:1px solid #CCCCCC;
	line-height:1.5;

	display: grid;
	grid-template:
	"date title" auto 
	/auto 1fr;

	gap:1.0em;
}
.online-topics > .inner > .online-topics-box > .date
{
}
.online-topics > .inner > .online-topics-box > .title
{
	font-weight:bold;
	color: #666;
}
.online-topics > .inner > .online-topics-box > .title > a
{
	font-weight:bold;
	color: #666;
}
@media screen and (max-width: 767px) {
	.online-topics > .inner > .online-topics-box
	{
		grid-template:
		"date" auto 
		"title" auto 
		/100%;
	}
}


/*
**************************************************
ランキング対応
**************************************************
*/
.section_outer
{
    margin-bottom: 3em;
}
.tab_home_01
{
	border-bottom:1px solid #CCCCCC;

	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	gap:0.5em;

	width:100%;

	font-size:16px;
}

.tab_home_01 > .tab_item
{
	flex: 1 1 33.3333%;

	padding:1.0em;
	font-weight:bold;
	text-align: center;

	border:1px solid #CCCCCC;
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;

	cursor: pointer;
}
.tab_home_01 > .tab_item .isNew
{
	background-color: #FF0000;
	color:#FFFFFF;
	font-size:0.8em;
	display: inline-block;

	padding:0.25em 0.5em;
	line-height: 1;
	margin-right:0.5em;
	border-radius: 0.5em;
}
.tab_home_01 > .tab_item.tab_item_legend
{
	background: #DDDDDD;
	background: linear-gradient(90deg, rgba(221, 221, 221, 1) 0%, rgba(221, 221, 221, 0) 50%, rgba(221, 221, 221, 1) 100%);
}
.tab_home_01 > .tab_item.tab_item_legend img
{
	width:1.0em;
	margin-right: 0.2em;
}
.tab_home_01 > .tab_item.tab_item_legend .off
{
	display: inline-block;
}
.tab_home_01 > .tab_item.tab_item_legend .on
{
	display: none;
}

.tab_home_01 > .tab_item.active,
.tab_home_01 > .tab_item:hover
{
	background-color: #E2B82B;
	border-color: #E2B82B;
	color:#FFFFFF;
}
.tab_home_01 > .tab_item.tab_item_legend.active,
.tab_home_01 > .tab_item.tab_item_legend:hover
{
	background: #E2B82B;
	background: linear-gradient(90deg, rgba(226, 184, 43, 1) 0%, rgba(255, 215, 82, 1) 50%, rgba(226, 184, 43, 1) 100%);
}
.tab_home_01 > .tab_item.tab_item_legend.active .off,
.tab_home_01 > .tab_item.tab_item_legend:hover .off
{
	display: none;
}
.tab_home_01 > .tab_item.tab_item_legend.active .on,
.tab_home_01 > .tab_item.tab_item_legend:hover .on
{
	display: inline-block;
}

.tab_home_02
{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	width:100%;
	font-size:14px;
}
@media screen and (max-width: 767px) {
	.tab_home_02
	{
		font-size:11px;
	}
}
.tab_home_02 > .tab_item
{
	flex: 1 1 33.3333%;

	padding:1.0em;
	font-weight:bold;
	text-align: center;

	border-bottom: 3px solid #CCCCCC;

	cursor: pointer;
	position: relative;

	margin-bottom: 32px;
}

.tab_home_02 > .tab_item.active,
.tab_home_02 > .tab_item:hover
{
	border-color: #E2B82B;
	color:#E2B82B;
}
.tab_home_02 > .tab_item.active::after
{
	content:"";
	display:block;
	width:0px;
	height:0px;
	border:10px solid transparent;
	border-top:10px solid #E2B82B;

	position: absolute;
	top:calc(100% + 3px);
	left:calc(50% - 5px);
}


.heading_ranking
{
    margin-bottom: 2em;
	text-align: center;
}
.heading_ranking > span.label
{
	font-size:24px;
	font-weight: bold;
	color: #A8852D;
}
.none-ranking
{
	font-size: 18px;
	font-weight: bold;
}
.rank_list
{
	display: flex;
	flex-wrap: wrap;
	gap:16px;
}
.rank_item
{
	flex:0 0 100%;
	width:100%;
	font-size: 14px;

	border-bottom: 1px solid #CCCCCC;
	padding-bottom:16px;
}
.rank_item_no
{
	grid-area: no;
	place-self: center center;
	font-size: 34px;
	font-weight: bold;
	text-align: center;
}
.rank_item_no img
{
	width:34px;
	height:auto;
}
.rank_item_1 .rank_item_no
{
	color:#E2B82B;
}
.rank_item_2 .rank_item_no
{
	color:#A0A0A0;
}
.rank_item_3 .rank_item_no
{
	color:#d48033;
}
.rank_item.rank_item_over_11
{
	flex:0 0 calc(50% - 8px);
}

.rank_item.rank_item_user
{
	display: grid;
    grid-template:
	" no   ..... face ..... ..... " 0.5fr
	" no   ..... face ..... user_nm " auto
	" no   ..... face ..... profile " auto
	" no   ..... face ..... status " auto
	" no   ..... face ..... matching " auto
	" no   ..... face ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.rank_item_user .rank_item_face
{
	grid-area: face;
	place-self: center center;
}
.rank_item_user .rank_item_face .profile-img
{
	width: 135px;
    height: 135px;
    border: 3px solid #FEBFBF;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.rank_item.rank_item_over_11.rank_item_user .rank_item_face .profile-img
{
	width: 80px;
    height: 80px;
}

.rank_item_user .rank_item_user_nm
{
	grid-area: user_nm;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
}
.rank_item_user .rank_item_profile
{
	grid-area: profile;
	margin-bottom:0.5em;
	
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.rank_item.rank_item_over_11.rank_item_user .rank_item_profile
{
  display: none;
}
.rank_item_user .rank_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.rank_item_user .rank_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.rank_item_user .rank_item_matching
{
	grid-area: matching;
}
.rank_item_user .rank_item_matching img
{
	width:1.0em;
}

.rank_list_welfare .rank_item
{
	display: grid;
    grid-template:
	" no   ..... thumb ..... ..... " 0.5fr
	" no   ..... thumb ..... title " auto
	" no   ..... thumb ..... status " auto
	" no   ..... thumb ..... category " auto
	" no   ..... thumb ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.rank_item_welfare .rank_item_thumb
{
	grid-area: thumb;
	place-self: center center;
}
.rank_item_welfare .rank_item_thumb .profile-img
{
	width: 135px;
    height: 135px;
    border-radius: 1.0em;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.rank_item.rank_item_over_11.rank_item_welfare .rank_item_thumb .profile-img
{
	width: 80px;
    height: 80px;
}
.rank_item_welfare .rank_item_title
{
	grid-area: title;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
}
.rank_item_welfare .rank_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.rank_item_welfare .rank_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.rank_item_status_view img
{
	width: 1.0em;
	height: auto;
}
.rank_item_welfare .rank_item_category
{
	grid-area: category;
	margin-bottom:0.5em;
}
.rank_item_welfare .rank_item_category > span
{
	display: inline-block;
	background-color: #E4F0F3;
	padding: 0.5em 0.5em;
	border-radius: 1.0em;
}

.rank_list_community .rank_item
{
	display: grid;
    grid-template:
	" no   ..... thumb ..... ..... " 0.5fr
	" no   ..... thumb ..... title " auto
	" no   ..... thumb ..... profile " auto
	" no   ..... thumb ..... status " auto
	" no   ..... thumb ..... category " auto
	" no   ..... thumb ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.rank_list_community .rank_item_thumb
{
	grid-area: thumb;
	place-self: center center;
}
.rank_list_community .rank_item_thumb .profile-img
{
	width: 135px;
    height: 135px;
    border-radius: 1.0em;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.rank_item.rank_item_over_11 .rank_item_thumb .profile-img
{
	width: 80px;
    height: 80px;
}
.rank_list_community .rank_item_title
{
	grid-area: title;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
}
.rank_list_community .rank_item_profile
{
	grid-area: profile;
	margin-bottom:0.5em;

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.rank_item.rank_item_over_11.rank_list_community .rank_item_profile
{
  display: none;
}
.rank_list_community .rank_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.rank_list_community .rank_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.rank_item_status_view img
{
	width: 1.0em;
	height: auto;
}
.rank_list_community .rank_item_category
{
	grid-area: category;
	margin-bottom:0.5em;
}
.rank_list_community .rank_item_category > span
{
	display: inline-block;
	background-color: #E4F0F3;
	padding: 0.5em 0.5em;
	border-radius: 1.0em;
}

@media screen and (max-width: 767px) {
	.rank_item.rank_item_user
	{
		display: grid;
		grid-template:
		" no   ..... face ..... ..... " 0.5fr
		" no   ..... face ..... user_nm " auto
		" no   ..... face ..... profile " auto
		" no   ..... face ..... status " auto
		" no   ..... face ..... matching " auto
		" no   ..... face ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}
	.rank_list_welfare .rank_item
	{
		display: grid;
		grid-template:
		" no   ..... thumb ..... ..... " 0.5fr
		" no   ..... thumb ..... title " auto
		" no   ..... thumb ..... status " auto
		" no   ..... thumb ..... category " auto
		" no   ..... thumb ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}
	.rank_list_community .rank_item
	{
		display: grid;
		grid-template:
		" no   ..... thumb ..... ..... " 0.5fr
		" no   ..... thumb ..... title " auto
		" no   ..... thumb ..... profile " auto
		" no   ..... thumb ..... status " auto
		" no   ..... thumb ..... category " auto
		" no   ..... thumb ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}

	.tab_home_01
	{
		font-size:12px;
	}
	.heading_ranking > span.label
	{
		font-size:18px;
	}
	.rank_item_no
	{
		font-size: 24px;
	}
	.rank_item_no img
	{
		width:24px;
		height:auto;
	}
	.rank_item.rank_item_over_11
	{
		flex:0 0 calc(100%);
	}

	.rank_item_user .rank_item_face .profile-img
	{
		width: 70px !important;
		height: 70px !important;
	}

	.rank_item_welfare .rank_item_thumb .profile-img
	{
		width: 70px !important;
		height: 70px !important;
	}

	.rank_item_community .rank_item_thumb .profile-img
	{
		width: 70px !important;
		height: 70px !important;
	}
}

/* レジェンド */
.legend_list
{
	display: flex;
	flex-wrap: wrap;
	gap:16px;
}
.legend_item
{
	flex:0 0 100%;
	width:100%;
	font-size: 14px;

	padding:16px;

	box-shadow: 0px 5px 5px 0px #00000022;
	position: relative;
}
.legend_item::before
{
	content:"";
	position: absolute;
	top:10px;
	bottom:50%;
	right:10px;
	background-image: url(../img/home/legend/bg02.svg);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	width:20%;
	z-index: -1;
	transform: rotate(180deg);/* 回転 */
}
.legend_item::after
{
	content:"";
	position: absolute;
	top:50%;
	bottom:10px;
	left:10px;
	right:0;
	background-image: url(../img/home/legend/bg01.svg);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: contain;
	width:20%;
	z-index: -1;
}
.legend_item_no
{
	grid-area: no;
	place-self: center center;
	font-size: 34px;
	font-weight: bold;
	text-align: center;
}
.legend_item_no img
{
	width:34px;
	height:auto;
}
.legend_item_1 .legend_item_no
{
	color:#E2B82B;
}
.legend_item_2 .legend_item_no
{
	color:#A0A0A0;
}
.legend_item_3 .legend_item_no
{
	color:#7C5F40;
}

.legend_item.legend_item_user
{
	display: grid;
    grid-template:
	" no   ..... face ..... ..... " 0.5fr
	" no   ..... face ..... user_nm " auto
	" no   ..... face ..... profile " auto
	" no   ..... face ..... status " auto
	" no   ..... face ..... matching " auto
	" no   ..... face ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.legend_item_user .legend_item_face
{
	grid-area: face;
	place-self: center center;
}
.legend_item_user .legend_item_face .profile-img
{
	width: 135px;
    height: 135px;
    border: 3px solid #FEBFBF;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.legend_item_user .legend_item_user_nm
{
	grid-area: user_nm;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
	text-indent: -1.9em;
	padding-left: 1.5em;
}
.legend_item_user .legend_item_user_nm img
{
	width: 24px;
	height: auto;
	margin-right: 0.5em;
}
.legend_item_user .legend_item_profile
{
	grid-area: profile;
	margin-bottom:0.5em;

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.legend_item_user .legend_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.legend_item_user .legend_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.legend_item_user .legend_item_matching
{
	grid-area: matching;
}
.legend_item_user .legend_item_matching img
{
	width:1.0em;
}

.legend_list_welfare .legend_item
{
	display: grid;
    grid-template:
	" no   ..... thumb ..... ..... " 0.5fr
	" no   ..... thumb ..... title " auto
	" no   ..... thumb ..... status " auto
	" no   ..... thumb ..... category " auto
	" no   ..... thumb ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.legend_item_welfare .legend_item_thumb
{
	grid-area: thumb;
	place-self: center center;
}
.legend_item_welfare .legend_item_thumb .profile-img
{
	width: 135px;
    height: 135px;
    border-radius: 1.0em;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.legend_item_welfare .legend_item_title
{
	grid-area: title;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
	text-indent: -1.9em;
	padding-left: 1.5em;
}
.legend_item_welfare .legend_item_title img
{
	width: 24px;
	height: auto;
	margin-right: 0.5em;
}
.legend_item_welfare .legend_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.legend_item_welfare .legend_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.legend_item_status_view img
{
	width: 1.0em;
	height: auto;
}
.legend_item_welfare .legend_item_category
{
	grid-area: category;
	margin-bottom:0.5em;
}
.legend_item_welfare .legend_item_category > span
{
	display: inline-block;
	background-color: #E4F0F3;
	padding: 0.5em 0.5em;
	border-radius: 1.0em;
}

.legend_list_community .legend_item
{
	display: grid;
    grid-template:
	" no   ..... thumb ..... ..... " 0.5fr
	" no   ..... thumb ..... title " auto
	" no   ..... thumb ..... profile " auto
	" no   ..... thumb ..... status " auto
	" no   ..... thumb ..... category " auto
	" no   ..... thumb ..... ..... " 0.5fr
	/ auto 24px  auto 24px  1fr;
}
.legend_list_community .legend_item_thumb
{
	grid-area: thumb;
	place-self: center center;
}
.legend_list_community .legend_item_thumb .profile-img
{
	width: 135px;
    height: 135px;
    border-radius: 1.0em;
    -o-object-fit: cover;
    object-fit: cover;
	margin-bottom:0.5em;
}
.legend_list_community .legend_item_title
{
	grid-area: title;
	font-size: 18px;
	font-weight: bold;
	margin-bottom:0.5em;
	text-indent: -1.9em;
	padding-left: 1.5em;
}
.legend_list_community .legend_item_title img
{
	width: 24px;
	height: auto;
	margin-right: 0.5em;
}
.legend_list_community .legend_item_profile
{
	grid-area: profile;
	margin-bottom:0.5em;

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.legend_list_community .legend_item_status
{
	grid-area: status;
	margin-bottom:0.5em;
}
.legend_list_community .legend_item_status > *
{
	margin-right: 1.0em;
	margin-bottom:0.5em;
}
.legend_item_status_view img
{
	width: 1.0em;
	height: auto;
}
.legend_list_community .legend_item_category
{
	grid-area: category;
	margin-bottom:0.5em;
}
.legend_list_community .legend_item_category > span
{
	display: inline-block;
	background-color: #E4F0F3;
	padding: 0.5em 0.5em;
	border-radius: 1.0em;
}

@media screen and (max-width: 767px) {
	.legend_item::before
	{
		bottom:0;
	}
	.legend_item::after
	{
		top:0;
	}
	.legend_item.legend_item_user
	{
		display: grid;
		grid-template:
		" no   ..... face ..... ..... " 0.5fr
		" no   ..... face ..... user_nm " auto
		" no   ..... face ..... profile " auto
		" no   ..... face ..... status " auto
		" no   ..... face ..... matching " auto
		" no   ..... face ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}
	.legend_list_welfare .legend_item
	{
		display: grid;
		grid-template:
		" no   ..... thumb ..... ..... " 0.5fr
		" no   ..... thumb ..... title " auto
		" no   ..... thumb ..... status " auto
		" no   ..... thumb ..... category " auto
		" no   ..... thumb ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}
	.legend_list_community .legend_item
	{
		display: grid;
		grid-template:
		" no   ..... thumb ..... ..... " 0.5fr
		" no   ..... thumb ..... title " auto
		" no   ..... thumb ..... profile " auto
		" no   ..... thumb ..... status " auto
		" no   ..... thumb ..... category " auto
		" no   ..... thumb ..... ..... " 0.5fr
		/ auto 10px  auto 10px  1fr;
	}

	.tab_home_01
	{
		font-size:12px;
	}
	.heading_ranking > span.label
	{
		font-size:18px;
	}
	.legend_item_no
	{
		font-size: 24px;
	}
	.legend_item_no img
	{
		width:24px;
		height:auto;
	}
	.legend_item_user .legend_item_face .profile-img
	{
		width: 70px;
		height: 70px;
	}

	.legend_item_welfare .legend_item_thumb .profile-img
	{
		width: 70px;
		height: 70px;
	}

	.legend_item_community .legend_item_thumb .profile-img
	{
		width: 70px;
		height: 70px;
	}
}

/*マイページ リアルタイムランキング*/
.ranking_info
{
	background: #F7F7F7;
	margin: 20px 5rem;
	margin-top: 12rem;
	font-size:1.5rem;
	font-weight: bold;
	color:#666666;
	padding:1.0em;
	text-align: center;
}
.ranking_info + .selectBox
{
	margin-top: 30px !important;
}
.ranking_info .ranking_now
{
	font-size:1.8rem;
}
.ranking_info .ranking_no
{
	color:#AA852D;
}


/*
**************************************************
紹介文機能
**************************************************
*/
.introduction-list
{
	margin-top:20px;
}
.introduction-list > .list-not-found
{
	padding:15px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;

	border: 1px solid #CCCCCC;
}

.introduction-list > .introduction-item
{
	display: grid;
    grid-template:
	" face  ..... info ..... edit " auto
	/ 100px 20px  1fr  20px  auto;
	place-items: center stretch;
	padding:20px 0;
	border-bottom:1px solid #CCCCCC;
}
.introduction-list > .introduction-item > .user_img
{
	grid-area: face;
	width: 100px;
	height: 100px;
	cursor: pointer;
}
.introduction-list > .introduction-item > .info
{
	grid-area: info;
}
.introduction-list > .introduction-item > .info > .user_id
{
	font-size:1.2rem;
	margin-bottom:0.5em;
}
.introduction-list > .introduction-item > .info > .user_nm
{
	font-size:1.8rem;
	font-weight:bold;
	margin-bottom:1.0em;
}
.introduction-list > .introduction-item > .info > .message
{
	font-size:1.4rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.introduction-list > .introduction-item > .info > .message.none
{
	color:#999999;
}
.introduction-list > .introduction-item > .to-edit
{
	grid-area: edit;

	background-color:#51B2D7;
	border:1px solid #51B2D7;
	border-radius: 3.0em;
	line-height: 1;
	padding:1.0em;

	font-size:1.4rem;
	font-weight:bold;
	color:#FFFFFF;

	display: grid;
    grid-template:
	" icon  .....   label " auto
	/ 1.0em 0.25em  1fr ;
	place-items: center stretch;
}
.introduction-list > .introduction-item > .to-edit > .icon
{
	grid-area: icon;
}
.introduction-list > .introduction-item > .to-edit > .label
{
	grid-area: label;
}


@media screen and (max-width: 767px) {
	.introduction-list
	{
		margin-top:20px;
	}
	.introduction-list > .introduction-item
	{
		display: grid;
		grid-template:
		" face  ..... info  " auto
		" ..... ..... ..... " 1.0rem
		" edit  edit  edit  " auto
		/ 75px  20px  1fr ;
		place-items: center stretch;
		padding:20px 0;
		border-bottom:1px solid #CCCCCC;
	}
	.introduction-list > .introduction-item > .user_img
	{
		grid-area: face;
		width:75px;
		height:75px;
	}
	.introduction-list > .introduction-item > .info
	{
		grid-area: info;
	}
	.introduction-list > .introduction-item > .info > .user_nm
	{
		font-size:1.6rem;
		font-weight:bold;
		margin-bottom:1.0em;
	}
	.introduction-list > .introduction-item > .info > .message
	{
		font-size:1.6rem;
		
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.introduction-list > .introduction-item > .to-edit
	{
		grid-area: edit;

		background-color:#51B2D7;
		border:1px solid #51B2D7;
		border-radius: 3.0em;
		line-height: 1;
		padding:1.0em;

		font-size:1.4rem;
		font-weight:bold;
		color:#FFFFFF;

		display: grid;
		grid-template:
		" icon  .....   label " auto
		/ 1.0em 0.25em  1fr ;
		place-items: center stretch;
	}
	.introduction-list > .introduction-item > .to-edit > .icon
	{
		grid-area: icon;
	}
	.introduction-list > .introduction-item > .to-edit > .label
	{
		grid-area: label;
	}
}

.introductionEdit_ttl
{
	background-color:#CFE5F8;
	font-size: 18px;
    font-weight: 500;
	padding:0.8em;
	line-height: 1;
	border-radius: 0.25em;
}
.target-profile
{
	display: grid;
    grid-template:
	" face  ..... info ..... edit " auto
	/ 100px 20px  1fr  20px  auto;
	/* place-items: center stretch; */
	padding:20px 20px;
	border:1px solid #CCCCCC;
	border-radius:10px;
}
.target-profile > .user_img
{
	grid-area: face;
	width: 100px;
	height: 100px;
}
.target-profile > .info
{
	grid-area: info;
}
.target-profile > .info > .user_nm
{
	font-size:2.0rem;
	font-weight:bold;
	margin-bottom:1.0em;
}
.target-profile > .info > .status
{
	font-size:1.4rem;
	margin-bottom:1.0em;
}
.target-profile > .info > .message
{
	font-size:1.2rem;
}

.introduction-message-blk
{
	width: 100%;
    margin: 50px 0;
}
.introduction-message-blk > h3
{
	font-weight: bold;
    font-size: 2rem;
    margin-bottom: 10px;
}
.introduction-message-blk > .introduction-message-inner
{
	background-color:#F7F7F7;
	border-radius: 15px;
	padding: 15px;
}
.introduction-message-blk > .introduction-message-inner > .introductor
{
	display: grid;
    grid-template:
	" face  ..... name " auto
	/ 65px  15px  1fr;
	place-items: center stretch;
}
.introduction-message-blk > .introduction-message-inner > .introductor > .user_img
{
	grid-area: face;
	width: 65px;
	height: 65px;
	cursor: pointer;
}
.introduction-message-blk > .introduction-message-inner > .introductor > .introductor_nm
{
	grid-area: name;
	font-size: 1.4rem;
}
.introduction-message-blk > .introduction-message-inner > .introductor > .introductor_nm > .nm
{
	font-size: 1.8rem;
	font-weight: bold;
	display: inline-block;
	margin-right: 0.5em;
}
.introduction-message-blk > .introduction-message-inner > .message
{
	margin-top: 10px;
	font-size: 1.4rem;
	line-height: 1.25;
}
@media screen and (max-width: 767px) {
	.introduction-message-blk
	{
		margin-top: 0;
		padding: 0 5%;
	}
	.introduction-message-blk > h3
	{
		font-weight: bold;
		font-size: 2rem;
		margin-bottom: 10px;
	}
	.introduction-message-blk > .introduction-message-inner
	{
		background-color:#F7F7F7;
		border-radius: 15px;
		padding: 15px;
	}
	.introduction-message-blk > .introduction-message-inner > .introductor
	{
		display: grid;
		grid-template:
		" face  ..... name " auto
		/ 65px  15px  1fr;
		place-items: center stretch;
	}
	.introduction-message-blk > .introduction-message-inner > .introductor > .user_img
	{
		width: 65px;
		height: 65px;
	}
	.introduction-message-blk > .introduction-message-inner > .introductor > .introductor_nm
	{
		font-size: 1.4rem;
	}
	.introduction-message-blk > .introduction-message-inner > .introductor > .introductor_nm > .nm
	{
		display: block;
		margin-right: 0.0em;
		margin-bottom: 0.25em;
	}
	.introduction-message-blk > .introduction-message-inner > .message
	{
	}
}


.online-topics-box2
{
	display: grid;
	grid-template:
	" icon  ..... date  ..... new   " auto
	" icon  ..... ..... ..... ..... " 5px
	" icon  ..... title title title " auto
	/ auto  15px  auto  10px  1.0fr;
	place-items: center stretch;

	padding:20px;
	border:2px solid #27A1CD;

	font-size:14px;

	background-color: #F7F7F7;
}
.online-topics-box2 > .icon
{
	grid-area: icon;
}
.online-topics-box2 > .date
{
	grid-area: date;
	font-size:12px;
}
.online-topics-box2 > .new
{
	grid-area: new;
}
.online-topics-box2 > .new > .badge
{
	display: inline-block;
	padding:0.2em 0.5em;
	color: #FFFFFF;
	background-color: #F43C30;
	border-radius: 0.8em;
	line-height: 1;
}
.online-topics-box2 > .title
{
	grid-area: title;
	font-size:14px;
	font-weight:bold;

	line-height: 1.2;
}
.online-topics-box2 > .title > a
{
	color: #707070;
	font-weight:bold;
}

/* カードポップアップ */
#card-wrapper
{
	display: none;
}
body.showCard #card-wrapper
{
	z-index: 9000;

	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;

	background-color:rgba(0,0,0,0.3);

	display: grid;
	grid-template:
	" ..... .....   ..... " 1fr
	" ..... content ..... " auto
	" ..... .....   ..... " 1fr
	/ 1fr   auto    1fr;
}

#card-wrapper .card-container
{
	grid-area: content;
	max-height: 600px;
	max-width: 320px;

	display: grid;
	grid-template:
	" close " auto
	" ..... " 10px
	" body " 1fr
	" ..... " 10px
	" ope " auto
	/ 1fr;
}
#card-wrapper .card-container .card-container-close
{
	grid-area: close;
	font-size:36px;
	font-weight: bold;
	color:#FFFFFF;
	text-align: right;
}
#card-wrapper .card-container .card-container-close span
{
	cursor: pointer;
}
#card-wrapper .card-container .card-body
{
	width:320px;
	grid-area: body;
	border-radius: 10px;
	background-color: #FFFFFF;
	padding:20px;
}
#card-wrapper .card-container .card-body .card-suggest-title
{
	border-bottom: 2px solid #27A1CD;
	padding:10px;
	font-size:16px;
	font-weight: bold;
	text-align: center;
}
#card-wrapper .card-container .card-body .card-suggest-link
{
	padding:10px 0;
	text-align: right;
}
#card-wrapper .card-container .card-body .card-suggest-link a
{
	display: inline-block;
	color:#AB852D;
	text-decoration: none;
	font-size: 12px;
	
	padding-bottom:0.25em;
	border-bottom: 1px solid #AB852D;
}
#card-wrapper .card-container .card-body .card-suggest-link a:hover
{
	border-bottom: 1px solid transparent;
}
#card-wrapper .card-container .card-body .card-suggest-link a img
{
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.25em;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .user-face
{
	text-align: center;
	position: relative;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .user-face .profile-img
{
	border-radius: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	width:150px;
	border:3px solid #FFFFFF;
	margin:0 auto;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .user-face .like-btn
{
	width:56px;
	position:absolute;
	bottom:0;
	left:calc(50% + 40px);
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .user-name
{
	text-align: center;
	margin-top:10px;
	font-size:16px;
	font-weight:bold;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .profile
{
	margin-top: 10px;
	font-size:12px;
	line-height: 1.25;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .status-list
{
	margin-top: 10px;
	font-size:12px;
	
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .status-list .status-item
{
	margin:2px;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .status-list .status-item.address
{
	white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari用 */
    -o-text-overflow: ellipsis; /* Opera用 */
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .status-list .status-item + .status-item
{
	margin-left: 10px;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .aim
{
	margin-top:10px;

	display: grid;
	grid-template:
	" label list " auto
	/ auto  1fr;

	font-size: 12px;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .aim .label
{
	grid-area: label;
	line-height: 1;
	padding:3px;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .aim .aim-list
{
	grid-area: list;
}
#card-wrapper .card-container .card-body .card-suggest-list .card-suggest-list-item .aim .aim-list .aim-list-item
{
	margin-right: 5px;
	margin-bottom: 5px;
	line-height: 1;
	color:#FFFFFF;
	padding:3px;
	background-color: #9A7D2E;
	border-radius: 3px;
}
#card-wrapper .card-container .card-ope
{
	grid-area: ope;
	color:#FFFFFF;

	display: grid;
	grid-template:
	" prev page next " auto
	/ auto 1fr  auto;

	place-items: center stretch;
}
#card-wrapper .card-container .prev
{
	grid-area: prev;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
}
#card-wrapper .card-container .next
{
	grid-area: next;
	font-size: 26px;
	font-weight: bold;
	cursor: pointer;
}
#card-wrapper .card-container .page
{
	grid-area: page;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}

.select-format2
{
	display: grid;
    grid-template:
	" format .....  type   .....  commit " auto 
	/ 1fr    0.25em 1fr    0.25em auto;
    
	font-size: 16px;
    background-color: #EFEFEF;
    border-radius: 0.25em;
    padding: 0.25em;
}
.select-format2 .format
{
    grid-area: format;
    place-items: center;
    padding: 0.5em;
}
.select-format2 .type
{
    grid-area: type;
    place-items: center;
    padding: 0.5em;
}
.select-format2 .commit
{
	grid-area: commit;
    place-items: center;
    padding: 0.5em;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

.btn-list
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}
.help-blue-btn
{
	flex: 1 1 auto;
	border-radius: 1.5em;
	border: 2px solid #29A1CE;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	padding:0.5em;
	color:#29A1CE;
}


/* 福利厚生の新着表示 */
.welfareOver_list .welfare-pic
{
	position: relative;
}
.welfareOver_list .welfare-pic > .isNew
{
	border-radius: 15px 0px 15px 0px;
	background-color:#FF0000;
	color:#FFFFFF;
	font-size:12px;
	padding:0.25em 1.0em;
	position: absolute;
	top:0;
	left:0;
}

/* プロフ編集 リンクボタン */
.prf-usage .btn-list a
{
	flex:1 0 calc(33.3333% - 15px);
	margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
	.prf-usage .btn-list
	{
		gap:10px;
	}
	.prf-usage .btn-list a
	{
		flex:1 0 calc(33.3333% - 10px);
		font-size: 12px;
	}
}


/* メッセージ入力欄の高さ調整 */
.community-thread .thread-input .content-up-area-input textarea
{
	max-height:15em;
}
@media screen and (max-width: 767px) {
	.community-thread .thread-input .content-up-area-input textarea
	{
		max-height:7em;
	}
	.community-thread .thread-input .content-up-area
	{
		padding-top:5px;
		padding-bottom:5px;
	}
}


/* フッター */
footer
{
	z-index:1000;
}

/* ミニブログヘッダの修正 */
.tmp_posts_header
{
	display: grid;
	grid-template:
	" btn  ..... cond01 cond02 " auto
	" word word  word   word" auto
	/ auto 1fr   auto   auto;
	gap:10px;
	margin-top:10px;
	place-items: center stretch;
}
.tmp_posts_header-btn
{
	grid-area: btn;
}
.tmp_posts_header-btn > .btnPost
{
	width:auto;
	padding-left: 16px;
	padding-right: 16px;
}
.tmp_posts_header-cond01
{
	grid-area: cond01;
}
.tmp_posts_header-cond02
{
	grid-area: cond02;
}
.tmp_posts_header-cond01 > .order-select-box,
.tmp_posts_header-cond02 > .order-select-box
{
	margin-top: 0;
}
.tmp_posts_header-word
{
	grid-area: word;
}
.tmp_posts_header-word > .text-input.search
{
	padding:10px;
	height:auto;
}
.tmp_posts_header-word > .text-input.search > a
{
	right:15px;
}
.tmp_posts_header-word > .text-input.search > input
{
	padding:1px;
}
.tmp_posts_header-word > .posts_search_condition_type
{
	padding:10px 0;
	font-size:16px;

	display:grid;
	grid-template:
	" reset  ..... word " auto
	/ auto    10px  1fr;

	place-items: center start;
}
.tmp_posts_header-word > .posts_search_condition_type > .btnResetCondition
{
	grid-area: reset;

	background-color: #707070;
	border-radius: 100%;

	width:24px;
	height: 24px;

	color: #FFFFFF;
}
.tmp_posts_header-word > .posts_search_condition_type > .posts_search_condition_word
{
	grid-area: word;
	font-weight:500;
}
.tmp_posts_header-word > .order-condition
{
	margin-top:15px;
	font-size: 14px;
	font-weight: 500;
}

@media screen and (max-width: 767px) {
	.tmp_posts_header
	{
		display: grid;
		grid-template:
		" btn    btn    .....  ....." auto
		" cond01 cond01 cond02 cond02" auto
		" word   word   word   word" auto
		/ 0.30fr 0.20fr 0.25fr 0.25fr;
		gap:10px;
		margin-top:10px;
		place-items: center stretch;
	}
	.tmp_posts_header .order-select-box select
	{
		width: 100%;
	}
}

/* ミニブログ投稿画面改修 */
.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk
{
	flex:0 1 calc(33.333% - 12px);
	max-width: none;
	max-height: none;
	aspect-ratio: 1 / 1;
}
.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk:first-child
{
	flex:1 1 100%;
	max-width: none;
	max-height: none;
	aspect-ratio: 1 / 1;
}
.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview
{
	width: 100%;
	height: auto;
	max-width: none;
	max-height: none;
	aspect-ratio: 1 / 1;
}
.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview > label
{
	display: block;
	position:relative;
}
.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview > label > span
{
    max-width: none;
    max-height: none;
    padding: 0 0;

    width: auto;
    height: auto;

	position:absolute;
	top:50%;
	left:50%;

	transform: translate(-50%, -50%);
}
.miniblog-blk-form .conditions-area
{
	margin-top:20px;
}
@media screen and (max-width: 767px) {
	.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk
	{
		flex:0 1 calc(33.333% - 12px);
		max-width: none;
		max-height: none;
		aspect-ratio: 1 / 1;
	}
	.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk:first-child
	{
		flex:1 1 100%;
		max-width: none;
		max-height: none;
		aspect-ratio: 1 / 1;
	}
	.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview
	{
		width: 100%;
		height: auto;
		max-width: none;
		max-height: none;
		aspect-ratio: 1 / 1;
	}
	.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview > label
	{
		display: block;
		position:relative;
	}
	.miniblog-blk-form-gallery.timeline > .miniblog-blk-form-gallery-blk .image-preview > label > span
	{
		max-width: none;
		max-height: none;
		padding: 0 0;

		width: auto;
		height: auto;

		position:absolute;
		top:50%;
		left:50%;

		transform: translate(-50%, -50%);
	}
}

/* ミニブログ 一覧画面改修 */
.tmp_posts_header-word > .text-input.search > input
{
	width: 100%;
}
.posts-list-blk.post-list-mod
{
	position: relative;
}
.posts-list .post-list-mod .ttl
{
	position: relative;
	z-index: 999;
}
.posts-list .ttl .post_header
{
	flex: 0 0 100%;

	display:grid;
	grid-template:
	" author  ..... ope " auto
	/ 1fr     10px  auto;
}
.posts-list .ttl .post_header > .post_author
{
	grid-area: author;
	display:grid;
	grid-template:
	" user_face  ..... user_name " auto
	" user_face  ..... .....     " 5px
	" user_face  ..... post_date " auto
	/ 5rem       10px  1fr;
}
.posts-list .ttl .post_header > .post_author > .post_author-user_face
{
	grid-area: user_face;
	place-self: center stretch;
}
.posts-list .ttl .post_header > .post_author > .post_author-user_name
{
	grid-area: user_name;
	color: #29A1CE;
	font-size: 2rem;
	font-weight: 500;
	place-self: end stretch;
}
.posts-list .ttl .post_header > .post_author > .post_author-post_date
{
	grid-area: post_date;
	font-size:0.8em;
	place-self: start stretch;
}
.posts-list .ttl .post_header > .post_ope
{
	grid-area: ope;
}
.posts-list .ttl .post_header > .post_ope > .btn_ope
{
	width:32px;
	height:32px;

	border-radius: 100%;
	background-color: #707070;

	display: flex;
	justify-content: center;
	place-items: center;
	position: relative;
}
.posts-list .ttl .post_header > .post_ope > .btn_ope > img
{
	width:auto;
	height: auto;
}
.posts-list .ttl .post_header > .post_ope > .btn_ope > .balloon
{
	position: absolute;
	top:calc(100% + 2px);
	right:0;

	padding:10px;
	background-color: #FFFFFF;
	border:1px solid #707070;
	border-radius: 5px;
	white-space: nowrap;

	display: none;
}
.posts-list .ttl .post_header > .post_ope > .btn_ope:focus-within > .balloon
{
	display: block;
}
.posts-list .post-list-mod .posts-list-txt
{
	margin-top: 10px;
}


/* ストーリー 一覧画面*/

/* ==========================================================================
   ストーリー : 投稿者一覧
   ※共通CSSとの重複を避けるため、必ず .story_author_list 配下で定義する
   ========================================================================== */
.story_author_list {
    position: relative;
    width: 100%;
    margin: 8px 0 16px;
}

.story_author_list .author_scroller {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.story_author_list .author_scroller::-webkit-scrollbar {
    display: none;
}

/* PC表示用の横スクロールボタン(スマートフォンはスワイプで操作するため非表示) */
.story_author_list .author_nav {
    display: none;
}

.story_author_list .author_item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 72px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.story_author_list .author_thumb {
    display: block;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    box-sizing: border-box;
    transition: opacity .2s;
}

/* ボーダーカラーは投稿者の color を style 属性で上書きする */
.story_author_list .author_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border: 3px solid #d9d9d9;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
    background: #fff;
}

/* 閲覧済みの投稿者は薄く表示 */
.story_author_list .author_item.is-viewed .author_thumb {
    opacity: .45;
}

/* 表示中の投稿者は常にはっきり表示 */
.story_author_list .author_item.is-selected .author_thumb {
    opacity: 1;
}

.story_author_list .author_name {
    display: block;
    max-width: 72px;
    overflow: hidden;
    color: #555;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story_author_list .author_item.is-selected .author_name {
    color: #333;
    font-weight: 700;
}

/* 自分と他ユーザの区切り線 */
.story_author_list .author_divider {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 48px;
    margin: 0 2px;
    background: #d9d9d9;
}

.story_author_list .author_loading {
    flex: 0 0 auto;
    align-self: center;
    color: #999;
    font-size: 12px;
}


/* ==========================================================================
   ストーリー : 投稿画像表示エリア
   ※共通CSSとの重複を避けるため、必ず .story_gallery 配下で定義する
   ========================================================================== */
.story_gallery {
    position: relative;
    width: 100%;
    margin: 0 auto 32px;
}

.story_gallery .gallery_viewer {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 260px);
    overflow: hidden;
    background: #1a1a1a;
    /* 縦スクロールはブラウザに任せ、横方向のみスワイプ判定に使う */
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

/* --- 投稿画像 --- */
.story_gallery .gallery_media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 背景 : 投稿画像をcoverで敷き、ぼかして暗く表示する */
.story_gallery .gallery_bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(.5);
    transform: scale(1.15);
    pointer-events: none;
    -webkit-touch-callout: none;
}

.story_gallery .gallery_image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* --- オーバーレイ --- */
.story_gallery .gallery_overlay {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

.story_gallery .gallery_overlay.is-top {
    top: 0;
    padding: 10px 12px 24px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
}

.story_gallery .gallery_overlay.is-bottom {
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 32px 12px 14px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 100%);
}

/* --- 同一人物の複数投稿インジケータ --- */
.story_gallery .gallery_progress {
    display: flex;
    gap: 4px;
    width: 100%;
}

.story_gallery .gallery_progress_item {
    position: relative;
    flex: 1 1 0;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .4);
}

.story_gallery .gallery_progress_bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: #fff;
}

/* --- 投稿者名・投稿時間 --- */
.story_gallery .gallery_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}

.story_gallery .gallery_user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
    text-decoration: none;
}

.story_gallery .gallery_user_thumb {
    flex: 0 0 auto;
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

/* ボーダーカラーは投稿者の color を style 属性で上書きする */
.story_gallery .gallery_user_thumb img {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
}

.story_gallery .gallery_user_name {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.story_gallery .gallery_user_time {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* --- メニューボタン --- */
.story_gallery .gallery_menu {
    position: relative;
    flex: 0 0 auto;
}

.story_gallery .gallery_menu_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.story_gallery .gallery_menu_btn i {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

.story_gallery .gallery_menu_tip {
    position: absolute;
    top: 38px;
    right: 0;
    z-index: 5;
    min-width: 120px;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.story_gallery .gallery_menu_tip_item {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: none;
    background: none;
    color: #333;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.story_gallery .gallery_menu_tip_item + .gallery_menu_tip_item {
    border-top: 1px solid #eee;
}

.story_gallery .gallery_menu_tip_item:hover {
    background: #f5f5f5;
}

.story_gallery .gallery_menu_tip_item.is-delete {
    color: #e0364f;
}

/* --- 前・次の投稿 --- */
.story_gallery .gallery_nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background .2s;
}

.story_gallery .gallery_nav:hover {
    background: #fff;
}

.story_gallery .gallery_nav.is-prev {
    left: 10px;
}

.story_gallery .gallery_nav.is-next {
    right: 10px;
}

.story_gallery .gallery_nav span {
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2px solid #555;
    border-right: 2px solid #555;
}

.story_gallery .gallery_nav.is-prev span {
    margin-left: 3px;
    transform: rotate(-135deg);
}

.story_gallery .gallery_nav.is-next span {
    margin-right: 3px;
    transform: rotate(45deg);
}

/* --- 投稿者のコメント --- */
.story_gallery .gallery_comment {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 76%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .82);
    color: #333;
    font-size: 13px;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
}

/* --- 投稿へのいいね --- */
.story_gallery .gallery_like_area {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-bottom: 2px;
}

.story_gallery .gallery_like {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border: none;
    background: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.story_gallery .gallery_like:disabled {
    cursor: default;
}

.story_gallery .gallery_like_icon {
    display: block;
    width: 30px;
    height: 30px;
    fill: rgba(255, 255, 255, .55);
    stroke: #fff;
    stroke-width: 1.4;
    transition: fill .2s, transform .2s;
}

.story_gallery .gallery_like.is-liked .gallery_like_icon {
    fill: #ff2d78;
    stroke: #ff2d78;
    transform: scale(1.08);
}

.story_gallery .gallery_like_count {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* --- 読み込み中 / 投稿なし --- */
.story_gallery .gallery_state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    min-height: 320px;
    margin: 0 auto;
    background: #f2f2f2;
}

.story_gallery .gallery_state_text {
    margin: 0;
    color: #888;
    font-size: 13px;
}


/* ==========================================================================
   ストーリー : レスポンシブ
   ========================================================================== */
@media screen and (min-width: 768px) {

    .story_author_list .author_nav {
        position: absolute;
        top: 36px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        padding: 0;
        border: 1px solid #e0e0e0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

    .story_author_list .author_nav.is-prev {
        left: -4px;
    }

    .story_author_list .author_nav.is-next {
        right: -4px;
    }

    .story_author_list .author_nav span {
        display: block;
        width: 8px;
        height: 8px;
        border-top: 2px solid #555;
        border-right: 2px solid #555;
    }

    .story_author_list .author_nav.is-prev span {
        margin-left: 3px;
        transform: rotate(-135deg);
    }

    .story_author_list .author_nav.is-next span {
        margin-right: 3px;
        transform: rotate(45deg);
    }

}

@media screen and (max-width: 767px) {

    .story_author_list .author_scroller {
        gap: 10px;
    }

    .story_author_list .author_item {
        width: 64px;
    }

    .story_author_list .author_thumb {
        width: 58px;
        height: 58px;
    }

    .story_gallery .gallery_viewer {
        max-width: 100%;
        max-height: calc(100vh - 220px);
    }

    .story_gallery .gallery_nav {
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }

    .story_gallery .gallery_nav.is-prev {
        left: 6px;
    }

    .story_gallery .gallery_nav.is-next {
        right: 6px;
    }

    .story_gallery .gallery_comment {
        font-size: 12px;
    }

    .story_gallery .gallery_state {
        max-width: 100%;
    }

}


/* タブのCSS */
.tab_home_01
{
	border-bottom:1px solid #CCCCCC;

	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	gap:0.5em;

	width:100%;

	font-size:16px;
}

.tab_home_01 > .tab_item
{
	flex: 1 1 33.3333%;

	padding:1.0em;
	font-weight:bold;
	text-align: center;

	border:1px solid #CCCCCC;
	border-bottom: none;
	border-radius: 0.5em 0.5em 0 0;

	cursor: pointer;
}
.tab_home_01 > .tab_item.tab_item_legend
{
	background: #DDDDDD;
	background: linear-gradient(90deg, rgba(221, 221, 221, 1) 0%, rgba(221, 221, 221, 0) 50%, rgba(221, 221, 221, 1) 100%);
}
.tab_home_01 > .tab_item.tab_item_legend img
{
	width:1.0em;
	margin-right: 0.2em;
}
.tab_home_01 > .tab_item.tab_item_legend .off
{
	display: inline-block;
}
.tab_home_01 > .tab_item.tab_item_legend .on
{
	display: none;
}

.tab_home_01 > .tab_item.active,
.tab_home_01 > .tab_item:hover
{
	background-color: #E2B82B;
	border-color: #E2B82B;
	color:#FFFFFF;
}
.tab_home_01 > .tab_item.tab_item_legend.active,
.tab_home_01 > .tab_item.tab_item_legend:hover
{
	background: #E2B82B;
	background: linear-gradient(90deg, rgba(226, 184, 43, 1) 0%, rgba(255, 215, 82, 1) 50%, rgba(226, 184, 43, 1) 100%);
}
.tab_home_01 > .tab_item.tab_item_legend.active .off,
.tab_home_01 > .tab_item.tab_item_legend:hover .off
{
	display: none;
}
.tab_home_01 > .tab_item.tab_item_legend.active .on,
.tab_home_01 > .tab_item.tab_item_legend:hover .on
{
	display: inline-block;
}

/* バッジ関連 */

/* =========================================================
   会員ステータスブロック
   会員ID／いいねをもらった数／取得バッジ（＋欄外右上に最終アクセス）
   ---------------------------------------------------------
   配置：.saerch-profileblk-profile-slider > .mamber-status 内
   ========================================================= */

.member-status-blk {
	--ms-border: #e3e6eb;
	--ms-bg: #fff;
	--ms-badge-bg: #f7f8fa;
	--ms-label: #8b9199;
	--ms-text: #333;
	--ms-accent: #1a73e8;

	position: relative;
	box-sizing: border-box;
	margin-top: 0;
	padding: 14px 16px;
	border: 1px solid var(--ms-border);
	border-radius: 8px;
	background: var(--ms-bg);
	color: var(--ms-text);
	font-size: 13px;
	line-height: 1.5;
}

.member-status-blk *,
.member-status-blk *::before,
.member-status-blk *::after {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   最終アクセス（パネル外・右上／.member-status-blk の兄弟要素）
   --------------------------------------------------------- */

.member-status-blk-access {
	margin: 12px 0 4px;
	padding: 0;
	color: #8b9199;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	text-align: right;
	white-space: nowrap;
	background: none;
	border: none;
}

.member-status-blk-access-label::after {
	content: "：";
}

.member-status-blk-access-value.is-empty {
	color: #b5bac1;
}


/* ---------------------------------------------------------
   数値系ステータス（会員ID／いいね）
   --------------------------------------------------------- */

.member-status-blk-info {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.member-status-blk-info-item {
	/* ※ flex-column にすると値と単位が別行になるため block で組む */
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	padding: 0 16px;
	border-left: 1px solid var(--ms-border);
}

.member-status-blk-info-item:first-child {
	padding-left: 0;
	border-left: none;
}

.member-status-blk-info-item-label {
	display: block;
	margin-bottom: 2px;
	color: var(--ms-label);
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
}

/* 値＋単位を1行に固定するためのラッパー */
.member-status-blk-info-item-body {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	white-space: nowrap;
}

.member-status-blk-info-item-value {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

/* 数値（会員ID・いいね数）は桁が揃うように等幅数字で表示 */
.member-status-blk-info-item-value.is-num {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.member-status-blk-info-item-unit {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ms-label);
	white-space: nowrap;
}

/* 会員ID：最大10桁ぶんの幅を確保して、桁数でレイアウトが動かないようにする */
.member-status-blk-info-item.is-id .member-status-blk-info-item-value {
	display: inline-block;
	min-width: 10ch;
}

.member-status-blk-info-item.is-like .member-status-blk-info-item-value {
	color: var(--ms-accent);
}


/* ---------------------------------------------------------
   取得バッジ
   ---------------------------------------------------------
   表示スタイルは .member-status-blk-badge に付けるクラスで切り替える。
     ・is-style-pill … 現行案（アイコン＋バッジ名を横並びのピル型）
     ・is-style-tile … 検討案（アイコンをメインに大きく／下にバッジ名）
   --------------------------------------------------------- */

.member-status-blk-badge {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--ms-border);
}

.member-status-blk-badge-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.member-status-blk-badge-item {
	display: inline-flex;
	max-width: 100%;
}

/* アイコン枠（画像は別途受領予定。受領までは枠のみ表示） */
.member-status-blk-badge-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: #e4e8ee;
	overflow: hidden;
}

.member-status-blk-badge-item-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.member-status-blk-badge-item-name {
	font-weight: 700;
	line-height: 1.3;
}


/* ===== 現行案：ピル型（アイコン＋名称を横並び） ===== */

.member-status-blk-badge.is-style-pill .member-status-blk-badge-list {
	gap: 8px;
}

.member-status-blk-badge.is-style-pill .member-status-blk-badge-item {
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 6px;
	border: 1px solid var(--ms-border);
	border-radius: 999px;
	background: var(--ms-badge-bg);
}

.member-status-blk-badge.is-style-pill .member-status-blk-badge-item-icon {
	width: 26px;
	height: 26px;
}

.member-status-blk-badge.is-style-pill .member-status-blk-badge-item-name {
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ===== 検討案：タイル型（アイコンをメインに／下に名称） ===== */

.member-status-blk-badge.is-style-tile .member-status-blk-badge-list {
	gap: 16px 20px;
}

.member-status-blk-badge.is-style-tile .member-status-blk-badge-item {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 88px;
	padding: 0;
	border: none;
	background: none;
}

.member-status-blk-badge.is-style-tile .member-status-blk-badge-item-icon {
	width: 56px;
	height: 56px;
	border: 1px solid var(--ms-border);
	background: #eff2f6;
}

.member-status-blk-badge.is-style-tile .member-status-blk-badge-item-name {
	font-size: 11px;
	text-align: center;
	white-space: normal;
	word-break: break-word;
}


/* ---------------------------------------------------------
   SP
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.member-status-blk {
		margin-top: 0;
		padding: 12px;
	}

	.member-status-blk-access {
		margin-top: 10px;
		font-size: 10px;
	}

	.member-status-blk-info-item {
		flex: 0 1 auto;
		padding: 0 12px;
	}

	.member-status-blk-info-item.is-id .member-status-blk-info-item-value {
		min-width: 0;
	}

	.member-status-blk-info-item-value {
		font-size: 14px;
	}

	/* ピル型 */
	.member-status-blk-badge.is-style-pill .member-status-blk-badge-item {
		padding: 4px 10px 4px 5px;
	}

	.member-status-blk-badge.is-style-pill .member-status-blk-badge-item-icon {
		width: 22px;
		height: 22px;
	}

	.member-status-blk-badge.is-style-pill .member-status-blk-badge-item-name {
		font-size: 11px;
	}

	/* タイル型 */
	.member-status-blk-badge.is-style-tile .member-status-blk-badge-list {
		gap: 14px 16px;
	}

	.member-status-blk-badge.is-style-tile .member-status-blk-badge-item {
		width: 72px;
	}

	.member-status-blk-badge.is-style-tile .member-status-blk-badge-item-icon {
		width: 48px;
		height: 48px;
	}

	.member-status-blk-badge.is-style-tile .member-status-blk-badge-item-name {
		font-size: 10px;
	}
}


/* =========================================================
   バッジについて（ヘルプ）
   ========================================================= */

/* ---------------------------------------------------------
   バッジ欄ヘッダー／ヘルプボタン
   --------------------------------------------------------- */

.member-status-blk-badge-head {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 10px;
}

.member-status-blk-badge-help-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid var(--ms-border);
	border-radius: 999px;
	background: #fff;
	color: #6b7179;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

.member-status-blk-badge-help-btn:hover {
	border-color: #c9ced6;
	background: #f2f4f7;
	color: #333;
}

.member-status-blk-badge-help-btn-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #b5bac1;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}


/* ---------------------------------------------------------
   ポップアップ
   --------------------------------------------------------- */

.member-badge-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.member-badge-modal-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .45);
}

.member-badge-modal-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 520px;
	max-height: 80vh;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	box-sizing: border-box;
	overflow: hidden;
}

.member-badge-modal-inner *,
.member-badge-modal-inner *::before,
.member-badge-modal-inner *::after {
	box-sizing: border-box;
}

.member-badge-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 0 auto;
	padding: 14px 16px;
	border-bottom: 1px solid #e3e6eb;
}

.member-badge-modal-ttl {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
}

.member-badge-modal-close {
	flex: 0 0 auto;
	position: relative;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #f2f4f7;
	cursor: pointer;
	appearance: none;
}

.member-badge-modal-close:hover {
	background: #e4e8ee;
}

/* 閉じるテキストは読み上げ用に残して視覚的には×アイコン表示 */
.member-badge-modal-close span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.member-badge-modal-close::before,
.member-badge-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1px;
	background: #666;
}

.member-badge-modal-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.member-badge-modal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.member-badge-modal-body {
	flex: 1 1 auto;
	padding: 16px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.member-badge-modal-lead {
	margin: 0 0 14px;
	color: #6b7179;
	font-size: 12px;
	line-height: 1.6;
}


/* ---------------------------------------------------------
   バッジ一覧（名称＋付与条件）
   --------------------------------------------------------- */

.member-badge-help-list {
	margin: 0;
	padding: 0;
}

.member-badge-help-item {
	padding: 12px 0;
	border-top: 1px solid #eef0f3;
}

.member-badge-help-item:first-child {
	padding-top: 0;
	border-top: none;
}

.member-badge-help-item-ttl {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}

/* アイコン枠（画像は別途受領予定。受領までは枠のみ表示） */
.member-badge-help-item-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border: 1px solid #e3e6eb;
	border-radius: 50%;
	background: #eff2f6;
	overflow: hidden;
}

.member-badge-help-item-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.member-badge-help-item-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #333;
}

.member-badge-help-item-desc {
	margin: 0 0 0 40px;
	color: #6b7179;
	font-size: 12px;
	line-height: 1.6;
}


/* ---------------------------------------------------------
   SP
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.member-status-blk-badge-head {
		margin-bottom: 8px;
	}

	.member-badge-modal {
		padding: 16px;
	}

	.member-badge-modal-inner {
		max-height: 84vh;
	}

	.member-badge-modal-body {
		padding: 14px;
	}

	.member-badge-help-item-icon {
		width: 28px;
		height: 28px;
	}

	.member-badge-help-item-desc {
		margin-left: 36px;
		font-size: 11px;
	}
}