@charset "utf-8";
/*==================================================

Global Default
==================================================*/
body {
		font-family: "Noto Sans Japanese", YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
		line-height: 1.8;
		font-size: 14px;
		color: rgba(0, 0, 0, .7);
}
h1, h2, h3, h4, h5, h6 {
		line-hight: 1.5;
}
.serif {
		font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
main, section {
		position: relative;
}
a {
		color: inherit;
}
a:hover {
		color: inherit;
}
a:visited {
		color: inherit;
}
a:active {
		color: inherit;
}
img {
		height: auto;
}
i {
		vertical-align: middle;
		line-height: 1;
		font-size: 16px;
}
.center {
		text-align: center;
}
.caution {
		color: #D50000;
}
[class*="viewport"] {
		width: 100%;
		max-width: 1366px;
		padding: 0 2%;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;
}
.viewport-l {
		max-width: 1366px;
}
.viewport-m {
		max-width: 1024px;
}
.viewport-s {
		max-width: 768px;
}
.section-spacing {
		padding-top: 11vmin;
		padding-bottom: 11vmin;
}
/*==================================================

Main Header
==================================================*/
#main-header {
		box-sizing: border-box;
		border-bottom: 4px solid #004E9B;
}
#main-header .viewport-m {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
}
#main-header .viewport-m:after {
		content: '';
		display: none;
}
#menu, #global-navi, #obfuscator {
		display: none;
}
#top-navi ul {
		display: flex;
		text-align: center;
		color: #222;
}
#top-navi li {
		border-right: 1px solid rgba(0, 0, 0, .12);
}
#top-navi li:first-child {
		border-left: 1px solid rgba(0, 0, 0, 0.12);
}
#top-navi a {
		display: block;
		padding: 16px 8px;
		min-width: 90px;
font-weight: 500;
		transition: all .3s;
}
#top-navi a:hover {
color: #0667c6;
}

#top-navi i {
		display: block;
		opacity: .34;
}
/*==================================================

Main Footer
==================================================*/
#main-footer {
		position: relative;
		background: #0667C7;
		color: #FFF;
		font-size: 12px;
}
#main-footer .viewport-m {
		padding: 16px 2%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
}
#main-footer #sns li {
		margin: 4px 0;
}
#main-footer #sns a {
		display: block;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 4px;
		padding: 0 4px;
		min-width: 90px;
}
#main-footer #sns i {
		margin-right: 6px;
}
#main-footer #contact-box h5 {
		font-size: 16px;
		font-weight: 500;
}
#main-footer #contact-box p {
		display: flex;
		align-items: center;
		margin: 6px 0 0;
}
#main-footer #contact-box p i {
		max-width: 30px;
		display: inline-block;
		margin-right: 4px;
}
#main-footer #contact-box p a {
		text-decoration: underline
}
#main-footer #contact-box p a[href*="tel"] {
		font-size: 30px;
		text-decoration: none;
		font-weight: 500;
		letter-spacing: -.03em;
}
#main-footer #banner img {
		max-width: 217px;
		border: 4px solid rgba(255, 255, 255, .3);
}
#main-footer #copyright {
		background: #222222;
		text-align: center;
		color: rgba(255, 255, 255, .3);
		font-size: 12px;
		padding: 8px 0;
}
/*==================================================

Index
==================================================*/
#top-index #main-visual {
		background-image: url(../img/bg-icons.png), url(../img/bg-pattern.jpg);
		background-repeat: repeat;
		background-position: center center;
		padding: 50px;
		border-bottom: 4px solid #004e9b;
}
#top-index #main-visual .viewport-m {
		display: flex;
		align-items: center;
		justify-content: space-between;
}
#top-index #main-visual .viewport-m:after {
		display: none;
}
#top-index #search-sect{
	padding: 30px 2%;
}
#top-index #search-sect{
	padding: 40px 2% 20px;
}
#top-index #search-sect form{
	position: relative;
}
#top-index #search-sect .screen-reader-text{
	display: none;
}
#top-index #search-sect .search-field{
	width: 100%;
	border: 1px solid #AAA;
	padding: 4px 90px 4px 8px;
	height: 40px;
	border-radius: 4px;
	background: #FFF;
	font-family: "Noto Sans Japanese", YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#top-index #search-sect .search-submit{
	position: absolute;
	right: 4px;
	top: 4px;
	height: 32px;
	background: #004e9b;
	border: none;
	color: #FFF;
	padding: 0 24px;
	border-radius: 4px;
	font-family: "Noto Sans Japanese", YuGothic, 'Yu Gothic Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
