@charset "utf-8";
/***************************************************
information
  filename : list_parts.css;
***************************************************/

/*======== app_listpt_dez.css ========*/
/******************************************* リスト *******************************************/

/* ** list_basic start ** */
/*** 01: リスト要素共通設定 ***/

/********* リスト一覧(カテゴリ画像表示) *********/
.cateVisualArea {}
.cateVisual {width: 100%;margin: 0 auto;padding: 0;text-align: center;}
.cateVisual img {width: clamp(100%, 1vw, 100%);margin: 0px auto;}

/********* リスト一覧(共通) *********/
.ListBox .column {width: 100%;padding: 0;}
.clmDetail {margin-top: 1.5%;margin-bottom: 3%;padding: 0 1.5% 1.5% 1.5%;}/* 要素毎の仕切り処理基本 */
@media screen and (max-width: 1100px) {.ListBox {padding: 0 2.0rem;}}
.ListTSgle {}
.tpl-1st-block {}
.tpl-1st-block dl {}
.tpl-1st-block dl.clmDetail {}
.ListTSgle .tpl-1st-block {padding: 0;}

/********* リスト一覧(高さ設定) *********/
/* タイトル */
.ellipsis .ListBox.ListType1 .column .ListMainTitle {position: relative;text-align: left;text-overflow: ellipsis;margin:auto;}
.ellipsis .ListBox.ListType1 .column .ListMainTitle::before,
.ellipsis .ListBox.ListType1 .column .ListMainTitle::after {content: '...';line-height: 1;position: absolute;right: 0;top: 2em;-ms-wrap-flow: start;}
.ellipsis .ListBox.ListType1 .column .ListMainTitle::after {background: currentColor;color: white;top: auto;}
.ellipsis .ListBox .column p.txt,
.ellipsis .ListBox .column .person .prof {overflow: hidden;position: relative;text-overflow: ellipsis;width:100%;margin:auto;text-align: left;}
.ellipsis .ListBox .column p.txt::before,
.ellipsis .ListBox .column p.txt::after,
.ellipsis .ListBox .column .person .prof::before,
.ellipsis .ListBox .column .person .prof::after {content: '...';line-height: 1;position: absolute;right: 0;top: 3em;-ms-wrap-flow: start;}
.ellipsis .ListBox .column p.txt::after,
.ellipsis .ListBox .column .person .prof::after {background: currentColor;color: white;top: auto;}

/* オーバーフロー時の文字隠し処理（デフォルトは2行で…表記） */
@supports (-webkit-line-clamp: 2) {
	.ellipsis.elps2 .ListBox.ListType1 .column .ListMainTitle,
	.ellipsis.elps2 .ListBox .column p.txt,
	.ellipsis.elps2 .ListBox .column .person .prof {margin-bottom: 2%;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 2;}
	.ellipsis.elps2 .ListBox.ListType1 .column .ListMainTitle::before,
	.ellipsis.elps2 .ListBox.ListType1 .column .ListMainTitle::after,
	.ellipsis.elps2 .ListBox .column p.txt::before,
	.ellipsis.elps2 .ListBox .column p.txt::after,
	.ellipsis.elps2 .ListBox .column .person .prof::before,
	.ellipsis.elps2 .ListBox .column .person .prof::after {content: normal;}
}
@supports (-webkit-line-clamp: 3) {
	.ellipsis.elps3 .ListBox.ListType1 .column .ListMainTitle,
	.ellipsis.elps3 .ListBox .column p.txt,
	.ellipsis.elps3 .ListBox .column .person .prof {-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 3;}
	.ellipsis.elps3 .ListBox.ListType1 .column .ListMainTitle::before,
	.ellipsis.elps3 .ListBox.ListType1 .column .ListMainTitle::after,
	.ellipsis.elps3 .ListBox .column p.txt::before,
	.ellipsis.elps3 .ListBox .column p.txt::after,
	.ellipsis.elps3 .ListBox .column .person .prof::before,
	.ellipsis.elps3 .ListBox .column .person .prof::after {content: normal;}
}
/********* リストタイトル *********/

/* リストメインタイトル */
.ListBox .column .ListMainTitle {display: block;width: 100%;margin-bottom: 2%;padding: 0;font-weight: normal;line-height: 1.2;overflow: hidden;}
.ListBox .column .ListMainTitle a,
.ListTSgle dd.title_area .ListMainTitle a {text-decoration: none;}
.ListBox .column .ListMainTitle,
.ListBox .column .ListMainTitle a,
.ListTSgle dd.title_area .ListMainTitle a {color: var(--app-ListMainTitle-txt);/* テキスト色 */}
.ListBox .column .ListMainTitle a:hover {text-decoration: underline;}
.ListTSgle dd.title_area {padding: 1.0rem 0;}
.ListTSgle dd.title_area .ListMainTitle a {font-size: clamp(2.5rem, 2.6vw, 3.0rem);line-height: 1.2;}
.ListTSgle dd.title_area .ListMainTitle a:hover {filter: alpha(opacity=65);-moz-opacity:0.75;opacity:0.75;}

/* リスト画像(可変対応) 写真(上)テキスト(下)・要素横並び */
.ListType1 .tpl-flexcolumn1 .column .ListMainTitle {font-size: clamp(2.5rem, 2.6vw, 4.0rem);}
.ListType1 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ListType1 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ListType1 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.8rem, 1.4vw, 2.5rem);}
.ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.6rem, 1.2vw, 2.0rem);}

.mainClnS .ListType1 .tpl-flexcolumn1 .column .ListMainTitle {font-size: clamp(2.2rem, 2.0vw, 3.5rem);}
.mainClnS .ListType1 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(2.0rem, 1.8vw, 2.5rem);}
.mainClnS .ListType1 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.8rem, 1.6vw, 2.0rem);}
.mainClnS .ListType1 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.6rem, 1.4vw, 2.0rem);}
.mainClnS .ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.0vw, 1.8rem);}

.mainClnD .ListType1 .tpl-flexcolumn1 .column .ListMainTitle {font-size: clamp(2.2rem, 2.0vw, 3.2rem);}
.mainClnD .ListType1 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(2.0rem, 1.8vw, 2.2rem);}
.mainClnD .ListType1 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.8rem, 1.6vw, 2.0rem);}
.mainClnD .ListType1 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.6rem, 1.4vw, 2.0rem);}
.mainClnD .ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.0vw, 1.8rem);}

.sideClnS .ListType1 .tpl-flexcolumn1 .column .ListMainTitle,
.sideClnS .ListType1 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnS .ListType1 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnS .ListType1 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnS .ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.6rem, 1.2vw, 1.8rem);}

.sideClnD .ListType1 .tpl-flexcolumn1 .column .ListMainTitle,
.sideClnD .ListType1 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnD .ListType1 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnD .ListType1 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnD .ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.6rem, 1.4vw, 1.8rem);}

.hlfCln .ListType1 .tpl-flexcolumn1 .column .ListMainTitle {font-size: clamp(2.0rem, 1.8vw, 2.5rem);}
.hlfCln .ListType1 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(1.8rem, 1.6vw, 2.0rem);}
.hlfCln .ListType1 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.8rem, 1.6vw, 2.0rem);}
.hlfCln .ListType1 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.6rem, 1.4vw, 2.0rem);}
.hlfCln .ListType1 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.0vw, 1.8rem);}

/****** リスト画像(可変対応)写真(左)テキスト(右)全体リンク・要素縦並び ******/

.ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.5rem);}
.ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.5rem);}
.ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}

.ptWdM .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.ptWdM .ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ptWdC .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.ptWdC .ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}
.ptWdS .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.ptWdS .ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}

.ptWdM .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.ptWdM .ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ptWdC .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.ptWdC .ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}
.ptWdS .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.ptWdS .ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}

.ptWdM .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.ptWdM .ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(2.0rem, 2.0vw, 3.0rem);}
.ptWdC .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.ptWdC .ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}
.ptWdS .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.ptWdS .ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}

