@charset "utf-8";

/*--------------------------------------------
■［トップ］
--------------------------------------------*/

ul#userlist-list, ul#consumerslist-list {
	margin: 0 0 2em 0;
}

ul.userlist-list > li,
ul#userlist-list > li,
ul#consumerslist-list > li {
	width: 20%;
	float: left;
	border: 1px solid #e5e5e5;
	margin-right: -1px;
	margin-bottom: -1px;
	position: relative;
}
ul.userlist-list > li {
	width: auto;
	float: none;
}

div#consumerslist ul#consumerslist-list > li {
	width: 10%;
	font-size: 0.8em;
}

ul#userlist-list > li:after, ul.userlist-list > li:after, ul#consumerslist-list > li:after {
	background-color: rgba(0, 0, 0, 0.25);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	content: "";
	z-index: 1;
	pointer-events: none;
	opacity: 0;
}

ul#userlist-list > li:hover:after, ul.userlist-list > li:hover:after, ul#consumerslist-list > li:hover:after {
	opacity: 1;
	transition: all .3s ease-out;
}

ul.userlist-list > li > span,
ul.userlist-list > li a,
ul#userlist-list > li > span,
ul#userlist-list > li a,
ul#consumerslist-list > li > span,
ul#consumerslist-list > li a {
	padding: 1vw;
	display: block;
	background-color: #fff;
	position: relative;
	text-decoration: none;
	padding-top: 100%;
}

div#consumerslist ul#consumerslist-list > li > span,
div#consumerslist ul#consumerslist-list > li a {
	padding: 0;
	padding-top: 100%;
}
ul.userlist-list > li a:hover,
ul#userlist-list > li a:hover,
ul#consumerslist-list > li a:hover {
	opacity: 1;
}

ul.userlist-list > li ul.couple,
ul#userlist-list > li ul.couple,
ul#consumerslist-list > li ul.couple {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

ul.userlist-list > li ul.couple > li,
ul#userlist-list > li ul.couple > li,
ul#consumerslist-list > li ul.couple > li {
	width: 50%;
	float: left;
}

/*ul#userlist-list > li:hover:before {
border: 4px solid #D90000;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: "";
z-index: 1;
pointer-events: none;
}*/

ul.userlist-list > li a h5,
ul#userlist-list > li a h5,
ul#consumerslist-list > li a h5 {
	position: absolute;
	left: 0.5vw;
	top: 0.5vw;
	background-color: #333;
	color: #fff;
	line-height: 1.4;
	font-size: 0.7em;
	padding: 0.3em 0.5em;
	border-radius: 0.2em;
	z-index: 1;
}

ul.userlist-list > li a h5 img,
ul#userlist-list > li a h5 img,
ul#consumerslist-list > li a h5 img {
	width: 1.4em;
	height: 1.4em;
	display: inline-block;
	vertical-align: middle;
}

ul.userlist-list > li a p.thumb,
ul#userlist-list > li a p.thumb,
ul#consumerslist-list > li a p.thumb {
	height: 0;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}

div#consumerslist ul#consumerslist-list > li a p.thumb {
	margin: 0;
}

ul.userlist-list > li ul.couple > li a p.thumb,
ul#userlist-list > li ul.couple > li a p.thumb,
ul#consumerslist-list > li ul.couple > li a p.thumb {
	padding-top: 200%;
	height: 100%;
}

ul.userlist-list > li a p.thumb img,
ul#userlist-list > li a p.thumb img,
ul#consumerslist-list > li a p.thumb img {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	margin: auto;
}
ul.userlist-list > li a p.thumb img.inner,
ul#userlist-list > li a p.thumb img.inner,
ul#consumerslist-list > li a p.thumb img.inner {
	width: 75%;
}
ul.userlist-list > li a p.thumb span.date,
ul#userlist-list > li a p.thumb span.date,
ul#consumerslist-list > li a p.thumb span.date {
	position: absolute;
	right: 0.5vw;
	bottom: 0.5vw;
	line-height: 1;
	font-size: 0.6em;
	z-index: 1;
	background-color: #999999;
	color: #fff;
	padding: 2px;
}

ul.userlist-list > li a p.thumb span.partner,
ul#userlist-list > li a p.thumb span.partner,
ul#consumerslist-list > li a p.thumb span.partner {
	position: absolute;
	left: 0.5vw;
	bottom: 0.5vw;
	line-height: 1;
	z-index: 1;
	width: 20%;
	padding-top: 20%;
	height: 0;
	mask-image: url(../img/home2.svg);
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	background-color: #fff;
	z-index: 5;
}

ul.userlist-list > li a p.thumb span.partner,
ul#userlist-list > li a p.thumb span.partner,
ul#consumerslist-list > li a p.thumb span.partner {
	-webkit-mask-image: url(../img/home2.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

ul.userlist-list > li a p.thumb span.partner:after,
ul#userlist-list > li a p.thumb span.partner:after,
ul#consumerslist-list > li a p.thumb span.partner:after {
	content: "";
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	mix-blend-mode: multiply;
	opacity: 1;
}

ul.userlist-list > li:hover a p.thumb span.partner:after,
ul#userlist-list > li:hover a p.thumb span.partner:after,
ul#consumerslist-list > li:hover a p.thumb span.partner:after {
	opacity: 0;
}

ul.userlist-list > li span ul.entry,
ul.userlist-list > li a ul.entry,
ul#userlist-list > li span ul.entry,
ul#userlist-list > li a ul.entry,
ul#consumerslist-list > li span ul.entry,
ul#consumerslist-list > li a ul.entry {
	position: absolute;
	right: 0.5vw;
	top: 0.5vw;
	margin: 0;
	font-size: 0;
	line-height: 0;
}

ul.userlist-list > li span ul.entry li,
ul.userlist-list > li a ul.entry li,
ul#userlist-list > li span ul.entry li,
ul#userlist-list > li a ul.entry li,
ul#consumerslist-list > li span ul.entry li,
ul#consumerslist-list > li a ul.entry li {
	width: 1.6em;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 1.6em 0 0 0;
	display: inline-block;
	position: relative;
	line-height: 1;
	text-align: center;
	font-size: 0.8rem;
}

div#consumerslist ul#consumerslist-list > li span ul.entry li,
div#consumerslist ul#consumerslist-list > li a ul.entry li {
	width: 1em;
	font-size: 0.6rem;
}

ul.userlist-list > li span ul.entry li:before,
ul.userlist-list > li a ul.entry li:before,
ul#userlist-list > li span ul.entry li:before,
ul#userlist-list > li a ul.entry li:before,
ul#consumerslist-list > li span ul.entry li:before,
ul#consumerslist-list > li a ul.entry li:before {
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}

ul.userlist-list > li a ul.clearfix,
ul#userlist-list > li a ul.clearfix,
ul#consumerslist-list > li a ul.clearfix {
	margin-top: 1vw;
	font-size: 0.8em;
}

ul.userlist-list > li span > ul.couple + ul.clearfix,
ul#userlist-list > li span > ul.couple + ul.clearfix,
ul#consumerslist-list > li span > ul.couple + ul.clearfix {
	font-size: 0.8em;
	margin-top: 1vw;
}

ul.userlist-list > li a ul.clearfix li,
ul#userlist-list > li a ul.clearfix li,
ul#consumerslist-list > li a ul.clearfix li {
	line-height: 1.3;
	margin-bottom: 0.5em;
}

ul.userlist-list > li a ul.clearfix li i,
ul#userlist-list > li a ul.clearfix li i,
ul#consumerslist-list > li a ul.clearfix li i {
	opacity: 0.5;
}

ul.userlist-list > li ul.slider li.slick-slide a,
ul#userlist-list > li ul.slider li.slick-slide a,
ul#consumerslist-list > li ul.slider li.slick-slide a {
	padding-bottom: 26px;
}

ul.userlist-list > li ul.slider ul.slick-dots,
ul#userlist-list > li ul.slider ul.slick-dots,
ul#consumerslist-list > li ul.slider ul.slick-dots {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0;
	line-height: 1;
	height: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

ul.userlist-list > li ul.slider ul.slick-dots li,
ul#userlist-list > li ul.slider ul.slick-dots li,
ul#consumerslist-list > li ul.slider ul.slick-dots li {
	display: inline-block;
	margin: 0 3px;
	padding: 0;
	height: 10px;
}

ul.userlist-list > li ul.slider ul.slick-dots li button,
ul#userlist-list > li ul.slider ul.slick-dots li button {
	width: 10px;
	height: 0;
	padding-top: 10px;
	border-radius: 5px;
	background-color: #ccc;
	overflow: hidden;
}

ul.userlist-list > li ul.slider ul.slick-dots li.slick-active button,
ul#userlist-list > li ul.slider ul.slick-dots li.slick-active button {
	background-color: #D90000;
}

ul.userlist-list > li ul.slider button.slick-arrow,
ul#userlist-list > li ul.slider button.slick-arrow {
	font-size: 1.6rem;
	background-color: #fff;
	border-radius: 50%;
}

div#consumerslist {
	margin: -3vw -3vw 3vw -3vw !important;
	background-color: #f2f2f2;
	padding: 1em;
}

div#consumerslist ul#consumerslist-list {
	margin: 0;
	width: 100%;
}

div#consumerslist ul#consumerslist-list > li {
	margin: 0;
}

ul#userlist-list > li a.new:before,
ul#consumerslist-list > li a.new:before {
	width: 1.6rem;
	height: 1.6rem;
	line-height: 1.6rem;
	font-size: 0.5em;
	content: "NEW";
	background-color: #D90000;
	color: #fff;
	border-radius: 0.8rem;
	display: block;
	position: absolute;
	left: -0.3rem;
	top: -0.3rem;
	text-align: center;
	z-index: 2;
}

div#consumerslist h3 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.4em;
	margin: 0.5em 0 0.5em 0 !important;
	line-height: 1.3;
	text-align: center;
	position: relative;
}

div#consumerslist h3 a {
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #D90000;
}

div#consumerslist h3 a strong {
	color: #D90000;
}

div#consumerslist h3 a span {
	display: inline-block;
	font-size: 0.5em;
	color: #fff;
	background-color: #D90000;
	padding: 0.4em 0.6em;
	border-radius: 0.3em;
	line-height: 1;
	vertical-align: middle;
	position: absolute;
	left: 0;
	bottom: 0;
}

ul#tab {
	padding: 0 3vw;
	font-size: 0;
}

ul#tab li {
	font-size: 1rem;
	display: inline-block;
	margin-right: 4px;
	line-height: 1;
}

ul#tab li a,
ul#tab li span {
	padding: 1em 1.2em;
	display: block;
	background-color: #fff;
	text-decoration: none;
	color: #D90000;
	border: 1px solid #D90000;
	border-bottom: none;
}

ul#tab li span {
	color: #999;
	border-color: #999;
}

ul#tab li.active a {
	background-color: #D90000;
	color: #fff;
}

div#profile div.profile-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}

div#profile h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.5em;
	font-size: 1.4em;
	line-height: 1;
	position: relative;
	cursor: pointer;
	display: none;
}
img.icon-user {
	border-radius: 50%;
	margin-right: 0.5em;
	display: inline-block;
	vertical-align: middle;
	max-height: 2em;
	width: auto;
	height: auto;
}
img.r50 {
	border-radius: 50%;
}
/*div#profile h3:before {
width: 1rem;
height: 1rem;
text-align: center;
line-height: 1;
position: absolute;
right: 1em;
top: 0;
bottom: 0;
margin: auto;
font-size: 1rem;
font-family: 'Font Awesome 5 Free';
font-weight: 400;
content:"\f0fe";
}

div#profile h3.active:before {
content:"\f146";
opacity: 0.75;
}*/

div#profile div.profile-cnt > div.clearfix {
	padding: 2vw;
}

div#profile div.profile-cnt > div.clearfix + div.clearfix {
	padding-top: 0;
}

div#detail h2 {
	margin: 0 0 1.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}

div#detail h2 img {
	height: 2em;
	width: 2em;
	margin-right: 0.5em;
	vertical-align: middle;
}
div#detail ul#yearlist {
	margin: 0;
	margin-left: 1em;
	float: right;
}
div#detail ul#yearlist li {
	display: inline-block;
}
div#detail ul#yearlist li a.btn {
	width: auto;
	min-width: inherit;
	background-color: #fff;
	color: #D90000 !important;
	border: 2px solid #D90000;
}
div#detail ul#yearlist li a.btn.active {
	background-color: #D90000;
	color: #fff !important;
}

div#profile h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}

div#profile h4 button.btn-note,
div#profile h4 button.btn-showall {
	position: absolute;
	right: 0;
	bottom: 0.3em;
}


div#profile h5 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1em;
	margin: 1em 0 0.5em 0;
}

div#profile div#area-gmap {
	margin-bottom: 1em;
}

div#profile div#area-gmap iframe {
	width: 100%;
	display: block;
	height: 360px;
}

div#profile div#cnt-002 div.w28 ul {
	margin-bottom: 2em;
}

div#profile div#cnt-002 div.w28 ul li {
	margin-bottom: 0.5em;
}

div#profile div#cnt-002 div.w28 ul li a {
	display: block;
	text-decoration: none;
	background-color: #999;
	line-height: 1.3;
	padding: 0.5em 1em;
	color: #fff;
	position: relative;
}

div#profile div#cnt-002 div.w28 ul li.active a {
	background-color: #D90000;
}

div#profile div#cnt-002 div.w28 ul li a i {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
}

div#profile div#cnt-002 div#cnt-002-photo > div {
	display: none;
}

div#profile div#cnt-002 div#cnt-002-photo > div > p {
	margin-bottom: 1em;
	line-height: 1.3;
}

div#profile div#area-gmap {
	position: relative;
	height: 360px;
	overflow: hidden;
}

div#profile div#area-gmap > p {
	position: absolute;
	height: 1em;
	line-height: 1;
	text-align: center;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
	text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
		-2px 2px 0 #FFF, 2px -2px 0 #FFF,
		0px 2px 0 #FFF, 0 -2px 0 #FFF,
		-2px 0 0 #FFF, 2px 0 0 #FFF;
}

a.link-market {
	width: 1.2em;
	height: auto;
	display: inline-block;
	vertical-align: text-bottom;
	margin: 0 0.25em;
}

ul.bargraph {
	margin: 0 0 1.5rem 0;
	font-size: 0;
}

ul.bargraph li {
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	display: inline-block;
	vertical-align: top;
}

ul.bargraph li.current {
	color: #D90000;
	font-weight: bold;
}

ul.bargraph li:before {
	border: 1px solid #ccc;
	border-right: none;
	background-color: #eee;
	height: 1.5em;
	content: "";
	display: block;
	margin: 0 0 0.5em 0;
}

ul.bargraph li:last-child:before {
	border-right: 1px solid #ccc;
}

ul.bargraph li.current:before {
	background-color: #D90000;
}

ul.bargraph li span {
	font-size: 0.8em;
	line-height: 1.2;
	display: block;
	white-space: nowrap;
}


ul#slider {
	margin: 0;
}

ul#slider li.slick-slide {
	position: relative;
	margin: 0;
	padding: 0;
}

ul#slider li.slick-slide img {
	width: 100%;
}

ul#slider li p.caption {
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 0.5em;
	font-size: 0.8em;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

