@charset "utf-8";

/* archive */

/* faqtop */

#faqtop > .inner > header {
	padding : 60px 500px 60px 32px;
	border-radius : 8px;
	background : url(/support/wp-content/themes/wraymer_faq/faq/img/bg_faq.png) 125% 50%
	#f4f0f1 no-repeat;
	background-size : 70%;
}

#faqtop > .inner > header h2 {
	font-size : 3em;
	margin-bottom : 0.4em;
	padding : 12px 0 12px 80px;
	background : url(/support/wp-content/themes/wraymer_faq/faq/img/icon_qa.svg) 0 50%
	no-repeat;
	background-size : contain;
}
#faqtop > .inner > header > p:not(:last-child) {
	margin-bottom : 1em;
}
#faqtop > .inner > header .button a {
	display : inline-block;
	padding : 0.85em 2.6em;
	text-decoration : none;
	color : #ffffff;
	border-radius : 4px;
	background-color : #000000;
}

#tipstop > .inner > header {
	padding : 60px 360px 60px 32px;
	border-radius : 8px;
	background : url(/support/wp-content/themes/wraymer_faq/tips/img/bg_tips.png) 95% 50%
	#f4f0f1 no-repeat;
	background-size : 42%;
}

#tipstop > .inner > header h2 {
	font-size : 2.75em;
	margin-bottom : 0.4em;
	padding : 12px 0 12px 80px;
	background : url(/support/wp-content/themes/wraymer_faq/tips/img/icon_tips.svg) 0 50%
	no-repeat;
	background-size : contain;
}
#tipstop > .inner > header > p:not(:last-child) {
	margin-bottom : 1em;
}
#tipstop > .inner > header .button a {
	display : inline-block;
	padding : 0.85em 2.6em;
	text-decoration : none;
	color : #ffffff;
	border-radius : 4px;
	background-color : #000000;
}

/* keywordSearch */
#keywordSearch form {
	display : flex;
	margin-bottom : 16px;
	padding : 1em;
	border-radius : 4px;
	background-color : #eeeeee;
}
#keywordSearch form input {
	flex-grow : 1;
	margin-right : 1em;
	padding : 0.4em 1em;
	border-radius : 4px;
}
#keywordSearch form button {
	padding : 0.4em 1em;
	cursor : pointer;
	transition : 0.05s ease-out;
	color : #ffffff;
	border-radius : 4px;
	background-color : #555555;
}
#keywordSearch form button:hover {
	background-color : #000000;
}
#keywordSearch #popularWord {
	position : relative;
	margin-bottom : 32px;
	padding : 16px;
	border-radius : 4px;
	background-color : #f4f0f1;
}
#keywordSearch #popularWord::before {
	display : inline-block;
	position : absolute;
	top : -20px;
	left : 80px;
	box-sizing : border-box;
	width : 10px;
	height : 10px;
	content : "";
	transform : rotate(-90deg);
	border : 10px solid transparent;
	border-left : 10px solid #f4f0f1;
}
#keywordSearch #popularWord h4 {
	font-weight : bold;
	margin-bottom : 0.8em;
	padding : 2px 0 2px 0.6em;
	color : #905d6a;
	border-left : 3px solid #905d6a;
}
#keywordSearch #popularWord ul {
	display : flex;
	flex-wrap : wrap;
}
#keywordSearch #popularWord ul > li {
	margin-bottom : 0.6em;
	margin-left : 0.6em;
}
#keywordSearch #popularWord ul > li.__col_first {
	margin-left : 0;
}
#keywordSearch #popularWord ul > li.__row_last {
	margin-bottom : 0;
}

#keywordSearch #popularWord ul > li a {
	display : block;
	padding : 0.6em 1em;
	transition : 0.05s ease-out;
	border : 1px solid #dddddd;
	border-radius : 4px;
	background-color : #ffffff;
}
#keywordSearch #popularWord ul > li a:hover {
	color : #000000;
	border : 1px solid #000000;
}

/* productSearch */
#productSearch .container {
	display : flex;
	position : relative;
	height : 240px;
	margin-bottom : 32px;
}

