@charset "utf-8";

/* last-update: 20150714 */
/* last-update: 20180214 */

/* ------------------------------------
common.css: I N D E X
------------------------------------
- overwrite: _assets

- common css
- reset (clearfix, base)
- common:
contents, headerMenu,
right-nav (first hierarchy), floatNav

- index css
- top slide
- main
- news
- serch
- contact
- service
- banner
- caution

- news css
- index
- details: menu, contents, column

- product css
- index
- headerMenuWhite
- sp_title
- index
- product: right-nav
- details: index, intro, merit, catalog

- catalog css
------------------------------------ */
.m25 { margin:25px !important; }
.mt25 { margin-top:25px !important; }
.mb25 { margin-bottom:25px !important; }
.ml25 { margin-left:25px !important; }
.mr25 { margin-right:25px !important; }
.m30 { margin:30px !important; }
.mt30 { margin-top:30px !important; }
.mb30 { margin-bottom:30px !important; }
.ml30 { margin-left:30px !important; }
.mr30 { margin-right:30px !important; }
.m35 { margin:35px !important; }
.mt35 { margin-top:35px !important; }
.mb35 { margin-bottom:35px !important; }
.ml35 { margin-left:35px !important; }
.p25 { padding:25px !important; }
.pt25 { padding-top:25px !important; }
.pb25 { padding-bottom:25px !important; }
.pl25 { padding-left:25px !important; }
.pr25 { padding-right:25px !important; }
/* --------- overwrite: _assets --------- */
.st-GlobalInner {
max-width: 100%;
padding: 0;
}
.st-GlobalNav_Area .st-GlobalInner {
position: absolute;
}
/* --------- : common: floatNav --------- */
/* #floatNav{
display:block;
position:absolute;
top:150px; 
}*/

/* -----------------------------------------------------------------
common css
----------------------------------------------------------------- */
/* --------- reset --------- */
#pcontents *, #pcontents *:before, #pcontents *:after {
/* box-sizing: inherit; */ /* overwrite: _assets */
box-sizing: content-box;
}

body, #pcontents div, #pcontents dl, #pcontents dt, #pcontents dd,
#pcontents ul, #pcontents ol, #pcontents li,
#pcontents h1, #pcontents h2, #pcontents h3, #pcontents h4, #pcontents h5, #pcontents h6,
#pcontents pre, #pcontents form, #pcontents fieldset, #pcontents input, #pcontents textarea, #pcontents p, #pcontents blockquote{
padding:0;
margin:0;
}
#pcontents fieldset, #pcontents img{
border:0;
}
#pcontents div{
display:block;
}
#pcontents address, #pcontents caption, #pcontents cite, #pcontents code,
#pcontents dfn, #pcontents em, #pcontents strong, #pcontents th, #pcontents var{
font-weight:normal;
font-style:normal;
}
#pcontents ol, #pcontents ul{
list-style:none;
}
#pcontents caption, #pcontents th{
text-align:left;
}
#pcontents h1, #pcontents h2, #pcontents h3, #pcontents h4, #pcontents h5, #pcontents h6{
font-weight:normal;
font-size:100%;
}
#pcontents q:before, #pcontents q:after{
content:'';
}
#pcontents abbr, #pcontents acronym{
border:0;
}
#pcontents img{
vertical-align: bottom;
}
#pcontents input, #pcontents select, #pcontents textarea{
font-size:100%;
font-family:inherit;
}

/* clearfix */
.clearfix {
display:inline-block;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}

/* link */
#pcontents a:link { color:#1780c4; text-decoration:none; }
#pcontents a:visited { color:#1780c4; text-decoration:none; }
#pcontents a:hover { color:#1780c4; text-decoration:underline; }




/* --------- common: contents --------- */
body #pcontents {
	line-height: 1.5;
	color: #555555;
	margin: 0 auto;
}
#pcontents h1 {
	color: #ffffff;
	font-size: 21px;
	padding: 5px 0 5px 10px;
	font-weight: bold;
}
#pcontents {
background-color:#ffffff;
width:100%;
}
#pcontents a:link, #pcontents a:visited {
text-decoration:none;
color:#2a96e1;
}
#pcontents a:hover, #pcontents a:active {
text-decoration:underline;
color:#2a96e1;
}
#pcontents #index,
#pcontents #news,
#pcontents #catalog,
#pcontents #product {
margin:40px auto 50px auto;
max-width:950px;
text-align:left;
z-index:0;
}
#pcontents .main {
float:left;
width:680px;
text-align:left;
word-break:normal;
}