ul#thumbnail-slider {
	margin: 0 0 2em 0;
	padding: 0.3em 1.5em 0.3em 1.5em;
	position: relative;
	background-color: #333;
}

ul#thumbnail-slider button.slick-arrow {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	width: 1em;
	height: 0;
	padding-top: 1em;
	line-height: 1;
	top: 0;
	bottom: 0;
	margin:  auto;
	overflow: hidden;
	font-size: 1rem;
}

ul#thumbnail-slider button.slick-arrow.slick-prev {
	left: 0.25em;
}

ul#thumbnail-slider button.slick-arrow.slick-next {
	right: 0.25em;
}

ul#thumbnail-slider button.slick-arrow.slick-prev:before,
ul#thumbnail-slider button.slick-arrow.slick-next:before {
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #fff;
}

ul#thumbnail-slider button.slick-arrow.slick-prev:before {
	content: "\f0a8";
}

ul#thumbnail-slider button.slick-arrow.slick-next:before {
	content: "\f0a9";
}

ul#thumbnail-slider li {
	height: 6vw;
	padding: 2px;
}

div#cnt-003-slider {
	width: 38%;
	float: left;
}

div#cnt-003-slider ul li p {
	display: none;
	margin-bottom: 0.5em;
	text-align: center;
}

div#cnt-003-slider ul li p img {
	display: inline;
}

div#cnt-003-slider ul li p.active {
	display: block;
}

div#cnt-003-slider ul li p.caption {
	display: block;
	text-align: center;
	margin: 0;
	font-size: 0.8em;
	opacity: 0.75;
}

ul.slick-slider {
	position: relative;
}

ul.slick-slider button.slick-arrow {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	width: 1em;
	height: 0;
	padding-top: 1em;
	line-height: 1;
	top: 48%;
	margin:  auto;
	overflow: hidden;
	font-size: 2rem;
	z-index: 10;
}

ul.slick-slider button.slick-arrow.slick-prev {
	left: 0.25em;
}

ul.slick-slider button.slick-arrow.slick-next {
	right: 0.25em;
}

ul.slick-slider button.slick-arrow.slick-prev:before,
ul.slick-slider button.slick-arrow.slick-next:before {
	width: 1em;
	height: 1em;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	color: #D90000;
}

ul.slick-slider button.slick-arrow.slick-prev:before {
	content: "\f0a8";
}

ul.slick-slider button.slick-arrow.slick-next:before {
	content: "\f0a9";
}
ul.slick-slider button.slick-arrow.slick-prev.slick-disabled:before,
ul.slick-slider button.slick-arrow.slick-next.slick-disabled:before {
	color: #ddd;
}
ul.slick-slider ul.slick-dots {
	display: flex;
	gap: 5px;
	margin: 0;
	justify-content: center;
	line-height: 1;
}
ul.slick-slider ul.slick-dots li button {
	width: 12px;
	height: 0;
	overflow: hidden;
	padding-top: 12px;
	border-radius: 50%;
	background-color: #ddd;
}
ul.slick-slider ul.slick-dots li.slick-active button {
	background-color: #D90000;
}

div#cnt-003-detail {
	width: 58%;
	float: right;
}

div#cnt-003-detail > div {
	display: none;
}

div#cnt-003-detail h4 span.app-icon {
	width: 60px;
	margin-right: 0.5em;
	vertical-align: middle;
	display: inline-block;
}

div#cnt-003-detail h4 span.app-icon img {
	border-radius: 22%;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
}

div#cnt-003-detail div#app-outline {
	margin: 0 0 1.5em 0;
}

div#cnt-003-detail div#app-howtouse {
	margin: 0 0 1.5em 0;
	background-color: #eee;
	border-radius: 0.5em;
	padding: 1.5em;
	font-size: 0.9em;
}

div#cnt-003-detail div#app-howtouse p#app-howtouse-usericon {
	width: 18%;
	float: left;
	margin-bottom: 0;
}

div#cnt-003-detail div#app-howtouse p#app-howtouse-comment {
	width: 78%;
	float: right;
	margin-bottom: 0;
}

div#cnt-003-detail div#app-reference {
	border: 3px solid #eee;
	border-radius: 0.5em;
	padding: 1.5em;
}

div#cnt-003-detail div#app-reference h5 {
	background-color: #eee;
	font-size: 1.1em;
	font-weight: bold;
	padding: 0.5em;
	padding-left: 3.5em;
	position: relative;
	margin-bottom: 1em;
}

div#cnt-003-detail div#app-reference h5 img {
	width: 3em;
	position: absolute;
	left: 0;
	top: 0;
}

div#cnt-003-detail div#app-reference ul {
	margin: 0 -10px 1.5em -10px;
}

div#cnt-003-detail div#app-reference ul li {
	width: 50%;
	float: left;
	padding: 10px;
	position: relative;
	line-height: 1.4;
}

div#cnt-003-detail div#app-reference ul li:nth-child(2n+1) {
	clear: both;
}

div#cnt-003-detail div#app-reference ul li p.appicon {
	width: 50px;
	position: absolute;
	left: 10px;
	top: 10px;
}

div#cnt-003-detail div#app-reference ul li p.appicon img {
	border-radius: 22%;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
}

div#cnt-003-detail div#app-reference ul li h6 {
	margin: 0 0 0.3em 70px;
	font-size: 1em;
	font-weight: bold;
}

div#cnt-003-detail div#app-reference ul li p.reference {
	margin: 0 0 0.5em 70px;
	font-size: 0.8em;
}

div#cnt-003-detail p a.btn-reference {
	border: 1px solid #D90000;
	color: #D90000 !important;
	background-color: #fff !important;
}

div#cnt-003-detail p a.btn-reference.active {
	border: 1px solid #ccc;
	color: #333 !important;
	background-color: #fff !important;
}

div#cnt-003-detail p a.btn-reference:before {
	content: "\f055";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.3em;
	color: #D90000 !important;
}

div#cnt-003-detail p a.btn-reference.active:before {
	content: "\f056";
	color: #333 !important;
}

ul.app-list {
	margin: 0 -15px;
}

ul.app-list li {
	width: 10.666%;
	float: left;
	padding: 0 15px 15px 15px;
	text-align: center;
	line-height: 1.3;
	font-size: 0.8em;
}

ul.app-list li img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 0.5em !important;
}

div#mostused {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 100;
	display: none;
}

div#mostused div.mostused-contents {
	overflow-y: auto;
	padding: 3vw;
	display: none;
}

div#mostused ul {
	margin: -10px;
	padding: 0;
	font-size: 0;
}

div#mostused ul li {
	display: inline-block;
	vertical-align: middle;
	padding: 10px;
	max-width: 25%;
}

div#mostused p.btn-close {
	position: absolute;
	right: 1vw;
	top: 1vw;
	color: #D90000;
}

div#mostused ul li:last-child {
	margin-right: 0;
}

/*div#remarks {
	background-color: #ccc;
	padding: 1em;
	border-radius: 0.6em;
}

div#remarks ul li {
	display: inline-block;
	padding: 0.5em;
	line-height: 1.4;
}

div#remarks ul li span {
	width: 3.6em;
	height: 4em;
	display: inline-block;
	border-width: 3px;
	border-style: solid;
	vertical-align: middle;
}*/


div#login {
	max-width: 480px;
	margin: 0 auto;
	background-color: #fff;
	border: 4px solid #f2f2f2;
	padding: 0;
}

div#login h3 {
	margin: 0 0 1.5rem 0;
	background-color: #333;
	text-align: center;
	color: #fff;
	padding: 1em;
	font-size: 1.2em;
}

div#login p {
	margin: 0 1.5rem 1rem 1.5rem;
	position: relative;
}

div#login p.id:before,
div#login p.pass:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	left: 1em;
	top: 0;
	bottom: 0;
	margin: auto;
	line-height: 1;
	width: 1em;
	height: 1em;
	opacity: 0.5;
}

div#login p.id:before {
	content: "\f007";
}

div#login p.pass:before {
	content: "\f13e";
}

div#login p input {
	padding-left: 3em;
}

div#login p.btn-login {
	margin: 1.5em;
}

div#login p.btn-login button {
	border-radius: 0;
	display: block;
	min-width: inherit;
	width: 100%;
	border-radius: 0.3em;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
}

ul.inputlist {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}
ul.inputlist > li {
	width: 33.333%;
	padding: 0.25em;
}
ul.inputlist > li img {
	height: 1em;
	width: auto;
	vertical-align: middle;
	display: inline-block;
}

dl.treemenu {
	margin: 0;
	padding: 0;
}
dl.treemenu dt {
	background-color: #333;
	color: #fff;
	padding: 0.5em;
	position: relative;
	cursor: pointer;
	border-bottom: 1px solid #fff;
}
dl.treemenu dt.active {
	background-color: #eee;
	color: #D90000;
	border-bottom: 1px solid #eee;
}
dl.treemenu dt:after {
	content: "\f055";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	width: 1em;
	height: 1em;
	line-height: 1;
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
}
dl.treemenu dt.active:after {
	content: "\f056";
}
dl.treemenu dt img {
	height: 1em;
	width: auto;
	vertical-align: middle;
	display: inline-block;
}
dl.treemenu dd {
	background-color: #fff;
	border: 1px solid #eee;
	padding: 0.5em;
	display: none;
}

h4.accordion + ul.inputlist {
	display: none;
}
h4.accordion {
	background-color: #333;
	border-radius: 0.2em;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	padding: 0.6em 1em;
	margin: 1em 0 0 0;
	position: relative;
	cursor: pointer;
}
h4.accordion.active {
	background-color: #ddd;
	border-radius: 0.2em 0.2em 0 0;
	color: #333;
	position: relative;
}
h4.accordion:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
}
h4.accordion.active:after {
	content: "\f056";
	color: #fff;
}
h4.accordion + div.accordion-content {
	display: none;
}
h4.accordion.active + div.accordion-content {
	border: 2px solid #eee;
	border-top: none;
	border-radius: 0 0 0.2em 0.2em;
	padding: 1em;
	display: block;
}
div.accordion-content h5 {
	font-weight: bold;
	font-size: 1.1em;
	margin: 1em 0 0.4em 0;
	border-bottom: 2px solid #333;
	padding-bottom: 0.4em;
}
h5.accordion {
	position: relative;
	cursor: pointer;
}
h5.accordion:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	line-height: 1;
	margin: auto;
}
h5.accordion.active:after {
	content: "\f056";
	color: #999;
}
h5.accordion + div.accordion-content {
	display: none;
}
h5.accordion.active + div.accordion-content {
	border: 2px solid #eee;
	border-top-color: rgb(238, 238, 238);
	border-top-style: solid;
	border-top-width: 2px;
	border-top: none;
	border-radius: 0 0 0.2em 0.2em;
	padding: 1em;
	display: block;
	margin-top: -0.4em;
}
div.accordion-content h5 img {
	height: 1em;
	width: auto;
	vertical-align: middle;
	display: inline-block;
}
div.accordion-content h6 {
	font-weight: bold;
	font-size: 1em;
	margin: 0.8em 0 0.2em 0;
}
div.accordion-content p {
	margin-bottom: 1em;
}

ul.picturesslider.slick-slider {
	padding-bottom: 2em;
}
ul.picturesslider.slick-slider button.slick-arrow {
	top: auto !important;
	bottom: 0;
	font-size: 1.6rem;
}
ul.picturesslider.slick-slider ul.slick-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.5em;
	text-align: center;
}
ul.picturesslider.slick-slider ul.slick-dots > li {
	display: inline-block;
	width: 12px;
	height: 0;
	padding-top: 12px;
	border-radius: 50%;
	overflow: hidden;
	background-color: #ddd;
	margin: 0 4px;
}
ul.picturesslider.slick-slider ul.slick-dots > li.slick-active {
	background-color: #D90000;
}
ul.picturesslider.imagelist li a,
ul.picturesslider.imagelist li.pictures {
	padding: 0 10px 20px 10px;
	display: block;
	vertical-align: top;
}
ul.picturesslider.imagelist p.video {
	position: relative;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-bottom: 0.6em !important;
}
ul.picturesslider.imagelist p.video:after {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #D90000;
	line-height: 36px;
	content: "\f04b";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	text-align: center;
	margin: auto;
	color: #fff;
	font-size: 12px;
}
ul.picturesslider.imagelist p.video video,
ul.picturesslider.imagelist p.video img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
}

div#mw-news h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.3em;
	text-align: center;
	font-size: 1.2em;
	position: relative;
	font-weight: bold;
}
div#news ul.newslist,
div#mw-news ul {
	border: 2px solid #D90000;
	padding: 1em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	border-bottom: none;
}
div#news ul.newslist {
	display: block;
	border: none;
	padding: 0;
}
div#news ul.newslist li,
div#mw-news ul li {
	width: calc(50% - 0.25em);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
div#news ul.newslist li {
	margin-bottom: 1em;
	width: 100%;
}
div#news ul.newslist li span,
div#news ul.newslist li a,
div#mw-news ul li span,
div#mw-news ul li a {
	font-size: 0.86em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	color: #333;
}
div#news ul.newslist li span,
div#news ul.newslist li a {
	font-size: 1em;
}
div#news ul.newslist li strong,
div#mw-news ul li strong {
	font-weight: normal;
	font-size: 0.8em;
	background-color: #eee;
	border-radius: 0.3em;
	display: inline-block;
	padding: 0.3em 0.8em;
	text-decoration: none;
	margin-right: 0.5em;
	text-align: center;
	min-width: 8em;
}
div#mw-news ul + p a.btn {
	background-color: #fff;
	color: #D90000 !important;
	padding: 0.8em 1em;
	font-weight: normal;
	border: 2px solid #D90000;
	margin: 0;
	margin-top: -0.5em;
}

/*--------------------------------------------
■［MY MOBILITY］
--------------------------------------------*/

div#mobility h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.5em;
	font-size: 1.4em;
	line-height: 1;
	position: relative;
	cursor: pointer;
	display: none;
	margin-bottom: 1em;
}

div#mobility div.mobility-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}

div#mobility div.mobility-cnt > div.clearfix {
	padding: 2vw;
}

div#mobility h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
}

div#mobility div#cnt-004 div.w28 ul {
	margin-bottom: 2em;
}

div#mobility div#cnt-004 div.w28 ul li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

div#mobility div#cnt-004 div.w28 ul li a {
	display: block;
	text-decoration: none;
	background-color: #999;
	line-height: 1.3;
	padding: 0.5em 1em;
	color: #fff;
	position: relative;
}

div#mobility div#cnt-004 div.w28 ul li.active a {
	background-color: #D90000;
}

div#mobility div#cnt-004 div.w28 ul li a img {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	border-radius: 0.1em;
	vertical-align: middle;
	margin-right: 0.5em;
	line-height: 1;
}

div#mobility div#cnt-004 div.w28 ul li a i {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
}

div#mobility div#cnt-004 div#cnt-004-timeline > div {
	display: none;
}

div#mobility div.timeline {
	position: relative;
}

div#mobility div.timeline:before {
	content: "";
	left: 25%;
	width: 6px;
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: #ff7772;
	margin-left: -3px;
}

div#mobility div.timeline > ul {
	margin: 0;
	padding: 0;
}

div#mobility div.timeline > ul > li {
	margin: 0 0 1.5em 0;
}

div#mobility div.timeline > ul > li.place {
	text-align: right;
	position: relative;
	width: 25%;
	padding-right: 3.5em;
}