.ptWdM .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.ptWdM .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}
.ptWdC .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.ptWdC .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}
.ptWdS .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.ptWdS .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.8rem, 1.8vw, 2.6rem);}

.mainClnS .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.mainClnS .ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(1.6rem, 1.8vw, 2.4rem);}
.mainClnS .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.mainClnS .ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.6rem, 1.8vw, 2.4rem);}
.mainClnS .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.mainClnS .ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.2rem);}
.mainClnS .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.mainClnS .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.2rem);}

.mainClnD .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.mainClnD .ListType4 .tpl-flexcolumn2 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.2rem);}
.mainClnD .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.mainClnD .ListType4 .tpl-flexcolumn3 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.2rem);}
.mainClnD .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.mainClnD .ListType4 .tpl-flexcolumn4 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.0rem);}
.mainClnD .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.mainClnD .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.4vw, 2.0rem);}

.sideClnS .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnS .ListType4 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnS .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnS .ListType4 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnS .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnS .ListType4 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnS .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.sideClnS .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.2vw, 1.6rem);}

.sideClnD .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnD .ListType4 .tpl-flexcolumn2 .column .ListMainTitle,
.sideClnD .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnD .ListType4 .tpl-flexcolumn3 .column .ListMainTitle,
.sideClnD .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnD .ListType4 .tpl-flexcolumn4 .column .ListMainTitle,
.sideClnD .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.sideClnD .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.4rem, 1.2vw, 1.8rem);}

.hlfCln .ListType2 .tpl-flexcolumn2 .column .ListMainTitle,
.hlfCln .ListType4 .tpl-flexcolumn2 .column .ListMainTitle,
.hlfCln .ListType2 .tpl-flexcolumn3 .column .ListMainTitle,
.hlfCln .ListType4 .tpl-flexcolumn3 .column .ListMainTitle,
.hlfCln .ListType2 .tpl-flexcolumn4 .column .ListMainTitle,
.hlfCln .ListType4 .tpl-flexcolumn4 .column .ListMainTitle,
.hlfCln .ListType2 .tpl-flexcolumn5 .column .ListMainTitle,
.hlfCln .ListType4 .tpl-flexcolumn5 .column .ListMainTitle {font-size: clamp(1.6rem, 1.6vw, 2.0rem);}

/********* リスト画像 *********/
.ListBox figure.image {
	margin-bottom: 1.5rem;
	border-radius: var(--LiFigure-rod);
	-webkit-border-radius: var(--LiFigure-rod);
	-moz-border-radius: var(--LiFigure-rod); /* 角丸 */
	border: var(--app-li-figure-brd); /* ボーダー指定 */
	background: var(--app-li-figure-bg); /* 背景色 */
}
/********* リストディスクリプション *********/
.ListBox .column .distxt {
	padding-top: 1.0rem;
	padding-bottom: 1.0rem;
	font-weight: normal;
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	line-height: 1.6;
	color: var(--app-distxt-txt); /* テキスト色 */
}
.ListTSgle dd.title_area p.txt {
	padding: 1.0rem 0;
	color: var(--app-distxt-txt); /* テキスト色 */
	font-size: clamp(1.4rem, 1.6vw, 1.8rem);
	line-height: 1.4;
}
.mainClnS .ListBox .column .distxt,
.mainClnD .ListBox .column .distxt,
.sideClnS .ListBox .column .distxt,
.sideClnD .ListBox .column .distxt,
.hlfCln .ListBox .column .distxt {font-size: clamp(1.2rem, 1.0vw, 1.4rem);}

.ListBox.ListType1 .tpl-flexcolumn1 .distxt {font-size: clamp(1.4rem, 1.2vw, 2.2rem);}
.ListBox.ListType1 .tpl-flexcolumn2 .distxt {font-size: clamp(1.4rem, 1.2vw, 2.0rem);}
.ListBox.ListType1 .tpl-flexcolumn3 .distxt {font-size: clamp(1.4rem, 1.0vw, 2.0rem);}
.ListBox.ListType1 .tpl-flexcolumn4 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.6rem);}
.ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}

.mainClnS .ListBox.ListType1 .tpl-flexcolumn1 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.6rem);}
.mainClnS .ListBox.ListType1 .tpl-flexcolumn2 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnS .ListBox.ListType1 .tpl-flexcolumn3 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnS .ListBox.ListType1 .tpl-flexcolumn4 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnS .ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}

.mainClnD .ListBox.ListType1 .tpl-flexcolumn1 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.6rem);}
.mainClnD .ListBox.ListType1 .tpl-flexcolumn2 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnD .ListBox.ListType1 .tpl-flexcolumn3 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnD .ListBox.ListType1 .tpl-flexcolumn4 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.mainClnD .ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}

.sideClnS .ListBox.ListType1 .tpl-flexcolumn1 .distxt,
.sideClnS .ListBox.ListType1 .tpl-flexcolumn2 .distxt,
.sideClnS .ListBox.ListType1 .tpl-flexcolumn3 .distxt,
.sideClnS .ListBox.ListType1 .tpl-flexcolumn4 .distxt,
.sideClnS .ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.2rem, 1.0vw, 1.4rem);}

.sideClnD .ListBox.ListType1 .tpl-flexcolumn1 .distxt,
.sideClnD .ListBox.ListType1 .tpl-flexcolumn2 .distxt,
.sideClnD .ListBox.ListType1 .tpl-flexcolumn3 .distxt,
.sideClnD .ListBox.ListType1 .tpl-flexcolumn4 .distxt,
.sideClnD .ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.3rem, 1.0vw, 1.4rem);}

.hlfCln .ListBox.ListType1 .tpl-flexcolumn1 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.6rem);}
.hlfCln .ListBox.ListType1 .tpl-flexcolumn2 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.hlfCln .ListBox.ListType1 .tpl-flexcolumn3 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.hlfCln .ListBox.ListType1 .tpl-flexcolumn4 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}
.hlfCln .ListBox.ListType1 .tpl-flexcolumn5 .distxt {font-size: clamp(1.4rem, 1.0vw, 1.4rem);}

/********* リスト記事投稿者 *********/

/* 基本設定 */
.ListBox .column .person {padding: 1.0rem 0;}
.ListBox .column .person .person_ph  {padding: 0;display: flex;}
.ListBox .column .person .person_ph figure {
	overflow: hidden;
	position: relative;
	border-radius: 10%;
	width: 6.0rem;
	height: 5.0rem;
	background: var(--app-person-ph-bg);/* 背景色 */
}
.ptWdS .ListBox.ListType1 .tpl-flexcolumn3 .column .person .person_ph figure {width: 5.0rem;height: 4.0rem;}
.ptWdS .ListBox.ListType1 .tpl-flexcolumn4 .column .person .person_ph figure,
.ptWdS .ListBox.ListType1 .tpl-flexcolumn5 .column .person .person_ph figure {width: 4.0rem;height: 3.0rem;}
.ListBox .column .person .person_ph figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}
.ListBox .column .person .person_ph .name_area {width:100%;padding: 0 1.0rem;line-height: 1.2;}
.ListBox .column .person .person_ph .name {font-size: 1.6rem;}/* 投稿者氏名 */
.ListBox .column .person .person_ph .work {font-size: 1.4rem;padding-top: 0.5rem;}/* 投稿者組織名 */
.ListBox .column .person .prof {padding: 0.5rem 0;font-size: 1.4rem;}/* 投稿者プロフィール */
.ListTSgle dd.person_area {padding: 0;}