#productSearch .container::after {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 49.6%;
	width : 10px;
	height : 10px;
	content : "";
	transform : translate(-50%, -50%) rotate(45deg);
	border-top : 2px solid #000000;
	border-right : 2px solid #000000;
}
#productSearch .container > #category {
	flex-basis : 34%;
	flex-grow : 1;
	margin-right : 36px;
	border : 1px solid #cccccc;
	border-radius : 4px;
}
#productSearch .container > #category > li {
	padding : 1em;
	cursor : pointer;
	border-bottom : 1px solid #cccccc;
}
#productSearch .container > #category > li:hover {
	background-color : #f3f3f3;
}
#productSearch .container > #category > li.selected {
	color : #ffffff;
	background-color : #000000;
}
#productSearch .container > #model {
	position : relative;
	overflow-y : auto;
	flex-basis : 34%;
	flex-grow : 1;
	border : 1px solid #cccccc;
	border-radius : 4px;
	background-color : #f3f3f3;
}
#productSearch .container > #model ul {
	display : none;
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	background-color : #ffffff;
}
#productSearch .container > #model ul.selected {
	display : block;
}
#productSearch .container > #model ul > li a,
#productSearch .container > #model ul > li span {
	display : block;
	padding : 1em;
	cursor : pointer;
	color : 000;
	border-bottom : 1px solid #cccccc;
}
#productSearch .container > #model ul > li:hover {
	color : #000000;
}

/* categorySearch */
#categorySearch {
	margin-bottom : 32px;
}
#categorySearch ul {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 12px;
}
#categorySearch ul > li {
	display : flex;
}
#categorySearch ul > li a {
	display : flex;
	position : relative;
	font-size : 1.5em;
	font-weight : bold;
	line-height : 1.45;
	flex-grow : 1;
	align-items : center;
	padding : 1em 1em 1em 2.7em;
	transition : 0.05s ease-out;
	text-decoration : none;
	color : #777777;
	border : 4px solid #cccccc;
	border-radius : 4px;
}
#categorySearch ul > li a::before {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 0.75em;
	font-family : "Font Awesome 5 Free";
	font-size : 1.2em;
	font-weight : 900;
	content : "\f05a";
	transition : 0.05s ease-out;
	transform : translateY(-50%);
}
#categorySearch ul > li.camera a::before {
	content : "\f030";
}
#categorySearch ul > li.microscope a::before {
	content : "\f610";
}
#categorySearch ul > li.software a::before {
	content : "\f108";
}
#categorySearch ul > li.operating a::before {
	content : "\f4ff";
}
#categorySearch ul > li.data a::before {
	content : "\f1c5";
}
#categorySearch ul > li a:hover {
	color : #000000;
	border : 4px solid #000000;
}

/* tagSearch */
#tagSearch {
	margin-bottom : 32px;
}
#tagSearch ul {
	display : flex;
	flex-wrap : wrap;
}
#tagSearch ul > li {
	margin-bottom : 0.6em;
	margin-left : 0.6em;
}
#tagSearch ul > li.__col_first {
	margin-left : 0;
}
#tagSearch ul > li.__row_last {
	margin-bottom : 0;
}
#tagSearch ul > li a {
	display : block;
	padding : 0.6em 1em;
	transition : 0.05s ease-out;
	border : 1px solid #cccccc;
	border-radius : 4px;
	background-color : #ffffff;
}
#tagSearch ul > li a:hover {
	color : #000000;
	border : 1px solid #000000;
}

/* searchResult */
#searchResult h2 {
	font-size : 1.4em;
	margin-bottom : 1.5em;
}
#searchResult h2 span {
	font-weight : bold;
	margin-left : 0.5em;
}
#searchResult .articleList {
	border-top : 1px dotted #000000;
}
#searchResult .articleList > li {
	padding : 1.25em 0;
	border-bottom : 1px dotted #000000;
}

#searchResult .articleList > li .row {
 display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
