@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* reset----------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-weight:100;  background:transparent; }
body { line-height:1; }
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; vertical-align:baseline; background:transparent; text-decoration: none; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ddd; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
*, *::before, *::after { box-sizing: border-box; }

/***************** basic ******************/

body {
	max-width: 100%;
	font-family: 'Open Sans', 'Segoe UI',SegoeUI,'Malgun Gothic',Gulim, sans-serif;
	font-size:0.875rem;
	line-height:1.5rem;
	font-weight:100;
	letter-spacing: 0.03rem;
}

body p { margin-bottom: 1.0rem; }
p.nob, ul.nob { margin-bottom: 0; }
a { color:#444; text-decoration:none; }
a:hover{ color:#d22; }
a:hover img { opacity: 0.7; }
header, main, footer { width: 100%; background-color: #fff; }
section { margin-bottom: 40px; }

.main_in, .footer_in { width:1150px; margin: 0 auto 80px auto; padding: 0 15px; }
.main_in2c { width:1150px; margin: 0 auto 80px auto; padding: 0 15px; display: flex; justify-content: space-between; }
.main_100 { width:100%; margin: 0 auto 80px auto; }

h1,h2,h3,h4 { font-weight: 700; }
.lv1e { font-size: 2.5rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 3rem; }
.lv1 { font-size: 2rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 3rem; }
.lv2e { font-size: 1.875rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 3rem; }
.lv2 { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 3rem; }
.lv2srf { font-size: 1.375rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 3rem;font-family: Open Sans; }
.lv2ul { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.03rem; line-height: 2rem; border-bottom: 2px #ddd solid;margin-bottom: 1.5rem; }
.lv4 { font-size: 1.0rem; font-weight: 700; margin-bottom: 15px; } 
.lv4ul { font-size: 1.0rem; font-weight: 700; margin-bottom: 15px; line-height: 2rem; border-bottom: 2px #ddd solid; margin-bottom: 1.5rem; } 
.lv4ulgray { font-size: 1.0rem; font-weight: 700; line-height: 2rem; background-color: #f0f0f0; border-bottom: 2px #ddd solid; padding: 0 15px; margin-bottom: 1.5rem; } 
.lv5ul { font-size: 1.0rem; font-weight: 300;  line-height: 2rem; border-bottom: 2px #ddd solid; margin-bottom: 0.5rem; } 

h3.ttl { font-size: 1.0rem; font-weight: 500; letter-spacing: 0.03rem; line-height: 2rem; margin-bottom: 0.5rem; padding-left: 20px; background: url(../images/hexa_h3.svg) left top / 15px 30px no-repeat; }

.ttl_r { font-size: 1.0rem; font-weight: 700; line-height: 1.5rem; margin-bottom: 0.5rem; padding-left: 20px; background: url(../images/hexa_rs.svg) left top -4px / 15px 30px no-repeat; }

.red { font-weight: inherit; color: #d00; }
.white { font-weight: inherit; color: #fff; }

figure { margin-bottom: 20px; }
figcaption { text-align: center; font-size: 0.75rem; line-height: 1.2rem; }
sup { font-size: 0.625rem; letter-spacing: 0; }
/***************** header ******************/

header {
	display: flex;
	justify-content: space-between;
	min-width: 1150px;
	position: relative;
	border-bottom: 1px #ddd solid;
	height: 77px;
}
.logo {
	flex-basis: 220px;
	text-align: center;
	padding: 25px 20px 20px 30px;
}
.logo h1 {
	width: 220px;
}
.logo img {
	width: 160px;
}
.logo div img {
	vertical-align: top;
}
nav {
	padding: 20px 0;
	flex-grow: 3;
}
/**** navi_pc ****/
ul#navi {
	margin:0;
	padding:0;
	display: flex;
	justify-content: flex-start;
	list-style:none;
}
ul#navi li {
	margin:0;
	padding:0;
	position:relative;
	width:auto;
}
ul#navi li a {
	padding:10px 12px 7px 12px;
	background-color:#fff;
	display: block;
	line-height: 1.2rem;
	font-weight: 500;
}
ul#navi li a:hover {
	border-bottom: 3px #d22 solid;
}
ul#navi li ul {
	opacity: 0;
	margin-left:0;
	position:absolute;
	top: 39px;
	left:0;
	z-index:999;
	width: 280px;
}
ul#navi li ul li {
}
ul#navi li ul li a {
	padding: 15px 20px;
	border-left: 3px #f5f5f5 solid;
	background-color:#f5f5f5;
}
ul#navi li ul li a:hover {
	border-bottom: none;
	border-left: 3px #d22 solid;
	background-color:#fee;
}
ul#navi li ul li a:hover + ul#navi li a {
	color: #d22;
}
ul#navi li ul li ul {
	padding-top:0;
	position:absolute;
	top:0;
	left:280px;
}
ul#navi li ul li ul li a {
	border-left: 3px #f0f0f0 solid;
	background-color:#f0f0f0;
}
/**** end_navi_pc ****/

.toggle_btn {
	display: none;
}
.utility {
	display: flex;
	text-align: center;
}
form#lang {
	display: inline-block;
	border-left: 1px #eee solid;
}
.lang_select {
	padding: 20px 0 ;
}
select::-ms-expand {
	display: none;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 30px 5px 25px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.1em;
	border-radius: 5px;
	border: none;
	background-color: #fff;
	background-image: url(../images/select_arrow.svg);
	background-repeat: no-repeat;
	background-size: 18px 14px;
	background-position: right 15px center;
	outline: none;
}
.search_pc {
	background-color: #000;
	width: 77px;
	height: 77px;
	margin-bottom:-1px;
}

@media screen and (max-width:1023px){
	header { min-width: auto; width: 100%; height: 58px; position: fixed; top: 0; left: 0; z-index: 999; }
	main { margin-top: 58px; }
	.main_in, .footer_in { width:100%; }
	.main_in2c { width:100%; margin: 0 auto 80px auto;}
	.main_100 { width:100%; margin: 0 auto 50px auto; }
	.logo { flex-basis: 180px; text-align: left; padding: 15px 0 15px 15px; }
	.logo img { width: 160px; vertical-align: middle; }
	.utility { padding: 7px 0; flex-basis: auto; flex-grow: 10;justify-content: flex-end; }
	.toggle_btn { display: block; flex-basis: 58px; height: 58px; background-color: #000; padding: 22px 15px; }
	.navbar_toggle{ z-index:9999; }
	.navbar_toggle_icon { position: relative; display: block; height: 2px; width: 30px; background: #d22; -webkit-transition: ease .5s; transition: ease .5s; }
	.navbar_toggle_icon:nth-child(1) { top: 0; }
	.navbar_toggle_icon:nth-child(2) { margin-top: 8px;}
	.navbar_toggle.open .navbar_toggle_icon:nth-child(1) { top: 6px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	.navbar_toggle.open .navbar_toggle_icon:nth-child(2) { top: -4px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	.search_pc, #search_layer { display: none; }
	.lang_select { padding: 5px 0; }
	.lang_select span { padding: 0 5px; }
	select { padding: 10px 30px 5px 15px;;background-position: right 7px center; }
	nav {
		position:fixed;
		top:58px;
		left:0;
		width: 60vw;
		margin:0;
		background: #ddd;
		flex-direction: column;
		-webkit-transform: translateX(100vw);
		transform: translateX(100vw);
		-webkit-transition:ease .5s;
		transition:ease .5s;
		padding: 0;
	}
	nav.open {
		-webkit-transform:translateX( 40vw );
		transform:translateX( 40vw );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 999;
	}
	ul#navi {
		flex-direction: column;
	}
	ul#navi li a {
		padding: 15px 20px;
		background-color: #f5f5f5;
		border-bottom: 1px #fff solid;
	}
	ul#navi li a:hover {
		background-color: #fee;
		border-bottom: 1px #d22 solid;
	}
	ul#navi li ul, ul#navi li ul li { display: none; }
	#overlay {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 58px;
		background: rgba(0,0,0,.3);
		z-index: 100;
		display: none;
	}
	#overlay.open {
		display: block;
	}
}
@media screen and (min-width:1024px) and (max-width:1200px){
	header, main { min-width: auto; width: 100%; }
	.main_in, .footer_in { width:100%; }
	.main_in2c { width:100%; margin: 0 auto 80px auto;}
}
@media screen and (max-width:767px){
	body { line-height: 1.5rem; font-size: 0.75rem; }
	.lv2e { font-size: 1.25rem; }
	.lv2, .lv2ul { font-size: 1rem; line-height: 2rem; padding-bottom: 10px; }
	.lv4 { font-size: 0.875rem; margin-bottom: 10px; }
	.main_in  { margin: 50px auto 20px auto; }
	.main_100 { margin: 0 auto 20px auto; }
	.main_in2c { width:100%; margin: 100px auto 80px auto;}
}
@media screen and (max-width:320px){
	.lang_select span { display: none; }
}