/********* リストビュー数等アイコン *********/
.ListBox .rank_date_area {
	margin: 0 auto;
	padding: 0.5rem 0;
	border-top: var(--app-li-rankdatearea-brd); /* ボーダー指定 */
}
.ListBox .column p.view,
.ListBox .column p.like,
.ListBox .column p.comment,
.ListTSgle p.view,
.ListTSgle p.like,
.ListTSgle p.comment {
	float: left;
	margin: 0.5rem 0;
	padding: 0.1rem 1.0rem 0 3.0rem;
	font-weight: bold;
	font-size: clamp(1.4rem, 1.0vw, 1.6rem);
}
.ListBox .column p.ico {float: right;padding: 0;}
.ListBox .column p.like,
.ListTSgle p.like,
.rank_date_c_area p.like {background: url(../../../core_sys/common/images/sys/share_ico.png) 6px center / contain no-repeat;}
.ListBox .column p.comment,
.ListTSgle p.comment,
.rank_date_c_area p.comment {background: url(../../../core_sys/common/images/sys/res_ico.png) 6px center / contain no-repeat;}
.ListBox .column p.view,
.ListTSgle p.view,
.rank_date_c_area p.view {background: url(../../../core_sys/common/images/sys/acs_ico.png) 6px center / contain no-repeat;}

/********* リスト公開日 *********/
.ListBox .column p.cap {
	float: right;
	padding: 0.5rem 0;
	color: var(--app-ListDate-txt); /* テキスト色*/
	font-size: clamp(1.2rem, 1.0vw, 1.4rem);
	font-weight: bold;
}
.ListTSgle .timeArea {padding: 0;display: flex;align-items: center;}
.ListTSgle p.time {padding: 0.5rem 1.0rem 0.5rem 0;font-size: 1.4rem;font-weight: bold;}
.ListTSgle p.ico {padding: 0 0 0.5rem 0;}/* NEWマーク */
.ListType5 .ListTSgle .timeArea {padding-top: 1.2rem;}
.ListType5 .ListTSgle p.time {
	padding: 0.5rem 0.8rem;
	font-size: clamp(1.4rem, 1.2vw, 1.6rem);
}
/********* タグ・カテゴリアイコン *********/
/* リストタグ */
.ListBox .column .tagLink,
.ListBox .ListTSgle .tagLink {padding: 0.5rem 0;}
.ListBox .column .tagLink li,
.ListBox .ListTSgle .tagLink li {list-style: none;float: left;margin-bottom: 1.0rem;margin-right: 0.4rem;}
.ListBox .column .tagLink a,
.ListBox .ListTSgle .tagLink a {
	margin: 0;
	padding: 0.5rem 1.5rem;
	border-radius: var(--app-li-LiIco-rod);
	-webkit-border-radius: var(--app-li-LiIco-rod);
	-moz-border-radius: var(--app-li-LiIco-rod); /* 角丸 */
	display: flex;
	align-items: center;
	min-height: 1.7rem;
}
/* リストカテゴリアイコン */
.ListBox.ListType1 .column ul.cateName,
.ListBox.ListType3 .column ul.cateName {padding: 0.5rem 0;}
.ListBox.ListType2 .column ul.cateName,
.ListBox.ListType4 .column ul.cateName {padding: 0 0 0.5rem 0;}
.ListBox .column ul.cateName,
.ListBox.ListType3 ul.cateName {list-style: none;}
.ListBox .column ul.cateName li,
.ListBox.ListType3 ul.cateName li {float: left;padding: 0 0.5rem 0.5rem 0;}
.ListBox .column ul.cateName span.cateIco,
.ListBox.ListType3 ul.cateName span.cateIco {
	margin: 0;
	padding: 0.5rem 1.0rem;
	border-radius: var(--app-li-LiIco-rod);
	-webkit-border-radius: var(--app-li-LiIco-rod);
	-moz-border-radius: var(--app-li-LiIco-rod); /* 角丸 */
}
/* 横並び一行リストカテゴリアイコン */
.ListBox.ListType5 .column ul.cateName {padding: 1.0rem 0 0 0;}
.ListBox.ListType5 ul.cateName {list-style: none;}
.ListBox.ListType5 ul.cateName li {padding: 0.5rem 0;}
.ListBox.ListType5 ul.cateName span.cateIco {
	display: block;
	margin: 0;
	padding: 3.0rem 0.5rem;
	border-radius: var(--app-li-LiIco5-rod);
	-webkit-border-radius: var(--app-li-LiIco5-rod);
	-moz-border-radius: var(--app-li-LiIco5-rod); /* 角丸 */
	text-align: center;
}
.cateIco {color: var(--app-cateIco-txt);} /* テキスト色 */
.ListTSgle dd.cate_area {padding: 0.2rem 0 0 0;}

/********* リストランキング *********/
.ListBox .column .rankIco {
	position: absolute;
	top: 2px;
	left: 2px;
	padding: 0.2rem 0.8rem;
	border-radius: var(--app-li-rankIco-rod);
	-webkit-border-radius: var(--app-li-rankIco-rod);
	-moz-border-radius: var(--app-li-rankIco-rod); /* 角丸 */
	color: var(--app-li-rankIco-txt); /* テキスト色 */
	background: var(--app-li-rankIco-bg); /* 背景色 */
}
/* リストタグ・リストカテゴリアイコン・リストランキング */
.ListBox .column .tagLink a,
.ListBox .ListTSgle .tagLink a,
.ListBox .column ul.cateName span.cateIco,
.ListBox .ListTSgle ul.cateName span.cateIco,
.ListBox .column .rankIco {font-size: 1.4rem;font-weight: bold;}
.ListBox.ListType5 .ListTSgle ul.cateName span.cateIco {font-size: 1.6rem;font-weight: bold;}

/*** 横並び一行リスト個別設定 ***/
.ListType5 .clmDetail {display: flex;}
.ListType5 .clmDetailCate {}
.ListType5 .clmDetailLi {width: 100%;margin-left: 3.0rem;}

/*** 一覧詳細ボタン ***/
.ListLinkBt {
	margin: var(--ListLinkBt-mg); /* マージン */
	padding: var(--ListLinkBt-pd); /* パディング */
	width: var(--ListLinkBt-size); /* ボタンサイズ */
	font-size: clamp(1.4rem, 1.6vw, 1.6rem);/* フォントサイズ */
	color: var(--ListLinkBt-txt); /* テキスト色 */
	background: var(--ListLinkBt-bg); /* 背景色 */
	border: var(--ListLinkBt-brd); /* ボーダー指定 */
	box-shadow: var(--ListLinkBt-sd); /* 背景影色 */
	border-radius: var(--ListLinkBt-rod);-webkit-border-radius: var(--ListLinkBt-rod);-moz-border-radius: var(--ListLinkBt-rod);
}
a.ListLinkBt:link,
a.ListLinkBt:visited,
a.ListLinkBt:active {
	color: var(--ListLinkBt-txt); /* テキスト色 */
}
.BtM button.ListLinkBt.next::after,
.BtM a.ListLinkBt.next::after,
.BtM span.ListLinkBt.next::after,
.BtM button.ListLinkBt.back::after,
.BtM a.ListLinkBt.back::after,
.BtM back.ListLinkBt.next::after {border-left-color:  var(--ListLinkBt-txt);}

/* ** list_basic end ** */

/* ** list_dez start ** */
/****************** リスト個別指定（デザインパターン） ******************/

/*** 0101: 写真(上)テキスト(下)・要素横並びのデザインパターン01:リスト個別背景色を付ける ***/

/* リスト個別背景色を付ける */
.ListBox.ListType1.liwbg01 .column {
	padding: 1.0rem 1.5rem;
	border-radius: var(--LiBg-rod);-webkit-border-radius: var(--LiBg-rod);-moz-border-radius: var(--LiBg-rod); /* 角丸 */
	border: var(--app-li-clm-brd); /* 枠要素 ボーダー指定 */
	background: var(--app-li-clm-bg); /* 背景色 */
	box-shadow: var(--app-li-clm-bbg);-webkit-box-shadow: var(--app-li-clm-bbg);/* 背景影色 */
}
@media screen and (max-width: 600px) {
	.ListBox.ListType1.liwbg01 .column {padding: 1.0rem;}
}
/*** 0102: 写真(上)テキスト(下)・要素横並びのデザインパターン02:リスト個別背景色、且つ写真を枠いっぱいに広げる ***/