#index-content {
		display: flex;
		padding-top: 0;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: left;
}
#index-content .cat-block {
		width: 49%;
		margin: 0 0 3%;
}
#index-content h2 {
		background: #0667C7;
		color: #FFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 3%;
		padding-left: 55px;
		font-size: 18px;
		font-weight: 500;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		position: relative;
}
#index-content h2:before {
		content: '';
		display: block;
		width: 50px;
		height: 50px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		left: 3px;
		top: -10px;
}
#index-content .microscope h2:before {
		background-image: url("../img/img-microscope.png");
}
#index-content .camera h2:before {
		background-image: url("../img/img-camera.png");
}
#index-content .highspeed h2:before {
		background-image: url("../img/img-highspeed.png");
}
#index-content .lens h2:before {
		background-image: url("../img/img-lens.png");
}
#index-content .borescope h2:before {
		background-image: url("../img/img-borescope.png");
}
#index-content .stereomicroscope h2:before {
		background-image: url("../img/img-stereomicroscope.png");
}
#index-content .aisystem h2:before {
		background-image: url("../img/img-aisystem.png");
}
#index-content .lighting h2:before {
		background-image: url("../img/img-lighting.png");
}
#index-content h2 a {
		background: #004E9B;
		font-size: 12px;
		padding: 0px 13px;
		border-radius: 100px;
		display: block;
}
#index-content ul {
		padding: 0 3%;
		border: 2px solid rgba(0, 0, 0, .2);
		border-top: none;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
}
#index-content li + li {
		border-top: 2px dotted rgba(0, 0, 0, .2);
}
#index-content li a {
		display: block;
		padding: 10px 3%;
		padding-right: 30px;
		color: #000;
		font-weight: 500;
		position: relative;
}
#index-content a i {
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		opacity: .3;
}
/*==================================================

Default Template layout
==================================================*/
#page-header {
		background: url("../img/bg-pattern.jpg") repeat center center;
		color: #FFF;
}
#page-header h1 {
		font-weight: 500;
		font-size: 30px;
		display: flex;
		align-items: center;
		padding: 40px 0;
}
#page-header h1 span {
		font-size: 20px;
		font-weight: normal;
}
#page-header > .viewport-m:before {
		content: '';
		display: block;
		width: 180px;
		height: 180px;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		top: 8px;
		z-index: 1;
}
#page-header[class*="microscope"] > .viewport-m:before {
		background-image: url("../img/img-microscope.png");
}
#page-header[class*="camera"] > .viewport-m:before {
		background-image: url("../img/img-camera.png");
}
#page-header[class*="highspeed"] > .viewport-m:before {
		background-image: url("../img/img-highspeed.png");
}
#page-header[class*="lens"] > .viewport-m:before {
		background-image: url("../img/img-lens.png");
}
#page-header[class*="borescope"] > .viewport-m:before {
		background-image: url("../img/img-borescope.png");
}
#page-header[class*="stereomicroscope"] > .viewport-m:before {
		background-image: url("../img/img-stereomicroscope.png");
}
#page-header[class*="aisystem"] > .viewport-m:before {
		background-image: url("../img/img-aisystem.png");
}
#page-header[class*="lighting"] > .viewport-m:before {
		background-image: url("../img/img-lighting.png");
}
#page-header h1 span:before {
		content: '';
		display: inline-block;
		width: 16px;
		height: 2px;
		margin: 0 8px;
		background: #FFF;
		line-height: 1;
		vertical-align: super;
}
#page-header #breadcrumb {
		background: #F5F5F5;
		color: #666;
		font-size: 12px;
		padding: 10px;
		border-bottom: 1px solid #FFF;
}
#page-header #breadcrumb span a {
		text-decoration: underline;
		transition: all .3s;
}
#page-header #breadcrumb span a:hover {
		color: #0667c6;
		font-weight: 500;
}
#container {
		display: flex;
}
#sidebar {
		order: 1;
		background: #EEE;
		width: 100%;
		max-width: 220px;
		padding: 40px;
		padding-left: 0;
		position: relative;
}
#sidebar:before {
		content: '';
		display: block;
		height: 100%;
		background: #EEE;
		width: 50vw;
		left: -50vw;
		position: absolute;
		top: 0;
}
#sidebar h2 {
		color: #0667c6;
		font-size: 20px;
		text-align: center;
}
#sidebar h2 span {
		display: block;
		font-size: 12px;
		color: #222;
}
#sidebar .cat-box {
		background: #FFF;
		border-radius: 4px;
		padding: 16px;
		margin: 8px 0;
}
#sidebar .cat-box h3 {
		color: #222;
		border-bottom: 1px solid rgba(0, 0, 0, .2);
		padding: 8px;
		padding-left: 45px;
		position: relative;
}
#sidebar .cat-box h3:before {
		content: '';
		display: block;
		width: 40px;
		height: 40px;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: -10px;
}
#sidebar .cat-box.microscope h3:before {
		background-image: url("../img/img-microscope.png");
}
#sidebar .cat-box.camera h3:before {
		background-image: url("../img/img-camera.png");
}
#sidebar .cat-box.highspeed h3:before {
		background-image: url("../img/img-highspeed.png");
}
#sidebar .cat-box.lens h3:before {
		background-image: url("../img/img-lens.png");
}
#sidebar .cat-box.borescope h3:before {
		background-image: url("../img/img-borescope.png");
}
#sidebar .cat-box.stereomicroscope h3:before {
		background-image: url("../img/img-stereomicroscope.png");
}
#sidebar .cat-box.aisystem h3:before {
		background-image: url("../img/img-aisystem.png");
}
#sidebar .cat-box.lighting h3:before {
		background-image: url("../img/img-lighting.png");
}
#sidebar a {
		transition: all .3s;
}
#sidebar .child-list {
		font-size: 13px;
		color: #222;
		margin-top: 8px;
		font-weight: 500;
}
#sidebar .child-list > li > a {
		display: block;
		position: relative;
}
#sidebar .child-list > li > a:hover {
		color: #0667c6;
}
#sidebar .child-list i.fa-plus {
		font-size: 12px;
		color: #0566c7;
		position: absolute;
		left: 16px;
		top: 8px;
}
#sidebar .grand-list {
		font-size: 12px;
		font-weight: normal;
		margin-left: .5em;
}
#sidebar .grand-list > li > a {
		display: block;
		padding: 2px 0;
}
#sidebar .grand-list > li > a:hover {
		transform: translateX(2px);
}
#sidebar .grand-list img {
		width: 10px;
		vertical-align: baseline;
		opacity: .5;
}
.wp-pagenavi {
		clear: both;
		display: flex;
		justify-content: center;
		margin: 20px 0;
}
.wp-pagenavi a, .wp-pagenavi span {
		min-width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin: 0 4px;
		transition: all .3s;
}
.wp-pagenavi .pages {
		background: #EEE;
		padding: 0 8px;
		border-radius: 3px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
		color: #FFF;
		background: #0667c6;
		border-radius: 100px;
}
#content {
		order: 2;
		padding: 40px 2% 40px 40px;
		width: 100%;
}
.article-list .count {
		font-size: 12px;
		text-align: right;
		color: #222;
		background: #EEE;
		line-height: 1.5;
		padding: 0 16px;
		border-radius: 100px;
		float: right;
		clear: both;
}
.article-list article {
		border-bottom: 2px dotted #DDD;
		clear: both;
}
.article-list article a {
		display: block;
		position: relative;
		padding: 16px 30px 16px 8px;
		color: #222;
		transition: all .5s;
}
.article-list article a:hover {
		color: #0667c6;
		transform: translateY(-2px);
		box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
}
.article-list article i {
		position: absolute;
		right: 8px;
		top: 50%;
		transform: translateY(-50%);
		color: rgba(0, 0, 0, .34);
}
.single-page #single-main-header {
		font-size: 200%;
		color: #000;
		line-height: 1.2;
		margin-bottom: 1em;
		padding-bottom: .5em;
		border-bottom: 2px dotted rgba(0, 0, 0, .2);
}
.single-page table tbody, .single-page table tr, .single-page table th, .single-page table td{
    border: none;
    border-color: inherit;
    border-style: inherit;
	border-width: 1px;
}

