@charset "utf-8";

/* ==================================================
   ログイン
-------------------------------------------------- */
.login_container {
	width: 900px;
	margin: auto;
}

.loginArea {
	margin: 56px auto 16px;
	padding: 72px 64px 64px;
	border: 3px solid var(--c_navy);
	border-radius: 12px;
}
.loginArea:has(.alerts) {
	padding-top: 40px;
}

.loginArea_input {
	display: grid;
	grid-template-columns: calc(32px + 8em) auto;
	gap: 40px 48px;
	align-items: center;
	font-size: var(--fz_md); /* → 2.3rem */
}
.loginArea .alerts + .loginArea_input {
	margin-top: 32px;
}

.login_title {
	font-weight: var(--fw_b);
	font-size: var(--fz_md); /* → 2.3rem */
}

.login_title label {
	display: flex;
	align-items: center;
}
.login_title label::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin-right: 8px;
}
.login_title label[for="login_num"]::before {
	background-color: var(--c_text);
	-webkit-mask: url("../images/login_icon-num.svg") no-repeat center center / contain;
	mask: url("../images/login_icon-num.svg") no-repeat center center / contain;
}
.login_title label[for="login_mail"]::before {
	background-color: var(--c_text);
	-webkit-mask: url("../images/login_icon-mail.svg") no-repeat center center / contain;
	mask: url("../images/login_icon-mail.svg") no-repeat center center / contain;
}
.login_title label[for="login_pw"]::before {
	background-color: var(--c_text);
	-webkit-mask: url("../images/login_icon-pw.svg") no-repeat center center / contain;
	mask: url("../images/login_icon-pw.svg") no-repeat center center / contain;
}

.login_input input {
	width: 100%;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background-color: var(--c_white);
}

.login_reminder a {
	color: var(--c_blue);
	text-decoration-line: underline;
}
.login_reminder a:hover {
	color: var(--c_link_hover);
	text-decoration-color: transparent;
}

.login_submitBtn,
.mypage_submitBtn,
.mypage_backBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 324px;
	height: 66px;
	margin: 56px auto 0;
	border: 0;
	border-radius: 33px !important;
	background: var(--c_yellow) url("../images/btn_arrow.webp") right 16px center / 7px 12px no-repeat;
	color: var(--c_text);
	transition: var(--transition);
}
.mypage_backBtn {
	position: relative;
	margin-top: 24px;
	border: 2px solid var(--c_yellow);
	background-color: transparent;
	background-image: url("../images/btn_arrow_back.webp");
	background-position: 16px center;
}
.login_submitBtn:hover,
.mypage_submitBtn:hover {
	background-color: var(--c_lightyellow);
	cursor: pointer;
}
.mypage_backBtn:hover {
	border-color: var(--c_lightyellow);
	background-color: var(--c_lightyellow);
	color: var(--c_text);
	cursor: pointer;
}

.login_submitBtn a:hover {
	opacity: .5;
}

@media only screen and (max-width: 1024px) {
	.login_container {
		width: calc(100% - 80px);
	}

	.loginArea {
		margin: 40px auto 8px;
		padding: 56px 40px 40px;
	}

	.loginArea_input {
		gap: 40px 16px;
	}

	.login_submitBtn {
		margin: 40px auto 0;
	}
}

@media only screen and (max-width: 767px) {
	.login_container {
		width: 100%;
	}

	.loginArea {
		padding: 32px 40px 40px;
	}

	.loginArea_input {
		grid-template-columns: auto;
		gap: 0;
	}

	.login_title:nth-of-type(n + 2) {
		margin-top: 24px;
	}
}

@media only screen and (max-width: 520px) {
	.loginArea {
		margin: 32px auto 8px;
		padding: 24px;
	}

	.login_title {
		font-size: var(--fz_base);
	}
	.login_title:nth-of-type(n + 2) {
		margin-top: 16px;
	}

	.login_input input {
		padding: 8px;
	}

	.login_submitBtn {
		width: 100%;
	}
}


/* ----- パスワードをお忘れの方 ----- */
.login_reminder_link {
	color: var(--c_blue);
	text-decoration: underline;
}
.login_reminder_link:hover {
	color: var(--c_link_hover);
	text-decoration-color: transparent;
}