/* リスト個別背景色、且つ写真を枠いっぱいに広げる */
.ListBox.ListType1.liwbg02 .column {
	padding: 0;
	border-radius: var(--LiBg-rod);-webkit-border-radius: var(--LiBg-rod);-moz-border-radius: var(--LiBg-rod); /* 角丸 */
	border: var(--app-li-clm-brd); /* 枠要素 ボーダー指定 */
	background: var(--app-li-clm-bg); /* 背景色 */
	box-shadow: var(--app-li-clm-bbg);-webkit-box-shadow: var(--app-li-clm-bbg);/* 背景影色 */
}
.ListBox.ListType1.liwbg02 .clmDetail,
.ListBox.ListType1.liwbg02 .rank_date_area_inn,
.ListBox.ListType1.liwbg02 .tagLink,
.ListBox.ListType1.liwbg02 .ListSubhDet,
.ListBox.ListType1.liwbg02 .BtM {margin-left: 2.0rem;margin-right: 2.0rem;}

/*** 0201: 写真(左)テキスト(右)全体リンク・要素縦並びのデザインパターン01:リスト個別背景色を付ける ***/

/* リスト個別背景色を付ける */
.ListBox.ListType2.liwbg01 .clmDetail,
.ListBox.ListType4.liwbg01 .clmDetail {
	padding: 2.0rem;
	border-radius: var(--LiBg-rod);-webkit-border-radius: var(--LiBg-rod);-moz-border-radius: var(--LiBg-rod); /* 角丸 */
	border: var(--app-li-clm-brd); /* 枠要素 ボーダー指定 */
	background: var(--app-li-clm-bg); /* 背景色 */
	box-shadow: var(--app-li-clm-bbg);-webkit-box-shadow: var(--app-li-clm-bbg);/* 背景影色 */
}
@media screen and (max-width: 600px) {
	.ListBox.ListType2.liwbg01 .clmDetail,
	.ListBox.ListType4.liwbg01 .clmDetail {padding: 1.0rem 0.5rem;}
}
/*** 0202: 写真(左)テキスト(右)全体リンク・要素縦並びのデザインパターン02:リスト個別背景色無し・罫線での仕切り ***/

/* リスト個別背景色無し・罫線での仕切り */
.ListBox.ListType2.liwbg02 .clmDetail,
.ListBox.ListType4.liwbg02 .clmDetail {
	padding: 2.0rem;
	border-bottom: var(--app-li-clmD-brd); /* 仕切り要素 ボーダー指定 */
}
@media screen and (max-width: 600px) {
	.ListBox.ListType2.liwbg02 .clmDetail,
	.ListBox.ListType4.liwbg02 .clmDetail {padding: 2.0rem 0.5rem;}
}
/*** 0301: 写真無しテキストリンクのデザインパターン01:リスト個別背景色を付ける ***/

/* リスト個別背景色を付ける */
.ListBox.ListType3.liwbg01 dl.clmDetail,
.ListBox.ListType5.liwbg01 .clmDetail {
	margin-bottom: 1.5%;
	padding: 1.0rem 2.0rem;
	border-radius: var(--LiBg-rod);-webkit-border-radius: var(--LiBg-rod);-moz-border-radius: var(--LiBg-rod); /* 角丸 */
	border: var(--app-li-clm-brd); /* 枠要素 ボーダー指定 */
	background: var(--app-li-clm-bg); /* 背景色 */
	box-shadow: var(--app-li-clm-bbg);-webkit-box-shadow: var(--app-li-clm-bbg);/* 背景影色 */
}
/*** 0301: 写真無しテキストリンクのデザインパターン02:リスト個別背景色無し・罫線での仕切り ***/

/* リスト個別背景色無し・罫線での仕切り */
.ListBox.ListType3.liwbg02 dl.clmDetail,
.ListBox.ListType5.liwbg02 .clmDetail {
	margin-bottom: 1.5%;
	padding: 2.0rem;
	border-bottom: var(--app-li-clmD-brd); /* 仕切り要素 ボーダー指定 */
}
/* ** list_dez end ** */

/* ** list_element start ** */
/********* リスト詳細項目(商品・セミナーで利用) *********/

/*** 01: 商品・セミナー詳細項目リスト01:アイコン無しタイプ ***/

/* 概要枠(販売価格等表示エリア) */
.ListSubhDet {margin: 1.0rem auto;padding: 0;}
.ListSubhDet dl {
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	padding: 0.5rem 0;
	font-size: var(--font-ListSubhDet); /* 見出しフォントサイズ */
	font-weight: bold;
	border-bottom: var(--app-li-SubhDet-brd); /* ボーダー指定 */
	align-items: flex-end;
}
.semIcoCrt .ListSubhDet dl,
.prdIcoCrt .ListSubhDet dl {align-items: center;}
.ListSubhDet dl span.kinagakuTxt {
	font-size: var(--font-kinagakuTxt); /* 価格フォントサイズ */
	font-weight: bold;
	padding: 0 0.5rem;
}
.ListSubhDet dt {width: 25%;max-width: 100px;padding: 0.2rem 0;}
.ListSubhDet dd {width: 75%;padding: 0.2rem 0 0.2rem 1.0rem;}
.ListSubhDet .sem_kinagaku dd,
.ListSubhDet .prd_kinagaku dd {padding-top: 1.0rem;}
.semIcoCrt span.SemIco,
.prdIcoCrt span.PrdIco {font-size: var(--font-SemPrdIco);}/* 見出しアイコン表示用 フォントサイズ */

@media screen and (max-width: 600px) {
	.ListSubhDet dl {display: block;}
	.ListSubhDet dt {width: 100%;max-width: 100px;padding: 0.2rem 0;}
	.ListSubhDet dd {width: 100%;padding: 0.2rem 0 0 0;}
}
/* 概要表示パターン（基本）タイプ1・2・4は概要は縦のみパターン */
.ListSubhDetTpF .SubhDetTi {padding: 0.2rem 0;font-size: var(--font-ListSubhDet);font-weight: bold;}
.ListSubhDetTpF .SubhDetTxt {padding: 0.2rem 0 0.2rem 2.0rem;font-size: var(--font-ListSubhDet);font-weight: bold;}
.SubhDetTxt span.kinagakuTxt {font-size: var(--font-kinagakuTxt);font-weight: bold;padding: 0 0.5rem;}

/* アイコン基本設定 */
.semIcoCrt span.SemIco,
.prdIcoCrt span.PrdIco {
	width: 100%;
	display: block;
	white-space: nowrap;
	padding: 0.5rem;
	text-align:center;
	border-radius: var(--IcoBox-rod);-webkit-border-radius: var(--IcoBox-rod);-moz-border-radius: var(--IcoBox-rod); /* 角丸 */
}
.semIcoCrt .sem_kinagaku span.SemIco {color: var(--sem-kinagaku-txt);background: var(--sem-kinagaku-bg);}/* 価格 */
.semIcoCrt .sem_kaisaibi span.SemIco {color: var(--sem-kaisaibi-txt);background: var(--sem-kaisaibi-bg);}/* 開催日 */
.semIcoCrt .sem_kaisaibasyo span.SemIco {color: var(--sem-kaisaibasyo-txt);background: var(--sem-kaisaibasyo-bg);}/* 開催場所 */
.semIcoCrt .sem_kigen span.SemIco {color: var(--sem-kigen-txt);background: var(--sem-kigen-bg);}/* 開催期間 */
.semIcoCrt .sem_aki span.SemIco {color: var(--sem-aki-txt);background: var(--sem-aki-bg);}/* 空き状況 */
.prdIcoCrt .prd_kinagaku span.PrdIco {color: var(--prd-kinagaku-txt);background: var(--prd-kinagaku-bg);}/* 価格 */
.prdIcoCrt .prd_hanbaibi span.PrdIco {color: var(--prd-hanbaibi-txt);background: var(--prd-hanbaibi-bg);}/* 販売日 */
.prdIcoCrt .prd_hanbaiMth span.PrdIco {color: var(--prd-hanbaiMth-txt);background: var(--prd-hanbaiMth-bg);}/* 販売方法 */
.prdIcoCrt .prd_aki span.PrdIco {color: var(--prd-aki-txt);background: var(--prd-aki-bg);}/* 空き状況 */