div#mobility div.timeline > ul > li:last-child {
	margin: 0;
}

div#mobility div.timeline > ul > li.place h5 {
	margin: 0;
	font-size: 1.4em;
	color: #D90000;
	line-height: 3em;
	min-width: 3em;
	min-height: 3em;
}

div#mobility div.timeline > ul > li.place h5:after {
	width: 3em;
	height: 3em;
	border: 6px solid #ff7772;
	background-color: #D90000;
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	right: -1.5em;
	top: 0;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #fff;
	text-align: center;
	margin-right: -6px;
	background-repeat: no-repeat;
	background-size: 1.2em 1.2em;
	background-position: center center;
	content: "";
}

div#mobility div.timeline > ul > li.place h5.home:after {
	content: "\f015";
}

div#mobility div.timeline > ul > li.place h5.office:after {
	content: "\f1ad";
}

div#mobility div.timeline > ul > li.place h5.restaurant:after {
	content: "\f2e7";
}

div#mobility div.timeline > ul > li.place h5.school:after {
	content: "\f549";
}

div#mobility div.timeline > ul > li.place h5.clientoffice:after {
	content: "\f64f";
}

div#mobility div.timeline > ul > li.place h5.shop:after {
	content: "\f54f";
}

div#mobility div.timeline > ul > li.place h5.bed:after {
	content: "\f236";
}

div#mobility div.timeline > ul > li.place h5.park:after {
	background-image: url(../img/icon_park.svg);
}

div#mobility div.timeline > ul > li.place h5.alcohol:after {
	content: "\f0fc";
}

div#mobility div.timeline > ul > li.place h5.gym:after {
	content: "\f44b";
}

div#mobility div.timeline h5 sub {
	line-height: 1;
	vertical-align: middle;
	font-size: 0.7em;
	margin-left: 0.25em;
}

div#mobility div.timeline > ul > li.place h5 + p {
	margin-top: -1em;
	line-height: 1.3;
}
i.icon-face.fa-grin-hearts {
	color: #E4153F;
}
i.icon-face.fa-grin-squint {
	color: #E93C1B;
}
i.icon-face.fa-grin-alt {
	color: #F07712;
}
i.icon-face.fa-kiss-beam {
	color: #F3950D;
}
i.icon-face.fa-smile {
	color: #FAD004;
}
i.icon-face.fa-meh {
	color: #E2E308;
}
i.icon-face.fa-surprise {
	color: #A9D019;
}
i.icon-face.fa-grin-beam-sweat {
	color: #71BD2A;
}
i.icon-face.fa-meh-rolling-eyes {
	color: #38AA3A;
}
i.icon-face.fa-flushed {
	color: #00974B;
}
i.icon-face.fa-frown-open {
	color: #009B86;
}
i.icon-face.fa-grimace {
	color: #009EC1;
}
i.icon-face.fa-angry {
	color: #00A0DF;
}
i.icon-face.fa-sad-tear {
	color: #0981C9;
}
i.icon-face.fa-tired {
	color: #1261B4;
}
i.icon-face.fa-dizzy {
	color: #232288;
}

div#mobility div.timeline > ul > li.move {
	text-align: left;
	position: relative;
	width: 75%;
	margin-left: 25%;
	padding-left: 11em;
	padding-top: 0.25em;
}

div#mobility div.timeline > ul > li.move h5 {
	margin: 0 0 0.25em 0;
	font-size: 1.4em;
	color: #ff7772;
	line-height: 1.5em;
	position: absolute;
	left: 1.5em;
	top: 0;
}

div#mobility div.timeline > ul > li.move h5:after {
	width: 1em;
	height: 1em;
	border: 6px solid #ff7772;
	background-color: #fff;
	border-radius: 50%;
	display: inline-block;
	position: absolute;
	left: -2.5em;
	top: 0;
	margin-left: 6px;
	content: "";
}

div#mobility div.timeline > ul > li.move > div {
	background-color: #eee;
	padding: 1em;
	border-radius: 0.5em;
	position: relative;
}

div#mobility div.timeline > ul > li.move div:before {
	content: "";
	position: absolute;
	left: 0.5em;
	top: -8px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 7px 8px 7px;
	border-color: transparent transparent #eee transparent;
}

div#cnt-004-transportation h5 {
	font-weight: bold;
	font-size: 1.1em;
	margin: 1.5em 0 0.5em 0;
}

div#cnt-004-transportation h5 span.icon {
	margin-right: 0.3em;
}

div#mobility ul.transportation {
	margin: 0 0 0.5em 0;
}

ul.transportation li {
	margin-bottom: 0.5em;
	position: relative;
	line-height: 1.4;
}

ul.transportation li > div.f-left {
	width: 2em;
	clear: both;
}

ul.transportation li > div.f-right {
	width: calc(100% - 2.5em);
}

div#mobility h5 span.icon,
div#mobility ul.transportation li span.app,
div#mobility ul.transportation li span.icon {
	width: 2em;
	height: 2em;
	border-radius: 0.3em;
	text-align: center;
	color: #fff;
	padding: 0.5em 0;
	line-height: 1;
	display: inline-block;
	overflow: hidden;
	position: relative;
	vertical-align: middle;
}

div#profile ul.transportation li span.icon {
	margin-right: 0.3em;
}
div#mobility ul.transportation li span.app {
	border-radius: 0.;
	padding: 0;
}
div#mobility h5 span.icon img {
	width: 1em;
	height: auto;
}

div#mobility span.icon.car,
div#mobility span.icon.bike,
div#mobility span.icon.scooter,
div#mobility span.icon.bicycle {
	background-color: #009cd8;
}

div#mobility span.icon.car.seat, div#mobility  span.icon.bike.seat {
	cursor: pointer;
}

div#mobility span.icon.car.seat.active, div#mobility  span.icon.bike.active {
	background-color: #0075a2;
}

div#mobility span.icon.car.seat:after, div#mobility span.icon.bike.seat:after {
	content: "\f00e";
	font-size: 0.5em;
	position: absolute;
	right: 0.3em;
	top: 0.3em;
	line-height: 1;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

div#mobility span.icon.sharebike,
div#mobility span.icon.sharecar,
div#mobility span.icon.sharerickshaw {
	background-color: #00c212;
}

div#mobility span.icon.bikeshare,
div#mobility span.icon.carshare,
div#mobility span.icon.cycleshare {
	background-color: #ff9d00;
}

div#mobility span.icon.taxi {
	background-color: #919da1;
}

div#mobility span.icon.jeepney,
div#mobility span.icon.bus,
div#mobility span.icon.subway,
div#mobility span.icon.train,
div#mobility span.icon.plane,
div#mobility span.icon.ship,
div#mobility span.icon.rickshaw,
div#mobility span.icon.tuktuk {
	background-color: #919da1;
}

div#mobility span.icon.walking {
	background-color: #f26500;
}

div#mobility ul.transportation li span.distance {
	background-color: #fff;
	padding: 0.5em 0.75em;
	border-radius: 0.2em;
	font-size: 0.8em;
	margin-left: 0.25em;
	color: #808080;
	line-height: 1.2;
	position: relative;
	display: block;
}

div#mobility ul.transportation li span.distance:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4px 6px 4px 0;
	border-color: transparent #ffffff transparent transparent;
	position: absolute;
	left: -6px;
	top: 1em;
	content: "";
}

div#mobility p.comment,
div#mobility span.comment {
	background-color: #fff;
	border: 1px solid #999;
	display: block;
	font-size: 0.8em;
	padding: 0.6em;
	line-height: 1.4;
	border-radius: 0.3em;
	position: relative;
	margin-top: 0.5em;
	text-align: left;
	margin-bottom: 1em;
}

div#mobility p.comment:before,
div#mobility span.comment:before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 6px 5px;
	border-color: transparent transparent #999999 transparent;
	content: "";
	position: absolute;
	left: 1em;
	top: -6px;
}

div#mobility li.place p.comment:before {
	left: auto;
	right: 1em;
}

div#mobility li.place h5 + p + p.comment {
	margin-top: -1.5em;
}

div#mobility div.timeline > ul > li.move p {
	margin: 0 1em 0 0;
	display: inline-block;
}

div#mobility div.timeline > ul > li.move > p {
	margin: 0 1em 0.5em 0;
	display: block;
}

div#mobility div.timeline > ul > li.move p.app {
	display: block;
}

div#mobility div.timeline > ul > li.move p img {
	width: 2em;
	height: 2em;
	display: inline-block;
	vertical-align: middle;
}

div#mobility div.timeline > ul > li.move p i {
	opacity: 0.5;
}

div#mobility ul.tab {
	margin: 2rem 0 0 0;
	padding: 0 3vw;
	font-size: 0;
}

div#mobility ul.tab > li {
	display: inline-block;
	margin: 0 2px;
	padding: 0.6em 1.5em;
	border: 1px solid #D90000;
	border-bottom: none;
	background-color: #fff;
	color: #D90000;
	line-height: 1;
	text-align: center;
	font-size: 1.1rem;
	cursor: pointer;
}

div#mobility ul.tab > li.active {
	background-color: #D90000;
	color: #fff;
}

div#mobility ul.tab > li > img {
	width: 1.6em;
	height: 1.6em;
	margin-right: 0.3em;
	vertical-align: middle;
	border: 1px solid #eee;
}

div#mobility div.accordion-contents {
	border: 1px solid #D90000;
	padding: 3vw;
}

div.accordion-cnt {
	display: none;
}
.active + div.accordion-cnt,
div.accordion-cnt.active {
	display: block;
}

div#mobility ul.imagelist > li {
	display: inline-block;
	vertical-align: middle;
	padding: 10px;
	max-width: 32.333%;
}

div#mobility div#profile ul.transportation {
	padding: 1em;
	background-color: #eee;
	border-radius: 0.5em;
}

.rainy {
	color: #3769c2 !important;
}

.rainy:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	display: inline-block;
	margin-right: 0.25em;
	content: "\f0e9";
}

ul.transportation li div.seat {
	width: 140px;
	background-color: #fff;
	padding: 0.5em;
	display: block;
	position: absolute;
	left: 0.25;
	top: 2.25em;
	z-index: 1;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
	border-radius: 0.3em;
	line-height: 1;
}

ul.transportation li div.seat ul li {
	position: absolute;
	content: "0";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	left: 60%;
	top: 28%;
	background-color: #009cd8;
}

ul.transportation li div.seat ul li.seat1 {
	left: 25.5%;
	top: 27%;
}

ul.transportation li div.seat ul li.seat2 {
	left: 64%;
	top: 27%;
}

ul.transportation li div.seat ul li.seat3 {
	left: 25.5%;
	top: 51%;
}

ul.transportation li div.seat ul li.seat4 {
	left: 64%;
	top: 51%;
}

ul.transportation li div.seat ul li.seat5 {
	left: 25.5%;
	top: 75%;
}

ul.transportation li div.seat ul li.seat6 {
	left: 64%;
	top: 75%;
}

ul.transportation li div.seat ul li.red {
	background-color: #D90000 !important;
}


/*--------------------------------------------
■［MY DRYVING］
--------------------------------------------*/

div#dryving h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.5em;
	font-size: 1.4em;
	line-height: 1;
	position: relative;
	cursor: pointer;
	display: none;
	margin-bottom: 1em;
}

div#dryving div.dryving-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}

div#dryving div.dryving-cnt > div.clearfix {
	padding: 2vw;
}

div#dryving div.dryving-cnt div.w28 ul {
	margin-bottom: 2em;
}

div#dryving div.dryving-cnt div.w28 ul li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

div#dryving div.dryving-cnt div.video {
	margin-bottom: 2em;
}

div#dryving div.dryving-cnt div.video video {
	width: 100%;
	height: auto;
}



/*--------------------------------------------
■［MY CAR］
--------------------------------------------*/

div#car h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.5em;
	font-size: 1.4em;
	line-height: 1;
	position: relative;
	cursor: pointer;
	display: none;
	margin-bottom: 1em;
}

div#car div.car-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
	padding: 2vw;
}

div#car div.car-cnt div.w28 ul {
	margin-bottom: 2em;
}

div#car div.car-cnt div.w28 ul li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

div#car div.car-cnt div.w28 ul li a {
	display: block;
	text-decoration: none;
	background-color: #999;
	line-height: 1.3;
	padding: 0.5em 1em;
	color: #fff;
	position: relative;
}

div#car div.car-cnt div.w28 ul li.active a {
	background-color: #D90000;
}

div#car div.car-cnt div.w28 ul li a i {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
}

div#car h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
}

div#car h3 + h4 {
	margin-top: 0;
}

div#car div#carviewer > div {
	display: none;
}

div#car div#carviewer h4 {
	display: none;
}

div#car div#carviewer h5 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	border-left: 4px solid #333;
	padding-left: 0.5em;
}

div#car div#carviewer h4 + h5 {
	margin-top: 0;
}

div#car div#carviewer div > h6 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1em;
	margin: 2em 0 1em 0;
	background-color: #eee;
	padding: 0.5em 1em;
}

div#car div#carviewer p.vr {
	position: relative;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin: 0 0 2em 0;
}

div#car div#carviewer p.vr iframe {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

div#car div#carviewer ul.imagelist-001 {
	margin: 0 -0.75em 2em -0.75em;
}

div#car div#carviewer ul.imagelist-001 > li {
	margin: 0 0 1.5em 0;
	padding: 0 0.75em;
}

div#car div#carviewer ul.imagelist-001 > li p.image {
	margin: 0 0 0.5em 0;
}

div#car div#carviewer ul.imagelist-001 > li h6 {
	margin: 0 0 0.2em 0;
	font-weight: bold;
}

div#car div#carviewer ul.imagelist-001 > li p.caption {
	font-size: 0.8em;
}


/*--------------------------------------------
■［consumers］
--------------------------------------------*/

div#consumers h3 {
	background-color: #D90000;
	color: #fff;
	padding: 0.5em;
	font-size: 1.4em;
	line-height: 1;
	position: relative;
	cursor: pointer;
	display: none;
	margin-bottom: 1em;
}

div#consumers div.consumers-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
	padding: 2vw;
}

div#consumers div.consumers-cnt div.clearfix > div.f-left {
	width: 180px;
}

div#consumers div.consumers-cnt div.clearfix > div.f-left ul {
	margin-bottom: 2em;
}

div#consumers div.consumers-cnt div.clearfix > div.f-left ul li {
	margin-bottom: 0.5em;
	line-height: 1.5;
}

div#consumers div.consumers-cnt div.f-left ul li a {
	display: block;
	text-decoration: none;
	background-color: #999;
	line-height: 1.3;
	padding: 0.5em 1em;
	color: #fff;
	position: relative;
}

div#consumers div.consumers-cnt div.f-left ul li.active a {
	background-color: #D90000;
}

div#consumers div.consumers-cnt div.f-left ul li a i {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
}

div#consumers div.consumers-cnt div.clearfix > div.f-right {
	width: calc(100% - 220px);
}

div#consumers h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
}

div#consumers div#detail > div {
	display: none;
}

/*div#consumers div#detail > div.active {
display: block;
}*/

div#consumers div#detail dl.filters {
	background-color: #eee;
	border-radius: 0.5em;
	padding: 1.5em;
	padding-left: 8em;
	margin: 0 0 2em 0;
	position: relative;
}

div#consumers div#detail dl.filters dt {
	position: absolute;
	left: 1.5em;
	font-weight: bold;
}