/* ==================================================
   会員ページ（共通）
-------------------------------------------------- */
.page_mainvisualArea.page_mainvisual_member h2 {
	margin-top: 1em;
}

@media only screen and (max-width: 767px) {
	.page_mainvisualArea.page_mainvisual_member h2 {
		margin-top: 1.5em;
	}
}

@media only screen and (max-width: 560px) {
	.page_mainvisualArea.page_mainvisual_member {
		height: 146px;
	}
}

/* ----- 会員ページナビゲーション ----- */
.header_member_nav {
	position: fixed;
	left: 32px;
	top: 96px;
	z-index: 10;
	width: calc(100% - 64px);
	border-radius: 22px;
	background-color: var(--c_navy);
}

.header_member_spNav {
	display: none;
}

.header_member_nav ul {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.header_member_nav li {
	padding: 4px 0;
}
.header_member_nav li:nth-of-type(n + 2) {
	/* margin-left: 88px; */
	margin-left: 72px;
}

.header_member_nav a {
	color: #fff;
	font-weight: var(--fw_b);
}
.header_member_nav a:hover {
	color: var(--c_yellow);
}

@media only screen and (max-width: 1280px) {
	.header_member_nav {
		top: 76px;
	}
}

@media only screen and (max-width: 1200px) {
	.header_member_nav li:nth-of-type(n + 2) {
		/* margin-left: 4.5vw; */
		margin-left: 3.7vw;
	}
}

@media only screen and (max-width: 1024px) {
	.header_member_nav {
		left: 15px;
		top: 60px;
		width: calc(100% - 30px);
	}

	.header_member_nav li {
		font-size: var(--fz_xs);
	}
}

@media only screen and (min-width: 841px) {
	.header_member_nav ul {
		display: flex !important;
	}
}

@media only screen and (max-width: 840px) {
	.header_member_spNav {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 4px 0;
		border: 0;
		background-color: transparent;
		color: #fff;
		font-size: var(--fz_xs); /* → 1.4rem */
		font-weight: var(--fw_b);
	}
	.header_member_spNav::before {
		content: "";
		display: block;
		width: 1.6em;
		height: 1.6em;
		margin-right: .5em;
		background: url("../images/header_member_spnav.svg") var(--bg_cc_contain);
	}

	.header_member_nav ul {
		display: none;
		padding: 4px 0;
	}

	.header_member_nav li {
		padding: 0;
	}
	.header_member_nav li:nth-of-type(n + 2) {
		margin-left: 0;
	}

	.header_member_nav a {
		display: block;
		padding: 4px 0;
		font-weight: var(--fw_r);
		text-align: center;
	}
}

@media only screen and (max-width: 767px) {
	.header_member_nav {
		top: 56px;
	}
}

@media only screen and (max-width: 500px) {
	.header_member_nav {
		left: 10px;
		width: calc(100% - 20px);
	}
}


/* ==================================================
   会員トップページ
-------------------------------------------------- */
/* ----- 会員専用のお知らせ ----- */
.member_newsArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	/* width: 900px;
	margin: auto; */
}

.member_newsArea h3 {
	width: 100%;
	margin-top: 0 !important;
}

.member_news {
	width: 100%;
	border-top: 1px solid var(--c_bdc_news);
}
.member.child-page .member_news {
	width: 876px;

	/* カテゴリ非表示 */
	width: 100%;
}

.member_news li {
	border-bottom: 1px solid var(--c_bdc_news);
}

