@media screen and (min-width: 1381px) {
	#globalNav .main > li.__open #catAllUI {
		visibility : visible;
		opacity : 1;
	}

	#globalNav .main > li.__open > a {
		color : #ffffff;
		background-color : #1f78a4;
	}

	a[data-ui="catAllUI"]::before {
		display : inline-block;
		width : 6px;
		height : 6px;
		margin-right : 14px;
		content : "";
		transform : rotate(45deg) translateY(-50%);
		border-right : 1px solid #000000;
		border-bottom : 1px solid #000000;
	}
	#globalNav .main > li.__open > a[data-ui="catAllUI"]::before {
		border-color : #ffffff;
	}

	#catAllUI {
		visibility : hidden;
		position : absolute;
		top : 100%;
		left : 50%;
		width : 80vw;
		max-width : 1280px;
		padding : 20px 20px;
		transition : all 0.3s ease-out;
		transform : translateX(-50%);
		opacity : 0;
		color : #ffffff;
		background-color : #1f78a4;
	}
	#catAllUI a {
		text-decoration : none;
	}
	#catAllUI dt a {
		display : flex;
		font-size : 0.875em;
		flex-direction : column;
		align-items : center;
	}

	#catAllUI > .inner {
		display : grid;
		grid-template-columns : 1fr 1fr 1fr 1fr 1fr 1fr;
		margin-bottom : 24px;
	}
	#catAllUI dl {
		padding : 10px 0 10px 10px;
	}
	#catAllUI dl:not(:last-of-type) {
		padding-right : 10px;
		border-right : 1px solid rgba(255, 255, 255, 0.25);
	}
	#catAllUI dl > dt {
		display : flex;
		font-size : 1.1em;
		font-weight : bold;
		flex-direction : column;
		align-items : center;
		margin-bottom : 20px;
	}
	#catAllUI dl > dt img {
		width : 80%;
		margin-right : auto;
		margin-bottom : 10px;
		margin-left : auto;
	}
	#catAllUI dl > dd {
		position : relative;
		font-weight : normal;
		margin-bottom : 4px;
		padding-left : 1.25em;
	}
	#catAllUI dl > dd::before {
		display : inline-block;
		position : absolute;
		top : 0.6em;
		left : 0;
		width : 8px;
		height : 1px;
		content : "";
		background-color : #ffffff;
	}
	#catAllUI .close {
		text-align : center;
	}
	#catAllUI .close span {
		display : inline-block;
		min-width : 10em;
		padding : 0.75em 1em;
		cursor : pointer;
		transition : 0.3s background-color;
		border : 1px solid #ffffff;
	}
	#catAllUI .close span:hover {
		background-color : rgba(255, 255, 255, 0.25);
	}
}

@media screen and (min-width: 768px) and (max-width: 1380px) {
	#globalNav .main > li.__open #catAllUI {
		visibility : visible;
		opacity : 1;
	}

	#globalNav .main > li.__open > a {
		color : #ffffff;
		background-color : #1f78a4;
	}

	a[data-ui="catAllUI"]::before {
		display : inline-block;
		width : 6px;
		height : 6px;
		margin-right : 14px;
		content : "";
		transform : rotate(45deg) translateY(-50%);
		border-right : 1px solid #000000;
		border-bottom : 1px solid #000000;
	}
	#globalNav .main > li.__open > a[data-ui="catAllUI"]::before {
		border-color : #ffffff;
	}

	#catAllUI {
		visibility : hidden;
		position : absolute;
		top : 100%;
		left : 50%;
		width : 80vw;
		max-width : 1280px;
		padding : 24px;
		transition : all 0.3s ease-out;
		transform : translateX(-50%);
		opacity : 0;
		color : #ffffff;
		background-color : #1f78a4;
	}
	#catAllUI a {
		text-decoration : none;
	}
	#catAllUI dt a {
		display : flex;
		font-size : 0.875em;
		flex-direction : column;
		align-items : center;
	}

	#catAllUI > .inner {
		display : grid;
		grid-template-columns : 1fr 1fr 1fr;
		grid-gap : 24px 0;
		margin-bottom : 24px;
	}
	#catAllUI dl {
		padding : 12px;
	}
	#catAllUI dl.purpose {
		background-color : rgba(255, 255, 255, 0.25);
	}
	#catAllUI dl:not(:nth-child(3n)) {
		border-right : 1px solid rgba(255, 255, 255, 0.25);
	}
	#catAllUI dl > dt {
		display : flex;
		font-size : 1em;
		font-weight : bold;
		flex-direction : column;
		align-items : center;
		margin-bottom : 20px;
	}
	#catAllUI dl > dt img {
		width : 100%;
		margin-bottom : 8px;
	}
	#catAllUI dl > dd {
		position : relative;
		font-weight : normal;
		margin-bottom : 4px;
		padding-left : 1.25em;
	}
	#catAllUI dl > dd::before {
		display : inline-block;
		position : absolute;
		top : 0.6em;
		left : 0;
		width : 8px;
		height : 1px;
		content : "";
		background-color : #ffffff;
	}
	#catAllUI .close {
		text-align : center;
	}
	#catAllUI .close span {
		display : inline-block;
		min-width : 10em;
		padding : 0.75em 1em;
		cursor : pointer;
		transition : 0.3s background-color;
		border : 1px solid #ffffff;
	}
	#catAllUI .close span:hover {
		background-color : rgba(255, 255, 255, 0.25);
	}
}