/***************** top_visual ******************/
#top_area {
	width: 100%;
	margin-bottom: 60px;
	border-bottom: 1px #ddd solid;
	height: 551px;
}
.top_v {
	height: 550px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;'
}
.top_v_in {
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 1150px;
}
/** text_pic_setting **/
.slick-slide .message {
	width: 600px;
	z-index: 20;
	float: right;
}
.slick-active .message {
	animation: FadeAni 1s ease 1.5s 1 normal both;
}
@keyframes FadeAni {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@media screen and (max-width:767px){
	#top_area { margin-bottom: 10px; height: auto;}
	.top_v_in, .slick-slide .message,.slick-active .message { display: none; }
	.top_v { height: auto; width: 100%; object-fit: contain; z-index: 1; }
}
@media screen and (min-width:767px) and (max-width:1250px){
	.top_v_in { width: 90%; }
}
/***************** top_contents ******************/
.box_wrap {
	width: 100%;
	display: flex;
	flex-direction: row;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	margin: 0 0 80px 0;
}
.biz_box {
	width: calc(100%/4);
	border-right: 1px #ddd solid;
	position: relative;
}
.biz_box:last-child {
	border-right: 0;
}
div[class^="biz_pic"] {
	width: 100%;
	height: 235px;
	background-size: cover;
	padding: 100px 20px;
}

div[class^="biz_pic"] span {
	font-size: 24px;
	font-weight: 500;
	color: #fff;
	filter: drop-shadow(0 0 10px #000);
}
.biz_pic1 { background-image: url(../images/biz1.jpg); }
.biz_pic2 { background-image: url(../images/biz2.jpg); }
.biz_pic3 { background-image: url(../images/biz3.jpg); }
.biz_pic4 { background-image: url(../images/biz4.jpg); }

.biz_sub { width: 100%; max-width: 315px;margin: 15px 0; }
.biz_tx { padding: 20px 20px 140px 20px; }

.more_info_p {
	width: 100%;
	position: absolute;
	bottom: 58px;
	padding: 20px 20px 30px 20px;
}
a[class^="more_btn"] {
	width: 100%;
	display: flex;
	border-radius: 15px;
	border-width: 2px;
	border-style: solid;
	margin: 0 auto;
	padding: 10px 0;
}
.more_btn_p { border-color: #d70440; }
.more_btn_w { border-color: #0083c9; }
.more_btn_i { border-color: #00a896; }
.more_btn_o { border-color: #a6559d; }

div[class^="pcat_stick"] {
	width:25px;
	margin: 4px auto;
	height: 8px;
	transform: skew(45deg);
	transition: all .3s;
}
.pcat_stick_p { border-bottom: 2px solid #d70440; border-right: 3px solid #d70440; }
.pcat_stick_w { border-bottom: 2px solid #0083c9; border-right: 3px solid #0083c9; }
.pcat_stick_i { border-bottom: 2px solid #00a896; border-right: 3px solid #00a896; }
.pcat_stick_o { border-bottom: 2px solid #a6559d; border-right: 3px solid #a6559d; }

a[class^="more_btn"] span { width: 77%; line-height: 1.125rem; }
a.more_btn_p { color: #d70440; }
a.more_btn_w { color: #0083c9; }
a.more_btn_i { color: #00a896; }
a.more_btn_o { color: #a6559d; }

a[class^="more_btn"]:hover div[class^="pcat_stick"] { width: 35px; }
a.more_btn_p:hover { background-color: #fee; }
a.more_btn_w:hover { background-color: #def; }
a.more_btn_i:hover { background-color: #dfe; }
a.more_btn_o:hover { background-color: #fde; }

div[class^="detail"] {
	width: 100%;
	text-align: center;
	color: #fff;
	position: absolute;
	bottom: 0;
}
.detail_web, .br_detail_web { background-color: #0083c9; }
.detail_process, .br_detail_process { background-color: #d70440; }
.detail_inspect, .br_detail_inspect { background-color: #00a896; }
.detail_optics, .br_detail_optics { background-color: #a6559d; }

.det_relative { position: relative; padding: 10px 0; }
.det_relative .target { position: absolute; width: 100%; top: 44px; z-index: 15; }

.arrowlink {
	width: 180px;
	display: flex;
	justify-content: space-between;
	margin: 0 0 0 auto;
	padding: 10px 0;
}
.stickarrow {
	width:30px;
	margin: 4px auto;
	height: 8px;
	border-bottom: 2px solid #fff;
	border-right: 3px solid #fff;
	transform: skew(45deg);
	transition: all .3s;
}
a.arrowlink span { color:#fff; line-height: 1.125rem; }
a.arrowlink:hover .stickarrow { width: 45px; opacity: 0.8;}
a.arrowlink:hover span { opacity: 0.8; }

.det_relative h4:before {
	content: "";
	position: absolute;
	top: 22px;
	right: 15px;
	width: 14px;
	height: 2px;
	/*縦線に*/
	transform: rotate(90deg);
	background: #fff;
	transition: all .3s ease-in-out;
}
.det_relative h4:after {
	content: "";
	position: absolute;
	top: 22px;
	right: 15px;
	/*横線*/
	width: 14px;
	height: 2px;
	background: #fff;
	transition: all .2s ease-in-out;
}
.det_relative h4.open:after {
	transform: rotate(180deg);
}
.det_relative h4.open:before {
	opacity: 0;
}

.br_top_lead .arrowbtn_red {
	background-color: #fff;
}

@media screen and (max-width:767px){
	.box_wrap { flex-wrap: wrap;width: 100%;margin:0;box-shadow:none; }
	.biz_box { width: 100%; margin-bottom:15px; box-shadow: none; }
	div[class^="biz_pic"] { height: 155px; padding: 0; }
	.biz_tx { padding: 15px 15px 130px 15px; }
	div[class^="detail"] { padding: 0 10px; }
	.more_info_p { padding: 20px; }
	.det_relative h4 { line-height: 2rem; }
}
/***************** products ******************/
.box_wrap2 {
	width: 100%;
	margin-bottom: 80px;
}
.pro_box {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-between;
	list-style: none;
	background-color: #fff;
	box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1);
}
.pro_box li {
	width: 100%;
	border-bottom: 1px #ddd solid;
	background-position: left 10px center;
	background-repeat: no-repeat;
	background-size: 65px;
	text-align: left;
}
.pro_box li.prod01 { background-image: url(../images/p01.png); }
.pro_box li.prod02 { background-image: url(../images/p02.png); }
.pro_box li.prod03 { background-image: url(../images/p03.png); }
.pro_box li.prod04 { background-image: url(../images/p04.png); }
.pro_box li.prod05 { background-image: url(../images/p05.png); }
.pro_box li.prod06 { background-image: url(../images/p06.png); }
.pro_box li.prod07 { background-image: url(../images/p07.png); }
.pro_box li.prod08 { background-image: url(../images/p08.png); }
.pro_box li.prod09 { background-image: url(../images/p09.png); }
.pro_box li.prod10 { background-image: url(../images/p10.png); }
.pro_box li.prod11 { background-image: url(../images/p11.png); }
.pro_box li.prod12 { background-image: url(../images/p12.png); }
.pro_box li.prod13 { background-image: url(../images/p13.png); }
.pro_box li.prod14 { background-image: url(../images/p14.png); }
.pro_box li a {
	display: block;
	padding: 20px 15px 20px 85px;
}
.pro_box li:hover {
	background-color: #fee; }
.pro_box li.blank:hover {
	background-color: #fff;
}
@media screen and (max-width:767px){
	.box_wrap2 { margin-bottom: 40px; }
	.pro_box { flex-direction: column; }
	.pro_box li { width: 100%; }
}
/***************** search_box ******************/
.srch_wrapper {
	width: 100%;
	background-image: url(../images/search.jpg);
	background-size: cover;
	background-position: center center;
	padding: 4rem 0;
}
.srch_in {
	width: 1150px;
	margin: 0 auto;
	padding: 0 15px;
}
.srch_title {
	width: 100%;
	font-size: 1.5rem;
	color: #fff;
	margin-bottom: 2.5rem;
	text-align: center;
	letter-spacing: 0.2rem;
}
.srch_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 4rem;
}
.srch_btn {
	border: 3px #fff solid;
	width: 48%;
	padding:15px 0;
	text-align: center;
	font-size: 0.875rem;
	background-image: url(../images/search.svg);
	background-repeat: no-repeat;
	background-position: left 10% bottom 45%;
}
.srch_btn:hover, .white_arrow:hover {
	background-color: rgba(255,255,255,0.4);
}
@media screen and (max-width:1280px){
	.srch_in { width: 100%; }
	.srch_btn { background-position: left center; }
}
@media screen and (max-width:767px){
	.srch_box { flex-direction: column; }
	.srch_btn { width: 100%; }
	.srch_btn:last-child { border-top: none; }
}

/***************** stick_round_btn ******************/
a[class^="arrowbtn"] {
	width: 300px;
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 15px 80px 15px 50px;
}
.arrowbtn_wht {
	border: 1px #fff solid;
	border-radius: 15px;
}
.arrowbtn_red {
	border: 1px #ccc solid;
	border-radius: 15px;
}
.arrowbtn_wht:hover {
	background-color: rgba(255,255,255,0.3);
}
.arrowbtn_red:hover {
	background-color: rgba(224,0,0,0.1);
}
div[class^="stickarrow2"] {
	width:40px;
	margin: 4px auto;
	height: 8px;
	transform: skew(45deg);
	transition: all .3s;
}
.stickarrow2_wht {
	border-bottom: 2px solid #fff;
	border-right: 3px solid #fff;
}
.stickarrow2_red {
	border-bottom: 2px solid #d00;
	border-right: 3px solid #d00;
}
a.arrowbtn_wht span {
	color:#fff;
	line-height: 1.125rem;
}
a.arrowbtn_red span {
	line-height: 1.125rem;
}
a[class^="arrowbtn"]:hover div[class^="stickarrow2"] {
	width: 60px; opacity: 0.8;
}
a[class^="arrowbtn"]:hover span {
	opacity: 0.8;
}

/***************** stick_solid_btn ******************/
a[class^="arrow2btn"] {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	padding: 8% 3% 8% 0%;
	height: 100%;
}
.arrow2btn_red {
	background-color: #f0f0f0;
	box-shadow: 1px 1px 0 silver;
}
.arrow2btn_red:hover {
	background-color: rgba(224,0,0,0.1);
}
a.arrow2btn_red span {
	line-height: 1.125rem;
	width: calc(100% - 80px)
}
a[class^="arrow2btn"]:hover div[class^="stickarrow3"] {
	width: 45px; opacity: 0.8;
}
a[class^="arrow2btn"]:hover span {
	opacity: 0.8;
}
.stickarrow3 {
	width:30px;
	margin: 4px auto;
	height: 8px;
	transform: skew(45deg);
	transition: all .3s;
}
.stickarrow3 {
	border-bottom: 2px solid #d00;
	border-right: 3px solid #d00;
}
@media screen and (max-width:767px){
	a[class^="arrow2btn"] { padding: 5%; }
}

/***************** news ******************/
.news_in {
	width: 100%;
	padding: 0 15px;
	margin-bottom: 120px;
}
.news_top {
	width:1150px;
	margin: 0 auto;
}
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #fff;
	width: 1150px;
	margin: 0 auto;}
.tab_item {
	width: calc(100%/2);
	height: 50px;
	border-bottom: 2px solid #e0e0e0;
	border-right: 2px solid #e0e0e0;
	background-color: #eee;
	line-height: 50px;
	font-size: 0.875rem;
	text-align: center;
	color: #565656;
	display: block;
	float: left;
	text-align: center;
	font-weight: 500;
	transition: all 0.2s ease;
}
.tabs label.tab_item:last-of-type {
	border-right: 0;
}
.tab_item:hover {
	background-color: #fee;
}
input[name="tab_item"] {
	display: none;
}
.tab_content {
	display: none;
	padding: 0;
	clear: both;
	overflow: hidden;
}
#all:checked ~ #all_content,
#event:checked ~ #event_content,
#release:checked ~ #release_content {
	display: block;
}
.tabs input:checked + .tab_item {
	background-color: #e0e0e0;
}
.tabs ul {
	list-style: none;
	width: 100%;
}
.tabs ul li {
	border-bottom: 1px #ddd solid;
}
.tabs ul li a {
	display: block;
	padding: 20px 0 20px 40px;
}
.tabs ul li a:hover {
	background-color: #fee;
}
.tabs ul li a .news_set {
	display: flex;
	align-items: center;
}
.date {
	flex-basis: 10%;
	padding-right: 5%;
}
.cate {
	display: inline-block;
	flex-basis: 15%;
	text-align: center;
	border: 1px #d00 solid;
	font-size: 0.75rem;
	margin-right: 5%;
}
.news_ttl {
	flex-basis: 65%;
}
@media screen and (max-width:767px){
	.news_in { padding: 0; margin-bottom: 60px; }
	.tabs { width: 100%; }
	.news_top { width:100%; padding: 0 15px; }
	.tab_item { font-size: 0.75rem; }
	.tabs ul li a { padding: 15px; }
	.tabs ul li a .news_set { flex-wrap: wrap; }
	.date, .cate { line-height: 24px; flex-basis: 40%; margin-bottom: 10px; }
	.news_ttl { flex-basis: 100%; }
}
@media screen and (min-width:767px) and (max-width:1200px){
	.news_top, .tabs { width:100%; }
}
/***************** footer ******************/
footer {
	background-color: #e0e0e0;
}
.footer_in {
	padding: 60px 15px;
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.footer_title {
}
.link_title {
	font-weight: 500;
	margin-bottom: 10px;
}
a .link_title:hover {
	color: #d00;
}
.footer_link {
}
.footer_link ul {
	list-style: inside;
	list-style-type: none;
	color: #777;
}
.footer_link2 ul {
	list-style: none;
}
.footer_link li {
	font-size: 0.75rem;
}
.footer_link li:before {
	content: "- ";
}
.footer_link2 li {
	margin-bottom: 1.5rem;
}
.copyright {
	background-color: #d00;
	color: #fff;
	padding: 20px 0;
	display: flex;
	font-size: 0.75rem;
}
.link {
	text-align: center;
	flex-basis: 33.3%;
}
.link a {
	color: #fff;
}
.copy {
	font-weight: 500;
	text-align: center;
	flex-basis: 33.3%;
}
@media screen and (max-width:1023px){
	.footer_in { display: none; }
	.copyright { flex-direction: column; }
	.link { width: 100%; }
}


/***************** header_searchBox ******************/
#search_layer {
	position: absolute;
	top: 0;
	right: 0;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
}
#search_layer.sb-search-open {
	width:400px;
}

.sb-search {
	position: relative;
	width: 0%;
	min-width: 77px;
	height: 77px;
	float: right;
	overflow: hidden;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
	-webkit-backface-visibility: hidden;
}

.sb-search-input {
	position: absolute;
	top: 0;
	right: 0px;
	border: 2px #ccc solid;
	outline: none;
	background: #fff;
	width: 100%;
	height: 77px;
	margin: 0;
	z-index: 10;
	padding: 20px 65px 20px 20px;
	font-family: inherit;
	font-size: 20px;
	color: #2c3e50;
}
 
input[type="search"].sb-search-input {
	-webkit-appearance: none;
	-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
	color: #ccc;
}
 
.sb-search-input:-moz-placeholder {
	color: #ccc;
}
 
.sb-search-input::-moz-placeholder {
	color: #ccc;
}
 
.sb-search-input:-ms-input-placeholder {
	color: #ccc;
}

.sb-icon-search,
.sb-search-submit  {
	width: 77px;
	height: 77px;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0;
	margin: 0;
	line-height: 77px;
	text-align: center;
	cursor: pointer;
}

.sb-search-submit {
	background: #fff; /* IE needs this */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
	filter: alpha(opacity=0); /* IE 5-7 */
	opacity: 0;
	color: transparent;
	color:red;
	border: none;
	outline: none;
	z-index: -1;
}

.sb-icon-search {
	color: #fff;
	background-color: #000;
	background-image: url(../images/search2.svg);
	z-index: 90;
	font-size: 22px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}
 
.sb-icon-search:before {
	content: "";
}

.sb-search.sb-search-open,
.no-js .sb-search {
	width: 100%;
}

.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
	background-color: #c00;
	background-image: url(../images/search.svg);
	color: #fff;
	z-index: 11;
}

.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
/* z-index: 90;*/
}

/***************** sp_searchBox ******************/
#search_sp { display: none; }
.search_sp_box {
	padding: 15px;
}
.search_form {
	width: calc(100% - 40px);
	padding:10px;
	height: 40px;
	font-size:1.3em;
	font-family:Arial, sans-serif;
	color:#444;
	border:solid 1px #ccc;
}
.search_sp_btn {
	height: 40px;
	margin-left: -8px;
}
.search_form::placeholder {
	color: #ccc;
}
@media screen and (max-width:1023px){
	#search_sp { display: block; }
}

/*■■■■■■■■■■■■■■■■■■■ under_direction ■■■■■■■■■■■■■■■■■■■*/

/***************** corner_top_v ******************/

div[id^="corner_top_"] {
	width: 100%;
	height: 380px;
	background-position: center center;
	background-size: cover;
	position: relative;
	border-bottom: 1px #ddd solid;
	background-color: #f0f0f0;
}
#corner_top_business { background-image: url(../images/business_top.jpg); }
#corner_top_product { background-image: url(../images/product_top.jpg); }
#corner_top_company { background-image: url(../images/company_top.jpg); }
#corner_top_ir { background-image: url(../images/ir_top.jpg); }
#corner_top_news { background-image: url(../images/news_top.jpg); }
#corner_top_recruit { background-image: url(../images/recruit_top.jpg); }

#product h2 { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.03rem; line-height: 3rem; border-bottom: 2px #ddd solid;margin-bottom: 1.5rem; }
#product h3 { font-size: 1.0rem; font-weight: 500; letter-spacing: 0.03rem; line-height: 2rem; margin-bottom: 0.5rem; }


.corner_title {
	position: absolute;
	bottom: 0;
	left: 0;
}
.corner_title_e {
	padding: 0 20px 0 40px;
	background-color: #fff;
	margin-bottom: 10px;
}
.corner_title_e .lv1e {
	line-height: 2.4rem!important;
}
.corner_title_j {
	width: 100%;
	padding: 0 20px 0 40px;
	background-color: #d00;
	color: #fff;
	line-height: 1.5rem;
	letter-spacing: 0.1rem;
	margin-bottom: -1px;
}
.corner_title_j h1 {
	font-size: 0.875rem;
	font-weight: 500;
}
@media screen and (max-width:767px){
	div[id^="corner_top_"] { height: 200px; margin-bottom: 50px; }
	.corner_title_e { padding: 0 20px; }
	.corner_title_j { padding: 0 20px; }
	.corner_title_e .lv1e { font-size: 1.5rem;!important; }
	#corner_top_business { background-image: url(../images/business_top_sp.jpg); }
	#corner_top_product { background-image: url(../images/product_top_sp.jpg); }
	#corner_top_company { background-image: url(../images/company_top_sp.jpg); }
	#corner_top_ir { background-image: url(../images/ir_top_sp.jpg); }
	#corner_top_news { background-image: url(../images/news_top_sp.jpg); }
	#corner_top_recruit { background-image: url(../images/recruit_top_sp.jpg); }
}

/***************** breadcrumb ******************/
.breadcrumb_in {
	padding: 15px 40px 40px 40px;
	font-size: 0.75rem;
}
.breadcrumb_in a span {
	margin-right:2.3rem;
	color:#777;
}
.breadcrumb_in a span:hover {
	text-decoration:underline;
}
.breadcrumb_in span {
	background-image: url(../images/arrow_red_s.svg);
	background-size: 8px;
	background-position: right 15px center;
	background-repeat: no-repeat;
}
.breadcrumb_in span:last-child {
	background-image: none;
}
.breadcrumb_in span > span {
	background-image: none;
}
@media screen and (min-width:768px) and (max-width:1023px){
	.breadcrumb_in { padding: 15px 40px 40px 15px; }
}
@media screen and (max-width:767px){
	.breadcrumb_in { display: none; }
}
/***************** hexa_icon ******************/
h2[class^="hexa_ttl_"], div[class^="hexa_ttl_"] {
	padding-left: 35px;
	background-size: 24px;
	background-position: left top;
	background-repeat: no-repeat;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	line-height: inherit;
}
.hexa_ttl_b { background-image: url(../images/hexa_b.svg); }
.hexa_ttl_r { background-image: url(../images/hexa_r.svg); }
.hexa_ttl_g { background-image: url(../images/hexa_g.svg); }
.hexa_ttl_v { background-image: url(../images/hexa_v.svg); }

@media screen and (max-width:767px){
	h2[class^="hexa_ttl_"] { font-size: 0.875rem; }
}
/***************** local_navi ******************/
.side_nav {
	flex-basis: 280px;
	margin-right: 40px;
}
.side_nav_box {
	box-shadow: 0 0 25px 0 rgba(0, 0, 0, .1);
}
.side_nav_ttl {
	width: 100%;
	background-color: #d00;
	color: #fff;
	padding: 30px 15px;
	line-height: 24px;
	font-size: 1.125rem;
	text-align: center;
}
.side_nav_ttl span {
	font-size: 0.75rem;
	display: block;
}
.side_nav ul {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
	list-style: none;
}
.side_nav ul li {
	border-bottom: 1px #ddd solid;
}
.side_nav ul li a {
	background-color: #fff;
	display: block;
	padding: 15px 15px 15px 35px;
}
.side_nav ul li a:hover {
	background-color: #fee;
}
.side_nav_banner a {
	display: block;
	margin-bottom: 20px;
}
.side_nav_banner a img {
	vertical-align: bottom;
	width: 100%;
}

.contents_2c {
	flex: 1;
}
@media screen and (max-width:1023px){
	.side_nav { display: none; }
}
/***************** local_nav_toggle ******************/
.side_nav ul li div.trigger {
	background-color: #fff;
	display: block;
	padding: 15px 15px 15px 35px;
	position: relative;
}
.side_nav ul li div.trigger:before {
	display: inline-block;
	content: "";
	position: absolute;
	top: 20px;
	left: 15px;
	background: url(../images/arrow_red_s.svg) center / 8px no-repeat;
	width: 10px;
	height: 10px;
	z-index: 100;
	transition: all 0.2s ease-in-out;
	transform:rotateZ(0deg);
}
.side_nav ul li div.trigger.open:before {
	transform:rotateZ(90deg);
}
.side_nav ul.target {
	margin-bottom: 0;
	border-top: 1px #ddd dotted;
}
.side_nav ul.target li a, .side_nav ul.no_target li a {
	background-color: #f5f5f5;
	padding: 15px 20px;
	font-size: 0.75rem;
	line-height: 1.2rem;
}
.side_nav ul.target li {
	background-color: #f5f5f5;
	border-bottom: none;
	font-size: 0.75rem;
}
.side_nav ul li div.trigger:hover{
	background-color: #fee;
	color: #d00;
}
.trigger:hover{
	cursor: pointer;
}
.side_nav ul.no_target {
	margin-bottom: 0;
}
.side_nav ul.no_target li:last-child {
	border-bottom: 0;
}
/***************** right_contents ******************/
h1[class^="hexa_ttl_"] {
	padding-left: 35px;
	background-size: 24px;
	background-position: left top;
	background-repeat: no-repeat;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.03rem;
	display: inline-block;
}
.box_flex, .box_flex_br {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.box2, .box22 { width: 48%; margin-bottom: 30px; }
.box2nrw { width: 48.5%; margin-bottom: 30px; }
.box2nm { width: 48%; margin: 0; }
.box46_4 { width: 38%; } .box46_6 { width: 58%; }
.box37_3 { width: 28%; margin-bottom: 20px; } .box37_7 { width: 68%; margin-bottom: 20px; }
.box19_1 { width: 15%; margin-bottom: 20px; } .box19_9 { width: 83%; margin-bottom: 20px; }
.box4 { width: 23%; margin-bottom: 30px; }
.box_flex3 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex-box img { display: inline-block; }
.box_flex3:after { width: 32%; display:block; content: ""; }
.box3, .box3_2 { width: 31%; margin-bottom: 20px; line-height: 1.5rem; }
.box3nrw { width: 32%; margin-bottom: 30px; }

.box22 a {
	display: block;
	line-height: 1rem;
	padding-bottom: 15px;
}
@media screen and (max-width:767px){
	h1[class^="hexa_ttl_"] { font-size: 1.25rem; }
	.box2, .box3 { width: 100%; }
	.box3_2, .box4 { width: 48%; }
	.box19_1 { width: 30%; margin-bottom: 20px; } .box19_9 { width: 67%; margin-bottom: 20px; }
	.box3nrw { width: 100%; margin-bottom: 10px; }
	.box_flex_br .box37_3, .box_flex_br .box37_7,
	.box_flex_br .box46_4, .box_flex_br .box46_6  { width: 100%; }
}
/***************** right_contents ******************/
.contents_2c img {
	display: block;
	margin: 0 auto 10px auto;
	max-width: 100%;
}
.product_box {
	width: 100%;
	border-top: 2px #ddd solid;
}
.product_box ul.parent {
	margin: 0;
}
.product_box ul.parent li {
	list-style: none;
}
.product_box ul.parent li {
	width: 100%;
	border-bottom: 2px #ddd solid;
	position: relative;
}
.product_box ul.parent li h3 {
	padding: 15px 20px;
}
.product_box ul.parent li h3:before {
	content: "";
	position: absolute;
	top: 30px;
	right: 25px;
	width: 14px;
	height: 3px;
	/*縦線に*/
	transform: rotate(90deg);
	background: #d00;
	transition: all .3s ease-in-out;
}
.product_box ul.parent li h3:after {
	content: "";
	position: absolute;
	top: 30px;
	right: 25px;
	/*横線*/
	width: 14px;
	height: 3px;
	background: #d00;
	transition: all .2s ease-in-out;
}
.product_box ul.parent li h3.open + .product_box ul li {
	background-color: #f5f5f5;
}
.product_box ul.parent li h3.open:after {
	transform: rotate(180deg);
}
.product_box ul.parent li h3.open:before {
	opacity: 0;
}
.product_box ul.parent li h3.open + ul {
	background-color: #f5f5f5;
}
.product_box ul.parent li ul {
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0;
}
.product_box ul.target li {
	width: 31.5%;
	line-height: 22px;
	margin-bottom: 20px;
	border-bottom: 0;
}
.product_box ul.target li img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	margin-bottom: 10px;
}
.product_box ul.target:after { width: 32%; display:block; content: ""; }
.box2.shadow:hover {
	background-color: #fee;
}
.search_boxL {
	padding: 15px 20px 15px 60px;
	color: #d00;
	background-image: url(../images/search_product.svg);
	background-size: 32px 32px;
	background-position: left 15px center;
	background-repeat: no-repeat;
}
.search_boxL span {
	font-size: 1.125rem;
	font-weight: 500;
}
.search_boxL img {
	width: 100px;
	float: right;
	margin: 10px 0;
}
.search_txt {
	font-size: 0.75rem;
	margin: 0 20px 15px 20px;
	padding: 10px 0 0 0;
	border-top: 2px #ddd solid;
}
.banner img {
	width: 280px;
	margin-right: 20px;
}

.pagelink {
	margin-bottom: 10px;
}
.pagelink a {
	display: inline-block;
	border-left: 1px #ddd solid;
	padding: 0 20px;
	line-height: 20px;
}
.pagelink a:nth-last-child(2) {
	border-right: 1px #ddd solid;
}
.pagelink a:hover {
	background-color: #fee;
}
.pagelink .catalog_btn {
	display: inline-block;
	border: 1px #ccc solid;
	border-radius: 10px;
	padding:2px 10px 2px 30px;
	background: url(../images/catalog.svg) left 10px center / 15px 15px no-repeat;
	float: right;
	font-size: 0.75rem;
	margin: 3px 0;
}
.main_pic {
	width: 100%;
	background-color: #eee;
}
.contents_2c ul, .contents_2c ol {
	margin-left: 20px;
	margin-bottom: 1rem;
}
.contents_2c ul.nob, .contents_2c ol.nob {
	margin-left: 20px;
	margin-bottom: 0;
}
.no_product {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

area{
border:none;
outline:none;
}
#product_top figure { display:inline-block; position: relative;margin: 0 auto; }
.pro_btn01 { position: absolute; width: 54%; top:0; left:33.1%; }
.pro_btn02 { position: absolute; width: 69%; top:0; left:27.9%; }
.pro_btn03 { position: absolute; width: 67%; top:0; left:21.8%; }
.pro_btn04 { position: absolute; width: 76%; top:0; left:20%; }

/***************** normal_table ******************/
.tbl_spec {
	width: 100%;
	margin-top: -1.5rem;
}
.tbl_spec tr {
	border-bottom: 2px #ddd dotted;
}
.tbl_spec th {
	width: 25%;
	padding: 15px;
	font-weight: 500;
	text-align: left;
	line-height: 1.5rem;
	vertical-align: middle;
}
.tbl_spec td {
	padding: 15px;
}
.upline {
	border-top: 2px #ddd dotted;
}
.upline .tbl_spec, .tbl_spec.upline {
	margin-top: 0;
}
@media screen and (max-width:767px){
	.tbl_spec th { display: block; width: 100%; padding-bottom: 0; }
	.tbl_spec td { display: block; width: 100%; padding-top: 10px;}
}

/***************** data_table ******************/
table.data_table {
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-collapse: collapse;
	width: 100%;
}
table.data_table th,
table.data_table td {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	text-align:center;
	vertical-align:middle;
	font-size: 0.75rem;
}
table.data_table td.left {
	text-align:left;
}
table.data_table th {
	background-color: #eee;
	white-space: nowrap;
	line-height: 1.5rem;
}
table.data_table tr td:first-child {
	width:13%;
}
table.data_table tr td.left:first-child {
	width:45%;
	text-align: left!important;
	line-height: 24px;
}
table.data_table tr td img {
	width:120px;
	height:auto;
}
table.data_table caption {
	display: none;
}
@media screen and (max-width:767px){
	table.data_table {
		border: none;
	}
	table.data_table th {
		display: block;
		border-right: 1px solid #ccc;
	}
	table.data_table thead {
		display: none;
	}
	table.data_table tr {
		border-top: 1px solid #ccc;
		display: block;
		margin-bottom: 20px;
	}
	table.data_table tr td:first-child, table.data_table tr td.left:first-child {
		background-color:#ddd;
		width:100%;
		display: block;
	}
	table.data_table td,
	table.data_table td.left {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		display: block;
		padding: 5px;
		text-align: right;
	}
	table.data_table td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
	}
	table.data_table tr td img {
		width:100%;
		height:auto;
	}
	table.data_table caption {
		display: block;
	}
}
/***************** right_contents_under ******************/
.related {
	border-top: 2px #ddd solid;
	background-color: #f5f5f5;
	padding: 20px 20px 0 20px;
	margin-top: -26px;
}
.cate_list {
	background-color: #f5f5f5;
	padding: 20px 20px 0 20px;
	margin-bottom: 20px;
}
.related img, .cate_list img {
	width: 100%;
	height: 140px;
	object-fit: cover;
}
.to_form {
	width: 100%;
	display: block;
	padding: 20px 20px 20px 80px;
	background: #fee url(../images/mail.svg) left 30px center / 30px 30px no-repeat;
	box-shadow: 1px 1px 0 #ddd; 
}
.to_form:hover {
	background: #fdd url(../images/mail_h.svg) left 30px center / 30px 30px no-repeat;
}
.tel_enq {
	width: 100%;
	display: block;
	padding: 5px 20px 5px 80px;
	background: url(../images/tel.svg) left 30px center / 30px 30px no-repeat;
}
.tel_enq_ir {
	width: 100%;
	display: block;
	padding: 25px 20px 20px 80px;
	background: url(../images/tel.svg) left 30px center / 30px 30px no-repeat;
}
.telno {
	font-size: 1.25rem;
	line-height: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
}
@media screen and (max-width:767px){

	.product_box ul.target li { width: 48%; }
	.product_box ul.target li img { height: 100px; }
	.product_box ul.parent li ul { padding: 15px; }
	.product_box ul.parent li h3:before, .product_box ul.parent li h3:after { top: 26px; }
	.search_boxL span { font-size: 0.875rem; }
	.search_boxL img { width: 70px; }
	.tbl_spec th { display: block; width: 100%; padding-bottom: 0; }
	.tbl_spec td { display: block; width: 100%; padding-top: 10px;}
	.related { padding: 15px 15px 0 15px;; }
	.related img { height: 100px; }
	.pagelink .catalog_btn { float: none; display: inline-block; margin-top: 20px; }
}
/* -----------------------------------no border table------------------------------------ */
table { }
th { padding: 10px; white-space: nowrap; vertical-align: top; text-align: left; }
td { padding: 10px; line-height: 1.5rem; vertical-align: top; }
/* -----------------------------------border not responsiv table------------------------------------ */
table.nobr { width: 100%; }
table.nobr th { padding: 10px; white-space: normal; vertical-align: top; font-weight: 500; text-align: center; background-color: #f0f0f0; border: 1px #ddd solid; }
table.nobr td { padding: 10px; line-height: 1.5rem; vertical-align: top; border: 1px #ddd solid; }
/***************** ir ******************/
table.th35 th { width: 35%; }
@media screen and (max-width:767px){
	table.th35 th { width: 100%; }
}
/***************** recruit ******************/
.recruit_ttl {
	float: right;
	height: 16px;
	margin-top: 18px;
}
.to_out {
	width: 100%;
	display: block;
	padding: 20px 40px 20px 20px ;
	background: #fee url(../images/to_out.svg) right 30px center / 30px 30px no-repeat;
	box-shadow: 1px 1px 0 #ddd;
	text-align: center;
}
.to_out:hover {
	background: #fdd url(../images/to_out_h.svg) right 30px center / 30px 30px no-repeat;
}
@media screen and (max-width:767px){
	.hexa_ttl_r.lv2ul {padding-bottom: 0;}
	.recruit_ttl { margin-top: 12px; }
}
.to_out_in { padding: 0 35px 0 0; background-image: url(../images/to_out.svg); background-position: right 10px center; background-size: 20px 20px; background-repeat: no-repeat; }
.to_out_in:hover { background-image: url(../images/to_out_h.svg); }
/***************** download ******************/
.download {
	width: 100%;
	display: block;
	padding: 20px 40px 20px 20px ;
	background: #fee url(../images/d_l.svg) right 30px center / 30px 30px no-repeat;
	box-shadow: 1px 1px 0 #ddd;
	text-align: center;
}
.download:hover {
	background: #fdd url(../images/d_l_h.svg) right 30px center / 30px 30px no-repeat;
}

/***************** notice ******************/
.no_notice {
	width: 100%;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
}
/***************** catalog ******************/
.catalog table { width: 100%; margin-bottom: 10px;}
.catalog td { vertical-align: top; width: 50%; padding: 5px 0; line-height: 1.0rem; font-size: 0.75rem }
.catalog td a:before { content:"▸" }
.catalog img { border: 1px #ccc solid; margin: 0 auto 0 0; }
.catalog h4 { margin-bottom: 10px; }
.catalog .box3 { padding: 15px; background-color: #f0f0f0; line-height: 1.2rem; }

/***************** end-of-sales ******************/
.endofsales table { width: 100%; margin-bottom: 40px; }
.endofsales tr td { border: 1px #ddd solid; font-size: 0.75rem;  line-height: 1.2rem; }
.endofsales tr th { border: 1px #ddd solid; font-weight: 500; background-color: #f0f0f0; line-height: 1.2rem; width: 17%; }
.endofsales tr th:first-child { width: 136px; }
.endofsales tr th:nth-child(2) { width: 136px; }
.endofsales tr th:nth-child(3) { width: 136px; }
.endofsales tr th:nth-child(4) { width: 136px; }
.endofsales tr th:last-child { width: 256px; }

@media screen and (max-width: 767px) {
	.endofsales tr td, .endofsales tr th { display: block; }
	.endofsales tr th { display:none; }
	.endofsales tr td:first-child { font-weight: 500; background-color: #f0f0f0;border-bottom: none; }
	.endofsales tr td:nth-child(2), .endofsales tr td:nth-child(3), .endofsales tr td:nth-child(4) { border-bottom: none; }
	.endofsales tr td:last-child { margin-bottom: 15px; }
	
}
/***************** news ******************/
.news_date { float: right; font-size: 0.75rem; }
.r_logo { width: 150px; margin: 0 auto 10px 0!important; }
.child_cate_box { background-color: #f5f5f5; padding: 30px 30px 10px 30px; }
.child_cate_box img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px; }
/***************** top_product ******************/
#top_product { position: relative;  }
#top_product h2 { padding: 15px 0; border-bottom: 2px #ddd solid;  }
#top_product h2:before {
	content: "";
	position: absolute;
	top: 40px;
	right: 25px;
	width: 14px;
	height: 3px;
	/*縦線に*/
	transform: rotate(90deg);
	background: #d00;
	transition: all .3s ease-in-out;
}
#top_product h2:after {
	content: "";
	position: absolute;
	top: 40px;
	right: 25px;
	/*横線*/
	width: 14px;
	height: 3px;
	background: #d00;
	transition: all .2s ease-in-out;
}
#top_product h2.open:after {
	transform: rotate(180deg);
}
#top_product h2.open:before {
	opacity: 0;
}
/***************** form ******************/
.contact th, .contact td { line-height: 2.5rem; }
.contact .box2 { margin-bottom: 0!important; }
.contact .box2 span.wpcf7-list-item { display: block!important; }
.contact .wpcf7-submit { padding: 10px 30px; font-family: 'Open Sans', Meiryo, sans-serif; font-size: 1.0rem; font-weight: 300; letter-spacing: 0.05rem; }
.contact th.tx_up { vertical-align: top; }
.contact input[type=text],
.contact input[type=tel],
.contact input[type=email],
.contact textarea {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 100%;
	padding: 0.3em;
	transition: 0.3s;
	border: 1px solid #999;
	border-radius: 4px;
	outline: none;
}
.contact select {
	padding: 5px 10px 5px 25px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5rem;
	border-radius: 5px;
	background-color: #fff;
	background: url(../images/select_arrow.svg) left center / 24px 21px no-repeat;
	border: 1px #999 solid;
	font-family: 'Open Sans', Meiryo, sans-serif;
}
.contact span.wpcf7-list-item { display: block!important; margin: 5px 0; }
.contact input[type=text]:focus,
.contact input[type=tel]:focus,
.contact input[type=email]:focus { border-color: #d00; }
.contact textarea { display: block; }
#name, #name2, #company, #company2, #division, #tel, #fax, #email { width: 50%; }
#zip { width: 25%; }
@media screen and (max-width:767px){ 
	.contact th, .contact td { line-height: 1.5rem; }
	.contact .box2 span.wpcf7-list-item { margin-bottom: 10px; }
	#name, #name2, #company, #company2, #division, #tel, #fax, #email { width: 100%; }
	#zip { width: 50%; }
	.contact select { font-size: 0.75rem; }
}

/* -----------------------------------catalog------------------------------------ */
.ctlg_dl .box3 { background-color: #f0f0f0; padding: 15px; }
.ctlg_dl .box3:hover { background-color: #f7f7f7; }
.ctlg_item { font-size: 0.75rem; }
.img_ctlg { border: 1px #ddd solid; }
.ctlg_case { padding-top: 15px; }
.ctlg_form { padding: 20px 20px 40px 20px; background-color: #f4f4f4; }
.ctlg_form_h { padding: 10px; font-size: 1.125rem; font-weight: 700; text-align: center; background-color: #ddd;}
.ctlg_ttl { font-size: 0.875rem; }

/***************** branding ******************/
.br_top { position: relative; margin: -20px 0 0 0; }

.br_top_v {
    height: 400px;
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    font-family: 'object-fit: cover; object-position: 50% 50%;';
}

.br_top_in { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1150px; padding: 40px 10px; }
.br_trust { width: 300px; }
.br_main_wrapper { width: 100%; background: url(../images/br_bg01.png) center center / cover; padding: 4rem 0; margin-bottom: 120px; }
.br_main_in { width: 1150px; margin: 0 auto; }
.br_hr { width: 150px; display: block; margin: 20px auto 30px auto; }
.br_box { position: relative; width: 45%; height: 250px; padding: 30px 30px 80px 30px; background-color: #fff; }
.br_area { padding: 60px 40px; margin-bottom: 20px; }
.br_e_ttl { width: 60%; float: right; }
.process_wrapper { background: url(../images/br_bg02.jpg) center center / cover no-repeat; }
.web_wrapper { background: url(../images/br_bg03.jpg) center center / cover no-repeat; }
.inspect_wrapper { background: url(../images/br_bg04.jpg) center center / cover no-repeat; }
.optics_wrapper { background: url(../images/br_bg05.jpg) center center / cover no-repeat; }
div[class^="br_detail"] { width: 60%; padding: 5px 30px 5px 15px; text-align: right; color: #fff; position: absolute; bottom: 0; right: 0; }
div[class^="br_needs"] { height: 340px; color: #fff; position: relative; }
div[class^="br_needs"] h3 { display: block; padding: 10px; line-height: 1.5rem; }
.br_needs01 { background: url(../images/br_bg06.jpg) center / cover; }
.br_needs02 { background: url(../images/br_bg07.jpg) center / cover; }
.br_needs03 { background: url(../images/br_bg08.jpg) center / cover; }
.br_needs04 { background: url(../images/br_bg09.jpg) center / cover; }
.br_needs05 { background: url(../images/br_bg10.jpg) center / cover; }
.br_needs06 { background: url(../images/br_bg11.jpg) center / cover; }
span[class^="label"] { font-size: 0.75rem; padding: 0px 10px; margin-right: 8px; color: #fff; display: inline-block; }
.label_r { background-color: #d70440; }
.label_b{ background-color: #0083c9; }
.label_g { background-color: #00a896; }
.label_v { background-color: #a6559d; }
.br_txt { position: absolute; bottom: 0; font-size: 0.75rem; line-height: 1.0rem; padding: 10px; min-height: 70px; background-color:rgba(0,0,0,0.5); }
.br_gray { padding: 60px 0 20px 0; background-color: #f4f4f4; }
.br_h_red, .br_h_red2 { position:relative; background-color: #d00; color: #fff; padding: 5px 10px; text-align: center; margin-bottom: 20px; }

.br_box500 { width: 500px; margin: 0 auto 60px auto; }
.br_box2 { width: 40%; }
.br_flex2 { display: flex; align-items: center; }
.br_box30 { width: 30%; padding-bottom: 60px; }
.br_box70 { width: 70%; }
.br_blue { color: #009f8f; }

.challenge_box, .coco_box { position: relative; }

div.trigger2 {
	background-color: #d00;
	position: relative;
	text-align: center;
	color: #fff;
	padding: 5px 10px;
}

div.trigger2 .br_open { display: inline; }
div.trigger2 .br_close { display: none; }
div.trigger2.open .br_open { display: none; }
div.trigger2.open .br_close { display: inline; }

div.trigger2:after {
	content: "▼";
	position: absolute;
	top: 5px;
	right: 15px;
	color: #fff;
	transition: all .2s ease-in-out;
}
div.trigger2.open:after {
	transform: rotate(180deg);
}

.br_home { width: 100%; display: flex; justify-content: space-between; height: 500px;  flex-direction: row; background: url(../images/info_bg.png) bottom repeat-x; position: relative; margin-bottom: 80px; }
.br_home_in { width: 1150px; position: absolute; left: 0; right: 0; margin: auto; }
.br_btn_left { margin-right: auto!important; margin-left: 0!important; }
.br_top_txt { width: 40%; padding-right: 30px; }
.br_top_txt_in { margin-bottom: 95px; }
.br_top_pic { width: 60%; background: url(../images/br_top.jpg) left center / cover; }
@media screen and (max-width:1024px) and (min-width:768px) {
	.br_top_pic { width: 45%; }
}
@media screen and (max-width:767px){
	.br_box { width:100%; }
	.br_flex2 { display: flex; flex-direction: column; }
	.br_box30 { width: 70%; padding-bottom: 40px; margin:0 auto; }
	.br_box70 { width: 90%; margin:0 auto;  }
	.br_main_wrapper { padding: 1rem; margin-bottom: 60px; }
	.br_top_txt { width: 100%; }
	div[class^="br_detail"] { width: 100%; }
	.br_trust { width: 200px; margin-right: 20px; }
	.br_h_red { margin-bottom: 20px; }
	.br_home { flex-direction: column; height: auto; }
	.br_home_in {width: 100%; padding: 20px 15px 0 15px; position: relative; }
	.br_top_txt { display:none; }
	.br_top_txt_in { margin-bottom: 60px; }
	.br_top_pic { width: 100%; height: 200px; }
	.br_btn_left { margin-left: auto!important; margin:0 auto 45px auto!important; }
	.br_box500 { width: 100%; margin: 0 auto 30px auto; }
	.br_challenge { background: none; }
	.br_box2 { width: 48%; }
	.br_top_v {height: auto; width: 100%; object-fit: contain; z-index: 1; }
}
@media screen and (max-width:1200px){
	 .br_top_in, .br_main_in { width: 100%; }
	 .br_home_in { width: 100%; padding: 0 15px }
	 .br_box { height: auto; }
	 div[class^="br_needs"] h3 { display: block; }
}
@media screen and (min-width:1600px){
	.br_box { height: 250px; }
	.br_e_ttl { width: 45%; }
}

/***************** purpose ******************/
.purpose_icon { width: 80%; }
@media screen and (max-width:767px){
	.purpose_icon { width: 50%; }
}
/***************** web system ******************/
.fig_frame {
	width: 100%;
}

.system_figure {
	background-color: #fac4c8;
	padding: 3px 10px;
	font-size: 1rem;
	margin-bottom: 20px;
}

.websys {
	max-width: 800px!important;
	height: 842px;
}
.websys2 {
	max-width: 800px!important;
	height: 557px;
}
.servosys {
	max-width: 800px!important;
	height: 952px;
}
.servosys2 {
	max-width: 800px!important;
	height: 598px;
}
.tensys {
	max-width: 800px!important;
	height: 1015px;
}
.tensys2 {
	max-width: 800px!important;
	height: 426px;
}
img.scl_icon { display: none; }

@media screen and (max-width:767px){ 
.fig_frame {
	position: relative;
	overflow-x: scroll;
	width:calc( 100vw - 30px );
	}
	img.scl_icon {
		display: block;
		width: 100px;
		position: absolute;
		top: 150px;
		left: 50%;
		transform: translate(-50%, -50%);
		filter: drop-shadow(0 0 5px #fff);
		animation-name: fadeout;
		animation-delay: 3s;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}
	@keyframes fadeout {
		from { opacity: 1; }
		to { width:0; height:0; opacity: 0; }
	}
}

.sys_fig {
	padding: 0 35px 0 0;
	background: url(../images/sys_fig.svg) right 10px center / 20px 20px no-repeat;
}

.tree {
	list-style-type: none;
}
.tree ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	margin-left: 30px;
}
.tree ul:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-left: 2px solid #ccc;
}
ul.tree li {
	margin-bottom: 25px;
	
}
.tree ul li {
	position: relative;
	margin: 0;
	padding: 10px 15px 0 20px;
	line-height: 1.5rem;
}

.tree ul li:before {
	content: "";
	display: block;
	position: absolute;
	top: 20px!important;
	left: 0;
	width: 10px;
	height: 0;
	border-top: 2px solid #ccc;
}
.tree ul li:last-child:before {
	top: 15px;
	bottom: 0;
	height: auto;
	background-color: #fff;
}

/* -----------------------------------List Accordion------------------------------------ */

#accord_list > h2:nth-child(n + 9) {
	margin-bottom: 0!important;
	line-height: 3rem!important;
	position: relative;
	padding: 10px 0 5px 0;
}
#accord_list > h2:nth-child(n + 9):before {
	content: "";
	position: absolute;
	top: 30px;
	right: 25px;
	width: 14px;
	height: 3px;
	/*縦線に*/
	transform: rotate(90deg);
	background: #d00;
	transition: all .3s ease-in-out;
}
#accord_list > h2:nth-child(n + 9):after {
	content: "";
	position: absolute;
	top: 30px;
	right: 25px;
	/*横線*/
	width: 14px;
	height: 3px;
	background: #d00;
	transition: all .2s ease-in-out;
}
#accord_list > h2:nth-child(n + 9).open:after {
	transform: rotate(180deg);
}
#accord_list > h2:nth-child(n + 9).open:before {
	opacity: 0;
}
#accord_list > section:nth-child(n + 10) {
	padding-top: 1.5rem;
}
.pagetop { position: fixed; height: 72px; width: 72px; bottom: 0px; right: 20px; z-index: 5; }

/*■■■■■■■■■■■■■■■■■■■ module ■■■■■■■■■■■■■■■■■■■*/
img.img_full, size-full{ width:100%; }
img.img_max{ max-width:100%; }
img.img_cover { width: 100%; object-fit: cover; }

.for_pc{ display:block!important; }
.for_pc-in{ display:inline-block!important; }
.for_sp{ display:none!important; }
.for_sp-in{ display:none!important; }
@media screen and (max-width:767px){ 
	.for_sp{display:block!important;}
	.for_pc, .for_pc-in{display:none!important;}
	.for_sp-in{ display:inline-block!important; }
}


.b { font-weight: 700; }
.nowrap { white-space: nowrap; }
small { font-size: 0.75rem; line-height: 1.2rem; }
.center { text-align: center; }
.right_b { margin-right: 0; margin-left: auto; }
.right { text-align: right; } .right:after { content: ""; display: block; clear: both; }
.left { text-align: left; }
.center_blk { margin-left: auto; margin-right: auto; }
.inline_b { display: inline-block; }
.white { color: #fff; }
.gray_b { background-color: #e0e0e0; width: 100%; }
.gray_b2 { background-color: #f4f4f4; width: 100%; }

.mt20 { margin-top: 20px; }
.mt40 { margin-top: 40px; }
.mt60 { margin-top: 60px; }
.mb15r { margin-bottom: 1.5rem; }
.mb-1r { margin-bottom: -1rem; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb40 { margin-bottom: 40px; }
.mb60 { margin-bottom: 60px; }
.mv60 { margin-top: 60px; margin-bottom: 60px; }
.mb80 { margin-bottom: 80px; }
.mb120 { margin-bottom: 120px; }
.mb1r { margin-bottom: 1rem; }
.right { text-align: right; }
.fs1r { font-size: 1rem; }
.fs11r { font-size: 1.125rem; }
.fs15r { font-size: 1.5rem; }
.ind20 { padding-left: 20px; }

.shadow { box-shadow: 0 0 25px 0 rgb(0 0 0 / 10%); }
strong { font-weight: 700; }
.pdf { display: inline-block; background: url(../images/pdf2.svg) left center / 20px 20px no-repeat; padding-left: 28px; line-height: 1.5rem; }
.pdf:hover { opacity: 0.7; }

.img_r { float: right!important; padding: 0 0 10px 20px; width: 40%; }

.w80 { width: 80%; margin-right: auto; margin-left: auto; }@media screen and (max-width:767px){ .w80 { width: 100%; } }
.w50 { width: 50%; margin-right: auto; margin-left: auto; }@media screen and (max-width:767px){ .w50 { width: 100%; } }
.w40 { width: 40%; margin-right: auto; margin-left: auto; }@media screen and (max-width:767px){ .w40 { width: 100%; } }

/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ onoka ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

.img_right { float: right!important; padding: 0 0 20px 20px; }
.img_left { float: left!important; padding: 0 20px 20px 0; }
video { width: 100%; margin-bottom: 20px; }
.contents_2c p a { color: #48c; }
.contents_2c p a:hover { color: #d00; }

pre { background-color: #eee; line-height: 1rem; padding: 20px; }
code { line-height: 70%; }