@media screen and (max-width: 640px) {
body #pcontents,
#pcontents,
#pcontents #index,
#pcontents #news,
#pcontents #catalog,
#pcontents #product{
float:none;
width:92%;
margin:40px auto 0 auto;
}
}


/* --------- common: headerMenu --------- */
#pcontents #headerMenu{
background-color:#ffffff;
width:100%;
height:37px;
position:relative;
z-index:500;
}
#pcontents #menu{
width:100%;
max-width:950px;
margin:0 auto;
padding:0;
text-align:center;
	background-image:url("../images/menu_line.gif");
background-repeat:no-repeat;
background-position:left center;
}
#pcontents #menu ul{
display:table;
position:absolute;
text-align:left;
}
#pcontents #menu li{
	background-image:url("../images/menu_line.gif");
background-repeat:no-repeat;
background-position:right center;
float:left;
display:table-cell;
max-width:188px;
width:20%;
margin:0;
}
#pcontents #menu li:first-child{
border-left:none;
}
#pcontents #menu li a{
display:block;
padding:15px 0;
color:#333333;
font-size:14px;
text-decoration:none;
}
#pcontents #menu .level1 > a:hover {
color:#1780c4;
}

#pcontents #menu .level2{
display:none;
overflow:hidden;
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
}
#pcontents #menu ul.level2,
#pcontents #menu ul.level2 li{
box-sizing:inherit!important;
list-style-type:none!important;
list-style:none!important;
list-style-position:outside!important;
list-style-image:none!important;
}
#pcontents #menu .level2 li{
display:block;
float:none;
z-index:500;
width:auto;
height:auto;
background-color:#fafafa;
background-repeat:no-repeat;
background-position:10% 22px;
background-size:5%;
border-bottom:solid 1px #ccc;
}
#pcontents #menu .level2 li a{
display:inline-block;
box-sizing:border-box;
min-width:188px;
padding:15px 0 15px 35px;
}
/* for Edge */
@supports (-ms-ime-align:auto) {
#pcontents #menu .level2 li a{
padding:15px 0 15px 35px;
}
}
/* for IE11 */
@media all and (-ms-high-contrast:none){
#pcontents #menu .level2 li a{
padding:15px 0 15px 35px;
}
}

#pcontents #menu .level2 li:hover,
#pcontents #menu .level2 li:active{
background-color:#ebf4fc;
}

/* --------- common: right-nav (first hierarchy) --------- */
#pcontents .nav{
float:right;
max-width:220px;
text-align:left;
}
#pcontents .nav ul{
width:220px;
}
#pcontents .nav ul.list{
margin-bottom:13px;
}
#pcontents .nav .list li,
#pcontents .nav .bnr li{
margin-bottom:7px;
text-align:left;
}
#pcontents .nav .contact li{
margin-bottom:20px;
}
#pcontents .nav .bnr li{
margin-bottom:9px;
}
#pcontents .nav .contact a:hover,
#pcontents .nav .bnr a:hover{
opacity:0.8;
}

@media screen and (max-width: 640px) {
#pcontents .nav{
float:none;
width:100%;
max-width:100%;
text-align:left;
}
#pcontents .nav .contact{
width:100%;
}
#pcontents .nav ul{
width:100%;
margin:0 auto;
}
#pcontents .nav .contact li,
#pcontents .nav .bnr{
margin-bottom:20px;
}
#pcontents .nav ul li img {
max-width:100%;
width:100%;
}
}


/* --------- common: floatNav --------- */
#floatNav{
display:block;
position:fixed;
right:-287px;
width:327px;
height:180px;
z-index:600;
color:#ffffff;
transition:0.3s;
}
#floatNav a{
color:#ffffff;
}
#floatNav:hover{
width:327px;
right:0;
}
#floatNav .floatNav-btn{
display:block;
width:40px;
position:relative;
}
#floatNav .floatNav-banner{
position:absolute;
top:0;
right:0;
width:287px;
height:179px;
background-color:#e87769;
z-index:600;
}