/*** 02: 商品・セミナー詳細項目リスト01:アイコン無しタイプ（写真無しテキストリンク） ***/
.semDetPtFN .ListSubhDetTpF,
.prdDetPtFN .ListSubhDetTpF {margin: 0 auto;padding: 0;}
.semDetPtFN .ListSubhDetTpF section,
.prdDetPtFN .ListSubhDetTpF section {
	display: flex;
	padding: 0.5rem 0;
	align-items: flex-end;
	border-bottom: var(--app-li-SubhDet-brd); /* ボーダー指定 */
}
.semDetPtFN .ListSubhDetTpF .SubhDetTi,
.prdDetPtFN .ListSubhDetTpF .SubhDetTi {width: 25%;max-width: 100px;}

/*** 03: 商品・セミナー詳細項目リスト01:アイコン無しタイプ（写真無しテキストリンク） ***/

/* 概要表示パターン（横並び）写真無しテキストリンク対応 */
.semDetPtF .ListSubhDetTpF,
.prdDetPtF .ListSubhDetTpF {
	display: flex;
	justify-content: space-between;
	margin: 1.0rem auto;
	padding: 0;
}
.semDetPtF .ListSubhDetTpF section,
.prdDetPtF .ListSubhDetTpF section {width: 100%;margin-right: 1%;}
.semDetPtF .ListSubhDetTpF section:last-child,
.prdDetPtF .ListSubhDetTpF section:last-child {margin-right: 0;}
.semDetPtF .ListSubhDetTpF .SubhDetTi,
.prdDetPtF .ListSubhDetTpF .SubhDetTi {text-align: center;}
.semIcoCrtN.semDetPtF .ListSubhDetTpF .SubhDetTi,
.prdIcoCrtN.semDetPtF .ListSubhDetTpF .SubhDetTi {
	padding: 1.0rem 0;
	border-radius: var(--LiIcoCrt-rod);-webkit-border-radius: var(--LiIcoCrt-rod);-moz-border-radius: var(--LiIcoCrt-rod); /* 角丸 */
	border: var(--app-li-SubhDet3-brd); /* ボーダー指定 写真無しテキストリンクのみ*/
	background: var(--app-li-SubhDet3-bg); /* 背景色 写真無しテキストリンクのみ*/
}
.semDetPtF .ListSubhDetTpF .SubhDetTxt,
.prdDetPtF .ListSubhDetTpF .SubhDetTxt {
	margin: 0.5rem 0;
	padding: 1.3rem 0;
	text-align: center;
	border-radius: var(--LiBg-rod);-webkit-border-radius: var(--LiBg-rod);-moz-border-radius: var(--LiBg-rod); /* 角丸 */
	border: var(--app-li-SubhDet3-brd); /* ボーダー指定 写真無しテキストリンクのみ*/
}
.semDetPtF .ListSubhDetTpF .sem_kinagaku .SubhDetTxt,
.prdDetPtF .ListSubhDetTpF .prd_kinagaku .SubhDetTxt {padding: 0.5rem 0;}

/* ** list_element end ** */

/* ** flex_list start ** */
/*** Flexリスト（3要素の横・縦並びリスト） ***/

/* 基本パターン（横並び） */
.FlexListArea {margin: 1.5rem auto;padding: 0;}
.FlexListInn {
	margin: 0 auto;
	padding: 1.5rem 0.5rem;
	display: flex;
	justify-content: flex-start;
	border-top: var(--app-FlexListInn-brd); /* ボーダー指定 */
	font-weight: bold;
	background: var(--app-FlexListInn-bg); /* 背景色 */ 
}
.FlexListInn.alict {align-items:center;}/* 縦中央揃え個別指定 */
.FlexListInn:last-child {border-bottom: var(--app-FlexListInn-brd);} /* ボーダー指定 */
.FlexListInn .FlexItem:last-child {margin-left: auto;}

/* 要素内でラジオボタン等の横並びで使用 */ 
.FlexListInn ul {list-style: none;}
.FlexListInn ul.Liflex {display: flex;align-items: top;}

/* サイズ要素 */
.FlexItemData {margin-left: 1.5rem;}
.FlexItemDataInn {}
.FlexItemData p {margin-bottom: 0.2rem;}
.DataItemW .FlexItemData {width: 80%;margin-left: 0.5rem;}/* 画像無リンク要素が長く且つ操作要素も長い場合 */
.DataItemW .FlexItemAct {width: 20%;}
.DataItemM .FlexItemData {width: 70%;margin-left: 0.5rem;}/* 画像無金額要素が入る場合 */
.DataItemM .FlexItemAct {width: 30%;}
.DataItemN .FlexItemData {width: 60%;}/* 画像有リンク要素が長く且つ操作要素も長い場合 */
.DataItemN .FlexItemAct {width: 20%;}
.DataItemAS .FlexItemData {width: 60%;}/* 画像有リンク要素が長く且つ操作要素も短い場合 */
.DataItemAS .FlexItemAct {width: 20%;}
.DataItemS .FlexItemData {width: 40%;}/* 画像有金額要素が入る場合 */
.DataItemS .FlexItemAct {width: 50%;}
.DataItemAW .FlexItemAct {width: 100%;}

@media screen and (max-width: 480px) {
	/* サイズ要素 */
	.DataItemW .FlexItemData {width: 72%;}
	.DataItemW .FlexItemAct {width: 25%;}
	.DataItemN .FlexItemData {width: 60%;}
	.DataItemN .FlexItemAct {width: 15%;}
	.DataItemM .FlexItemData {width: 70%;}
	.DataItemM .FlexItemAct {width: 30%;}
	.DataItemS .FlexItemData {width: 35%;}
	.DataItemS .FlexItemAct {width: 48%;}
	.DataItemAS .FlexItemData {width: 60%;}
	.DataItemAS .FlexItemAct {width: 15%;}
}
/* ■■■デザインパターン（横並び・配置場所が狭い場合）■■■ */
.FlexListWS .FlexListInn {font-weight: normal;}
.FlexListWS .FlexItemData p {margin-bottom: 0;}
.FlexListWS .FlexItemData {margin-left: 1.0rem;}
.FlexListWS .DataItemS .FlexItemData {width: 45%;}
.FlexListWS .DataItemS .FlexItemAct {width: 38%;}
.FlexListWS .DataItemAS .FlexItemData {width: 60%;}
.FlexListWS .DataItemAS .FlexItemAct {width: 15%;}

