@charset "UTF-8";

/* ---------------
 インナー
------------------------------*/
.inner{
	width: 100%;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

@media screen and (max-width: 1280px){
	.inner{
		padding-right: 1.5em;
		padding-left: 1.5em;
	}
}

/* ---------------
 背景パターン
------------------------------*/
.bg_pattern {
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff4f4;
  /* z-index: -1; */
}
.bg_v3 {
  background-size: 20px 20px;
  background-image: repeating-linear-gradient(45deg, #d4ecff 0, #d4ecff 2px, #edf7ff 0, #edf7ff 50%);
}

/* ---------------
 会員専用ページ ログイン
------------------------------*/
.member_login_wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 5em 1.5em;
	border-radius: 1em;
	background: #fff;
	text-align: center;
}

/* ログインボタン */
.btn {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 280px;
	padding: 1em 0;
	color: #ef246d;
	font-weight: 400;
	text-align: center;
	text-decoration: none;
	border-radius: 2em;
	border: 1px solid #ef246d;
	background: #fff;
}
.btn::after {
	content: ">";
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -0.5em;
	color: #ef246d;
	font-size: 0.875em;
	font-weight: 300;
	transform: scale(1, 1.8) translateY(-1px);
}
.btn:hover {
	cursor: pointer;
	color: #fff;
	background: #ef246d;
}
.btn:hover::after {color: #fff;}
input.mr20 {padding: 0.5em 0.8em;}
.f_r {margin-bottom: 1em; color: #ff0000; font-size: 0.8em;}

/* ログアウトボタン */
.logout_wrap{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto -45px;
	padding-top: 1em;
	text-align: right;
}

.logout_wrap button{
	position: relative;
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 2em;
	border: 1px solid #f0256d;
	background: #fff;
	color: #f0256d;
	font-size: 0.9375em;
}

@media (any-hover:hover){
	.logout_wrap button:hover{
		background: #f0256d;
		color: #fff;
	}
}

/* ---------------
 会員一覧ページ
------------------------------*/
.member_container{margin-top: 2em;}
.member_container_main{width: 100%;}

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

}

#member .content_wrapper {padding-bottom: 3em;}
.memberlist_table {
	width: 100%;
	border-collapse: collapse;
}
.memberlist_table td{text-align: left;}

.memberlist_table td:first-child {border-right: none;}
.memberlist_table td:nth-child(2) {border-left: none;}
.memberlist_table td:last-child {text-align: center;}
.memberlist_table td img {
	vertical-align: middle;
	max-width: 200px;
	max-height: 50px;
}
.memberlist_table td .btn {
	padding: 0.2em 3em 0.2em 2em;
	font-size: 0.8em;
}
.memberlist_table td .btn::after{margin-top: -0.875em;}
.memberlist_caption {margin-top: 0.5em;}

.pdf {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.5em;
	border-radius: 3px;
	background: #d00;
	color: #fff;
	font-size: 0.875em;
	text-indent: 0;
}
.excel {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0 0.5em;
	border-radius: 3px;
	background: #24914e;
	color: #fff;
	font-size: 0.875em;
	text-indent: 0;
}

@media screen and (max-width: 1200px){
	.memberlist_table td .btn {padding: 0.2em 2em 0.2em 1em;}
}
@media screen and (max-width: 1024px){
	.memberlist_table_area{overflow-x: scroll;}
	.memberlist_table {width: 1000px;}
}
@media screen and (max-width: 640px){
	.memberlist_table_area {
		width: auto;
		margin: 0 -1.5em;
		padding: 0 1.5em;
		overflow-x: scroll;
	}
	/* .memberlist_table {width: 100%;} */
	.memberlist_table th,
	.memberlist_table td{
		padding: 0.5em;
	}
}

/* ---------------
 取扱い品目／規格ページ
------------------------------*/
.item article {
	margin-bottom: 3em;
	padding-bottom: 3em;
	border-bottom: 1px dotted #777;
}
.item .btn {margin: 1em 0; padding: 0.2em 0;}
.item .flex_box .column2:last-child {text-align: center;}
.item .flex_box .column2:last-child img{max-width: 400px;}

.item .item_member {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item .item_member li{
	display: block;
	width: 33.333333%;
	padding: 1em;
}
.item .item_member li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 2em 1em;
	border: 1px solid #0067c0;
	background: #0067c0;
	text-align: center;
	color: #fff;
	font-size: 1.2em;
}

@media (any-hover: hover) {
	.item .item_member li a:hover{
		background: #fff;
		color: #0067c0;
	}
}

.item .item_member li a.cloed{
	border: 1px solid #999;
	background: #999;
}
@media (any-hover: hover) {
	.item .item_member li a.cloed:hover{
		border: 1px solid #999;
		background: #999;
		color: #fff;
		cursor: default;
	}
}


.item .flex_box .column4 {margin-bottom: 2em; padding: 0.5em;}
.item .flex_box .column4 figure img {background: #efefef;}
.item .flex_box .column4 figcaption{text-align: center;}

@media screen and (max-width: 1024px){
	.item article {padding-bottom: 3em;}
	.item .flex_box .column2:first-child{width: 60%;}
	.item .flex_box .column2:last-child{width: 40%;}
	.item .flex_box .column2:last-child img{max-width: 100%;}
	.item .item_member li{padding: 0.5em;}

	.item .flex_box .column4 {width: 33.333333%;}
}
@media screen and (max-width: 640px){
	.item article {padding: 1.5em 0;}
	.item .flex_box .column2:first-child{width: 100%;}
	.item .flex_box .column2:last-child{width: 100%;}
	.item .flex_box .column2:last-child img{max-width:400px;}
	.item .item_member li{width: 50%; padding: 0.2em;}

	.item .flex_box .column4 {width: 50%;}
}

@media screen and (max-width: 400px){
	.item .flex_box .column2:last-child img{max-width:100%;}
}

/* ---------------
 会員専用ページ
------------------------------*/
.member_bg {background: #fdf2f2;}
h5.headLine1 {
	margin-top: 1em;
	margin-bottom: 20px;
	padding-left: 0.5em;
	font-size: 1.25em;
	font-weight: 700;
	border-left: 5px solid #0067c0;
}
.member_news {
	display: block;
	padding: 1em 1.5em;
	border-radius: 1em;
	background: #fff;
}
.member_box .flex_box {
	flex-wrap: nowrap;
	padding: 1em 0;
	border-bottom: 1px dashed #ccc;
}
.member_box .flex_box:last-child {border-bottom: none;}

.member_box .flex_box .column5-1 {width: 20%;}
.member_box .flex_box .column5-4 {width: 80%; padding-left: 2em;}

:where(img, picture, svg) {
	max-inline-size: 100%;
	block-size: auto;
}
.member_box p {margin-top: 0.5em;}
.member_date {
	display: inline-block;
	color: #0067c0;
	font-weight: 700;
}
.member_category {
	display: inline-block;
	margin-left: 1em;
	padding: 0.2em 1em;
	color: #fff;
	font-size: 0.8em;
}
.member_category.news {background:#0067c0;}
.member_category.event {background: #bb8d24;}
.member_category.seminar {background: #24914e;}

.member_title {
	display: block;
	margin: 0.5em 0;
	font-size: 1.5em;
	font-weight: 700;
}

/* 会員メニューボタン */
.member_menu {margin: 2em 0;}
.member_menu_btn ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.member_menu_btn ul::after {
	content: "";
	display: block;
	width: 32.333333%;
}
.member_menu_btn ul li {
	display: block;
	margin: 1% 0;
	width: 32.333333%;
}
.member_menu_btn ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 2.5em 1em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	text-shadow: 0 0 5px #000;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.member_menu_btn ul li.mmb_01 a {filter:saturate(80%) hue-rotate(0deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
.member_menu_btn ul li.mmb_02 a {filter:saturate(80%) hue-rotate(60deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
.member_menu_btn ul li.mmb_03 a {filter:saturate(80%) hue-rotate(120deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
.member_menu_btn ul li.mmb_04 a {filter:saturate(80%) hue-rotate(180deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
/* .member_menu_btn ul li.mmb_05 a {filter:saturate(80%) hue-rotate(240deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;} */
.member_menu_btn ul li.mmb_05 a {filter:saturate(0) hue-rotate(240deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
.member_menu_btn ul li.mmb_06 a {filter:saturate(80%) hue-rotate(300deg); background: url('/_assets/img/member_btn_bg.jpg') no-repeat center bottom; background-size: cover;}
.member_menu_btn ul li.mmb_01 a:hover {filter:saturate(150%) hue-rotate(0deg);}
.member_menu_btn ul li.mmb_02 a:hover {filter:saturate(150%) hue-rotate(60deg);}
.member_menu_btn ul li.mmb_03 a:hover {filter:saturate(150%) hue-rotate(120deg);}
.member_menu_btn ul li.mmb_04 a:hover {filter:saturate(150%) hue-rotate(180deg);}
.member_menu_btn ul li.mmb_05 a:hover {filter:saturate(150%) hue-rotate(240deg);}
.member_menu_btn ul li.mmb_06 a:hover {filter:saturate(150%) hue-rotate(300deg);}


@media all and (max-width:640px){
	.member_box .flex_box .column5-4 {padding-left: 1em;}
	.member_menu_btn ul::after {display: none;}
	.member_menu_btn ul li {width: 49%;}
}

/* ==========_講習会資料_========== */
.member-docs .date dl{
	display: flex;
}

.member-docs .date dl dt{
	width: 6em;
}

.member-docs .date dl dd{
	width: calc(100% - 6em);
}

.member-docs ol{
	list-style: decimal;
	padding-left: 1em;
}

.member-docs ol > li{
	margin-bottom: 1em;
}

.member-docs ul{
	list-style: disc;
	padding-left: 1em;
}

@media  all and (max-width:640px) {
	.member-docs .date dl{
		display: flex;
		flex-direction: column;
	}
	
	.member-docs .date dl dt,
	.member-docs .date dl dd{
		width: 100%;
	}
}