/*==================================================

Search Result
==================================================*/
#search-template #page-header h1 span{
	font-style: italic;
}
#search-template .article-list .search-excerpt{
	font-style: italic;
	background: #ffda0094;;
}
#search-template .article-list .excerpt-content{
    color: rgba(0, 0, 0, .7);
}
#search-template .not-found{
	clear: both;
    margin-top: 50px;
    font-weight: 500;
    font-size: 20px;
    color: #000;
}
/*==================================================

Media Quaries, max-width: 768px
==================================================*/
@media only screen and (max-width: 768px) {
		/*----------------- Global default -----------------*/
		body {
				font-size: 12px;
				line-height: 1.5;
		}
		/*----------------- Main header -----------------*/
		#main-header .viewport-m {
				flex-wrap: wrap;
				justify-content: center;
				text-align: center;
		}
		#main-header .viewport-m h1 {
				width: 100%;
				max-width: 380px;
				margin: 8px 2%;
		}
		#main-header .viewport-m #top-navi {
				width: 100%;
				border-top: 1px solid rgba(0, 0, 0, .12);
		}
		#top-navi li {
				width: 100%;
		}
		#top-navi a {
				padding: 8px;
		}
		/*----------------- Global navigation -----------------*/
		#menu {
				height: 45px;
				width: 45px;
				border-radius: 100px;
				float: right;
				cursor: pointer;
				z-index: 10;
				display: block;
				position: fixed;
				background: #004e9b;
				bottom: 8px;
				right: 8px;
				box-shadow: 0 3px 7px rgba(0, 0, 0, .12);
		}
		#menu span {
				height: 2px;
				width: 20px;
				background: #FFF;
				display: block;
				margin: 0 auto;
				position: relative;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				-webkit-transition: all .5s;
				transition: all .5s;
		}
		#menu span:before, #menu span:after {
				content: '';
				height: 2px;
				width: 20px;
				background: #FFF;
				display: block;
				position: absolute;
				-webkit-transition: all .5s;
				transition: all .5s;
		}
		#menu span:before {
				top: -6px;
		}
		#menu span:after {
				top: 6px;
		}
		#obfuscator {
				display: block;
				background-color: rgba(255, 255, 255, .7);
				position: fixed;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 9;
				visibility: hidden;
				-webkit-transition-property: background-color;
				transition-property: background-color;
				-webkit-transition-duration: .2s;
				transition-duration: .2s;
				-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
				transition-timing-function: cubic-bezier(.4, 0, .2, 1);
				cursor: pointer;
		}
		#global-navi {
				display: block;
				width: 240px;
				height: 100%;
				max-height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
				box-sizing: border-box;
				background: #FFF;
				transform: translateX(-250px);
				transition: all .2s cubic-bezier(.4, 0, .2, 1);
				overflow: hidden;
				overflow-y: auto;
				z-index: 10;
				margin: 0;
				text-align: left;
				padding: 10px;
		}
		#global-navi p {
				color: #000;
				font-size: 14px;
				font-weight: 500;
		}
	#global-navi .child-list{
		font-size: 13px;
		color: #000;
		margin-bottom: 1em;
	}
		#global-navi .child-list>li>a {
				display: block;
				padding: 4px;
				text-decoration: underline;
		}
	#global-navi .grand-list{
		margin-left: .5em;
		font-size: 12px;
		color: rgba(0, 0, 0, .7);
	}
		#global-navi .grand-list>li>a {display: block;padding: 2px;text-decoration: underline;}
		#global-navi a img{
			width: 10px;
			opacity: .5;
		}
		body.menu-visible #menu span {
				background: transparent;
		}
		body.menu-visible #menu span:before {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				top: 0;
		}
		body.menu-visible #menu span:after {
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
				top: 0;
		}
		body.menu-visible #obfuscator {
				visibility: visible;
		}
		body.menu-visible #global-navi {
				-webkit-transform: translateX(0);
				transform: translateX(0);
		}
		/*----------------- Footer  -----------------*/
		#main-footer .viewport-m {
				flex-wrap: wrap;
				text-align: center;
		}
		#main-footer .viewport-m > * {
				width: 100%;
				margin: 6px 0;
		}
		#main-footer #sns {
				display: flex;
				justify-content: center;
		}
		#main-footer #sns li {
				margin: 2px;

		}
		#main-footer #sns a {
				min-width: 0;
				padding: 2px 8px;
		}
		#main-footer #contact-box h5 {
				width: 100%;
		}
		#main-footer #contact-box p {
				justify-content: center;
				margin: 0;
				line-height: 1.2;
		}
		/*----------------- index  -----------------*/
		#top-index #main-visual {
				padding: 16px;
		}
		#top-index #main-visual .viewport-m {
				display: block;
		}
		#top-index #main-visual #search-block {
				max-width: 320px;
				margin: 0 auto;
		}
		#top-index #main-visual #books {
				max-width: 260px;
				margin: 0 auto;
		}
		#index-content h2 {
				font-size: 14px;
		}
		#index-content h2 a {
				font-weight: normal;
				font-size: 11px;
		}
		/*----------------- Default template page  -----------------*/
		#page-header h1 {
				font-size: 20px;
				position: relative;
				z-index: 1;
				padding: 25px 0px;
		}
		#page-header h1 span {
				font-size: 14px;
		}
		#page-header > .viewport-m:before {
				height: 100%;
				width: 100%;
				right: 0;
				background-position: right center;
				z-index: 0;
		}
		#page-header h1 span:before {
				width: 8px;
				height: 1px;
				margin: 0px 4px;
		}
		#page-header #breadcrumb {
				padding: 4px 1%;
				font-size: 11px;
		}
		#container {
				flex-wrap: wrap;
				padding: 0;
		}
		#sidebar {
				order: 2;
				max-width: none;
				padding: 50px 6% 20px;
		}
		#sidebar:before {
				display: none;
		}
		#content {
				order: 1;
				padding: 30px 3% 50px;
		}
}
@media only screen and (max-width: 480px) {
		#index-content .cat-block {
				width: 100%;
		}
}