#searchResult .articleList > li .row .thum{
 width: 180px;
	height: 180px;
	border: 1px solid #a4a4a4;
}
#searchResult .articleList > li .row .thum img{
 width: 100%;
	height: 100%;
	object-fit: contain;
}
#searchResult .articleList > li .row .textArea{
 width : -webkit-calc(100% - 200px) ;
 width : calc(100% - 200px) ;
}
@media screen and (max-width: 767px) {
	#searchResult .articleList > li .row {
	 display: block;
	}
	#searchResult .articleList > li .row .thum{
	 margin: 0 auto 20px auto;
	}
	#searchResult .articleList > li .row .textArea{
	 width: auto;
	}
}

#searchResult .articleList .title {
	position : relative;
	font-size : 1.2em;
	margin-bottom : 0.75em;
	padding-left : 16px;
}
#searchResult .articleList .title::before {
	display : inline-block;
	position : absolute;
	top : 50%;
	left : 2px;
	box-sizing : border-box;
	width : 5px;
	height : 5px;
	content : "";
	transform : translateY(-50%);
	border : 5px solid transparent;
	border-left : 5px solid #000000;
}
#searchResult .articleList .title a {
	color : #000000;
}
#searchResult .articleList .category {
	display : flex;
	flex-wrap : wrap;
}
#searchResult .articleList .category a {
	font-size : 0.75em;
	padding : 0.5em;
	border-radius : 4px;
	background-color : #f3f3f3;
}
#searchResult .articleList .category a {
	margin-bottom : 0.5em;
	margin-left : 0.5em;
}
#searchResult .articleList .category a.__col_first {
	margin-left : 0;
}
#searchResult .articleList .category a.__row_last {
	margin-bottom : 0;
}

/* singular */
body.single #mainContent {
	margin-bottom : 40px;
}
body.single #mainContent > .inner::after {
	display : block;
	clear : both;
	content : "";
}
body.single #mainContent > .inner > article {
	float : left;
	width : calc(100% - 280px);
}
body.single #mainContent > .inner > #sideNav {
	float : right;
	width : 240px;
}

body.single #mainContent article * {
	line-height : 1.75;
}
body.single #mainContent article .articleTitle {
	font-size : 1.5em;
	margin-bottom : 1.5em;
	padding : 0.5em 1em;
	color : #ffffff;
	background-color : #000000;
}

/* === */

body.single #mainContent article > p:not(:last-child),
body.single #mainContent article div > p:not(:last-child) {
	margin-bottom : 1.25em;
}
body.single #mainContent article img {
	max-width : 100%;
	height : auto;
}
body.single #mainContent article ul {
	margin-bottom : 2em;
	padding-left : 1.75em;
}
body.single #mainContent article ul > li {
	list-style : disc;
}
body.single #mainContent article ul > li:not(:last-child) {
	margin-bottom : 0.5em;
}
body.single #mainContent article ul > li > ul {
	margin : 0.5em 0;
}
body.single #mainContent article ul > li > ul > li {
	list-style : circle;
}
body.single #mainContent article ul > li > ul > li:not(:last-child) {
	margin-bottom : 0.5em;
}
body.single #mainContent article table {
	border : 1px solid #dddddd;
	border-collapse : collapse;
}
body.single #mainContent article table tr {
	background-color : #f3f3f3;
}
body.single #mainContent article table tr:nth-child(2n) {
	background-color : #ffffff;
}
body.single #mainContent article table tr > th,
body.single #mainContent article table tr > td {
	padding : 0.8em 0.5em;
	border : 1px solid #dddddd;
	white-space : nowrap;
}

body.single #mainContent article .wp-block-table {
	overflow-x : auto;
	max-width : 100%;
	margin-bottom : 2em;
	border : 1px solid #dddddd;
}