/* ■■■デザインパターン（縦並び）■■■ */
.FlexListBX .FlexListArea {
	margin: 0 auto;
	padding: 0;
	display: grid;
	gap: 2.5rem 2.5rem;
	justify-content: left;
}
.FlexListBX .FlexListInn {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	flex-direction: column;
	border-radius: var(--FlexListInn-rod);-webkit-border-radius: var(--FlexListInn-rod);-moz-border-radius: var(--FlexListInn-rod); /* 角丸 */
	border: var(--app-FlexListInn-brd); /* ボーダー指定 */
	background: linear-gradient(180deg, var(--app-FlexListInnS-bg) 0%, var(--app-FlexListInnS-bg) 20%, var(--app-FlexListInn-bg) 20%, var(--app-FlexListInn-bg) 100%);
}
.FlexListBX .FlexItemData {margin: 0 auto;padding: 1.0rem 1.0rem;}
.FlexListBX .FlexItemData p {margin-bottom: 0.2rem;}
.FlexListBX .DataItemW .FlexItemData,
.FlexListBX .DataItemM .FlexItemData {margin-left: 0;}
.FlexListBX .DataItemW .FlexItemData,
.FlexListBX .DataItemW .FlexItemAct,
.FlexListBX .DataItemN .FlexItemData,
.FlexListBX .DataItemN .FlexItemAct,
.FlexListBX .DataItemM .FlexItemData,
.FlexListBX .DataItemM .FlexItemAct,
.FlexListBX .DataItemS .FlexItemData,
.FlexListBX .DataItemS .FlexItemAct,
.FlexListBX .DataItemAS .FlexItemData,
.FlexListBX .DataItemAS .FlexItemAct,
.FlexListBX .DataItemAW .FlexItemAct {width: 100%;}
.FlexListBX .icoPosLB {position: absolute;top: 0.5rem;left: 0.5rem;}
.FlexListBX .icoPosLB2 {position: absolute;top: 3.0rem;left: 0.5rem;}
.FlexListBX .icoPosLB3 {position: absolute;top: 0.5rem;left: 7.0rem;}
.FlexListBX .icoPosRB {position: absolute;top: 0.5rem;right: 0.5rem;}
.FlexListBX .icoPosRB2 {position: absolute;top: 3.0rem;right: 0.5rem;}
.FlexListBX .icoPosRB3 {position: absolute;top: 0.5rem;right: 7.0rem;}
.FlexListBX .StarIco {position: absolute;top: 0.5rem;right: 0.5rem;}
.FlexListBX .friendBox {position: absolute;top: -2.0rem;left: 0.5rem;}
.FlexListBX .sldBox .FlexListInn {margin: 0 1.0rem;}/* スライダー利用時 */

@media screen and (max-width: 1100px) {
	.FlexListBX .FlexListArea {justify-content: center;gap: 2.0rem 2.0rem;}
}
@media screen and (max-width: 600px) {
	.FlexListBX .FlexListArea {gap: 2.0rem 0.5rem;}
}
/* 状態による背景色 */
.FlexListInn.endState {background: var(--app-FlexListInn-endState-bg);} /* 処理終了等の背景色 */
.FlexListInn.artState {background: var(--app-FlexListInn-artState-bg);} /* アラート喚起等の背景色 */
.FlexListInn.trlState {background: var(--app-FlexListInn-trlState-bg);} /* 合計等の背景色 */

/* ■■■デザインパターン（縦並び）スマホ時は通常 ■■■ */
@media screen and (max-width: 480px) {
	.FlexListBX.SPCanOn .FlexListArea {
		margin: 1.5rem auto;
		padding: 0;
		display: block;
		gap: 0;
		justify-content: left;
	}
	.FlexListBX.SPCanOn .FlexListInn {
		margin: 0 auto;
		padding: 1.5rem 0.5rem;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		border: none;
		border-top: var(--app-FlexListInn-brd); /* ボーダー指定 */
		border-bottom: none; /* ボーダー指定 */
		font-weight: bold;
		background: var(--app-FlexListInn-bg); /* 背景色 */ 
	}
	/* サイズ要素 */
	.FlexListBX.SPCanOn .FlexItemData {margin-left: 0.5rem;padding: 0;}
	.FlexListBX.SPCanOn .FlexItemData p {margin-bottom: 0.2rem;}
	.FlexListBX.SPCanOn .DataItemW .FlexItemData {width: 72%;}
	.FlexListBX.SPCanOn .DataItemW .FlexItemAct {width: 25%;}
	.FlexListBX.SPCanOn .DataItemN .FlexItemData {width: 60%;}
	.FlexListBX.SPCanOn .DataItemN .FlexItemAct {width: 15%;}
	.FlexListBX.SPCanOn .DataItemM .FlexItemData {width: 70%;}
	.FlexListBX.SPCanOn .DataItemM .FlexItemAct {width: 30%;}
	.FlexListBX.SPCanOn .DataItemS .FlexItemData {width: 35%;}
	.FlexListBX.SPCanOn .DataItemS .FlexItemAct {width: 48%;}
	.FlexListBX.SPCanOn .DataItemAS .FlexItemData {width: 60%;}
	.FlexListBX.SPCanOn .DataItemAS .FlexItemAct {width: 15%;}
	.FlexListBX.SPCanOn .FlexItemAct p.StarIco img {width: 100%;}
	.FlexListBX.SPCanOn .icoPosLB,
	.FlexListBX.SPCanOn .icoPosLB2,
	.FlexListBX.SPCanOn .icoPosLB3,
	.FlexListBX.SPCanOn .icoPosRB,
	.FlexListBX.SPCanOn .icoPosRB2,
	.FlexListBX.SPCanOn .icoPosRB3 {position: static;}
	.FlexListBX.SPCanOn .StarIco {position: static;padding-bottom: 0;}
	.FlexListBX.SPCanOn .friendBox {position: static;top: -2.0rem;left: 0.5rem;}
}
/*** 個別要素(写真) ***/
.FlexItemPh {margin-top: 0;margin-right: 0.5rem;}
.FlexItemPh a:hover img {filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}

/* 丸型写真 */
.PhCircle {overflow: hidden;width: var(--app-PhCircle-size);height: var(--app-PhCircle-size);position: relative;border-radius: 50%;background: var(--app-FlexItemPh-bg);}
.PhCircle img{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;height: auto;}
/* 四角写真 */
.PhSquare {overflow: hidden;width: var(--app-PhSquare-size);height: var(--app-PhSquare-size);position: relative;border-radius: 0.3rem;background: var(--app-FlexItemPh-bg);}
.PhSquare img{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: auto;height: 100%;}
/* 長方形写真 */
.PhRectangle {overflow: hidden;width: var(--app-PhRectangle-size);height: var(--app-PhRectangleH-size);position: relative;border-radius: 0.3rem;background: var(--app-FlexItemPh-bg);}
.PhRectangle img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height: 100%;object-fit: cover;}

/* ■■■デザインパターン（横並び・配置場所が狭い場合）■■■ */
.FlexListWS .PhCircle {width: var(--app-PhCircle-sizeS);height: var(--app-PhCircle-sizeS);}
.FlexListWS .PhSquare {width: var(--app-PhSquare-sizeS);height: var(--app-PhSquare-sizeS);}
.FlexListWS .PhRectangle {width: var(--app-PhRectangle-sizeS);height: var(--app-PhRectangleH-sizeS);}

/* ■■■デザインパターン（縦並び）■■■ */
.FlexListBX .FlexItemPh {margin: 0 auto;}
.FlexListBX .PhCircle,
.FlexListBX .PhSquare {margin-top: 1.0rem;}
.FlexListBX .PhCircle {width: 12rem;height: 12rem;}
.FlexListBX .PhSquare {width: 14rem;height: 14rem;}
.FlexListBX .PhRectangle {width: 100%;height: 14.0rem;}

/* ■■■デザインパターン（縦並び）スマホ時は通常 ■■■ */
@media screen and (max-width: 480px) {
	.FlexListBX.SPCanOn .FlexItemPh {margin-top: 0;margin-left: 0.5rem;}
	.FlexListBX.SPCanOn .PhCircle {width: var(--app-PhCircle-size);height: var(--app-PhCircle-size);}
	.FlexListBX.SPCanOn .PhSquare {width: var(--app-PhSquare-size);height: var(--app-PhSquare-size);}
	.FlexListBX.SPCanOn .PhRectangle {width: var(--app-PhRectangle-size);height: var(--app-PhRectangleH-size);}
}
/*** 個別要素(データ要素) ***/
.FlexItemDataTime {font-size: clamp(1.0rem, 1.0vw, 1.0rem);}/* 日時等 */
.FlexItemDataTimeM {font-size: clamp(1.2rem, 1.2vw, 1.2rem);padding: 0.5rem 0;}/* 日時等中サイズ */
.FlexItemDataTimeB {font-size: clamp(1.6rem, 1.8vw, 1.8rem);padding: 0.5rem 0;}/* 日時等中サイズ */
.FlexItemDataName {font-size: clamp(1.6rem, 1.6vw, 1.6rem);line-height: 1.4;padding: 0.5rem 0;}/* 名前 */
.FlexItemDataCorp {font-size: clamp(1.2rem, 1.2vw, 1.2rem);font-weight: normal;padding: 0.5rem 0;}/* 会社名等 */
.FlexItemDataCorpS {font-size: clamp(1.0rem, 1.0vw, 1.0rem);font-weight: normal;}/* 会社名等(小) */
.FlexItemDataAdd {font-size: clamp(1.2rem, 1.2vw, 1.2rem);}/* 住所 */
.FlexItemDataTxt {font-size: clamp(1.2rem, 1.2vw, 1.2rem);padding: 0.5rem 0;}/* その他テキスト */
.FlexItemDataTxt span {font-size: clamp(1.6rem, 1.6vw, 1.6rem);}/* その他テキスト要素で文字強弱がある場合 */
.FlexItemDataMemo {font-size: clamp(1.2rem, 1.2vw, 1.2rem);font-weight: normal;}/* その他メモ */