#floatNav .floatNav-btn .floatNav-icon {
background-color:#df0522;
border-radius:4px 0 0 0;
padding:10px 0;
border-bottom:1px solid #ea7666;
text-align:center;
}
#floatNav .floatNav-btn .floatNav-contact {
display:block;
height:133px;
background-color:#df0522;
border-radius:0 0 0 4px;
padding:15px 0 0 0;
text-align:left;
}
#floatNav .floatNav-btn p {
font-size:0.9375rem;
-webkit-writing-mode:vertical-rl;
-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;
line-height:1;
letter-spacing:0.1em;
position:absolute;
top:64px;
right:-3px;
}
/* for Edge */
@supports (-ms-ime-align:auto) {
#floatNav .floatNav-btn p {
right:12px;
}
}
/* for IE11 */
@media all and (-ms-high-contrast:none){
*::-ms-backdrop, #floatNav .floatNav-btn p {
right:12px;
}
*::-ms-backdrop, #floatNav .floatNav-banner{
height:180px;
}
}

#floatNav .floatNav-banner ul{
overflow:hidden;
list-style:none;
margin:0;
padding:0;
}
#floatNav .floatNav-banner li{
float:left;
width:143px;
height:55px;
border-top:1px solid #f1aaa2;
border-left:1px solid #f1aaa2;
}
#floatNav .floatNav-banner img{
max-width:none;
vertical-align:bottom;
}
#floatNav .floatNav-banner li:nth-child(2){
width:142px;
}
#floatNav .floatNav-banner li:first-child{
width:286px;
height:124px;
}

@media screen and (max-width: 640px){
#floatNav{
transition:0;
}
#floatNav:hover{
width:327px;
right:-287px;
}
#floatNav .floatNav-btn .floatNav-icon a[href^="tel:"]{
cursor:pointer;
}
}
/* ----- index: area ----- */
body #pcontents #index{
	margin:40px auto 30px auto;
	max-width:1110px;
	text-align:left;
	z-index:0;
}
body #pcontents #index .main-area{
	background-color:#ffffff;
}
@media screen and (max-width: 1110px){
	body #pcontents #index .main-area,
	body #pcontents div.contact .contact-index {
		padding:0 2%;
	}
}
@media screen and (max-width: 640px){
	body #pcontents{
		width:100%;
		margin:0 auto;
		background-color:#ffffff;
	}
	body #pcontents #index{
		margin-top: 0;
	}
	body #pcontents #index .main-area{
		padding:0;
	}
}

/* --------- headerMenuWhite --------- */
#pcontents #headerMenuWhite{
	clear:both;
	width:100%;
	position:relative;
	z-index:500;
	background-color: #ffffff;
}
#pcontents #menuWrapper{
	clear:both;
	overflow:hidden;
	width:100%;
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}
#pcontents #menu {
	max-width: 1170px;
}
#pcontents #menu li {
		max-width: none;
		width: 33.3%;
	}

#pcontents #menu li a {
			font-size: 17px;
			padding: 13px 0;
		}

@media screen and (max-width: 640px) {
	#pcontents #menuWrapper{
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
}
/* sp_title */
#pcontents #spProducttitle {
	display: none;
}
@media screen and (max-width: 640px) {
/* sp_title */
#pcontents #menuWrapper,
#pcontents #spTitle,
#pcontents #spMenu{
	display:none;
}
}
#top_slideshow .disp_pc .wrapper_s {
	height: 230px;
}

#top_slideshow .disp_pc .slideshow {
	position: absolute;

	height: 230px;
}
.disp_pc {
	display: block !important;
}