@media screen and (max-width: 767px) {
	.__humberger.main > li {
		border-top : 1px solid #dddddd;;
	}
	.__humberger.main > li > a,
	.__humberger.main > li > form {
		display : block;
		position : relative;
		font-weight : bold;
		padding : 1em;
		text-decoration : none;
	}
	.__humberger.main > li.keyword > form {
		display : flex;
		justify-content : flex-start;
		align-items : center;
	}
	.__humberger.main > li.keyword > form::before {
		display : inline;
		margin-right : 1em;
		content : "キーワード検索：";
	}

	.__humberger.main > li.keyword > form input {
		width : 12em;
		max-width : 100%;
		padding-left : 36px;
		border-radius : 4px;
		background : url("/wp/wp-content/themes/wraymer_com/common/img/icon_search.svg") 8px 50% no-repeat;
		background-size : auto;
		background-size : auto 60%;
	}

	.__humberger.main > li > a[data-ui="catMainUI"]::after,
	.__humberger.main > li > a[data-ui="catAllUI"]::after {
		display : inline-block;
		position : absolute;
		top : 50%;
		right : 10px;
		font-family : "Material Icons";
		font-size : 1.8em;
		font-weight : 100;
		content : "\e5cf";
		transform : translateY(-50%);
	}
	.__humberger.main > li.__open > a::after {
		content : "\e5ce";
	}

	.__humberger.main > li.__open > a[data-ui="catMainUI"]::before,
	.__humberger.main > li.__open > a[data-ui="catAllUI"]::before {
		border-color : #ffffff;
	}

	#catAllUI {
		overflow : hidden;
		height : 0;
		background-color : #f3f3f3;
	}
	.__humberger.main > li.__open #catAllUI {
		height : auto;
	}
	#catAllUI > dl:not(:last-child) {
		margin-bottom : 24px;
	}
	#catAllUI dl.purpose {
		background-color : #dddddd;
	}
	#catAllUI dl.purpose > dt {
		border-top : 1px solid #cccccc;
	}
	#catAllUI dl.purpose > dd > a {
		border-top : 1px solid #cccccc;
	}
	#catAllUI dl > dt {
		display : flex;
		font-weight : bold;
		align-items : center;
		padding : 1em;
		border-top : 1px solid #dddddd;
	}
	#catAllUI dl > dt img {
		height : 40px;
		margin-right : 1em;
	}
	#catAllUI dl > dd > a {
		display : block;
		position : relative;
		padding : 1em;
		border-top : 1px solid #dddddd;
	}
	#catAllUI dl > dd > a::after {
		display : inline-block;
		position : absolute;
		top : 50%;
		right : 10px;
		font-family : "Material Icons";
		font-size : 1.8em;
		font-weight : 100;
		content : "\e409";
		transform : translateY(-50%);
	}
	#catAllUI .close {
		display : none;
	}
}