.member_news a {
	display: grid;
	grid-template-columns: 5.5em 12em auto;
	column-gap: 32px;
	padding: 24px 0;

	/* カテゴリ非表示 */
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.member_news_date {
	color: #888;
	font-weight: var(--fw_b);
	font-size: calc(var(--fz_base) * .9);
}

.member_news_cat {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .25em .5em;
	border: 1px solid var(--c_blue);
	border-radius: 6px;
	color: var(--c_blue);
	font-size: var(--fz_xs);
	line-height: 1.6;

	/* カテゴリ非表示 */
	display: none;
}

.member_news_title {
	/* カテゴリ非表示 */
	width: calc(100% - 236px);
}

.member_newsArea .pagination {
	width: 100%;
}

@media only screen and (max-width: 1280px) {
	.member.child-page .member_news {
		width: 68.438vw;
	}
}

@media only screen and (max-width: 1024px) {
	.member_newsArea {
		width: 100%;
	}

	.member_news {
		order: 0;
	}
	.member.child-page .member_news {
		width: 100%;
	}

	.member_news_title {
		/* カテゴリ非表示 */
		width: calc(100% - 17.969vw);
	}

	.member_newsArea .pagination {
		order: 1;
	}
}

@media only screen and (max-width: 920px) {
	.member_news a {
		/* カテゴリ非表示
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px; */
	}

	.member_news_cat {
		min-width: 8em;
	}

	.member_news_title {
		width: 100%;

		/* カテゴリ非表示 */
		width: calc(100% - 22.19vw);
	}
}

@media only screen and (max-width: 640px) {
	.member_news a {
		/* カテゴリ非表示 */
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px;
	}

	.member_news_title {
		/* カテゴリ非表示 */
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
	.member_newsArea {
		width: 100%;
	}
}

/* サイドバー　*/
.mainContents_side.member_news_catList {
	width: 264px;

	/* カテゴリ非表示 */
	display: none;
}

.member_news_catList dt {
	padding-left: 0;
}
.member_news_catList dt::before {
	content: none;
}

.member_news_catList dd:nth-of-type(n + 2) {
	margin-top: 6px;
}

.member_news_catList a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px;
	border: 1px solid var(--c_bdc);
	border-radius: 6px;
	background-color: #fff;
	color: var(--c_blue);
	font-size: var(--fz_xs);
	text-align: center;
}

.member_news_catList a:hover {
	border-color: var(--c_blue);
	background-color: var(--c_blue);
	color: #fff;
}

@media only screen and (max-width: 1280px) {
	.mainContents_side.member_news_catList {
		width: 20.625vw;
	}
}

@media only screen and (max-width: 1160px) {
	.mainContents_side.member_news_catList {
		margin-top: 0;
	}
}

@media only screen and (max-width: 1024px) {
	.mainContents_side.member_news_catList {
		order: 2;
		width: 100%;
		margin-top: 48px;
	}

	.member_news_catList dl {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.member_news_catList dt {
		grid-column: 1 / 3;
		margin-bottom: 8px;
	}

	.member_news_catList dd:nth-of-type(n + 2) {
		margin-top: 0;
	}
}

@media only screen and (max-width: 500px) {
	.member_news_catList dl {
		grid-template-columns: 1fr;
	}

	.member_news_catList dt {
		grid-column: 1 / 2;
	}
}


/* ----- 動画コンテンツ ----- */
.member_movie {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
}

.member_movie li {
	font-size: 1.7rem;
	line-height: 1.6;
}

.member_movie a {
	color: var(--c_text);
}
.member_movie a:hover {
	opacity: .5;
}

.member_movie .member_movie_bg {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 134 / 83;
	margin-bottom: 4px;
	background-color: var(--c_text);
}
.member_movie .member_movie_bg:empty {
	background: #999 url("../images/member_movie_logo.svg") center center / 90% no-repeat;
}

.member_movie img {
	object-fit: contain;
	font-family: 'object-fit: cover;';
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 1024px) {
	.member_movie {
		gap: 2.148vw;
	}
}

@media only screen and (max-width: 767px) {
	.member_movie {
		grid-template-columns: repeat(2, 1fr);
		gap: 3.516vw;
	}
}

@media only screen and (max-width: 520px) {
	.member_movie {
		grid-template-columns: repeat(1, 1fr);
		gap: 20px;
	}

	.member_movie .member_movie_bg:not(:empty) {
		aspect-ratio: auto;
	}
}


/* ----- 資料 ----- */
.member_document {
	display: flex;
	justify-content: space-between;
	/* justify-content: center;
	gap: 24px; */
	margin-top: 88px;
}

.member_document li {
	width: 24%;
}

.member_document a {
	display: block;
	/* width: 16em; */
	width: 100%;
	padding: .25em .5em;
	border: 1px solid var(--c_blue);
	border-radius: 6px;
	color: var(--c_blue);
	text-align: center;
}
.member_document a:hover {
	opacity: .5;
	color: var(--c_blue);
}

/* @media only screen and (max-width: 1024px) { */
@media only screen and (max-width: 1040px) {
	.member_document {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1.563vw;
	}

	.member_document li {
		width: auto;
	}

	.member_document a {
		/* width: auto; */
		font-size: var(--fz_xs);
	}
}

@media only screen and (max-width: 840px) {
	.member_document {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 640px) {
	.member_document {
		grid-template-columns: 1fr;
	}

	.member_document a {
		font-size: var(--fz_base);
	}
}


/* ==================================================
   会員専用のお知らせ-記事
   動画コンテンツ-記事
-------------------------------------------------- */
.member_articleArea {
	width: 900px;
	margin: auto;
}

.member_article_header {
	display: flex;
	flex-direction: column-reverse;
	row-gap: 8px;
}

.member_article_header h3 {
	margin-top: 4px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--c_bdc_news);
	font-size: var(--fz_xxl); /* → 3.9rem */
	line-height: 1.5;
}

.member_news_catTitle {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--fz_md);
}
.member_news_catTitle::before,
.member_news_catTitle::after {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background-color: var(--c_text);
}
.member_news_catTitle::before {
	margin-right: 8px;
}
.member_news_catTitle::after {
	margin-left: 8px;
}

.member_article_date {
	display: flex;
	align-items: center;
	margin-right: 16px;
}
.member_article_date::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	background-color: var(--c_text);
	-webkit-mask: url("../images/icon-publish.svg") no-repeat center center / contain;
	mask: url("../images/icon-publish.svg") no-repeat center center / contain;
}