/* sideNav */
body.single #sideNav > .content {
	margin-bottom : 24px;
}
body.single #sideNav h3 {
	font-size : 1.2em;
	margin-bottom : 0;
}
body.single #sideNav #articleIndex {
	border-bottom : 2px solid #000000;
}
body.single #sideNav #articleIndex h3 {
	padding : 0.75em 0.25em;
	border-top : 2px solid #000000;
	border-bottom : 2px solid #000000;
}
body.single #sideNav #articleIndex h3 i {
	margin-right : 0.5em;
}
body.single #sideNav #articleIndex ul > li {
	position : relative;
	font-size : 0.9em;
	padding : 1em 0.25em 1em 1em;
	border-bottom : 1px dotted #bbbbbb;
}
body.single #sideNav #articleIndex ul > li:not(:first-child)::before {
	display : inline-block;
	position : absolute;
	top : 35%;
	left : 5px;
	width : 5px;
	height : 11px;
	content : "";
	transform : translate(-50%, -50%);
	border-bottom : 1px solid #999999;
	border-left : 1px solid #999999;
	border-radius : 0;
	background-color : transparent;
}
body.single #sideNav #articleIndex ul > li.__second {
	margin-left : 1em;
}
body.single #sideNav #articleIndex ul > li.__third {
	margin-left : 2em;
}
body.single #sideNav #articleIndex ul > li.__fourth {
	margin-left : 3em;
}
body.single #sideNav #articleIndex ul > li.__fifth {
	margin-left : 4em;
}
body.single #sideNav #articleIndex ul > li:last-child {
	border-bottom : none;
}
body.single #sideNav #articleIndex ul > li a {
	line-height : 1.45em;
	color : #000000;
}

abbr{
	display: none
}
body.single #sideNav #related {
	padding : 20px 12px;
	border-radius : 4px;
	background-color : #f3f3f3;
}
body.single #sideNav #related h3 {
	margin-bottom : 20px;
	padding : 0 0 1em;
	border-bottom : 1px solid #000000;
}
body.single #sideNav #related h3 i {
	margin-right : 0.25em;
}
body.single #sideNav #related .yarpp-related-none {
	text-align : center;
}
body.single #sideNav #related .yarpp-related {
	margin : 0;
}
body.single #sideNav #related ul > li a {
	display : block;
	font-size : 0.8em;
	line-height : 1.45;
	margin-bottom : 4px;
	padding : 1em;
	border : 1px solid #cccccc;
	border-radius : 4px;
	background-color : #ffffff;
}
body.single #sideNav #popular {
	padding : 20px 12px;
	border-radius : 4px;
	background-color : #f3f3f3;
}
body.single #sideNav #popular h3 {
	margin-bottom : 20px;
	padding : 0 0 1em;
	border-bottom : 1px solid #000000;
}
body.single #sideNav #popular h3 i {
	margin-right : 0.25em;
}
body.single #sideNav #popular .wpp-no-data {
	text-align : center;
}
body.single #sideNav #popular ul > li a {
	display : block;
	margin-bottom : 4px;
	padding : 1em;
	border : 1px solid #cccccc;
	border-radius : 4px;
	background-color : #ffffff;
}

body.single #reaction {
	margin-bottom : 40px;
	padding : 24px 0;
	background-color : #f3f3f3;
}
body.single #reaction > .inner {
	padding : 24px;
}
body.single #reaction .reaction_buttons_tagline {
	font-size : 1.4em;
	font-weight : bold;
	margin-bottom : 1em;
	text-align : center;
}
body.single #reaction ul {
	display : grid;
	grid-template-columns : 1fr 1fr 1fr;
	grid-gap : 24px;
}
body.single #reaction ul > * {
	padding : 1.2em;
	cursor : pointer;
	text-align : center;
	border : 1px solid #cccccc;
	border-radius : 2em;
	background-color : #ffffff;
}
body.single #pageBody > footer {
	margin-bottom : 40px;
}
body.single #other {
	display : grid;
	grid-template-columns : 1fr 1fr;
	grid-gap : 24px;
}
body.single #other .back {
	display : flex;
	font-size : 1.4em;
	justify-content : center;
	align-items : center;
	padding : 1.4em;
	border : 1px solid #cccccc;
	border-radius : 4px;
}
body.single #other .contact {
	padding : 12px;
	text-align : center;
	border-radius : 4px;
	background-color : #f3f3f3;
}
body.single #other .contact p {
	line-height : 1.45;
	padding : 0.4em;
}
body.single #other .contact a {
	display : block;
	font-size : 1.2em;
	padding : 1em;
	text-decoration : none;
	color : #ffffff;
	border-radius : 4px;
	background-color : #000000;
}