.disp_sp {
	display: none !important;
}
@media screen and (max-width:641px) {

	.disp_pc {
		display: none !important;
	}

	.disp_sp {
		display: block !important;
	}
}
.mb40 {
	margin-bottom: 40px !important;
}
#optec-top-l section {
	padding: 0 0 40px;
	position: relative;
}
.notice {
	border: 1px solid #ccc;
	padding: 10px 20px !important;
}
#optec-introduction-sec p {
	font-size: 0.18rem;
}
.h2-basic { line-height:1.3; margin:0 0 20px !important; padding:12px 16px !important; font-size:0.225rem !important; color:#333; font-weight:bold !important; position:relative; }
.h2-basic:before { content:""; position:absolute; top:10px; left:0; width:3px; height:27px; border-left:3px #d60522 solid; }
#optec-product-sec li { float:left; width:24.0%; margin:0 1% 20px 0; }
#optec-product-sec li a {}
#optec-product-sec li img { margin:0 0 5px; }
#optec-product-sec li span { display:block; }
#optec-product-sec li a:hover { text-decoration:none; }
.ico-basic { padding:0 0 20px 1.2em !important; font-size:0.15rem !important; color:#333 !important; position:relative; }
.ico-basic a { font-size:0.15rem !important; color:#333 !important; }
.ico-basic:before { content:">"; position:absolute; top:3px; left:5px; font-size:0.15rem; color:#e00523; font-weight:bold; }
/* clearfix */

.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
.cf { *zoom:1; }

.txt-basic { line-height:1.85; padding:0 0 1em; font-size:0.208rem; color:#333; }
.txt-basic p { padding:0 0 20px !important; }
.txt-basic ol, .txt-basic ul { margin:0 0 0 1.5rem !important; padding:0 0 20px !important; }
.txt-basic ol ul, .txt-basic ol ol, .txt-basic ul ul, .txt-basic ol ol { margin:0 !important; }
.img-l dt { float:left; text-align:center; margin:0 auto 20px; }
.img-l dt img { width:100%; height:auto; margin:0 0 10px; }
.img-l dd { float:right; }
.img-r dt { float:right; text-align:center; margin:0 auto 20px; }
.img-r dt img { width:100%; height:auto; margin:0 0 10px; }
.img-r dd { float:left; }
.img30 dt { width:30%; }
.img30 dd { width:67%; }
a:hover img { opacity:0.7; transition:0.2s ease-in-out; }
.main-area img { width:auto; max-width:100%; height:auto; }
.h3-basic { line-height:1.3; border-bottom:1px #d9d9d9 solid; margin:0 0 20px !important; padding:10px 0 !important; font-size:0.205rem !important; color:#333; font-weight:bold !important; }
.h4-basic { line-height:1.3; margin:0 0 15px !important; padding:8px 15px 10px 1.2rem !important; font-size:1rem !important; color:#333; font-weight:bold !important; position:relative; }
.h4-basic:before { content:""; position:absolute; top:8px; left:0; width:1rem; height:1rem; background:#e00523; }
.h5-basic { line-height:1.3; margin:0 0 15px !important; padding:5px 0 10px !important; font-size:1rem !important; color:#333; font-weight:bold !important; }

@media screen and (max-width:641px) {
		.sppl00 { padding-left: 0px !important;}
	.sppr00 { padding-right: 0px !important;}
	.sppt00 { padding-top: 0px !important;}
	.sppb00 { padding-bottom: 0px !important;}
	#optec-top-l { float:none; width:auto; }
#optec-top-l section { padding:0 4% 6.25vw; }
.notice {
        padding: 10px 5px !important;
    }
.spmt20 {
        margin-top: 20px !important;
    }
	.spmb30 {
		margin-bottom: 30px !important;
	}
	.h2-basic { margin:0 0 3vw !important; padding:1.98vw 6% !important; font-size:4.68vw !important; }
.h2-basic:before { position:absolute; top:2.98vw; left:3%; height:4.68vw; }
#optec-product-sec li { width:48%; min-height:45vw; margin:0 2% 3.86vw 0; }
#optec-product-sec li:nth-child(even) { width:48%; margin:0 0 3.86vw 0; }
#optec-product-sec li a {}
#optec-product-sec li img { margin:0 0 1.34vw; }
.txt-basic { font-size:3.86vw; }
.txt-basic p { padding:0 0 1em !important; }
.txt-basic ol, .txt-basic ul { padding:0 0 1em !important; }
.txt-basic ol ul, .txt-basic ol ol, .txt-basic ul ul, .txt-basic ol ol {}
.txt-basic dl { padding:0 0 0.5em !important; }
.txt-basic dt { padding:0 0 0.25em !important; }
.txt-basic dd { padding:0 0 1em !important; }

.img-r {}
.img-r dt { float:none; margin:0 auto 1em !important; }
.img-l dt img { width:auto; }
.img-r dd { float:none; }
.img-l {}
.img-l dt { float:none; margin:0 auto 1em !important; }
.img-r dt img { width:auto; }
.img-l dd { float:none; }
.img-l dd { float:none; }
.img30 dt { width:auto; }
.img30 dd { width:auto; }
}