@charset "utf-8";

@import "./src/jQ.HumbergerNav.css";
/* fix footer to bottom => ref:common.js */
body.__footer_bottom {
	position : relative;
	height : 100%;
}
body.__footer_bottom #pageFooter {
	position : fixed;
	bottom : 0;
	width : 100%;
}

/*  */
input[type="button"],
input[type="submit"] {
	font-size : small;
	border-radius : 0;
}
/* pageHeader */
#pageHeader {
	z-index : 2;
	position : sticky;
	top : 0;
	border-top : 4px solid #000000;
	background-color : #ffffff;
}
#pageHeader .header_line {
	font-size : 0.8em;
	padding : 5px 0;
	border-bottom : 2px solid #ffffff;
	background-color : #f2f2f0;
	box-shadow : 0 0 3px rgba(0, 0, 0, 0.4);
}
#pageHeader > * > .inner {
	display : flex;
	justify-content : space-between;
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}
#pageHeader .header_line #researcher a {
	position : relative;
	padding-left : 1em;
}
#pageHeader .header_line #researcher a::before {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 2px;
	box-sizing : border-box;
	width : 3px;
	height : 3px;
	content : "";
	transform : translateY(-50%);
	border : 3px solid transparent;
	border-left : 3px solid #000000;
}

#pageHeader .content > .inner {
	display : flex;
	justify-content : space-between;
	align-items : flex-end;
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}

#pageHeader #logo {
	display : flex;
	align-items : center;
	padding : 12px;
}

/* globalNav */
#globalNav {
	display : block !important;
}
#globalNav ul {
	display : flex;
}
#globalNav ul > li a {
	display : block;
	padding : 1.2em 0.8em;
	text-decoration : none;
	color : #333333;
	border-top : 4px solid transparent;
	border-bottom : 4px solid #ffffff;
}
#globalNav ul > li a:hover {
	color : #666666;
	border-bottom : 4px solid #468daf;
}

/* footer */
#pageFooter {
	background-color : #fafaf8;
	box-shadow : 0 4px 6px -4px rgba(0, 0, 0, 0.4) inset;
}
#pageFooter > section > .inner {
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}

#pageFooter .message {
	padding : 1.5em 0;
}
#pageFooter .message .inner {
	line-height : 1.45;
}

#pageFooter .information {
	padding : 0.8em 0;
	letter-spacing : 0.1em;
	color : #ffffff;
	border-bottom : 1px solid #111312;
	background-color : #202221;
}

#pageFooter .information > .inner > * {
	font-size : 0.8em;
	font-weight : bold;
	margin-right : 1em;
}

#pageFooter #copyright {
	font-family : "Century Gothic", "arial Black", sans-serif;
	font-size : 0.8em;
	padding : 0.8em 0;
	color : #ffffff;
	border-top : 1px solid #3e3e3e;
	background-color : #191919;
}

/* main */
main > header #contentTitle {
	background : #f7f7f7;
	box-shadow : 0 4px 6px -4px rgba(0, 0, 0, 0.4) inset;
}
main > header #contentTitle p {
	display : flex;
	font-size : 1.6em;
	font-weight : bold;
	justify-content : flex-start;
	align-items : center;
	max-width : 976px;
	margin : 0 auto;
	padding : 14px 24px;
}
main > header #contentTitle p span {
	font-family : "Century Gothic", "arial Black", sans-serif;
	font-size : 0.8em;
	font-weight : bold;
	margin-left : 0.8em;
	letter-spacing : 0.1em;
	color : #b6b6b6;
}

/* breadcrumb */
#breadcrumb > .inner {
	display : flex;
	font-size : 0.8em;
	max-width : 976px;
	margin : 0 auto 32px;
	padding : 0.8em 24px;
	color : #666666;
}
#breadcrumb > .inner * {
	display : inline;
	color : #666666;
}
#breadcrumb > .inner > li:not(:first-child) {
	margin-left : 0.6em;
}
#breadcrumb > .inner > li:not(:first-child)::before {
	font-size : 0.8em;
	margin-right : 0.6em;
	content : ">";
}

/* pageBody */

main > header > .inner,
main > section > .inner,
main > footer > .inner {
	max-width : 976px;
	margin : 0 auto;
	padding : 0 24px;
}
main > section {
	margin-bottom : 80px;
}
main > section header {
	margin-bottom : 2em;
}

h2#pageTitle {
	font-size : large;
	font-weight : bold;
	margin-bottom : 15px;
	background : url("/wp/wp-content/themes/wraymer_faq/common/img/dot_two_line.gif")
	repeat-x 0 50%;
}
h2#pageTitle span {
	padding-right : 1em;
	background-color : #ffffff;
}
h3 {
	font-size : 1.4em;
	font-weight : bold;
	margin-bottom : 1em;
}