.FlexItemDataSETimeS {font-size: clamp(1.1rem, 1.1vw, 1.1rem);font-weight: normal;}/* 開始終了時間テキスト */
.FlexItemDataSETimeS span {font-weight: bold;}/* その他テキスト要素で文字強弱がある場合 */
.FlexItemDataAmtS {font-size: clamp(1.1rem, 1.1vw, 1.1rem);font-weight: normal;}/* 価格テキスト */
.FlexItemDataAmtS span {font-weight: bold;}/* その他テキスト要素で文字強弱がある場合 */

.FlexItemDataDay {font-size: clamp(2.0rem, 2.4vw, 2.4rem);}/* 日付 */
.FlexItemDataDayTime {font-size: clamp(1.6rem, 1.6vw, 1.6rem);}/* 時間 */

/* 文字数が多い場合の・・処理指定 */
.DataELP {max-width: 90%;max-height: 2.0rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* ...で隠す処理 */
.FlexItemDataOvf {margin: 1.0rem auto;max-height: 5.0rem;overflow: auto;}
.FlexItemDataOvf ul {font-size: clamp(1.0rem, 1.0vw, 1.0rem);}
.FlexItemDataOvf li {}

/*** リスト内でテーブル要素を入れる場合の処理 ***/
.TableBox.FlexItemDataTbBox table {
	font-size: clamp(1.2rem, 1.2vw, 1.2rem);/* フォントサイズ */
	font-weight: normal;
	table-layout: fixed;
}
.TableBox.FlexItemDataTbBox th {padding: 0.3rem;font-weight: normal;}
.TableBox.FlexItemDataTbBox td {padding: 0.3rem;}

/*** リスト内でDL要素を入れる場合の処理 ***/

/* 一覧での基本見出しタグ */
.FlexItemDataDlBox dl {
	font-size: clamp(1.0rem, 1.0vw, 1.0rem);
	font-weight: normal;
	display: flex;
}
.FlexItemDataDlBox dt {padding-right: 1.5rem;}
.FlexItemDataDlBox dd {}

/* 一覧詳細での基本見出しタグ */
.FlexItemDataDlBoxB dl {
	margin-top: 1.0rem;
	padding: 0.2rem 0.2rem;
	font-size: clamp(1.2rem, 1.2vw, 1.2rem);
	font-weight: normal;
	display: flex;
	border-bottom: 1px dotted #999; /* ボーダー指定 */
}
.FlexItemDataDlBoxB dt {width: 20%;padding-bottom: 0.5rem;}
.FlexItemDataDlBoxB dd {width: 80%;padding-bottom: 0.5rem;}

@media screen and (max-width: 600px) {
	.FlexItemDataDlBox dl,
	.FlexItemDataDlBoxB dl {display: block;}
	.FlexItemDataDlBox dt {padding-right: 0;}
	.FlexItemDataDlBoxB dt,
	.FlexItemDataDlBoxB dd {width: 100%;padding-bottom: 0.2rem;}
}
/* 特殊要素 */
.FlexItemDataTimeTk {font-size: clamp(1.6rem, 1.6vw, 1.6rem);padding: 0.5rem 0;}/* 日時等（タイトル要素で利用） */
.FlexItemDataMemoTk {font-size: clamp(1.4rem, 1.4vw, 1.4rem);font-weight: normal;padding: 0.5rem 0;}/* その他メモ（全文表示時） */

/* その他リスト内タイトル */
.FlexItemDataTi {
	font-size: clamp(1.2rem, 1.2vw, 1.2rem);
	margin: 0.5rem auto;
	padding: 0.4rem 0.5rem;
	border-radius: var(--FlexItemDataTi-rod);-webkit-border-radius: var(--FlexItemDataTi-rod);-moz-border-radius: var(--FlexItemDataTi-rod); /* 角丸 */
	background: var(--app-FlexItemDataTi-bg); /* 背景色*/
}
/* ■■■デザインパターン（横並び・配置場所が狭い場合）■■■ */
.FlexListWS .FlexItemDataTime {font-size: 1.0rem;font-weight: bold;}/* 日時等 */
.FlexListWS .FlexItemDataDay {font-size: 1.6rem;font-weight: bold;}
.FlexListWS .FlexItemDataDayTime {font-size: 1.4rem;font-weight: bold;}
.FlexListWS .FlexItemDataName {font-size: 1.4rem;font-weight: bold;}/* 名前 */
.FlexListWS .FlexItemDataCorp {font-size: 1.2rem;}/* 会社名等 */
.FlexListWS .FlexItemDataAdd {font-size: 1.2rem;}/* 住所 */
.FlexListWS .FlexItemDataTxt {font-size: 1.2rem;}/* その他テキスト */
.FlexListWS .FlexItemDataTxt span {font-size: 1.2rem;font-weight: bold;}/* その他テキスト要素で文字強弱がある場合 */
.FlexListWS .DataItemS .FlexItemDataName {font-size: 1.4rem;font-weight: bold;}/* 名前(幅狭) */
.FlexListWS .DataDispNo {display: none;}

/* ■■■デザインパターン（縦並び）■■■ */
.FlexListBX .FlexItemDataInn {}
.FlexListBX .FlexItemDataName,
.FlexListBX .FlexItemDataMemo {overflow: hidden;-webkit-box-orient: vertical;display: -webkit-box;-webkit-line-clamp: 2;}
.FlexListBX .FlexItemDataDay,
.FlexListBX .FlexItemDataDayTime {text-align: center;}

/* ■■■デザインパターン（縦並び）スマホ時は通常 ■■■ */
@media screen and (max-width: 480px) {
	.FlexListBX.SPCanOn .FlexItemDataName,
	.FlexListBX.SPCanOn .FlexItemDataMemo {display: block;}
	.FlexListBX.SPCanOn .FlexItemDataDay,
	.FlexListBX.SPCanOn .FlexItemDataDayTime {text-align: left;}
}
/*** 操作要素(アイコンや操作要素) ***/
.FlexItemAct {}
.FlexItemAct .ActItem {display: flex;flex-direction: column;align-items: flex-end;}
.FlexItemAct .ActItem p {padding-bottom: 0.3rem;}

/* 各種ボタン設置 */
.ActItem .editBt a,
.ActItem .editBt span,
.ActItem .radio-toggle,
.ActItem .checkboxBgBt {width: 10.0rem;margin: 0.2rem 0.2rem;padding: 0.5rem 0;font-size: 1.4rem;}

@media screen and (max-width: 480px) {
	.ActItem .editBt a,
	.ActItem .editBt span,
	.ActItem .radio-toggle,
	.ActItem .checkboxBgBt {width: 7.0rem;}
}
/* ■■■デザインパターン（横並び・配置場所が狭い場合）■■■ */
.FlexListWS .ActItem .editBt a,
.FlexListWS .ActItem .editBt span {width: 6.5rem;}

/* ■■■デザインパターン（縦並び）■■■ */
.FlexListBX .FlexItemAct {display: block;margin-top: auto;padding-top: 0.3rem;background: var(--app-FlexListInnS-bg);}
.FlexListBX .ActItem {flex-direction: row;justify-content: flex-end;gap: 0.5rem 0.5rem;padding: 0.5rem;}
.FlexListBX .FlexItemAct .ActItem p {padding-bottom: 0;}
.FlexListBX.SPCanOn .FlexItemAct .ActItem p {padding-bottom: 0.5rem;}
.FlexListBX .ActItem .editBt {width: 100%;}
.FlexListBX .ActItem .editBt a,
.FlexListBX .ActItem .editBt span,
.FlexListBX .ActItem .radio-toggle,
.FlexListBX .ActItem .checkboxBgBt {width: 100%;margin: 0;}
.FlexListBX .ActItem .radio-toggle,
.FlexListBX .ActItem .checkboxBgBt {padding: 0;}

@media screen and (max-width: 480px) {
	.FlexListBX.SPCanOn .ActItem .editBt {width: 6.5rem;}
}
/*** 各種要素デザインパターン ***/
/* 評価アイコン */
.FlexItemAct p.StarIco img {width: 10.0rem;margin-bottom: 0.5rem;}

@media screen and (max-width: 480px) {
	.FlexItemAct p.StarIco img {width: 6.0rem;margin-bottom: 0;}
}
/* ■■■デザインパターン（縦並び）■■■ */
.FlexListBX .FlexItemAct p.StarIco img {width: 6.0rem;margin-bottom: 0;}

/* ■■■デザインパターン（縦並び）スマホ時は通常 ■■■ */
@media screen and (max-width: 480px) {
	.FlexListBX.SPCanOn .FlexItemAct {display: block;margin-top: 0;padding-top: 0;background: none;}
	.FlexListBX.SPCanOn .ActItem {gap: 0;padding: 0;}
	.FlexListBX.SPCanOn .FlexItemDataName,
	.FlexListBX.SPCanOn .FlexItemDataMemo {display: block;}
	.FlexListBX.SPCanOn .FlexItemAct .ActItem {display: flex;flex-direction: column;align-items: flex-end;}
	.FlexListBX.SPCanOn .FlexItemAct p.StarIco img {width: 6.0rem;margin-bottom: 0;}
}
/* 各種ボタン設置 */
.editBt.DisDetailBt a,
.editBt.DisDetailBt button,
.editBt.DisDetailBt span,
.editBt.DisDeleteBt a,
.editBt.DisDeleteBt button,
.editBt.DisDeleteBt span {}

@media screen and (max-width: 480px) {
	.StsBtArea {display: block;}
	.StsBtArea .editBt {margin-top: 0;margin-bottom: 0.5rem;}
	.StsBtArea .editBt a,
	.StsBtArea .editBt span {width: 8.0rem;padding: 0.3rem 0.5rem;font-size: 1.2rem;}
}
/*** テキスト要素インラインボックス ***/
.FlexItemDataBox {
	margin: 1.0rem auto;
	padding: 1.0rem;
	color: var(--app-FlexItemDataBox-txt); /* テキスト色 */
	border-radius: var(--FlexItemDataBox-rod);-webkit-border-radius: var(--FlexItemDataBox-rod);-moz-border-radius: var(--FlexItemDataBox-rod); /* 角丸 */
	border: var(--app-FlexItemDataBox-brd); /* 外枠ボーダー指定 */
	background: var(--app-FlexItemDataBox-bg); /* 外枠背景色 */
}
.FlexItemDataBox dl {display: flex;white-space: nowrap;font-size: 1.2rem;}
.FlexItemDataBox dt,
.FlexItemDataBox dd {padding: 0.2rem 0.5rem;}
.FlexItemDataBox dt {width: 15%;}
.FlexItemDataBox dd {width: 84%;}

@media screen and (max-width: 480px) {
	.FlexItemDataBox dt {width: 25%;}
	.FlexItemDataBox dd {width: 75%;}
}
/* 親枠（要素がリストから抽出して一件のみ表示する場合に使用） */
.FlexDataArea {margin: 0 auto;padding: 0;}

/* リスト一件抽出個別枠 */
.FlexDataInn {
	margin: 0 auto;
	padding: 0.5rem;
	display: flex;
	justify-content: flex-start;
	font-weight: bold;
	background: var(--app-FlexDataInn-bg); /* 背景色 */ 
}
.FlexDataInn .FlexItem:last-child {margin-left: auto;}

/* リスト2列表示での写真処理 */
.FlexListInnChd {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 1.0rem;
}
.FlexListInnChdPrf {margin-left: 1.5rem;}

.FlexItemDataIco {display: flex;}
.FlexItemDataIco span {font-size: 1.2rem;}

/* ** flex_list end ** */

/* ** qa_list start ** */
/*** FAQリスト ***/
.qaBoxList {width: 100%;margin: 0 auto;padding: 0;}
.ClmblckArea .qaBoxList {width: 100%;}
.qaBoxListInn {margin: 2.0rem auto;}

/* QAタイトル指定 */
.qaTiArea {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap: 1.5rem;
	font-weight: bold;
	border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	background: #f0f0f0;
	margin: 1.0rem auto;
	padding: 1.5rem 2.0rem;
	font-size: clamp(2.0rem, 1.4vw, 3.0rem);
}
.qaTiArea .FlexItem:last-child {margin-left: auto;}
.qaTiArea .qaTi {padding-top: 0.2rem;line-height: 1.2;}

/* QA折り畳みボタン指定 */
.qaTiArea .slide_btn {
	width: 8.0rem;
	margin: 0;
	padding: 0.5rem;
	font-size: clamp(1.2rem, 1.0vw, 1.4rem);
	color: var(--app-qaTiArea-slide_btn-txt);/* テキスト色 */
	background: var(--app-qaTiArea-slide_btn-bg); /* 背景色 */
	border: none;
	box-shadow: none;
}
@media screen and (max-width: 480px) {
	.qaTiArea .slide_btn {width: 6.0rem;padding: 0.5rem 0.2rem;}
}
/* QAアイコン指定 */
.qaTiArea .qaTiIco,
.qaAnsArea .qaAnsIco {
	line-height: 1.0;
	font-weight: bold;
	font-size: clamp(2.6rem, 1.6vw, 3.0rem);
}
.qaTiArea .qaTiIco {padding: 0;color: var(--app-qaTiIco-txt);}
.qaAnsArea .qaAnsIco {padding-top: 0.3rem;color: var(--app-qaAnsIco-txt);}

/* QAアンサー指定 */
.qaAnsArea {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap: 1.5rem;
	margin: 1.0rem auto;
	padding: 1.5rem 2.0rem;
	background: var(--app-qaAnsArea-bg); /* 背景色 */
}
/* QAコンテンツ画像指定 */
.qaAnsVisualArea {width: 100%;padding: 0;}
.qaAnsVisual {text-align: center;padding: 2.0rem 0;}
.qaAnsVisual img {width: 80%;padding: 0;}
.qaAnsArea .qaAns {width: 100%;padding: 0;}

/* ** qa_list end ** */

/* ** friend_list start ** */
/* ** friend_list end ** */

/* ** ajax_listimg_loading start ** */
/* ajaxを利用した画像取得処理 */
.image-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%; /* 正方形をキープしたい場合 */
	background-color: #f0f0f0; /* プレースホルダーの背景色 */
	overflow: hidden;
}
.PhRectangle .image-wrapper {
	padding-top: 55%; /* 長方形をキープしたい場合 */
}
.image-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
}
.loading-spinner {
	border: 4px solid #f3f3f3;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.lazy-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 画像を枠にフィットさせる */
	display: block;
}
/* srcが空/未設定/1pxでも壊れマークを出さない */
img.lazy-thumb:not([src]), 
img.lazy-thumb[src=""], 
img.lazy-thumb[src^="data:image/gif;base64,R0lGODlhAQABAIA"] { 
	visibility: hidden;
}
/* ** ajax_listimg_loading end ** */