div#consumers div#detail dl.filters dd ul li {
	display: inline-block;
}

div#consumers div#detail dl.filters dd ul li {
	display: inline-block;
}

/*div#consumers div#detail table th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
}

div#consumers div#detail table thead th:first-child {
z-index: 2;
}*/


div#consumers div#detail table tfoot td {
	text-align: right;
}
div#consumers div#detail table tr.parent th:first-child {
	cursor: pointer;
}
div#consumers div#detail table tr.parent th:first-child:after {
	content: "\f055";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	line-height: 1;
	width: 1em;
	height: 1em;
	margin-left: 0.3em;
}
div#consumers div#detail table tr.parent.active th:first-child:after {
	content: "\f056";
	color: #999;
}
div#consumers div#detail table tr.child {
	display: none;
}
div#consumers div#detail table tr.child th:first-child {
	padding-left: 2.6rem;
	background-color: #e6e6e6;
}
div#consumers div#detail table tr.child td {
	padding-left: 2.6rem;
	background-color: #f9f9f9;
}





/*--------------------------------------------
■［ソート］
--------------------------------------------*/

dl#filters,
dl#sort {
	margin: 0 0 2rem 0;
	font-size: 0;
	line-height: 1;
	position: relative;
	display: flex;
}
dl#filters {
	margin: 0 0 0.5rem 0;
}
dl#filters > dt,
dl#sort > dt {
	display: block;
	background-color: #333;
	color: #fff;
	padding: 0.5em 1em;
	font-size: 1rem;
	border: 1px solid #333;
	border-radius: 0.2em 0 0 0.2em;
	width: 7em;
}

dl#filters > dd,
dl#sort > dd {
	display: block;
	line-height: 1;
	font-size: 1rem;
	width: calc(100% - 7em);
	background-color: #eee;
	border-radius: 0 0.2em 0.2em 0;
	padding: 1px;
}

dl#filters > dd ul,
dl#sort > dd ul {
	font-size: 0;
}

dl#filters dd ul li,
dl#sort dd ul li{
	display: inline-block;
	border-left: none;
	font-size: 1rem;
	background-color: #fff;
	margin: 1px;
	border-radius: 0.2em;
}

dl#sort dd ul li label {
	display: block;
	padding: 0;
	margin: 0;
}

dl#sort dd ul li label input + span,
dl#sort dd ul li button {
	font-size: 1rem;
	padding: 0.5em 1em;
	margin: 0;
	line-height: 1;
	display: block;
}
dl#sort dd ul li label input + span:before {
	content: "";
	margin: 0;
}

dl#sort dd ul li label input:checked + span,
dl#sort dd ul li button.active {
	background-color: #FAE1E0;
	color: #D90000;
}

dl#sort dd ul li label input:checked + span:before,
dl#sort dd ul li button.active:before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.5em;
}

dl#sort dd ul li button:after {
	margin-left: 0.5em;
	vertical-align: baseline;
	font-size: 0.8em;
}
dl#sort dd ul li label input + span:after {
	content: "\f160";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 0.5em;
}
dl#sort dd ul li label input.des + span:after {
	content: "\f884";
}

dl#sort dd ul li button.active.icon.left.airconditioner:before, dl#sort dd ul li button.active.icon.right.airconditioner:after {
	background-image: url(../img/icon_airconditioner_red.svg);
}

dl#sort dd ul li button.active.icon.left.cooking:before, dl#sort dd ul li button.active.icon.right.cooking:after {
	background-image: url(../img/icon_cooking_red.svg);
}

dl#sort dd ul li button.active.icon.left.beauty:before, dl#sort dd ul li button.active.icon.right.beauty:after {
	background-image: url(../img/icon_beauty_red.svg);
}

dl#sort dd ul li button.active.icon.left.laundry:before, dl#sort dd ul li button.active.icon.right.laundry:after {
	background-image: url(../img/icon_laundry_red.svg);
}

dl#filters dd ul li label {
	padding: 0;
	margin: 0;
}
dl#filters dd ul li label input[type="radio"] + span:before {
	display: none;
}
dl#filters dd ul li button,
dl#filters dd ul li label input[type="radio"] + span {
	padding: 0.5em 1em;
	display: block;
	border-radius: 0.2em;
}
dl#filters dd ul li button {
	background-color: #333;
	color: #fff;
	font-size: 1rem;
}
dl#filters dd ul li button.active,
dl#filters dd ul li label input[type="radio"]:checked + span {
	background-color: #FAE1E0;
	color: #D90000;
}
dl#filters dd ul li button.active {
	background-color: #D90000;
	color: #fff;
}
dl#filters dd ul li button i,
dl#filters dd ul li label input[type="radio"] + span i {
	color: #D90000;
	margin-right: 0.3em;
}
dl#filters dd ul li button i {
	color: #fff;
}
dl#filters dd ul li button.active i {
	color: #fff;
}


/*--------------------------------------------
■［サポート］
--------------------------------------------*/

div#support h2 {
	margin: 0 0 1.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}

div#support h2 i {
	color: #D90000;
}




/*--------------------------------------------
■［Mind Discovery Map］
--------------------------------------------*/

div#minddiscovery h2 {
	padding: 0 0 0.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}
div#minddiscovery h2 i {
	color: #D90000;
}

div#minddiscovery div#genderselect {
	display: block;
}

div#minddiscovery div#genderselect ul#gender {
	max-width: 640px;
	margin: 0 auto;
}

div#minddiscovery div#genderselect ul#gender li {
	width: 50%;
	padding: 0 20px;
	float: left;
}

div#minddiscovery div#genderselect ul#gender li a {
	display: block;
	border-radius: 0.5em;
	background-color: #fff;
	border: 4px solid #D90000;
	color: #D90000;
	text-decoration: none;
	text-align: center;
	font-size: 1.2em;
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
	padding: 1.5em;
}

div#minddiscovery div#genderselect ul#gender li a img {
	display: block;
	width: 4em;
	margin: 0 auto 0.3em auto;
}

div#minddiscovery div#mindmap {
	display: none;
	border: 1px solid #e5e5e5;
	position: relative;
}

div#minddiscovery div#map {
	border-bottom: 1px solid #e5e5e5;
	height: 100%;
	overflow: hidden;
	text-align: center;
}

div#minddiscovery div#mindmap.open div#map {
}

div#minddiscovery div#map div#mapimage {
	margin: 0;
	height: 100%;
	display: inline-block;
	margin: 0;
	position: relative;
	cursor: zoom-out;
}

div#minddiscovery div#map div#mapimage.zoom {
	cursor: zoom-in;
}

div#minddiscovery div#map div#mapimage p {
	height: 100%;
	margin: 0;
}

div#minddiscovery div#map div#mapimage img {
	max-height: 100%;
	max-width: inherit;
}

div#minddiscovery div#map div#mapimage ul li button {
	width: 4%;
	height: 1.6%;
	left: 49%;
	top: 49.8%;
	position: absolute;
	cursor: pointer;
	font-size: 0;
}

div#minddiscovery div#map ul#gender-menu {
	position: absolute;
	left: 5px;
	top: 5px;
	line-height: 1;
	margin: 0;
	font-size: 0;
}

div#minddiscovery div#map ul#gender-menu li {
	display: inline-block;
	font-size: 1rem;
	margin: 0;
}

div#minddiscovery div#map ul#gender-menu li button {
	min-width: inherit;
	padding: 0.6em;
	border-radius: 0;
	margin: 0;
}

div#minddiscovery div#map ul#gender-menu li:first-child button {
	border-radius: 0.3em 0 0 0.3em;
}

div#minddiscovery div#map ul#gender-menu li:last-child button {
	border-radius: 0 0.3em 0.3em 0;
}

div#minddiscovery div#map ul#gender-menu li.active button {
	background-color: #666;
}

div#minddiscovery div#map ul#gender-menu li button img {
	width: 1.4em;
	height: 1.4em;
	vertical-align: middle;
	display: inline-block;
}

div#minddiscovery div#map p#btn-mapzoom {
	position: absolute;
	right: 5px;
	top: 5px;
	line-height: 1;
	margin: 0;
}

div#minddiscovery div#map p#btn-mapzoom a {
	min-width: inherit;
	padding: 0.6em;
	margin: 0;
}

div#minddiscovery div#photo {
	height: 0;
	overflow: hidden;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}

div#minddiscovery div#photo.zoom {
	overflow-y: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}

div#minddiscovery div#mindmap.open div#photo {
}

div#minddiscovery div#photo ul {
	margin: -1px 0 0 -1px;
}

div#minddiscovery div#photo ul li {
	float: left;
	width: 10%;
	border-top: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	position: relative;
	display: none;
}

div#minddiscovery div#photo ul li:nth-child( -n + 10 ) {
	display: block;
}

div#minddiscovery div#photo.zoom ul li {
	display: block;
}

div#minddiscovery div#photo.zoom ul li.is-hidden {
	display: none;
}

div#minddiscovery div#photo ul li p.thumb {
	position: relative;
	text-align: center;
	margin: 0;
}

div#minddiscovery div#photo ul li p.thumb a {
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 100%;
	position: relative;
	text-align: center;
	margin: 0;
}

div#minddiscovery div#photo ul li p.thumb img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
}

div#minddiscovery div#photo ul li p.favorite {
	position: absolute;
	right: 5px;
	top: 5px;
	margin: 0;
	line-height: 1;
}

div#minddiscovery div#photo ul li p.favorite label {
	margin: 0;
	padding: 0;
}

div#minddiscovery div#photo ul li p.favorite label span {
	width: 1.4rem;
	height: 1.4rem;
	line-height: 1.4rem;
	background-color: #999;
	margin: 0;
	border-radius: 50%;
	color: #fff;
	display: block;
	text-align: center;
}

div#minddiscovery div#photo ul li p.favorite label input:checked + span {
	background-color: #D90000;
}

div#minddiscovery div#photo ul li p.favorite label span:before {
	content: "\f004";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	border: none;
	margin: 0;
	font-size: 0.8rem;
}

div#minddiscovery div#photo ul li p.favorite label input:checked + span:before {
	color: #fff;
}

div#minddiscovery div#photo > p#btn-more {
	position: absolute;
	right: 5px;
	bottom: 5px;
	margin: 0;
	z-index: 1;
}

div#minddiscovery div#photo > p#btn-more button {
	padding: 0.4em 1em;
	min-width: inherit;
	font-size: 0.8em;
}

div#minddiscovery div#photo.zoom p#btn-more {
	display: none;
}

div#minddiscovery div#photo p.a-center {
	display: none;
}

div#minddiscovery div#photo.zoom p.a-center {
	display: block;
	margin-top: 1em;
}

div#minddiscovery p#btn-close {
	position: absolute;
	right: 0;
	top: -3em;
	display: none;
}


/*--------------------------------------------
■［Quick guide］
--------------------------------------------*/

div#guide h2 {
	margin: 0 0 1.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}

div#guide h2 i {
	color: #D90000;
}

div#guide video {
	width: auto;
	height: auto;
}

div#guide ul {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
div#guide ul > li {
	width: calc(25% - 23px);
}
body.en div#guide *[lang="ja"],
body.ja div#guide *[lang="en"] {
	display: none;
}
div#guide ul > li p.thumb {
	margin-bottom: 1em;
}
div#guide ul > li p.thumb a {
	display: block;
	border: 5px solid #eee;
	border-radius: 0.2em;
	position: relative;
	cursor: pointer;
}
div#guide ul > li p.thumb a:after {
	content: "\f04b";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: #D90000;
	color: #fff;
	line-height: 46px;
	text-align: center;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
div#guide ul > li p.thumb a:before {
	content: "";
	background-color: rgba(0, 0, 0, 0.25);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}
div#guide ul > li h5 {
	font-weight: bold;
	margin-bottom: 0.5em;
}
div#guide ul > li h5 {
	font-weight: bold;
}
div#guide ul > li p.caption {
	font-size: 0.8em;
	margin: 0;
}
div#guide h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}


/*--------------------------------------------
■［interview］
--------------------------------------------*/

div#interview div.interview-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}
div#interview div.interview-cnt > div.clearfix {
	padding: 2vw;
}
div#interview ul.tab {
	margin: 0;
	padding: 0 10px;
	font-size: 0;
}
div#interview ul.tab > li {
	display: inline-block;
	font-size: 1rem;
	margin-right: 4px;
	line-height: 1;
}
div#interview ul.tab > li button {
	padding: 1em 1.2em;
	display: block;
	background-color: #fff;
	text-decoration: none;
	color: #D90000;
	border: 1px solid #D90000;
	border-bottom: none;
	font-size: 1rem;
}
div#interview ul.tab > li.active button {
	background-color: #D90000;
	color: #fff;
}
div#interview div.cnt {
	border: 3px solid #D90000;
	padding: 2em;
}
div#interview div.cnt div.tab-contents {
	margin: 0;
	/*padding-top: 56.25%;*/
	position: relative;
	height: 0;
	display: none;
}
div#interview div.cnt div.tab-contents.active {
	display: block;
}
div#interview div.cnt div.tab-contents div.video {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}
div#interview div.cnt div.tab-contents video,
div#interview div.cnt div.tab-contents iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
div#interview div.cnt div.tab-contents div.subtitle {
	position: relative;
	background-color: #f2f2f2;
	padding-top: 138%;
	height: 0;
	overflow: hidden;
}
div#interview div.cnt div.tab-contents div.subtitle.fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 72px;
	height: calc(100vh - 72px);
	z-index: 12;
}
div#interview div.cnt div.tab-contents div.subtitle p.btn-zoom {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 12;
	line-height: 1;
}
div#interview div.cnt div.tab-contents div.subtitle p.btn-zoom button {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
	width: 26px;
	height: 26px;
	border-radius: 0.2em;
	line-height: 20px;
	margin: 0;
}
div#interview div.cnt div.tab-contents div.subtitle p.btn-zoom button:nth-child(2) {
	display: none;
}
div#interview div.cnt div.tab-contents div.subtitle.fixed p.btn-zoom button:nth-child(1) {
	display: none;
}
div#interview div.cnt div.tab-contents div.subtitle.fixed p.btn-zoom button:nth-child(2) {
	display: inherit;
}
div#interview div.cnt div.tab-contents div.subtitle div[lang] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100vh - 72px);
	overflow-y: auto;
	padding: 1.5em;
	display: none;
	z-index: 11;
}
div#interview div.cnt div.tab-contents div.subtitle.lang-ja div[lang] {
	display: block;
}
div#interview ul.lang {
	margin: 0 0 1rem 0;
	font-size: 0;
	line-height: 1;
}

div#interview ul.lang > li {
	display: inline-block;
	font-size: 1rem;
}

div#interview ul.lang > li button {
	border: 2px solid #D90000;
	background-color: #fff;
	color: #D90000 !important;
	min-width: inherit;
	margin: 0 -2px 0 0;
	border-radius: 0;
}

div#interview ul.lang > li:first-child button {
	border-radius: 0.2em 0 0 0.2em;
}

div#interview ul.lang > li:last-child button {
	border-radius: 0 0.2em 0.2em 0;
}

div#interview ul.lang > li.active button {
	background-color: #D90000;
	color: #fff !important;
}

div#interview div.interview-video {
	position: relative;
}

div#interview div.video video {
}

