@charset "utf-8";

/* archive */
#manualTop > .inner > header {
	padding : 60px 440px 60px 32px;
	border-radius : 8px;
	background : url(/support/wp-content/themes/wraymer_faq/manual/img/bg_manual.png) 95%
	50% #f4f0f1 no-repeat;
	background-size : 40%;
}

#manualTop > .inner > header h2 {
	font-size : 3em;
	margin-bottom : 0.4em;
	padding : 12px 0 12px 64px;
	background : url(/support/wp-content/themes/wraymer_faq/manual/img/icon_manual.svg) 0
	50% no-repeat;
	background-size : contain;
}
#manualTop > .inner > header > p:not(:last-child) {
	margin-bottom : 1em;
}

#manualTop .contentList {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr 1fr;
	grid-gap : 12px;
	margin-bottom : 40px;
}
#manualTop .contentList > li {
	padding : 8px;
	border : 1px solid #eeeeee;
	background-color : #fafaf8;
	box-shadow : 0 3px 4px 0 #f6f6f6;
}
#manualTop .contentList > li a {
	text-decoration : none;
}
#manualTop .contentList > li .img {
	height : 120px;
	margin-bottom : 12px;
	padding : 16px;
}
#manualTop .contentList > li .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#manualTop .contentList > li .title {
	position : relative;
	font-weight : bold;
	line-height : 1.25;
	padding : 4px;
	padding-left : 1.2em;
	color : #000000;
}
#manualTop .contentList > li .title::before {
	position : absolute;
	top : 50%;
	left : 0;
	width : 0.8em;
	height : 5px;
	content : "";
	transform : translateY(-50%);
	background-color : #478db0;
}
#manualTop .contentList > li .discription {
	padding : 4px;
	color : #999999;
}
#manualTop .contentList.faq > li .title {
	font-weight : bold;
	line-height : 1.25;
	margin-bottom : 16px;
	padding : 0;
	text-align : center;
	color : #000000;
}
#manualTop .contentList.faq > li .title::before {
	display : none;
}
#manualTop .contentList.faq > li .discription {
	font-family : "Oswald", sans-serif;
	font-size : 2.8em;
	line-height : 1;
	margin-bottom : 12px;
	padding : 8px;
	text-align : center;
	color : #478db0;
}

#manualTop #software.contentList,
#manualTop #howto.contentList {
	grid-template-columns : 1fr 1fr;
}
#manualTop #software.contentList > li a,
#manualTop #howto.contentList > li a {
	display : flex;
	justify-content : center;
	align-items : center;
	padding : 22px;
}
#manualTop #software.contentList > li .img,
#manualTop #howto.contentList > li .img {
	flex-basis : 30%;
	margin : 0 16px 0 0;
	padding : 0;
}
#manualTop #software.contentList > li .content,
#manualTop #howto.contentList > li .content {
	display : flex;
	flex-direction : column;
	flex-grow : 1;
	justify-content : center;
	align-items : flex-start;
}
#manualTop #software.contentList > li .title,
#manualTop #howto.contentList > li .title {
	font-size : 1.2em;
}
@media screen and (min-width: 766px) {
#software.contentList > li .ws .img{
	width: 20%;
}
#software.contentList > li .ws .content{
	width: 80%;
}
}
/* taxonomy */
.ctsList {
	margin-bottom : 32px;
	border-top : 1px dotted #000000;
}
.ctsList > li {
	display : grid;
	grid-template-columns : 140px 1fr;
	border-bottom : 1px dotted #000000;
}
.ctsList > li .img {
	display : flex;
	justify-content : center;
	align-items : center;
	padding : 12px;
}
.ctsList > li .img > .inner {
	display : inline;
	position : relative;
}
.ctsList > li .img img {
	width : 100%;
	height : 100%;
	object-fit : contain;
}
.ctsList > li .img .unavailable {
	display : inline-block;
	position : absolute;
	top : 5px;
	right : 5px;
	font-size : 0.8rem;
	line-height : 1;
	padding : 0.5em;
	color : #ffffff;
	background-color : #999999;
}
.ctsList > li .content {
	display : flex;
	flex-direction : column;
	justify-content : center;
}
.ctsList > li .content > * {
	display : grid;
	grid-template-columns : 1fr 7em 10em;
	grid-gap : 14px 8px;
	padding : 12px;
}
.ctsList > li .content > *:not(:last-child) {
	border-bottom : 1px dotted #cccccc;
}
.ctsList > li .content .pdf > *,
.ctsList > li .content .url > * {
	align-self : center;
}
.ctsList > li .content h3 {
	font-size : 1em;
	font-weight : normal;
	margin-bottom : 0;
}
.ctsList > li .content h3 span {
	display : block;
	margin-top : 0.5em;
}