.dotTwoLine {
	background-image : url(/support/wp-content/themes/wraymer_faq/common/img/dot_two_line.gif);
	background-repeat : repeat-x;
	background-position : center center;
}
.dotTwoLine span {
	padding-right : 1em;
	background-color : #ffffff;
}

/* pagenation */
.pagenation {
	margin-top : 32px;
}
.pagenation .pagenation__body {
	display : flex;
	justify-content : center;
	align-items : center;
}
.pagenation .pagenation__body li.current,
.pagenation .pagenation__body li a {
	display : block;
	margin-right : 8px;
	padding : 8px;
	border : 1px solid #dddddd;
	border-radius : 3px;
	background-color : #ffffff;
}
.pagenation .pagenation__body li.current {
	font-family : "bold";
	color : #ffffff;
	border : none;
	background-color : #000000;
}
.pagenation .pagenation__body li:last-child a {
	margin-right : 0;
}
.pagenation .pagenation__body li a:hover {
	background-color : #f3f3f3;
}

#pageTop {
	display : flex;
	z-index : 20;
	position : fixed;
	right : 0;
	bottom : 0;
	font-size : 32px;
	font-weight : bold;
	justify-content : center;
	align-items : center;
	width : 68px;
	height : 68px;
	text-decoration : none;
	color : #ffffff;
	background-color : #333333;
}

/* --- 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: 1023px) {
}

/* --- for mobile --- */
@media screen and (max-width: 767px) {
	h3 {
		font-size : 1em;
	}

	#pageHeader .header_line {
		display : none;
	}
	#pageHeader .content > .inner {
		justify-content : center;
	}
	#pageHeader #logo {
		display : flex;
		justify-content : center;
		align-items : center;
		height : 52px;
		padding : 0;
	}
	#pageHeader #logo img {
		height : 32px;
	}
	#globalNav ul {
		display : block;
	}
	#globalNav ul > li a {
		display : block;
		padding : 1em;
		border : none;
		border-bottom : 1px solid #f3f3f3;
	}

	/*  */
	#breadcrumb > .inner {
		overflow-x : hidden;
		margin-bottom : 24px;
	}
	#breadcrumb > .inner > li:first-child {
		width : 1.5em;
	}
	#breadcrumb > .inner > li:not(:first-child) {
		position : relative;
		padding-left : 0.75em;
	}
	#breadcrumb > .inner > li:not(:first-child)::before {
		position : absolute;
		top : 50%;
		left : 0;
		transform : translateY(-50%);
	}
	#breadcrumb > .inner > li:last-child {
		overflow-x : hidden;
	}
	#breadcrumb > .inner > li > * {
		display : block;
		line-height : 1;
		white-space : nowrap;
	}
	#breadcrumb > .inner > li:first-child a {
		overflow-x : hidden;
		width : 0;
		padding-left : 1.5em;
	}
	#breadcrumb > .inner > li:first-child a::before {
		display : inline-block;
		font-family : "Font Awesome 5 Free";
		font-weight : 900;
		margin-right : 1em;
		margin-left : -1.25em;
		content : "\f015";
	}
	#breadcrumb > .inner > li:last-child > * {
		overflow-x : hidden;
		text-overflow : ellipsis;
	}

	main > header #contentTitle p {
		display : block;
	}
	main > header #contentTitle p span {
		display : block;
		margin-left : 0;
	}

	/*  */
	#pageFooter .information > .inner > * {
		display : block;
		margin-right : 0;
		margin-bottom : 0.75em;
		text-align : center;
	}
	#pageFooter > section > .inner > *:nth-child(3),
	#pageFooter > section > .inner > *:nth-child(4) {
		font-size : 0.6em;
		letter-spacing : 1px;
	}
	#copyright {
		text-align : center;
	}
}

#mainContent .save-as-pdf-pdfcrowd-button-wrap{
 float: right;
}
#mainContent .pdfprnt-buttons{
 float: right;
}
#mainContent .pdfprnt-buttons + *{
 clear: both;
	padding-top: 20px;
}
#mainContent .pdfprnt-buttons a{
 margin: 0px;
	padding: 3px 20px;
	border-radius: 20px;
	border: 1px solid #bbbbbb!important;
	background-color: #fafaf8;
	color: #000;
	font-weight: 600;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:4px;
	text-decoration: none;
}
#mainContent .pdfprnt-buttons a:before{
 content: "";
	width: 20px;
	height: 20px;
	background: url(../img/icon_print.png) center center no-repeat;
	background-size: contain;
}