div#interview div.text {
	position: absolute;
	overflow-y: auto;
	padding: 1em;
	background-color: #f2f2f2;
	top: 0;
	bottom: 0;
	right: 0;
}

div#interview div.text.fixed {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
}

div#interview div.w68 div[lang] {
	display: none;
}

div#interview div.w68.lang-en div[lang=en],
div#interview div.w68.lang-ja div[lang=ja] {
	display: inherit;
}

div#interview p#btn-zoom button {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	width: 26px;
	height: 26px;
	border-radius: 0.2em;
	line-height: 20px;
}

div#interview div.text.fixed p#btn-zoom button:first-child,
div#interview p#btn-zoom button:last-child {
	display: none;
}

div#interview div.text.fixed p#btn-zoom button:last-child {
	display: inherit;
}

div#interview ul.files-item {
	border: 3px solid #333;
}

div#interview ul.files-item li.slick-slide img {
	width: 100%;
	height: auto;
}

div#interview ul.files-item-nav {
	background-color: #333;
	padding: 6px;
	position: relative;
}

div#interview ul.files-item-nav li.slick-slide {
	padding: 4px;
	opacity: 0.5;
}
div#interview ul.files-item-nav li.slick-slide.slick-current {
	opacity: 1;
}
div#interview  ul.slick-slider button {
	position: absolute;
	width: 26px;
	height: 0;
	padding-top: 26px;
	font-size: 26px;
	line-height: 1;
	margin: auto;
	left: 6px;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
div#interview  ul.slick-slider button.slick-arrow.slick-prev {
	right: auto;
}
div#interview  ul.slick-slider button.slick-arrow.slick-next {
	left: auto;
	right: 6px;
}
div#interview ul.slick-slider button.slick-arrow.slick-prev::before,
div#interview ul.slick-slider button.slick-arrow.slick-next::before {
	position: absolute;
	width: 26px;
	height: 26px;
	font-size: 26px;
	line-height: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

div#sidenavi ul.sidenavi-interviewlist > li {
	margin: 0;
	border-bottom: 1px solid #f2f2f2;
}

div#sidenavi ul.sidenavi-interviewlist > li a {
	display: block;
	padding: 0.5em;
	text-decoration: none;
	line-height: 1;
	padding-left: calc(34% + 0.5em);
	position: relative;
}

div#sidenavi ul.sidenavi-interviewlist > li.current a {
	color: #D90000;
	background-color: #FDF0F4;
}

div#sidenavi ul.sidenavi-interviewlist > li a p.thumb {
	width: 30%;
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	bottom: 0.5em;
}

div#sidenavi ul.sidenavi-interviewlist > li a h5 {
	line-height: 1.3;
}
div#interview h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}


/*--------------------------------------------
■［habit］
--------------------------------------------*/

div#habit div.habit-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}
div#habit div.habit-cnt > div.clearfix {
	padding: 2vw;
}
div#habit ul.tab {
	margin: 0;
	padding: 0 10px;
	font-size: 0;
}
div#habit ul.tab > li {
	display: inline-block;
	font-size: 1rem;
	margin-right: 4px;
	line-height: 1;
}
div#habit ul.tab > li button {
	padding: 1em 1.2em;
	display: block;
	background-color: #fff;
	text-decoration: none;
	color: #D90000;
	border: 1px solid #D90000;
	border-bottom: none;
	font-size: 1rem;
}
div#habit ul.tab > li.active button {
	background-color: #D90000;
	color: #fff;
}
div#habit div.cnt {
	border: 3px solid #D90000;
	padding: 2em;
}
div#habit div.cnt div.tab-contents {
	margin: 0;
	/*padding-top: 56.25%;*/
	position: relative;
	height: 0;
	display: none;
}
div#habit div.cnt div.tab-contents.active {
	display: block;
}
div#habit div.cnt div.tab-contents div.video {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}
div#habit div.cnt div.tab-contents video,
div#habit div.cnt div.tab-contents iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
div#habit div.cnt div.tab-contents div.subtitle {
	position: relative;
	background-color: #f2f2f2;
	padding-top: 138%;
	height: 0;
	overflow: hidden;
}
div#habit div.cnt div.tab-contents div.subtitle.fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 72px;
	height: calc(100vh - 72px);
	z-index: 1;
}
div#habit div.cnt div.tab-contents div.subtitle p.btn-zoom {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	line-height: 1;
}
div#habit div.cnt div.tab-contents div.subtitle p.btn-zoom button {
	background-color: #333;
	border: 1px solid #333;
	color: #fff;
	width: 26px;
	height: 26px;
	border-radius: 0.2em;
	line-height: 20px;
	margin: 0;
}
div#habit div.cnt div.tab-contents div.subtitle p.btn-zoom button:nth-child(2) {
	display: none;
}
div#habit div.cnt div.tab-contents div.subtitle.fixed p.btn-zoom button:nth-child(1) {
	display: none;
}
div#habit div.cnt div.tab-contents div.subtitle.fixed p.btn-zoom button:nth-child(2) {
	display: inherit;
}
div#habit div.cnt div.tab-contents div.subtitle div[lang] {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100vh - 72px);
	overflow-y: auto;
	padding: 1.5em;
	display: none;
}
div#habit div.cnt div.tab-contents div.subtitle.lang-ja div[lang] {
	display: block;
}

div#habit h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}

div#habit h4 button {
	position: absolute;
	right: 0;
	bottom: 0.5em;
}
div.textbox {
	border: 3px solid #D90000;
	position: relative;
	padding: 0;
	max-height: 20em;
	overflow: hidden;
	overflow-y: auto;
}
div.textbox.more {
	max-height: inherit;
}
div.textbox.zoom {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
	background-color: #fff;
	max-height: inherit;
}
div.textbox + div.textbox {
	border-top: none;
}
div.textbox ul.langnavi {
	position: sticky;
	left: 0;
	top: 0;
	font-size: 0;
	margin: 0;
	z-index: 1;
	line-height: 1;
}
div.textbox ul.langnavi li {
	display: inline-block;
}
div.textbox ul.langnavi li button {
	padding: 0.75em;
	font-size: 0.8rem;
	background-color: #eee;
	color: #D90000;
}
div.textbox[data-lang="en"] ul.langnavi li button[value="en"],
div.textbox[data-lang="ja"] ul.langnavi li button[value="ja"]{
	background-color: #D90000;
	color: #fff;
}
div.textbox ul.langnavi + div {
	padding: 1rem;
}
div.textbox p.btn-zoom {
	float: right;
}
div.textbox p.btn-zoom button {
	display: inline-block;
	padding: 0.75em;
	font-size: 0.7rem;
	background-color: #333;
	color: #fff;
}
div.textbox.zoom p.btn-zoom button,
div.textbox p.btn-zoom button + button {
	display: none;
}
div.textbox.zoom p.btn-zoom button + button {
	display: inline-block;
}

div.textbox ul,
div.textbox p {
	margin: 0;
}
div.textbox *[lang] {
	display: none;
}
div.textbox[data-lang="en"] *[lang="en"],
div.textbox[data-lang="ja"] *[lang="ja"] {
	display: block;
}
div.video {
	position: relative;
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
}
div.video video,
div.video iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
img.countryicon {
	max-height: 2em;
	width: auto;
	height: auto;
	vertical-align: middle;
	display: inline-block;
	margin-right: 0.5em;
}
h5 + div.accordion-cnt {
	margin-top: 0.5em;
}
p.thumb.video {
	padding-top: 56.25%;
	height: 0;
	overflow: hidden;
	position: relative;
	margin-bottom: 1em;
}
p.thumb.video img {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
ul.imagelist > li h5 + div.accordion-cnt p,
ul.imagelist > li h5 + div.accordion-cnt ul {
	margin-bottom: 0;
}
div#sidenavi form {
	padding: 5px;
}
div#sidenavi button.mw-open {
	width: 100%;
}
div#sidenavi ul.imagelist > li {
	padding: 0;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #eee;
}
div#sidenavi ul.imagelist > li h5 img.countryicon {
	max-height: 1.2em;
	margin-right: 0.3em;
}
div#sidenavi ul.imagelist > li h5 img.countryicon + img {
	max-height: 2em;
	margin-left: 0.3em;
	display: inline-block;
	vertical-align: middle;
}

/*--------------------------------------------
■［2021年6月11日］
--------------------------------------------*/

ul.imagelist li.pictures,
ul.imagelist > li {
	position: relative;
}

ul.imagelist li.pictures p.image,
ul.imagelist > li p.image {
	height: 0;
	padding-top: 100%;
}

ul.imagelist li.pictures p.image img,
ul.imagelist > li p.image img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

ul.imagelist li.pictures button.btn-description,
ul.imagelist > li button.btn-description {
	position: absolute;
	left: 20px;
	top: 10px;
	width: 30px;
	height: 30px;
	background-color: #D90000;
	color: #fff;
	border-radius: 15px;
	line-height: 30px;
	text-align: center;
	font-size: 16px;
}

ul.imagelist li.description-on button.btn-description {
	background-color: #333;
}

ul.imagelist li.description-on:nth-child(1):before,
ul.imagelist li.description-on:nth-child(4n+1):before,
ul.imagelist li.description-on:nth-child(2):before,
ul.imagelist li.description-on:nth-child(4n+2):before {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 20px 15px 0;
	border-color: transparent #333333 transparent transparent;
	content: "";
	right: -10px;
	top: 10px;
	content: "";
}
ul.imagelist li.description-on:nth-child(3):before,
ul.imagelist li.description-on:nth-child(4n+3):before,
ul.imagelist li.description-on:nth-child(4):before,
ul.imagelist li.description-on:nth-child(4n):before {
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent #333333;
	content: "";
	left: -10px;
	top: 10px;
	content: "";
}

ul.imagelist li.pictures div.description,
ul.imagelist > li div.description {
	position: absolute;
	top: 0;
	z-index: 1;
	background-color: rgba(255, 255, 255, 0.9);
	border: 3px solid #333;
	padding: 1.5em;
	overflow-y: auto;
	left: calc(100% + 10px);
	display: none;
}

ul.imagelist li.description-on div.description {
	display: block;
	max-height: 100%;
}

ul.imagelist li.pictures:nth-child(1) div.description,
ul.imagelist li.pictures:nth-child(4n+1) div.description,
ul.imagelist li.pictures:nth-child(4) div.description,
ul.imagelist li.pictures:nth-child(4n+4) div.description,
ul.imagelist > li:nth-child(1) div.description,
ul.imagelist > li:nth-child(4n+1) div.description,
ul.imagelist > li:nth-child(4) div.description,
ul.imagelist > li:nth-child(4n+4) div.description {
	width: calc((100% * 3) - 20px);
}

ul.imagelist li.pictures:nth-child(2) div.description,
ul.imagelist li.pictures:nth-child(4n+2) div.description,
ul.imagelist li.pictures:nth-child(3) div.description,
ul.imagelist li.pictures:nth-child(4n+3) div.description,
ul.imagelist > li:nth-child(2) div.description,
ul.imagelist > li:nth-child(4n+2) div.description,
ul.imagelist > li:nth-child(3) div.description,
ul.imagelist > li:nth-child(4n+3) div.description {
	width: calc((100% * 2) - 20px);
}

ul.imagelist li.pictures:nth-child(3) div.description,
ul.imagelist li.pictures:nth-child(4n+3) div.description,
ul.imagelist li.pictures:nth-child(4) div.description,
ul.imagelist li.pictures:nth-child(4n+4) div.description,
ul.imagelist > li:nth-child(3) div.description,
ul.imagelist > li:nth-child(4n+3) div.description,
ul.imagelist > li:nth-child(4) div.description,
ul.imagelist > li:nth-child(4n+4) div.description {
	left: auto;
	right: calc(100% + 10px);
}

/*ul.imagelist > li:nth-child(4n+2) div.description,
ul.imagelist > li:nth-child(4n+3) div.description,
ul.imagelist > li:nth-child(2) div.description,
ul.imagelist > li:nth-child(3) div.description {
	width: calc((100% * 2) - 20px);
}
ul.imagelist > li:nth-child(4n+2) div.description,
ul.imagelist > li:nth-child(4n+3) div.description {
	left: auto;
	right: calc(100% + 10px);
}
*/
ul.imagelist li.pictures div.description p,
ul.imagelist > li div.description p {
	padding-left: 2em;
	position: relative;
	margin-bottom: 1em !important;
}

ul.imagelist li.pictures div.description p:before,
ul.imagelist > li div.description p:before {
	background-color: #333;
	line-height: 1;
	padding: 0.3em 0.5em;
	font-size: 0.7em;
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	border-radius: 0.2em;
	color: #fff;
}

ul.imagelist li.pictures div.description p[lang="ja"]:before,
ul.imagelist > li div.description p[lang="ja"]:before {
	content: "JA";
}

ul.imagelist li.pictures div.description p[lang="en"]:before,
ul.imagelist > li div.description p[lang="en"]:before {
	content: "EN";
}

ul.userlist-list > li,
ul#userlist-list > li {
	position: relative;
}

ul.userlist-list > li label.favorite,
ul#userlist-list > li label.favorite {
	position: absolute;
	left: 0.5vw;
	top: 1.8em;
	z-index: 2;
}

label.favorite {
	font-size: 26px;
	line-height: 1;
}

label.favorite i {
	color: #999999;
}

label.favorite input[type=checkbox]:checked + i {
	color: #D90000;
}

button.btn-note.active {
	background-color: #333;
}

div.notepad {
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	border: 2px solid #333;
	padding: 1em;
	display: inline-block;
	display: none;
	z-index: 1;
	position: fixed;
	left: 1em;
	bottom: calc(2em + 36px);
	max-width: calc(100% - 6vw);
}

div.notepad h4 {
	position: relative;
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}

div.notepad h4 button.btn-close {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 1rem;
}

div.notepad textarea {
	max-width: 100%;
	width: 480px;
}

p#btn-note {
	position: fixed;
	left: 0;
	bottom: 1em;
	z-index: 1;
	margin: 0 !important;
	line-height: 1;
}

p#btn-note button {
	color: #fff;
	padding: 0;
	margin: 0;
	width: 36px;
	height: 36px;
	border-radius: 0 0.2em 0.2em 0;
	line-height: 36px;
	min-width: inherit;
	font-size: 18px;
}

p#btn-note button.active {
	opacity: 0.5;
}


/*--------------------------------------------
■［Favorites］
--------------------------------------------*/

div#favorites h2 i {
	color: #D90000;
}

/*--------------------------------------------
■［MY DAY］
--------------------------------------------*/
div#mobility.day ul.tab li {
	padding: 0;
}

div#mobility.day ul.tab li a {
	text-decoration: none;
	color: #D90000;
	padding: 1em 1.5em;
	display: block;
}
div#mobility.day iframe + h4 {
	margin-top: 0;
}
div#mobility.day ul.tab li.active a {
	color: #fff;
}
div#mobility.day div#cnt-004-timeline {
	border: 3px solid #D90000;
	padding: 2em;
	margin: 2vw;
	margin-top: 0;
}
div#mobility.day div#cnt-004-timeline h4 {
	display: none;
}
div#mobility.day div.timeline > ul > li.move {
	margin-top: -4.5em;
	margin-left: 25%;
	width: auto;
	min-height: 4.5em;
	padding-left: 5em;
}
div#mobility.day div.timeline > ul > li.move i {
	opacity: 1;
}
div#mobility div.timeline > ul > li.place h5.handswash::after {
	background-image: url(../img/icon_handswash_white.svg);
}
div#mobility div.timeline > ul > li.place h5.cleaning::after {
	content: "\f51a";
}
div#mobility div.timeline > ul > li.place h5.laundry::after {
	background-image: url(../img/icon_laundry_white.svg);
}
div#mobility div.timeline > ul > li.place h5.cooking::after {
	background-image: url(../img/icon_cooking_white.svg);
}
div#mobility div.timeline > ul > li.place h5.moving::after {
	content: "\f554";
}