/* --- 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) {
	/* archive */

	#faqtop > .inner > header,
	#tipstop > .inner > header {
		padding : 24px;
		background-image : none;
	}
	#faqtop > .inner > header h2 {
		font-size : 1.7em;
		margin-bottom : 0.4em;
		padding : 12px 0 12px 60px;
	}
	#tipstop > .inner > header h2 {
		font-size : 1.2em;
		margin-bottom : 0.4em;
		padding : 12px 0 12px 50px;
	}
	#faqtop > .inner > header > p,
	#tipstop > .inner > header > p {
		font-size : 0.8em;
	}
	#faqtop > .inner > header > p br,
	#tipstop > .inner > header > p br {
		display : none;
	}
	#faqtop > .inner > header .button a,
	#tipstop > .inner > header .button a {
		display : block;
		text-align : center;
	}

	/* singular */
	body.single #mainContent > .inner {
		display : block;
	}
	body.single #mainContent > .inner::after {
		display : none;
	}
	body.single #mainContent > .inner > article {
		float : none;
		width : auto;
		margin-bottom : 40px;
	}
	body.single #mainContent > .inner > #sideNav {
		position : static;
		float : none;
		width : auto;
	}
	body.single #sideNav #articleIndex {
		display : none;
	}
	body.single #reaction h3 {
		font-size : 1em;
	}
	body.single #reaction ul {
		grid-template-columns : 1fr;
		grid-gap : 12px;
		margin-bottom : 0;
	}
	body.single #other {
		grid-template-columns : 1fr;
		grid-gap : 12px;
	}
	body.single #other .back {
		font-size : 0.8em;
	}
	body.single #other .contact p {
		font-size : 0.8em;
	}

	#productSearch .container > #category > li {
		font-size : 0.75em;
		padding : 1em 0.5em;
	}
	#keywordSearch form {
		flex-direction : column;
	}
	#keywordSearch form input {
		flex-grow : 1;
		margin : 0 0 12px;
	}
	#categorySearch ul {
		grid-template-columns : 1fr;
	}
	#categorySearch ul > li a {
		font-size : 1em;
	}
}

#searchResult .articleList.box {
	display: flex;
	flex-wrap: wrap;
	gap:30px;
	padding-top: 30px;
}
#searchResult .articleList.box > li {
	padding : 0;
	border : 1px solid #a4a4a4;
	width : -webkit-calc(33.3% - 22px) ;
 width : calc(33.3% - 22px) ;
}

#searchResult .articleList.box > li .row {
 /*display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	*/
	display: block;
	padding : 1.25em;
}
#searchResult .articleList.box > li .row .thum{
 width: auto;
	height: auto;
	aspect-ratio:1/1;
	border: 1px solid #a4a4a4;
	margin:0 auto 10px;
}
#searchResult .articleList.box > li .row .thum img{
 width: 100%;
	height: 100%;
	object-fit: contain;
}
#searchResult .articleList.box > li .row .textArea{
 width : auto;
}
#searchResult .articleList.box .title{
 padding-left: 0px;
}
#searchResult .articleList.box .title::before{
	display: none;
}
@media screen and (max-width: 767px) {
#searchResult .articleList.box {
	display: block;
}
#searchResult .articleList.box > li {
 margin: 0px 0px 20px 0px;
	padding : 0;
	border : 1px solid #a4a4a4;
	width : auto;
}
#searchResult .articleList.box > li .row{
 display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.75em;
}
#searchResult .articleList.box > li .row .thum{
 width : -webkit-calc(35% - 8px) ;
 width : calc(35% - 8px) ;
	margin: 0px;
}
#searchResult .articleList.box > li .row .textArea{
 width : -webkit-calc(65% - 8px) ;
 width : calc(65% - 8px) ;
}
#searchResult .articleList.box .title{
     font-size: 1em;
					margin-bottom: 0.5em;
}
}