@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 ------------------------------------ */ /* --------- 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 --------- */ #contents *, #contents *:before, #contents *:after { /* box-sizing: inherit; */ /* overwrite: _assets */ box-sizing: content-box; } body, #contents div, #contents dl, #contents dt, #contents dd, #contents ul, #contents ol, #contents li, #contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6, #contents pre, #contents form, #contents fieldset, #contents input, #contents textarea, #contents p, #contents blockquote{ padding:0; margin:0; } #contents fieldset, #contents img{ border:0; } #contents div{ display:block; } #contents address, #contents caption, #contents cite, #contents code, #contents dfn, #contents em, #contents strong, #contents th, #contents var{ font-weight:normal; font-style:normal; } #contents ol, #contents ul{ list-style:none; } #contents caption, #contents th{ text-align:left; } #contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6{ font-weight:normal; font-size:100%; } #contents q:before, #contents q:after{ content:''; } #contents abbr, #contents acronym{ border:0; } #contents img{ vertical-align: bottom; } #contents input, #contents select, #contents 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 */ #contents a:link { color:#1780c4; text-decoration:none; } #contents a:visited { color:#1780c4; text-decoration:none; } #contents a:hover { color:#1780c4; text-decoration:underline; } /* --------- common: contents --------- */ body #contents{ line-height:1.5; color:#555555; margin:0 auto; } #contents h1{ color:#ffffff; font-size:21px; padding:5px 0 5px 10px; font-weight:bold; } #contents { background-color:#ffffff; width:100%; } #contents a:link, #contents a:visited { text-decoration:none; color:#2a96e1; } #contents a:hover, #contents a:active { text-decoration:underline; color:#2a96e1; } #contents #index, #contents #news, #contents #catalog, #contents #product { margin:40px auto 50px auto; max-width:950px; text-align:left; z-index:0; } #contents .main { float:left; width:680px; text-align:left; word-break:normal; } @media screen and (max-width: 640px) { body #contents, #contents, #contents #index, #contents #news, #contents #catalog, #contents #product{ float:none; width:92%; margin:40px auto 0 auto; } } /* --------- common: headerMenu --------- */ #contents #headerMenu{ background-color:#ffffff; width:100%; height:37px; position:relative; z-index:500; } #contents #menu{ width:100%; max-width:950px; margin:0 auto; padding:0; text-align:center; background-image:url("../img/common/menu_line.gif"); background-repeat:no-repeat; background-position:left center; } #contents #menu ul{ display:table; position:absolute; text-align:left; } #contents #menu li{ background-image:url("../img/common/menu_line.gif"); background-repeat:no-repeat; background-position:right center; float:left; display:table-cell; max-width:188px; width:20%; margin:0; } #contents #menu li:first-child{ border-left:none; } #contents #menu li a{ display:block; padding:15px 0; color:#333333; font-size:14px; text-decoration:none; } #contents #menu .level1 > a:hover { color:#1780c4; } #contents #menu .level2{ display:none; overflow:hidden; border-top:solid 1px #ccc; border-left:solid 1px #ccc; border-right:solid 1px #ccc; } #contents #menu ul.level2, #contents #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; } #contents #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; } #contents #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) { #contents #menu .level2 li a{ padding:15px 0 15px 35px; } } /* for IE11 */ @media all and (-ms-high-contrast:none){ #contents #menu .level2 li a{ padding:15px 0 15px 35px; } } #contents #menu .level2 li:hover, #contents #menu .level2 li:active{ background-color:#ebf4fc; } /* --------- common: right-nav (first hierarchy) --------- */ #contents .nav{ float:right; max-width:220px; text-align:left; } #contents .nav ul{ width:220px; } #contents .nav ul.list{ margin-bottom:13px; } #contents .nav .list li, #contents .nav .bnr li{ margin-bottom:7px; text-align:left; } #contents .nav .contact li{ margin-bottom:20px; } #contents .nav .bnr li{ margin-bottom:9px; } #contents .nav .contact a:hover, #contents .nav .bnr a:hover{ opacity:0.8; } @media screen and (max-width: 640px) { #contents .nav{ float:none; width:100%; max-width:100%; text-align:left; } #contents .nav .contact{ width:100%; } #contents .nav ul{ width:100%; margin:0 auto; } #contents .nav .contact li, #contents .nav .bnr{ margin-bottom:20px; } #contents .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 #contents #index{ margin:40px auto 30px auto; max-width:1110px; text-align:left; z-index:0; } body #contents #index .main-area{ background-color:#ffffff; } @media screen and (max-width: 1110px){ body #contents #index .main-area, body #contents div.contact .contact-index { padding:0 2%; } } @media screen and (max-width: 640px){ body #contents{ width:100%; margin:0 auto; background-color:#ffffff; } body #contents #index{ margin:20px auto 30px auto; width:100%; } body #contents #index .main-area{ padding:0; } } /* --------- headerMenuWhite --------- */ #contents #headerMenuWhite{ clear:both; width:100%; position:relative; z-index:500; background-color: #ffffff; } #contents #menuWrapper{ clear:both; overflow:hidden; width:100%; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc; } @media screen and (max-width: 640px) { #contents #menuWrapper{ position:absolute; top:0; left:0; width:100%; } } /* sp_title */ #contents #spProducttitle{ display:none; } @media screen and (max-width: 640px) { /* sp_title */ #contents #menuWrapper, #contents #spTitle, #contents #spMenu{ display:none; } }