/*--------------------------------------------
■［MY opinion］
--------------------------------------------*/

div#opinion div.option-cnt {
	overflow: inherit;
}
div#opinion div.option-cnt > div.clearfix {
	position: relative;
	overflow: inherit;
	display: flex;
	flex-wrap: wrap;
	gap: 4%;
}
div#opinion div.option-cnt > div.clearfix > div.f-left.w28 {
	position: relative;
	float: none;
}
div#opinion div.option-cnt > div.clearfix > div.f-left.w28 div.sticky {
	position: sticky;
	top: 72px;
}
div#opinion div.option-cnt > div.clearfix > div.f-right.w68 {
	float: none;
}
div#opinion div.option-cnt {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	display: none;
}
div#opinion div.option-cnt > div.clearfix {
	padding: 2vw;
}
div#opinion ul.tab {
	margin: 0 0 0.5rem 0;
	padding: 0;
	font-size: 0;
}
div#opinion ul.tab > li {
	display: inline-block;
	font-size: 1rem;
	margin-right: 4px;
	line-height: 1;
}
/*div#opinion ul.tab > li button {
	padding: 1em 1.2em;
	display: block;
	background-color: #fff;
	text-decoration: none;
	color: #D90000;
	border: 1px solid #D90000;
	border-bottom: none;
	font-size: 1rem;
}
div#opinion ul.tab > li.active button {
	background-color: #D90000;
	color: #fff;
}*/
div#opinion ul.tab > li + li {
	margin-left: 1.5em;
}
div#opinion ul.tab > li button {
	text-decoration: none;
	font-size: 1rem;
	opacity: 0.5;
}
div#opinion ul.tab > li.active button {
	color: #D90000;
	font-weight: bold;
	opacity: 1;
}
div#opinion ul.tab > li.active button:before {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-right: 0.3em;
}
div#opinion div.cnt {
	border: 3px solid #D90000;
	position: relative;
}
button.btn-nooverflow {
	position :absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #D90000;
	color: #fff;
}
div.cnt.nooverflow button.btn-nooverflow {
	background-color: #333;
}
div#opinion div.cnt div.tab-contents {
	margin: 0;
	position: relative;
	display: none;
	padding: 1em;
	max-height: 13em;
	overflow-y: auto;
}
div.textbox.nooverflow,
div.cnt.nooverflow div.tab-contents {
	overflow-y: visible;
	max-height: inherit;
}
div#opinion div.cnt div.tab-contents.active {
	display: block;
}
div#opinion h4 {
	border-bottom: 3px solid #333;
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.2em;
	margin: 2em 0 1em 0;
	margin-top: 2em;
	padding-bottom: 0.3em;
	line-height: 1.3;
	position: relative;
}
div#opinion h5 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.1em;
	margin: 2em 0 1em 0;
	line-height: 1.3;
	position: relative;
}
div#opinion h6 {
	font-weight: bold;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1em;
	margin: 1em 0 1em 0;
	line-height: 1.3;
	position: relative;
}
div#opinion ol li label {
	display: inline;
}
div#opinion ol li label.radio input[type=radio] + span {
	font-weight: bold;
}
div#opinion ol li label.radio input[type=radio] + span:before {
	display: none;
}
div#opinion ol li label.radio input[type=radio]:checked + span {
	color: #D90000;
}
div#opinion ol li label.radio input[type=radio]:disabled + span {
	font-weight: normal;
	opacity: 0.5;
	pointer-events: none;
}
div#opinion ol li label.radio input[type=radio]:checked + span:after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 0.3em;
}
div#opinion div#cnt-range ol li label.radio input[type=radio]:checked + span:after,
div#opinion div#cnt-single ol li label.radio input[type=radio]:checked + span:after {
	display: none;
}
div#opinion hr {
	margin: 1.5em 0;
}
div#opinion .answerlist li.active {
	font-weight: bold;
	color: #D90000;
}
div#opinion .answerlist li.active:after {
	content: "\f00c";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 0.3em;
}
div#opinion p.thumb {
	display: block;
	height: 0;
	padding-top: 100%;
	margin: 0;
	position: relative;
	line-height: 1;
}
div#opinion p.thumb + p.caption {
	font-size: 0.8em;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	line-height: 2;
	padding: 0 0.5em;
	z-index: 1;
	display: block;
	position: absolute;
	left: 5px;
	right: 5px;
	bottom: 5px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
div#opinion a p.thumb {
	border: 2px solid #D90000;
}
div#opinion p.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
div#opinion blockquote {
	background-color: #f8f7f1;
	padding: 1em;
	border-radius: 0.5em;
	margin-bottom: 1.5em;
}
div#opinion blockquote h5 {
	border-bottom: 3px solid #333;
	padding-bottom: 0.3em;
}
div#opinion blockquote h6 {
	margin: 1em 0 0.5em 0;
}
div#opinion blockquote dl.answerlist {
	margin-bottom: 1.5em;
}
div#opinion blockquote dl.answerlist dt {
	color: #fff;
	border-radius: 0.3em;
	padding: 0.5em 1em;
	line-height: 1.3;
	cursor: pointer;
	position: relative;
	margin-top: 0.5em;
}
div#opinion blockquote dl.answerlist dt.active {
	border-radius: 0.3em 0.3em 0 0;
}
div#opinion blockquote dl.answerlist dt:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	line-height: 1;
}
div#opinion blockquote dl.answerlist dt.active:after {
	content: "\f056";
}
div#opinion blockquote dl.answerlist dd {
	background-color: #fff;
	padding: 0.6em;
	display: none;
	margin-bottom: 1em;
}
div#opinion ul.userlist3,
div#opinion ul.userlist2,
div#opinion ul.userlist {
	display: flex;
	margin: -5px;
	flex-wrap: wrap;
	line-height: 1.3;
}
div#opinion ul.userlist3 > li,
div#opinion ul.userlist2 > li,
div#opinion ul.userlist > li {
	padding: 5px;
	position: relative;
}
.c10 > li {
	width: 10%;
}
.c9 > li {
	width: 11.111%;
}
.c8 > li {
	width: 12.5%;
}
.c7 > li {
	width: 14.285%;
}
.c6 > li {
	width: 16.666%;
}
.c5 > li {
	width: 20%;
}
.c4 > li {
	width: 25%;
}
.c3 > li {
	width: 33.333%;
}
.c2 > li {
	width: 50%;
}
.c1 > li {
	width: 100%;
}
div#opinion ul.userlist3 > li a,
div#opinion ul.userlist2 > li a {
	display: block;
	text-decoration: none;
}
div#opinion ul.userlist3 > li a {
	background-color: #fff;
	padding: 0.5em;
	padding-left: calc(46px + 1em);
}
div#opinion ul.userlist2 > li a p.thumb {
	margin: 0;
}
div#opinion ul.userlist3 > li a p.thumb {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	margin: 0;
	padding: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #D90000;
}
div#opinion p.text {
	line-height: 1.4;
	margin: 0 0 1.5em 4px;
	border: 1px solid #E0E0E0;
	padding: 1em;
	border-radius: 0.3em;
	position: relative;
}
div#opinion ul > li a p.text {
	font-size: 0.9em;
	padding: 0.6em;
	margin-bottom: 0;
}
div#opinion p.text:after {
	left: -4.5px;
	top: 14px;
	width: 8px;
	height: 8px;
	border-top: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	transform: rotate(-135deg);
	background-color: #fff;
	content: "";
	position: absolute;
}
div#opinion p.text span,
div#opinion ul.userlist3 > li a p.text span,
div#opinion ul.userlist2 > li a p.text span {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
div#opinion ul.userlist2 h6.userlink,
div#opinion ul.userlist h6.userlink {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	margin: 0;
	padding: 0;
}
div#opinion ul.userlist2 h6.userlink a,
div#opinion ul.userlist h6.userlink a {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid #D90000;
}

div#opinion ul.profile,
div#opinion ul.sidenavi {
	margin: 0 0 1.5em 0;
}
div#opinion ul.sidenavi {
	margin: 0;
}
div#opinion ul.sidenavi li {
	margin: 0 0 0.5em 0;
}
div#opinion ul.sidenavi ul {
	margin: 0.5em 0 0 1em;
	display: none;
}
div#opinion ul.sidenavi li span,
div#opinion ul.sidenavi li a {
	display: block;
	text-decoration: none;
	background-color: #999;
	line-height: 1.3;
	padding: 0.5em 1em;
	color: #fff;
	position: relative;
	cursor: pointer;
}
div#opinion ul.sidenavi li > span:before,
div#opinion ul.sidenavi li > a:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	line-height: 1;
}
div#opinion ul.sidenavi li > a:before {
	content: "\f105";
}
div#opinion ul.sidenavi li > span.active,
div#opinion ul.sidenavi li > a.active {
	background-color: #D90000;
}
div#opinion ul.sidenavi li > span.active {
	background-color: #333;
}
div#opinion ul.sidenavi li > span.active:before {
	content: "\f056";
}
img.a-icon {
	border-radius: 22%;
	height: 0;
	overflow: hidden;
	position: relative;
	background-color: #fff;
	box-shadow: 0 0 4px  0 rgba(0, 0, 0, 0.4);
	width: 60px;
	height: 60px;
	vertical-align: middle;
}
img.a-icon:first-child {
	margin-right: 0.5em;
}
p.sort-btn .btn {
	min-width: inherit;
	padding: 0.5em;
}
p.sort-btn .btn i:nth-child(2),
p.sort-btn .btn.down i:nth-child(1) {
	display: none;
}
p.sort-btn .btn.down i:nth-child(2) {
	display: inherit;
}

div#opinion dl.dllist-002 dd h5.accordion {
	background-color: #eee;
	padding: 0.6em;
	cursor: pointer;
	margin: 0;
}
div#opinion dl.dllist-002 dl + h5.accordion  {
	margin-top: 0.3em;
}
div#opinion dl.dllist-002 dd h5.accordion.active {
	background-color: #333;
	color: #fff;
}
div#opinion dl.dllist-002 dd h5.accordion:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 1em;
	height: 1em;
	line-height: 1;
}
div#opinion dl.dllist-002 dd h5.active.accordion:after {
	content: "\f056";
}
div#opinion dl.dllist-002 dl {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background-color: #eee;
	padding: 0;
	height: 0;
	overflow: hidden;
	box-sizing: content-box;
}
div#opinion dl.dllist-002 h5.accordion.active + dl {
	padding: 1em;
	height: auto;
	overflow: visible;
	display: flex;
	flex-wrap: auto;
}
div#opinion dl.dllist-002 dl dt {
	/*width: 30%;*/
	padding-bottom: 0.5em;
	font-weight: bold;
	position: relative;
}
div#opinion dl.dllist-002 dl dt.edit {
	width: 30%;
}
div#opinion dl.dllist-002 dl dt button {
	min-width: inherit;
	padding: 0.3em;
	margin-left: 0.5em;
	line-height: 1;
}
div#opinion dl.dllist-002 dl dt.edit button {
	background-color: #333;
}
div#opinion dl.dllist-002 dl dd {
	width: 70%;
	padding-bottom: 0.5em;
	display: none;
}
div#opinion dl.dllist-002 dl dt.edit + dd {
	display: block;
}
div#opinion dl.dllist-002 dl dd ul li {
	display: inline-block;
}
div#opinion dl.dllist-002 dl dd ul li label {
	margin: 0;
	pointer-events: none;
}
div#opinion dl.dllist-002 dl dt.edit + dd ul li label {
	pointer-events: auto;
}
div#opinion dl.dllist-002 dl dd ul li label input + span {
	display: none;
}
div#opinion dl.dllist-002 dl dt.edit + dd ul li label input + span {
	display: inherit;
}
div#opinion dl.dllist-002 dl dd ul li label input:checked + span {
	display: inline;
	padding-right: 1em;
}
div#opinion dl.dllist-002 dl dt.edit + dd ul li label input + span {
	padding-right: 1em;
}
div#opinion dl.dllist-002 dl dt.edit + dd ul li label input:checked + span {
	color: #D90000;
}
div#opinion dl.dllist-002 dl dd ul li label input:checked + span:before {
	display: none;
}
div#opinion dl.dllist-002 dl dt.edit + dd ul li label input:checked + span:before {
	display: inherit;
}
div#opinion p#btn-filter.active {
	height: 0;
	overflow: hidden;
}
div#opinion p#btn-filter button {
	min-width: inherit;
	background-color: #333;
	padding: 0.5em;
	font-size: 0.8em;
}
div#opinion p#btn-filter + dl.dllist-002.filter {
	height: 0;
	overflow: hidden;
	margin-bottom: 0;
}
div#opinion p#btn-filter.active + dl.dllist-002.filter {
	height: auto;
	overflow: inherit;
	margin-bottom: 1.5em;
}
div#opinion dl.dllist-002.filter > dt button {
	min-width: inherit;
	background-color: #fff;
	color: #333 !important;
	padding: 0.3em;
	width: 1.6em;
	font-size: 0.8em;
	margin-left: 0.5em;
}



/*--------------------------------------------
■［検索結果］
--------------------------------------------*/

ul#userlist-list.searchresult {
	display: flex;
	flex-wrap: wrap;
}
ul#userlist-list.searchresult > li:after {
	background-color: inherit;
}
ul#userlist-list.searchresult > li > a {
	padding-top: 94%;
}
ul#userlist-list.searchresult > li a p.object {
	margin: 0;
}
ul#userlist-list.searchresult > li div.object {
	padding: 1vw;
}
ul#userlist-list.searchresult > li div.object p.thumb {
	margin: 0;
	position: relative;
	height: 0;
	padding-top: 100%;
	overflow: hidden;
}
ul#userlist-list.searchresult > li div.object p.thumb a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
ul#userlist-list.searchresult > li div.object p.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
ul#userlist-list.searchresult > li div.object h6 {
	padding: 0.5em 0;
	font-weight: bold;
	position: relative;
	cursor: pointer;
}
ul#userlist-list.searchresult > li div.object h6.accordion:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f055";
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0.5em;
	top: 0;
	bottom: 0;
	margin: auto;
	line-height: 1;
}
ul#userlist-list.searchresult > li div.object h6.accordion.active:after {
	content: "\f056";
	color: #999;
}
mark {
	color: #D80700;
}
ul#userlist-list.searchresult > li div.object p.thumb a {
	padding: 0;
}
ul#userlist-list.searchresult > li div.object a.matterport:before {
	content: "Matterport";
	border: 1px solid #D80700;
	color: #D80700;
	line-height: 1;
	padding: 0.5em;
	background-color: #fff;
	position: absolute;
	left: 0.5em;
	top: 0.5em;
	font-size: 0.8em;
	z-index: 1;
}
ul#userlist-list.searchresult > li div.object ul.picturesslider.slick-slider {
	margin: 0;
	padding: 0;
}
ul#userlist-list.searchresult > li div.object ul.picturesslider.slick-slider li.slick-slide {
	padding-bottom: 2em;
}
ul#userlist-list.searchresult > li div.object ul.picturesslider.slick-slider li.slick-slide a {
	padding: 0;
	padding-top: 100%;
	overflow: hidden;
	height: 0;
	position: relative;
}
ul#userlist-list.searchresult > li div.object ul.picturesslider.slick-slider li.slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
ul#userlist-list.searchresult > li div.object button.slick-arrow {
	position: absolute;
	left: -10px;
	right: -10px;
	top: auto !important;
	bottom: 0;
	margin: auto;
	background-color: #fff;
	border-radius: 50%;
}
ul#userlist-list.searchresult > li div.object button.slick-arrow.slick-next {
	left: auto;
}
ul#userlist-list.searchresult > li div.object button.slick-arrow.slick-prev {
	right: auto;
}
ul#userlist-list.searchresult > li div.object ul.slick-dots {
	bottom: 0;
}
ul#userlist-list.searchresult > li div.object ul.slick-dots button {
	padding-top: 100%;
	overflow: hidden;
}