/* --- for 2K or more pc --- */
@media screen and (min-width: 1980px) {
}

/* --- for HD pc --- */
@media screen and (min-width: 1440px) and (max-width: 1979px) {
}

/* --- for normal pc --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
}

/* --- for tablet --- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	#manualTop > .inner > header {
		padding : 24px;
		background-image : none;
	}
	#manualTop > .inner > header h2 {
		font-size : 1.7em;
		margin-bottom : 0.4em;
		padding : 12px 0 12px 2.2em;
	}
	#manualTop > .inner > header > p {
		font-size : 0.8em;
	}
	#manualTop > .inner > header > p br {
		display : none;
	}

	#manualTop .contentList {
		grid-template-columns : 1fr;
		grid-gap : 0;
		margin : 0 -24px 32px;
	}
	#manualTop .contentList > li {
		padding : 12px;
		border : none;
		border-top : 1px solid #dddddd;
		background : rgb(255, 255, 255);
		background : linear-gradient(
		180deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(238, 238, 238, 1) 100%
		);
	}
	#manualTop .contentList > li a {
		display : grid;
		grid-template-columns : 80px 1fr;
		grid-gap : 12px;
		position : relative;
		padding : 0;
	}
	#manualTop .contentList > li a::after {
		display : inline-block;
		position : absolute;
		top : 50%;
		right : 1em;
		width : 4px;
		height : 4px;
		content : "";
		        transform : translateY(-50%);
		        transform : rotate(45deg);
		border-top : 1px solid #555555;
		border-right : 1px solid #555555;

		-webkit-transform : rotate(45deg);
	}
	#manualTop .contentList > li .img {
		display : flex;
		justify-content : center;
		align-items : center;
		height : 80px;
		margin-bottom : 0;
		padding : 0;
	}
	#manualTop .contentList > li .title {
		display : flex;
		align-items : center;
	}
	#manualTop .contentList > li .discription {
		font-size : 0.7em;
		color : #666666;
	}
	#manualTop .contentList > li .content {
		display : flex;
		align-items : center;
		margin-right : 32px;
	}

	#manualTop #software.contentList,
	#manualTop #howto.contentList {
		grid-template-columns : 1fr;
	}
	#manualTop #software.contentList > li a,
	#manualTop #howto.contentList > li a {
		display : grid;
		grid-template-columns : 80px 1fr;
		padding : 0;
	}
	#manualTop #software.contentList > li .title,
	#manualTop #howto.contentList > li .title {
		font-size : 1em;
	}
	#manualTop #software.contentList > li .discription,
	#manualTop #howto.contentList > li .discription {
		font-size : 0.8em;
	}
	#manualTop #software.contentList > li .img,
	#manualTop #howto.contentList > li .img {
		width : 80px;
		height : 80px;
	}

	/* taxonomy */
	.ctsList > li {
		grid-template-columns : 100px 1fr;
	}
	.ctsList > li .img {
		padding : 14px 0;
	}
	.ctsList > li .img .unavailable {
		font-size : 0.7rem;
	}
	.ctsList > li .pdf {
		display : block;
	}
	.ctsList > li .url {
		display : block;
	}
	.ctsList > li .pdf > *:nth-child(1),
	.ctsList > li .url > *:nth-child(1) {
		line-height : 1.25;
		width : auto;
	}
	.ctsList > li .pdf > *:nth-child(2),
	.ctsList > li .url > *:nth-child(2) {
		width : auto;
	}
	.ctsList > li .pdf > *:nth-child(3),
	.ctsList > li .url > *:nth-child(3) {
		width : auto;
	}
	.ctsList > li .pdf > *:nth-child(4),
	.ctsList > li .url > *:nth-child(4) {
		width : auto;
	}
	.ctsList > li .pdf > *:nth-child(5),
	.ctsList > li .url > *:nth-child(5) {
		width : auto;
	}
}