.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.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;
}

.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-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
{
	color:#AB852D;
	text-decoration: none;
	font-size: 12px;
}
#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: 24px;
	cursor: pointer;
}
#card-wrapper .card-container .next
{
	grid-area: next;
	font-size: 24px;
	cursor: pointer;
}
#card-wrapper .card-container .page
{
	grid-area: page;
	font-size: 16px;
	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;
}