.member_article_header_sub {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.member_article_cat {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 8em;
	padding: .25em .5em;
	border: 1px solid var(--c_blue);
	border-radius: 6px;
	color: var(--c_blue);
	font-size: var(--fz_xs);
	text-decoration: none !important;
	line-height: 1.6;

	/* カテゴリ非表示 */
	display: none;
}
.member_article_cat:hover {
	border-color: var(--c_blue);
	background-color: var(--c_blue);
	color: #fff !important;
}

@media only screen and (max-width: 1024px) {
	.member_articleArea {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.member_article_header h3 {
		margin-top: 0;
		margin-bottom: 16px;
		padding-bottom: 16px;
		font-size: var(--fz_lg); /* → 2.8rem */
	}
}

@media only screen and (max-width: 480px) {
	.member_articleArea {
		width: 100%;
	}
}

/* 動画コンテンツ-記事 */
.member_movieArea {
	margin-bottom: 1em;
}



/* ==================================================
   ダウンロード
-------------------------------------------------- */
.member_downloadArea {
	width: 900px;
	margin: auto;
}

.member_download_lede {
	text-align: center;
}

@media only screen and (max-width: 1024px) {
	.member_downloadArea {
		width: 100%;
	}
}


/* ----- バナー ----- */
.member_download_bn {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin-top: 24px;
}

.member_download_bn li {
	border: 1px solid var(--c_bdc);
}

.member_download_bn_other a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-size: var(--fz_xs); /* → 1.4rem */
}

@media only screen and (max-width: 1276px) {
	.member_download_bn {
		gap: .94vw;
	}
}

@media only screen and (max-width: 840px) {
	.member_download_bn {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5vw;
	}

	.member_download_bn_other a {
		font-size: var(--fz_base);
	}
}

@media only screen and (max-width: 500px) {
	.member_download_lede {
		text-align: left;
	}

	.member_download_lede .ib {
		display: inline;
	}

	.member_download_bn {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* ----- 一覧 ----- */
.member_download_list {
	margin-top: 56px;
	border-top: 1px solid var(--c_bdc_news);
}

.member_download_list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 0;
	border-bottom: 1px solid var(--c_bdc_news);
}

.member_download_maker {
	padding: 0 8px;
	border-radius: 4px;
	font-size: var(--fz_xs); /* → 1.4rem */
}
.member_download_maker:hover {
	opacity: .5;
}
.member_download_panasonic {
	background-color: var(--c_navy);
	color: #fff !important;
}
.member_download_hebel {
	background-color: var(--c_text);
	color: #fff !important;
}
.member_download_daiwa {
	background-color: #f14c39;
	color: #fff !important;
}
.member_download_misawa {
	background-color: var(--c_blue);
	color: #fff !important;
}
.member_download_aoiro-ie {
	background-color: #b8e4ff;
	color: var(--c_text) !important;
}
.member_download_other {
	background-color: var(--c_yellow);
	color: var(--c_text) !important;
}

.member_download_file {
	padding-left: 28px;
}

.member_download_file a {
	position: relative;
	color: var(--c_blue);
	font-weight: var(--fw_b);
	font-size: var(--fz_lg); /* → 2.8rem */
}
.member_download_file a:hover {
	color: var(--c_link_hover);
}
.member_download_file a::before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	position: absolute;
	left: -28px;
	top: 8px;
	margin-right: 16px;
	background: url("../images/guide_list_icon.webp") var(--bg_cc_contain);
}

@media only screen and (max-width: 767px) {
	.member_download_file {
		margin-top: 10px;
		padding-left: 32px;
	}

	.member_download_file a {
		/* margin-top: 8px; */
		font-size: var(--fz_md);
		line-height: 1.75;
	}
	.member_download_file a::before {
		left: -32px;
		top: 5px;
	}
}


/* ----- カテゴリー ----- */
.member_download_catTitle {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--fz_md);
}
.member_download_catTitle::before,
.member_download_catTitle::after {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background-color: var(--c_text);
}
.member_download_catTitle::before {
	margin-right: 8px;
}
.member_download_catTitle::after {
	margin-left: 8px;
}