dl.resultfilters {
	display: flex;
	margin-bottom: 1.5em;
	border: 1px solid #eee;
	border-radius: 0.3em;
}
dl.resultfilters > dt {
	padding: 0.5em 1em;
	background-color: #eee;
	white-space: nowrap;
}
dl.resultfilters > dd {
	padding: 0.5em;
}
dl.resultfilters > dd > dl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
dl.resultfilters > dd > dl > dt {
}
dl.resultfilters > dd > dl > dt:after {
	content: ": ";
}
dl.resultfilters > dd > dl > dd {
}
dl.resultfilters > dd > dl > dd ul li {
	display: inline-block;
	font-size: 0.8em;
	padding: 0.2em 0.5em;
	background-color: #eee;
	border-radius: 0.2em;
}
dl.resultfilters > dd > dl > dd ul li + li {
	margin-left: 0.2em;
}

/*--------------------------------------------
■［Insight］
--------------------------------------------*/

ul#insight-tab {
	display: flex;
}
ul#insight-tab li button {
	padding: 1em 1.2em;
	display: block;
	background-color: #fff;
	text-decoration: none;
	color: #D90000;
	border: 1px solid #D90000;
	border-bottom-color: rgb(217, 0, 0);
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom: none;
	font-size: 1em;
}
ul#insight-tab li.active button {
	background-color: #D90000;
	color: #fff;
}
div#insight div.insight-cnt {
	display: none;
}
div#insight div.insight-cnt.active {
	display: block;
}
div#insight {
	margin-bottom: 3em;
	border: 4px solid #D90000;
	padding: 2vw;
}
div#insight h4 {
	margin: 2em 0 0 0;
}
div#insight .icon {
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	margin-right: 0.5em;
	vertical-align: middle;
}
div#insight div.accordion-cnt {
	border: 2px solid #ddd;
	padding: 1vw;
	display: none;
}
div#insight div.accordion-cnt ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
div#insight div.accordion-cnt ul > li {
	width: calc(25% - 15px);
}
div#insight div.accordion-cnt ul > li a {
	display: block;
	text-decoration: none;
}
div#insight div.accordion-cnt ul > li a p.thumb {
	display: block;
	margin: 0 0 0.5em 0;
	position: relative;
	overflow: hidden;
	padding-top: 60%;
	height: 0;
}
div#insight div.accordion-cnt ul > li a p.thumb img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
div#insight div.accordion-cnt ul > li a h5 {
	font-weight: bold;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 1em;
}
div#insight div.accordion-cnt ul > li a p.date {
	opacity: 0.6;
}

div.table-container {
	overflow: auto;
	max-width: 100%;
	max-height: 60vh;
}
div#insight div#remarks table tr {
	vertical-align: top;
}
div#insight div#remarks table thead th,
div#insight div#remarks table tbody th,
div#insight div#remarks table tbody td {
	width: 200px;
}
div#insight div#remarks table thead th,
div#insight div#remarks table tbody th:first-child {
	position: sticky;
	top: 0;
	z-index: 1;
}
div#insight div#remarks table thead th:first-child,
div#insight div#remarks table tbody th:first-child {
	left: 0;
}
div#insight div#remarks table thead th:first-child {
	z-index: 2;
}
div#insight div#remarks table tbody th:first-child:before {
	content: "";
	position: absolute;
	left: -1px;
	right: 0;
	top: -1px;
	bottom: 0;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	pointer-events: none;
}
div#insight div#remarks table tbody p.photo {
	height: 180px;
	max-width: 100%;
	margin: 0 0 0.5em 0;
}
div#insight div#remarks table tbody p.photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
div#insight div#remarks table tbody h6,
div#insight div#remarks table tbody h5 {
	margin: 0 0 0.5em 0;
}
div#insight div#remarks table tbody div.comment {
	max-height: 6em;
	overflow-y: auto;
	background-color: #eee;
	padding: 0.5em;
	font-size: 0.86em;
}


div.chat {
	position: relative;
	border-radius: 0.3rem;
	padding: 0.3rem;
	font-size: 0;
	max-height: 26vw;
	margin-bottom: 1.5rem;
	background-color: #eee;
}
div.chat p input[type="text"] {
	width: calc(100% - 100px);
	margin: 0;
	border: none;
	border-radius: 0;
	padding: 0 1em;
	background-color: #fff;
	line-height: 50px;
	font-size: 1rem;
}
div.chat p input[type="text"] + button + button,
div.chat p input[type="text"] + button {
	width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: #333;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 1rem;
	font-weight: normal;
}
div.chat p input[type="text"] + button + button {
	background-color: #d5d8d8;
	color: #333;
	line-height: 1;
}
div.chat p input[type="text"] button img {
	widh: 1em;
	height: 1em;
	display: inline-block;
}
div.chat ul {
	border-bottom: 1px solid #E6EAEA;
	font-size: 1rem;
	max-height: calc(26vw - 3.7em);
	overflow-y: auto;
	display: none;
	padding: 1em;
}
div.chat ul li {
	position: relative;
	padding: 0 60px;
	margin: 1em 0;
}
div.chat ul li.user {
	text-align: right;
	padding-right: 20px;
}
div.chat ul li h5 {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	font-size: 0.76em;
	text-align: center;
	color: #d90000;
}
div.chat ul li h5 span.icon {
	width: 36px;
	height: 0;
	padding-top: 36px;
	overflow: hidden;
	display: block;
	background-color: #d90000;
	margin: 0 auto 0.1em auto !important;
	position: relative;
}
div.chat ul li h5 span.icon img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 70%;
	height: 70%;
	object-fit: cover;
	object-position: center center;
	margin: auto !important;
}
div.chat ul li div.message {
	background-color: #fff;
	border-radius: 0.5em;
	display: inline-block;
	padding: 0.5em 1em;
	position: relative;
}
div.chat ul li.user div.message {
	background-color: #d90000;
	color: #fff;
}
div.chat ul li div.message:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 10px 7px 0;
	border-color: transparent #ffffff transparent transparent;
	position: absolute;
	left: -10px;
	top: 1em;
}
div.chat ul li.user div.message:before {
	border-width: 7px 0 7px 10px;
	border-color: transparent transparent transparent #d90000;
	left: auto;
	right: -10px;
}
div.chat ul li div.message a {
	color: #d90000;
}
div.chat ul li div.message p {
	margin-bottom: 0.5em !important;
}
div.chat ul li div.message p:last-child {
	margin-bottom: 0 !important;
}
div.chat ul li div.message p.mute {
	opacity: 0.5;
	font-size: 0.86em;
}
span.loading {
	display: inline-block;
	opacity: 0.5;
}


/*--------------------------------------------
■［What’s new?］
--------------------------------------------*/

div#news h2 {
	margin: 0 0 1.5em 0;
	font-size: 1.4em;
	font-weight: bold;
}

div#news h2 i {
	color: #D90000;
}




/*--------------------------------------------
■［Group View］
--------------------------------------------*/

div#groupview h2 {
	margin: 0 0 1.5em 0;
	margin-top: 0px;
	font-size: 1.4em;
	font-weight: bold;
}
div#groupview h2 i {
	color: #D90000;
}
nav.listnavi {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1em 0;
}
nav.listnavi > ul {
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid #ddd;
	margin: 0;
	padding: 10px 0;
	font-size: 0.86em;
}
nav.listnavi > ul button {
	margin: 0;
}
nav.listnavi > ul span.selectbox {
	z-index: 200;
}
nav.listnavi > ul span.selectbox button[name="reload"] {
	padding: 0.5em;
	align-items: center;
	font-size: 0.86em;
	margin-left: 5px;
}
nav.listnavi > ul span.selectbox ul li {
	white-space: nowrap;
}

div#viewtable {
	overflow-y: auto;
	position: relative;
	max-height: 80vh;
}
div#viewtable table {
	margin: 0;
	table-layout: auto;
}
div#viewtable table[data-hcol="5"] {
	min-width: 1600px;
}
div#viewtable table[data-hcol="4"] {
	min-width: 1280px;
}
div#viewtable table[data-hcol="3"] {
	min-width: 980px;
}
div#viewtable table button.ss {
	font-size: 0.66em;
}
div#viewtable table thead tr th:last-child button[name="next"],
div#viewtable table thead tr th:nth-child(2) button[name="prev"] {
	display: none;
}
div#viewtable table thead {
	z-index: 1;
}
div#viewtable table thead tr th {
	position: sticky;
	top: 0;
	z-index: 100;
}
div#viewtable table thead tr th:first-child {
	position: sticky;
	left: 0;
	z-index: 101;
}
div#viewtable table thead tr th span {
	margin: 0 0.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	max-width: calc(100% - 4em);
	vertical-align: middle;
}
div#viewtable table tbody tr td {
}
div#viewtable table tbody tr th:nth-child(1) {
	width: 150px;
}
div#viewtable table thead tr th button {
	color: #fff;
}
div#viewtable table tbody {
	z-index: 0;
}
div#viewtable table tbody tr th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	cursor: move;
}
div#viewtable table tbody tr th span {
	margin-right: 0.2em;
}
ul.photolist {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
div#viewtable table tbody ul.photolist > li {
	width: 100%;
	position: relative;
}
div#viewtable table tbody ul.photolist > li:hover {
	z-index: 10;
}
div#viewtable table[data-pcol="1"] tbody ul.photolist > li {
	width: 100%;
}
div#viewtable table[data-pcol="2"] tbody ul.photolist > li {
	width: calc(50% - ((5px * 1) / 2) - 0.5px);
}
div#viewtable table[data-pcol="3"] tbody ul.photolist > li {
	width: calc(33.333% - ((5px * 2) / 3) - 0.5px);
}
div#viewtable table[data-pcol="4"] tbody ul.photolist > li {
	width: calc(25% - ((5px * 3) / 4) - 0.5px);
}
div#viewtable table[data-pcol="5"] tbody ul.photolist > li {
	width: calc(20% - ((5px * 4) / 5) - 0.5px);
}
div#viewtable table[data-pcol="6"] tbody ul.photolist > li {
	width: calc(16.666% - ((5px * 5) / 6) - 0.5px);
}
div#viewtable table[data-pcol="7"] tbody ul.photolist > li {
	width: calc(14.286% - ((5px * 6) / 7) - 0.5px);
}
div#viewtable table[data-pcol="8"] tbody ul.photolist > li {
	width: calc(12.5% - ((5px * 7) / 8) - 0.5px);
}
div#viewtable table[data-pcol="9"] tbody ul.photolist > li {
	width: calc(11.111% - ((5px * 8) / 9) - 0.5px);
}
div#viewtable table[data-pcol="10"] tbody ul.photolist > li {
	width: calc(10% - ((5px * 9) / 10) - 0.5px);
}

ol#setfilter {
	position: relative;
	background-color: #f2f2f2;
	border-radius: 0.2em;
	padding: 1em;
	border: 1px solid #ddd;
}
ol#setfilter:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	border-bottom: 10px solid #dddddd;
	border-top: 0;
	position: absolute;
	left: 1em;
	top: -10px;
}
ol#setfilter li {
	display: inline-block;
	margin-right: 1em;
}
ol#setfilter li:last-child {
	margin-right: 0;
}
ol#setfilter li strong {
	padding: 0.2em 0.6em;
	border-radius: 1.5em;
	font-weight: normal;
	background-color: #fff;
	color: #666;
	margin-right: 0.3em;
}


ul.photolist > li p.thumb {
	height: 0;
	width: 100%;
	padding-top: 100%;
	position: relative;
	margin: 0;
	z-index: 0;
}
ul.photolist > li p.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}
ul.photolist > li p.thumb button {
	position: absolute;
	border-radius: 2em;
	padding: 0;
	background-color: #d90000;
	color: #fff;
	line-height: 20px;
	width: 20px;
	height: 20px;
	text-align: center;
	z-index: 1;
}
ul.photolist > li p.thumb button[name="aboutme"] {
	left: 5px;
	top: 5px;
}
ul.photolist > li p.thumb button[name="scanat"] {
	right: 5px;
	top: 5px;
	background-color: #333;
	border-radius: 0.2em;
}
ul.photolist > li p.thumb button[name="photoinfo"] {
	right: 5px;
	bottom: 5px;
	background-color: #fff;
	color: #333;
}
ul.photolist > li p.thumb span.userid {
	left: 5px;
	bottom: 5px;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.3em;
	border-radius: 0.2em;
	line-height: 1;
	font-size: 0.56em;
	position: absolute;
}
div#viewtable table [data-modal] {
	cursor: pointer;
}
*[data-tooltip] {
	cursor: pointer;
	position: relative;
}
*[data-tooltip]:before,  
*[data-tooltip]:after {  
	position: absolute;  
	transition: all 0.3s ease 0s;  
	opacity: 0;
	display: none;
	pointer-events: none;
	z-index: 2;
}  
*[data-tooltip]:before {  
	content: "";  
	border: 10px solid transparent;  
	border-bottom-color: #333;  
	top: 5px;  
	left: 0;  
}
*[data-tooltip]:after {  
	content: attr(data-tooltip);  
	display: block;  
	padding: 10px;  
	background: #333;  
	color: #fff;  
	border-radius: 5px;  
	top: 25px;  
	left: -95px;  
	width: 190px;
	line-height: 1.4;
	white-space: pre-wrap;
}
*[data-tooltip]:hover,  
*[data-tooltip]:hover {  
	opacity: 1;
}  
*[data-tooltip]:hover:before,  
*[data-tooltip]:hover:after {  
	opacity: 1;
	display: block;
}  
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	height: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
	padding: 0 0.5em !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: #d90000 !important;
}
.select2-container--default .select2-results__group {
	padding: 0.1em !important;
	color: #999;
}
.select2-results__option {
	padding: 0.1em 0.1em 0.1em 1em !important;
}
select.multipleselect {
	display: block;
}
span.select2-selection.select2-selection--multiple:after {
	width: 1em;
	height: 1em;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0.6em;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f002";
	pointer-events: none;
	opacity: 0.5;
	line-height: 1;
}
span.select2-results,
span.select2 {
	font-size: 0.86em;
}
.select2-container .select2-search--inline .select2-search__field {
	padding: 0 0.6em !important;
	margin: 0 !important;
}
div.tab-contents h5 {
	font-weight: bold;
	font-size: 1.1em;
	margin: 1em 0 0.5em 0;
	border-bottom: 2px solid #333;
	padding-bottom: 0.3em;
}
div.tab-contents h5:first-child {
	margin-top: 0;
}
div.tab-contents h6 {
	font-weight: bold;
	font-size: 1em;
	margin: 1em 0 0 0;
}