.single-yyyymmdd {
    display: block;
    margin-bottom: 15px;
    
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■2023-10-13 記事に商品のポップアップ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#products{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:10;
	background-color: #fff;
	line-height:1.5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
	transition: all 200s 0s ease;
}

#products .wrap{
	position: relative;
	padding: 20px;
}
#products .close{
	position: absolute;
	right:-13px;
	top:-13px;
	background-color: rgba(27, 79, 171, 1);
	border-radius: 50% 50%;
	cursor:pointer;
}
#products .close:hover{
	background-color:rgba(27, 79, 171, 0.7)
}
#products .close span{
	display: block;
	width: 27px;
	height: 27px;
}
#products .close span:after,
#products .close span:before{
	width:3px;
	height:18px;
	background:#fff;
	content:'';
	display: block;
	position: absolute;
	left: 12px;
  top: 5px;

}
#products .close span:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	
}
#products .close span:after{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
#products_btn{
	color:#fff;
	background-color: #FF0031;
	border-radius: 10px 0 0 10px;
	text-align: center;
	position:fixed;
	right:0px;
	bottom:57px;
	z-index:11;
	writing-mode: vertical-rl;
	font-size: 15px;
	padding: 15px 10px;
	cursor:pointer;
	transition: all 0.1s ease-out;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
