@charset "utf-8";

/* 会員専用 全体 
---------------------------------------------------------*/
@media screen and (max-width: 767px) {
	p, span, a, li {
		font-size: 14px;
	}
}

/* ヘッダー
---------------------------------------------------------*/
.member .h_wrap {
	display: flex;
	align-items: center;
}
.member .h_logo a {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	color: #484848;
}
.member .h_logo a span:hover {
	opacity: 0.7;
	transition: 0.3s;
}
.member .h_logo img {
	display: block;
	height: 50px;
	width: auto;
}
@media screen and (max-width: 767px) {
	.member .h_logo img {
		height: 35px;
	}
	.member .h_logo span {
		font-size: 12px;
	}
}

/* ヘッダーナビ 
---------------------------------------------------------*/
.member .gn .gn_round li a, .gn_round li a {
	font-size: 16px;
	background-color: #60c492;
	color: #fff;
}
.member .menu > li {
	padding-right: 40px;
}
.member .menu > li a, .menu > li.menu__single {
	font-size: 16px;
}
.member li.menu__single:hover ul.menu__second-level {
	width: 248px;
}
@media screen and (min-width: 769px) {
	.member .h_logo a {
		width: 550px;
		max-width: max-content;
	}
}
@media screen and (max-width: 1250px) {
	.h_logo {
		margin-left: 0;
	}
	.member .menu > li {
		padding-right: 16px;
	}
	.member .menu > li a, .menu > li.menu__single {
		font-size: 15px;
	}
	.member .gn .gn_round li a, .gn_round li a {
		font-size: 15px;
	}
}
@media screen and (max-width: 1200px) {
	.h_wrap {
		padding: 12px 0 12px 0;
	}
}
@media screen and (max-width: 1050px) {
	.member .h_logo a {
		width: 320px;
	}
	.h_wrap div.forpc {
		margin-right: 0px;
	}
}
@media screen and (max-width: 830px) {
	.member .h_logo a {
		width: 280px;
		font-size: 14px;
	}
}
@media screen and (min-width: 768px) and (max-width: 768.9px) {
	.ph_txt {
		top: -220px;
	}
	.ph_index {
		margin-bottom: -11em;
	}
	.member .h_logo a {
		width: auto;
	}
}
@media screen and (max-width: 767px) {
	.h_wrap {
		padding: 0;
	}
}

/* フッター 
---------------------------------------------------------*/

@media screen and (max-width: 767px) {
	.member .f_logo {
		padding: 3em 0 0.75em;
	}
}

/* 会員専用トップページ 
---------------------------------------------------------*/
.member .ph_txt {
	background: rgba(255, 255, 255, 0.735);
}

/* 会員専用お知らせ
---------------------------------------------------------*/
.member .category-list li {
	width: 25%;
}

/* 1つ目 */
.member .category-list li:nth-child(1):hover, .member .category-list li:nth-child(1).ver-on {
	background: #3fab75;
	opacity: 1;
}

/* 2つ目 */
.member .category-list li:nth-child(2):hover, .member .category-list li:nth-child(2).ver-on {
	background: #60c492;
	opacity: 1;
}

/* 3つ目 */
.member .category-list li:nth-child(3):hover, .member .category-list li:nth-child(3).ver-on {
	background: #71cdae;
	opacity: 1;
}

/* 4つ目 */
.member .category-list li:nth-child(4):hover, .member .category-list li:nth-child(4).ver-on {
	background: #92d6b4;
	opacity: 1;
}

.member .category-list li a:hover {
	color: #fff;
}
.member .idx_blog_date .topics-cat, .member .topicsBox span.topics-cat {
	display: inline-block;
	width: fit-content;
	padding: 7.5px 12px 6px;
	white-space: nowrap;
	background: #3fab75 !important;
}
.member .idx_blog_date .topics-cat.asimov-news, .member .topicsBox span.topics-cat.asimov-news {
	background: #60c492 !important;
}
.member .idx_blog_date .topics-cat.robo-release, .member .topicsBox span.topics-cat.robo-release {
	background: #71cdae !important;
}
.member .idx_blog_date .topics-cat.service-status, .member .topicsBox span.topics-cat.service-status {
	background: #92d6b4 !important;
}
@media screen and (max-width: 768px) {
	.member .category-list {
		margin: 20px auto 10px auto;
	}
	.member .category-list li {
		width: 49.8%;
		display: inline-block;
		text-align: center;
		background: #f4f4f6;
		margin-right: 0px;
		float: left;
		border: 0.3px solid #e2e2e2;
	}
	.member .category-list li a {
		font-size: 76%;
		padding: 10px 5px;
	}
}

/* 会員専用お知らせ 詳細
---------------------------------------------------------*/
.member .topicsBox {
	margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
	.member .topicsBox {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* お役立ち情報 tips-insight
---------------------------------------------------------*/
.member .topicsBox.tips-insight {
	padding: 172px 0 172px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
}
.member .topicsBox.tips-insight .right_content .box {
	position: relative;
}
.member .topicsBox.tips-insight .right_content .box::before {
	content: "";
	display: inline-block;
	background: url("../../img/member/member_icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 75px;
	height: 75px;
	position: absolute;
	transform: translate(370%, -140%) rotate(5deg);
	z-index: -1;
	opacity: 0.75;
}
.member .topicsBox.tips-insight p.title {
	text-align: center;
	position: relative;
}
.member .topicsBox.tips-insight p.title::before {
	content: "";
	display: inline-block;
	background: url("../../img/member/member_icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 120px;
	height: 120px;
	position: absolute;
	transform: translate(-120%, -60%) rotate(-22deg);
	z-index: -1;
	opacity: 0.75;
}
.member .topicsBox.tips-insight p.title::after {
	content: "";
	display: inline-block;
	background: url("../../img/member/member_icon.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 300px;
	height: 300px;
	position: absolute;
	transform: translate(0%, -40%) rotate(16deg);
	z-index: -1;
	opacity: 0.75;
}
.member .topicsBox.tips-insight img {
	width: 38%;
}
@media screen and (min-width: 769px) and (max-width: 920px) {
	.member .topicsBox.tips-insight .right_content .box::before {
		transform: translate(315%, -140%) rotate(5deg);
	}
}
@media screen and (min-width: 768px) and (max-width: 768.9px) {
	.member .topicsBox.tips-insight {
		padding: 180px 0 120px;
	}
}
@media screen and (max-width: 767px) {
	.member .topicsBox.tips-insight {
		padding: 100px 0 80px;
	}
	.member .topicsBox.tips-insight img {
		width: 48%;
	}
	.member .topicsBox.tips-insight .right_content .box::before {
		width: 50px;
		height: 50px;
		transform: translate(160%, -150%) rotate(5deg);
	}
	.member .topicsBox.tips-insight p.title::before {
		width: 80px;
		height: 80px;
		transform: translate(-100%, -60%) rotate(-22deg);
	}
	.member .topicsBox.tips-insight p.title::after {
		width: 160px;
		height: 160px;
		transform: translate(-30%, -40%) rotate(16deg);
	}
}