/* ==================================================
   マイページ
-------------------------------------------------- */
.mypage_lede {
	text-align: center;
}

.mypage_container {
	width: 900px;
	margin: auto;
}

.mypageArea_input {
	display: grid;
	grid-template-columns: 34.6% auto;
	align-items: center;
}

.mypage_title {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 40px 0;
	border-bottom: 1px solid var(--c_white);
	font-weight: var(--fw_b);
	font-size: var(--fz_md); /* → 2.3rem */
}

.mypage_title label {
	display: flex;
	align-items: center;
}

.mypage_input {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 40px 0;
	border-bottom: 1px solid var(--c_white);
}

.mypage_input input,
.mypage_input select,
.mypage_input textarea {
	width: 100%;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background-color: var(--c_white);
}
.mypage_input select {
	appearance: none;
}
.mypage_input textarea {
	height: 8em;
}

.mypage_zipcodeArea input {
	width: 12em;
}

.mypage_telArea input {
	width: 16em;
}

.mypage_input .notes {
	margin-top: 0;
	margin-left: 1.1em;
	font-size: var(--fz_xs); /* → 1.4rem */
}

.mypage_regionArea {
	position: relative;
	width: 16em;
}
.mypage_regionArea::after {
	content: "";
	display: block;
	position: absolute;
	right: 16px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--c_text);
	border-bottom: 2px solid var(--c_text);
	transform: translateY(-50%) rotate(45deg);
}

@media only screen and (max-width: 1024px) {
	.mypage_container {
		/* width: calc(100% - 50px); */
		width: 100%;
	}
}

@media only screen and (max-width: 840px) {
	.mypageArea_input {
		grid-template-columns: 100%;
	}

	.mypage_title {
		padding-top: 16px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.mypage_input {
		padding-top: 4px;
		padding-bottom: 32px;
	}
}

@media only screen and (max-width: 767px) {
	.mypage_lede {
		text-align: left;
	}

	.mypage_lede .ib {
		display: inline;
	}
}

@media only screen and (max-width: 560px) {
	.mypage_input {
		flex-direction: column;
		align-items: flex-start;
	}

	.mypage_input .notes {
		margin-left: 0;
	}
}

@media only screen and (max-width: 480px) {
	.mypage_container {
		width: 100%;
	}
}

/* 確認画面 */
.mypage_conf_pwArea {
	color: #7796bd;
	font-size: var(--fz_xs); /* → 1.4rem */
}