#products_btn.hide{
	right:-50px;
	
}
#products .products{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	
}
#products .products li{
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid #eee;
}
#products .products li:last-of-type{
	margin-right: 0;
	padding-right: 0;
	border:none;
}
#products a{
	display: block;
	width:173px;
}
#products .title{
	font-size: 15px;
	color: #215EBC;
	margin-bottom: 10px;
}
#products .img{
	width: 173px;
	height: 173px;
	overflow: hidden;
	margin-bottom: 10px;
}
#products .img img{
	object-fit: cover;
}
#products .text{
	font-size: 13px;
	margin-bottom: 10px;
}
#products .price{
	color:#FF0031;
	text-align: right;
	font-size: 13px;
	
}#products .price span{
	font-size: 10px;
}
@media only screen and (max-width: 768px){
	#products{
		left:20px;
	}
	#products_btn{
		bottom:80px;
	}
	#products .products{
		display: block;
	}
	#products .products li{
		width:100%;
		margin: 0 0 20px 0px;
		padding-bottom: 20px;
		position: relative;
		border-right:none;
		border-bottom:1px solid #eee;
	}
	#products .products li:last-of-type{
		margin-bottom: 0;
		padding-bottom: 0;
		border:none;
	}
	#products .products a{
		width: auto;
		padding-left: 150px;
		min-height:130px;
	}
	#products .img{
		position:absolute;
		left:0;
		top:0;
		width: 130px;
		height:130px;
	}
}