div#mw-guide ul.slider p.a-center + p.a-center {
	margin-top: 1em;
}
div#mw-guide ul.slider p.a-center strong.num {
	background-color: #d90000;
	color: #fff;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.4;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin-right: 0.5em;
}
div#mw-guide ul.slick-slider button.slick-arrow.slick-prev,
div#mw-guide ul.slick-slider button.slick-arrow.slick-next {
	top: calc(42.5% - 18px);
	bottom: auto;
}

div#mw-photolist div.w20 > div {
	position: sticky;
	top: 0;
}
div#mw-photolist ul.photolist {
	gap: 20px;
}
div#mw-photolist ul.photolist > li {
	width: calc(20% - ((20px * 4) / 5))
}
div#mw-photolist ul.photolist > li p.thumb {
	margin-bottom: 0.5em;
}
div#mw-photolist ul.photolist > li h5 {
	margin-bottom: 0.5em;
	font-size: 0.9em;
}
div#mw-photolist ul.photolist > li h5 button {
	font-size: 1em;
	font-weight: bold;
	padding-right: 1em;
	width: 100%;
	position: relative;
	text-align: left;
	line-height: 1.4;
}
div#mw-photolist ul.photolist > li h5.active button {
	opacity: 0.6;
}
div#mw-photolist ul.photolist > li h5 button:after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f055";
	width: 1em;
	height: 1em;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
div#mw-photolist ul.photolist > li h5.active button:after {
	content: "\f056";
}
div#mw-photolist ul.photolist > li h5 + p {
	font-size: 0.76em;
	line-height: 1.4;
	background-color: #f2f2f2;
	padding: 0.5em;
	border-right: 0.3em;
	margin: 0;
	display: none;
}

div#mw-photo p.photo img {
	max-height: calc(90vh - 180px);
	max-width: 100%;
}

p.imagenum {
	line-height: 1;
}
span.select2-results, span.select2 {
	max-width: 100%;
}
img[data-modal="mw-photo"] {
	cursor: pointer;
}

.nowloading {
	position: relative;
	min-height: 3em;
}
.nowloading:after {
	content: "";
	position: absolute;
	min-height: 2em;
	width: 2em;
	height: 2em;
	background-image: url(../img/loading.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.nowloading > * {
	display: none !important;
}

body.groupview div#mw-category div.tab-contents,
body.groupview div#mw-header div.tab-contents,
body.groupview div#mw-filter div.tab-contents {
	max-height: 70vh;
	overflow-y: auto;
	padding-bottom: 2em;
}
body.groupview div.modal div.btnarea,
body.groupview div.modal ul.tab-menu {
	font-size: 0.86em;
}
ul.slick-slider button.slick-arrow {
	background-color: #fff;
	border-radius: 50%;
}
body.groupview div#mw-guide.modal div.modal-container {
	overflow-y: hidden;
}
body.groupview div.modal div.tab-contents .accordion + div {
	display: none;
	background-color: #eee;
	padding: 1em;
}
body.groupview div.modal div.tab-contents .accordion + div > *:first-child {
	margin-top: 0;
}
body.groupview div.modal div.tab-contents .accordion.active + div {
	display: block;
	margin-top: -0.6em;
}

body.groupview table#tableDragger tbody tr {
	vertical-align: top;
}
body.groupview table#tableDragger[data-location="0"] tbody tr th.location,
body.groupview table#tableDragger[data-location="0"] thead tr th.location {
	display: none;
}
body.groupview table#tableDragger tbody dl {
	border: 1px solid #ccd7ed;
}
body.groupview table#tableDragger tbody dl dd,
body.groupview table#tableDragger tbody dl dt {
	padding: 5px;
}
body.groupview table#tableDragger tbody dl dt {
	background-color: #ccd7ed;
	font-size: 0.76em;
	line-height: 1.3;
	color: #0039a4;
}
body.groupview table#tableDragger tbody dl dt:before{
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f0d7";
	margin-right: 0.3em;
}
body.groupview table#tableDragger[data-location="0"] tbody dl dt {
	display: none;
}
body.groupview table#tableDragger[data-location="0"] tbody dl dt + dd + dt + dd {
	padding-top: 0;
}


span.select2-container {
	min-width: 100%;
}

div#mw-save div.btnarea p {
	position: relative;
}
span.subnavi {
	position: absolute;
	left: 0;
	bottom: 3em;
	line-height: 1;
	background-color: #fff;
	text-align: left;
	border: 3px solid #a6a8a9;
	display: none;
}
button.active + span.subnavi {
	display: block;
}
span.subnavi:before {
	content: "";
	width:0;
	height:0;
	border-style:solid;
	border-width: 10px 10px 0 10px;
	border-color: #A6A8A9 transparent transparent transparent;
	position: absolute;
	left: 0;
	bottom: -10px;
}
span.subnavi button + button {
	border-top: 1px solid #a6a8a9;
}
span.subnavi button {
	font-size: 1em;
	padding: 0.5em;
	white-space: nowrap;
	width: 100%;
	text-align: left;
}
span.subnavi button i {
	color: #D90000;
}

/*--------------------------------------------
■［レスポンシブ］
--------------------------------------------*/

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

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

}

@media screen and (max-width: 768px) {
	
	div#detail ul#yearlist {
		float: none;
		margin: 0 0 1em 0;
		text-align: right;
	}

	div#consumerslist h3 a span {
		display: none;
	}

	ul#userlist-list > li {
		width: 33.333%;
	}

	div#consumerslist ul#userlist-list > li {
		width: 25%;
	}

	div#consumerslist ul#userlist-list > li:nth-last-child(n + 5) {
		display: none;
	}

	div#profile .w38,
	div#profile .w58 {
		float: none;
		width: auto;;
	}

	ul#tab {
		padding: 0;
		margin: 0 0 1rem 0;
		border-bottom: 1px solid #D90000;
		display: block;
	}

	ul#tab li {
		margin: 0;
		display: block;
	}

	ul#tab li a {
		position: relative;
	}

	ul#tab li a:after {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		content: "\f105";
		position: absolute;
		right: 0.5em;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 1em;
		height: 1em;
		line-height: 1;
	}

	ul#tab li.active a:after {
		content: "\f107"
	}

	ul#tab li.active a {
		pointer-events: none;
	}


	div#profile h3 {
		display: none;
	}

	div#profile div#cnt-002 div.w28,
	div#profile div#cnt-002 div.w68 {
		width: auto;
		float: none;
	}

	div#profile div#cnt-002 div.w28{
		display: none;
	}

	div#profile div#cnt-002 div#cnt-002-photo > div {
		display: block;
	}

	div#profile div.profile-cnt {
		display: block;
		margin-bottom: 1em;
	}

	div#profile div.profile-cnt div.clearfix {
		display: none;
	}
	div#profile div.profile-cnt:first-child div.clearfix {
		display: block;
	}
	div#profile div.profile-cnt ul.w48 {
		width: auto;
		float: none;
	}

	ul#thumbnail-slider li {
		height: 15vw;
	}

	ul.slick-slider button.slick-arrow {
		font-size: 1.5rem;
	}

	/*div#remarks {
		padding: 2vw;
	}

	div#remarks ul li span {
		width: 1em;
		height: 1em;
	}*/

	div#cnt-003-detail div#app-reference {
		padding: 2vw;
	}

	div#cnt-003-detail div#app-reference ul {
		margin: 0 0 1.5em 0;
	}

	div#cnt-003-detail div#app-reference ul li {
		width: auto;
		float: none;
		padding: 0;
		margin-bottom: 1em;
	}

	div#cnt-003-detail div#app-reference ul li p.appicon {
		left: 0;
		top: 0;
	}

	div#mostused ul li {
		max-width: inherit;
	}
	
	
	div#mw-news ul {
		display: block;
	}
	div#mw-news ul li {
		width: auto;
		margin-bottom: 0.5em;
	}
	div#mw-news ul + p a.btn {
		min-width: inherit;
		width: 100%;
	}

	/*--------------------------------------------
	■［MY MOBILITY］
	--------------------------------------------*/

	div#mobility h3 {
		display: block;
		margin-top: 2em;
	}

	div#mobility div#cnt-004 div.w28,
	div#mobility div#cnt-004 div.w68 {
		width: auto;
		float: none;
	}
	div#mobility div#cnt-004 div.w28 h4,
	div#mobility div#cnt-004 div.w28 ul {
		display: none;
	}

	div#mobility div#cnt-004 div#cnt-004-timeline > div {
		display: block;
	}

	div#mobility div.timeline:before {
		left: 2.5em;
	}

	div#mobility div.timeline > ul > li.place {
		text-align: left;
		width: 85%;
		padding-right: 0;
		padding-left: 5.5em;
	}

	div#mobility div.timeline > ul > li.place h5 {
		line-height: 3em;
	}

	div#mobility div.timeline > ul > li.place h5:after {
		right: auto;
		margin-right: 0;
		left: 0;
	}

	div#mobility div.timeline > ul > li.move {
		width: auto;
		margin-left: 0;
		padding-left: 5.5em;
		padding-top: 0;
	}

	div#mobility div.timeline > ul > li.move h5 {
		margin: 0 0 0.25em 0;
		font-size: 1.4em;
		position: relative;
		left: auto;
		top: auto;
	}

	div#mobility div.timeline > ul > li.move h5:after {
		left: -3.1em;
		margin-left: 6px;
		content: "";
	}

	div#mobility ul.imagelist > li {
		max-width: inherit;
	}


	/*--------------------------------------------
	■［MY DRYVING］
	--------------------------------------------*/

	div#dryving div.dryving-cnt div.w28,
	div#dryving div.dryving-cnt div.w68 {
		width: auto;
		float: none;
	}



	/*--------------------------------------------
	■［Mind Discovery Map］
	--------------------------------------------*/


	div#minddiscovery div#map {
		overflow: auto;
	}

	div#minddiscovery div#photo ul li {
		width: 20%;
	}

	div#minddiscovery div#photo ul li:nth-child( -n + 10 ) {
		display: none;
	}

	div#minddiscovery div#photo ul li:nth-child( -n + 5 ) {
		display: block;
	}

	

	/*--------------------------------------------
	■［Quick guide］
	--------------------------------------------*/
	div#guide ul {
		flex-wrap: wrap;
		gap: 15px;
	}
	div#guide ul > li {
		width: calc(50% - 7.5px);
	}


	/*--------------------------------------------
	■［interview］
	--------------------------------------------*/
	div#interview div.interview-cnt div.w38,
	div#interview div.interview-cnt div.w58,
	div#interview div.interview-cnt div.w28,
	div#interview div.interview-cnt div.w68 {
		float: none;
		width: auto;
		margin-bottom: 2em;
	}
	div#interview div.text {
		position: relative;
		max-height: 15em;
	}

	div#interview div.text.fixed {
		position: fixed;
		max-height: inherit;
		height: 100vh;
	}

	/*--------------------------------------------
	■［habit］
	--------------------------------------------*/
	div#habit div.habit-cnt div.w28,
	div#habit div.habit-cnt div.w68 {
		float: none;
		width: auto;
		margin-bottom: 2em;
	}
	div#habit ul.tab > li button {
		padding: 0.5em;
	}
	div#habit div.cnt {
		padding: 3vw;
	}
	div#habit div.cnt div.tab-contents {
		height: auto;
	}
	div#habit div.cnt div.tab-contents div.subtitle.fixed {
		top: 52px;
		height: calc(100vh - 52px);
	}
	div#habit div.cnt div.tab-contents div.subtitle div[lang] {
		height: calc(100vh - 52px);
	}


	/*--------------------------------------------
	■［2021年6月11日］
	--------------------------------------------*/
	ul.imagelist > li button.btn-description {
		left: 10px;
		z-index: 2;
	}
	ul.imagelist > li.description-on:before {
		display: none;
	}
	ul.imagelist > li div.description {
		padding: 6vw;
		overflow-y: auto;
		left: 0;
		right: 0;
		display: none;
		height: calc(100vw - 12vw - 8px);
		width: auto !important;
	}

	/*--------------------------------------------
	■［MY DAY］
	--------------------------------------------*/
	div#mobility.day div.timeline > ul > li.move {
		margin-top: 0;
		min-height: inherit;
		margin-left: 0;
	}
	div#mobility.day div.clearfix > div.w28.f-left,
	div#mobility.day div.clearfix > div.w68.f-right,
	div#mobility.day div.clearfix > div.w48.f-left,
	div#mobility.day div.clearfix > div.w48.f-right {
		width: auto;
		float: none;
	}

	/*--------------------------------------------
	■［MY OPTION］
	--------------------------------------------*/
	div#opinion div.option-cnt > div.clearfix {
		display: block;
	}
	div#opinion div.option-cnt > div.clearfix > div.f-left.w18,
	div#opinion div.option-cnt > div.clearfix > div.f-right.w78 {
		float: none;
		width: auto;
	}
	div#opinion div.option-cnt > div.clearfix > div.f-left.w18 {
		margin-bottom: 2em;
	}
	div#opinion div.option-cnt > div.clearfix > div.f-right.w78 {
		padding-left: 0;
	}
	div#opinion ul.tab > li button {
		padding: 0.5em 0.6em;
	}
	.c10 > li,
	.c9 > li,
	.c8 > li,
	.c7 > li,
	.c6 > li,
	.c5 > li,
	.c4 > li,
	.c3 > li,
	.c2 > li,
	.c1 > li {
		width: auto;
		float: none;
	}
	div#opinion ul.userlist3, div#opinion ul.userlist2, div#opinion ul.userlist {
		display: block;
	}

	/*--------------------------------------------
	■［Insight］
	--------------------------------------------*/

	ul#insight-tab {
		gap: 0 2px;
	}
	ul#insight-tab li button {
		padding: 0.5em 0.6em;
		font-size: 3.6vw;
	}
	div#insight div.accordion-cnt {
		padding: 3vw;
	}
	div#insight div.accordion-cnt > ul {
		display: block;
	}
	div#insight div.accordion-cnt > ul > li{
		width: auto;
		margin-bottom: 1em;
	}
	
	div.chat {
		max-height: 57vw;
	}
	div.chat p input[type="text"] {
		width: calc(100% - (36px * 2));
		line-height: 36px;
	}
	div.chat p input[type="text"] + button,
	div.chat p input[type="text"] + button + button {
		width: 36px;
		height: 36px;
		line-height: 36px
	}
	div.chat p input[type="text"] + button + button {
		line-height: 1
	}
	div.chat ul {
		max-height: calc(58vw - 3.7em);
	}

}

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

	ul#userlist-list > li {
		width: 50%;
	}

	div#consumers div.consumers-cnt div.clearfix > div.f-left {
		width: auto;
		float: none;
	}

	div#consumers div.consumers-cnt div.clearfix > div.f-right {
		width: auto;
		float: none;
	}

	div#consumers div#detail dl.filters {
		padding-left: 1.5em;
	}

	div#consumers div#detail dl.filters dt {
		position: inherit;
		left: auto;
	}

}