@charset "utf-8"; /* Table Of Contents ---------------------------------------- #01 Reset 'Browser standard style' #02 Redefine #03 heading #04 box-style #05 table #06 list style #07 header #08 main #09 complementary #10 footer #11 common style #12 clearfix ----------------------------------------*/ /* # Reset 'Browser standard style' ---------------------------------------------------------------------------- */ *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; font-size:100%; margin:0; padding:0; } 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, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend, table, caption, thead, tbody, tfoot, tr, th, td, article, aside, canvas, details, figcaption, figure, header, footer, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } embed { width:100%; } audio, canvas, video { display:inline-block; } audio:not([controls]) { display:none; height:0; } [hidden] { display:none; } fieldset, img { border:none; } table { empty-cells:show; } caption, th { text-align:left; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } button { cursor:pointer; border:1px solid transparent; } a { color:#375992; outline:none; text-decoration:underline; vertical-align:baseline; } a:visited { color: #5c2080; } a:hover { color:#375992; outline:0; text-decoration:none;} a:active, a:focus { color:#375992; outline:0; } legend { color:#000; } img, object, embed { max-width:100%; height:auto; } object, embed { height:100%; } a img, map a { border:none; } img { -ms-interpolation-mode:bicubic; } ins { background-color:#ff9; color:#333; text-decoration:none; } mark { background-color:#ff9; color:#333; font-style:italic; font-weight:bold; } del { text-decoration:line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; width:100%; } hr { border:0; border-top:1px solid #ccc; display:block; height:1px; margin:1em 0; padding:0; } input, select { vertical-align:middle; } input[type="radio"], input[type="checkbox"], input[type="text"], input[type="password"], input[type="file"], select, textarea { background:#fff; border:1px solid #333; resize:none; font-family:inherit; font-size:inherit; font-weight:inherit; } input[type="submit"], input[type="img"] { cursor:pointer;} form img, input, select { vertical-align:middle; } q:before, q:after { content:''; } abbr, acronym { border:0; font-variant:normal; } strong { font-weight:bold; color:#c00;} em { font-style:normal; } h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:100%;} address { font-style:normal; } .text-red {color: red;} .text-italic {font-style:italic;} input.inputSearchTxt.form-control { width: 208px; } /* #Redefine ---------------------------------------------------------------------------- */ html { overflow: y-scroll; background:#fff; } body { color:#444; font-size:12px; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif; line-height:1.4; } .container { margin: 0 auto; max-width: 1010px; width: 100% !important; } /* #heading ---------------------------------------------------------------------------- */ .heading02 { border-left: 5px solid #444; font-size: 24px; margin-bottom: 30px; padding: 2px 20px; } .heading03 { font-size: 18px; font-weight: bold; margin-top: 30px; margin-bottom: 30px; padding: 2px 0; } .heading-03 { background: #3e63a2; color: #fff; font-size: 18px; padding: 10px; } .heading-03.heading-mix01 { background-color: #2ca6e0; text-align: center; } .heading-04 { font-size: 16px; margin-top: 10px; word-wrap: break-word; } /* header ---------------------------------------------------------------------------- */ header { padding: 30px 0 0; min-height: 40px; } header a, header a:hover { color: #000; text-decoration: none; } .navbar-header { float: none; } .navbar-brand { height: 40px; padding: 0; } .navbar-brand img { max-height: 100%; } .sub-brand:visited, .sub-brand { border-left: 2px solid #000; color: #000; font-size: 14px; font-weight: bold; float: left; line-height: 30px; margin: 5px 0 0 30px; padding: 0 0 0 30px; text-transform:uppercase; } /* nav ---------------------------------------------------------------------------- */ .nav > li { border-left: 1px solid #ccc; padding: 0 15px; } .nav > li > a { padding: 0; text-decoration: none; } .nav > li > a:hover { background-color: transparent; color: #000; text-decoration: none; } .navbar-header .nav { margin-top: 5px; } .navbar-header .langLink > li > a { border-bottom: 1px solid transparent; } .navbar-header .langLink > li > a:hover { border-bottom-color: #999; } .navbar-header .globalLink > li > a { background: #3e63a2; color: #fff; padding: 0 15px 0 15px; } .navbar-header .globalLink > li:first-child > a { background: #3e63a2 url(https://www.nipponsteel.com/product/images_v2/header_ico01.png) no-repeat 17px 4px; color: #fff; padding: 0 15px 0 40px; } .navbar-header .globalLink > li:last-child { border-left-color: transparent; padding: 0; } /* gNav ---------------------------------------------------------------------------- */ #navbar { background-color: #fff; min-height: 66px; z-index: 1001!important; } .gNav { background: url(https://www.nipponsteel.com/product/images_v2/nav_bg02.png) no-repeat right top; display: table; margin: 30px 0 0; position: relative; width: 100%; z-index: 99; } .scroll-to-fixed-fixed .gNav { margin-top: 15px; } .gNav > li { background: url(https://www.nipponsteel.com/product/images_v2/nav_bg02.png) no-repeat left top; border: none; display: table-cell; float: none; text-align: center; position: static; } .gNav > li > a { color: #444; cursor: pointer; font-size: 14px; font-weight: bold; margin: 0 0 30px; position: relative; } .tablet .gNav > li.has-sub > a { pointer-events: none; } .gNav > li.has-sub:hover > a:before { background: url(https://www.nipponsteel.com/product/images_v2/nav_ico02.png) no-repeat 0 0; content: ''; display: none; height: 10px; margin-left: -5px; width: 10px; position: absolute; bottom: -20px; left: 50%; } .gNav > li.has-sub:hover > a:before { display: block; } /* gNav-sub ---------------------------------------------------------------------------- */ .gNav-sub { background: url(https://www.nipponsteel.com/product/images_v2/nav_bg01.png); display: none; list-style: none; min-height: 40px; margin: -10px 0 0; padding: 5px; position: absolute; left: 15px; top: 100%; right: 15px; } .gNav > li.has-sub:hover .gNav-sub { display: block; } .gNav-sub:after { background: url(https://www.nipponsteel.com/product/images_v2/nav_bg03.png); content:''; margin: 5px; position: absolute; bottom: 0; left: 200px; top: 0; right: 0; } .gNav-sub > li { height: 40px; width: 200px; } .gNav-sub > li > a { background: url(https://www.nipponsteel.com/product/images_v2/nav_ico10.png) no-repeat 180px 50%; background-size: 8px auto; -webkit-background-size: 8px auto; color: #fff; display: table-cell; line-height: 1.2; height: 40px; padding: 0 12px 0 20px; position: relative; text-align: left; text-decoration: none; width: 200px; vertical-align: middle; } .gNav-sub > li.ico-min02 > a { background: none; } .gNav-sub > li:hover > a, .gNav-sub > li.active > a { background: url(https://www.nipponsteel.com/product/images_v2/nav_bg03.png) repeat 0 0; } .gNav-sub > li:hover > a:after { background: url(https://www.nipponsteel.com/product/images_v2/nav_ico10.png) no-repeat 0 50%; content: ''; display: block; height: 40px; margin-top: 0; width: 8px; position: absolute; right: 12px; top: 0; } .gNav-sub > li.ico-min02 > a:after, .gNav-sub > li.ico-min02:hover > a:after, .gNav-sub > li.ico-min02.active > a:after, .gNav-sub > li.ico-min02 > a:after { background: url(https://www.nipponsteel.com/product/images_v2/com_ic09.png) no-repeat 0 50%; content: ''; display: block; height: 40px; margin-top: 0; width: 10px; position: absolute; right: 12px; top: 0; } .gNav-sub > li .sub-content { color: #fff; display: none; position: absolute; left: 200px; top: 0; right: 0; bottom: 0; padding: 10px 20px 10px 0; text-align: left; z-index: 1; } .gNav-sub > li .sub-content .list-item li a { color: #fff; text-decoration: none; } .gNav-sub > li:hover .sub-content, .gNav-sub > li.active .sub-content, .gNav-sub > li.hover .sub-content { display: block; } .gNav-sub > li .sub-content .ttl { font-weight: bold; padding: 0 0 0 20px; } .gNav-sub > li .sub-content .list-item { list-style: none; margin: 0; padding: 0; } .gNav-sub > li .sub-content .list-item > li { float: left; margin: 15px 0 0 20px; max-width: 47%; } .gNav-sub > li .sub-content .list-item > li:nth-child(3n) { clear: both; } /* icon ---------------------------------------------------------------------------- */ .ico-style { -webkit-background-size: 20px 20px; background-size: 20px 20px; background-repeat: no-repeat; background-position: 0 0; display: inline-block; line-height: 1; height: 20px; margin: 0 7px; position: relative; top: 1px; width: 20px; } .ico-pdf { background-image: url(https://www.nipponsteel.com/product/images_v2/com_ic08.png); } /* .topicPath ---------------------------------------------------------------------------- */ .topicPath { clear: both; margin: 0 auto 20px; } #topicPath ul { float: left; margin-bottom: 0; list-style: none; background-color: transparent; border-radius: 0; padding: 7px 0; } #topicPath ul > li + li:before { padding: 0 5px; color: #000; content: ">"; } #topicPath ul > li { color: #000; float: left; } #topicPath ul > li a { color: #0864a6; } .search-box .form-control { background: #e6e6e6 url(https://www.nipponsteel.com/product/images_v2/header_ico02.png) no-repeat 10px 50%; border-color: transparent; border-radius: 17px; -webkit-border-radius: 17px; box-shadow: none; -webkit-box-shadow: none; padding-left: 34px; } /* topicPath ---------------------------------------------------------------------------- */ .topicPath .breadcrumb { float: left; margin-bottom: 0; list-style: none; background-color: transparent; border-radius: 0; padding: 7px 0; } .topicPath .breadcrumb > li + li:before { padding: 0 5px; color: #000; content: ">"; } .topicPath .breadcrumb > li { color: #000; float: left; } .topicPath .breadcrumb > li a { color: #0864a6; } /* main ---------------------------------------------------------------------------- */ #main { float: right; width: 70%; } #content > .last-child { padding-bottom: 60px; } /* page name ---------------------------------------------------------------------------- */ /* market ---------------------------------------------------------------------------- */ /* .accordion --------------------------------------------*/ .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; border-color: transparent; } .btn:active, .btn.active { background-image: inherit; box-shadow: none; -webkit-box-shadow: none; } .btn-show, .btn-close { background: #2ca6e0; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #fff; min-width: 140px; padding: 6px 10px; text-decoration: none; } .btn .type-pdf { background-color: #fff; color: #2ca6e0; margin-right: 5px; padding: 0 5px; } .btn .ico-btn-show, .btn .ico-btn-close, .ico-btn-link { margin-right: 10px; } .ico-btn-show { background: url(https://www.nipponsteel.com/product/images_v2/com_ic01.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 10px; max-width: 18px; height: 10px; width: 18px; } .ico-btn-close { background: url(https://www.nipponsteel.com/product/images_v2/com_ic02.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 16px; max-width: 16px; height: 16px; width: 16px; } .ico-btn-next { background: url(https://www.nipponsteel.com/product/images_v2/com_ic04.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 18px; max-width: 10px; height: 18px; width: 10px; } .ico-btn-close-pop { background: url(https://www.nipponsteel.com/product/images_v2/com_ic07.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 26px; max-width: 26px; height: 26px; width: 26px; } .btn .ico-btn-next { margin-left: 10px; } .btn .ico-btn-pre { margin-right: 10px; } .ico-btn-pre { background: url(https://www.nipponsteel.com/product/images_v2/com_ic06.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 18px; max-width: 10px; height: 18px; width: 10px; } .btn-show:hover, .btn-show:active, .btn-show:visited, .btn-show:focus, .btn-close:hover, .btn-close:active, .btn-close:visited, .btn-close:focus, .btn-gray:hover, .btn-gray:active, .btn-gray:visited, .btn-gray:focus { color: #fff; } .accordion .panel-group .panel + .panel { margin-top: 20px; } .accordion .panel-heading .thumb { position: relative; } .accordion .panel-heading { padding: 20px; } .accordion .panel-heading > .title:first-child { margin-top: 0; } .accordion .panel-heading > .title + .panel-body { padding-top: 0; } .accordion .panel-footer { background: none; padding: 20px 0; } .accordion .thumb .btn { position: absolute; right: 0; bottom: -6px; } .accordion .thumb .thumb-left + .top-content .btn { bottom: 0; } .btn-middle, .accordion .thumb .btn-middle {bottom: -10px;} .accordion .thumb .po-sta { position: static; } .ico-btn-link { background: url(https://www.nipponsteel.com/product/images_v2/com_ic14.png) no-repeat center; background-size: cover; -webkit-background-size: cover; max-height: 24px; max-width: 14px; height: 15px; width: 8px; } .accordion .panel-body .thumb .btn { right: 10px; bottom: 10px; } .ico-btn-download { background: url(https://www.nipponsteel.com/product/images_v2/com_ic11.png) no-repeat center; background-size: cover; -webkit-background-size: cover; height: 24px; width: 28px; } /*.accordion .panel-heading .thumb { max-height: 160px; }*/ .accordion { border-bottom: 1px solid #ccc; padding: 25px 0; } .accordion02 { border-bottom: none; } .accordion:last-child { border: none; } .accordion .panel-body .thumb { background: #fff; padding: 0 10px 10px; } .accordion .panel-group { margin-bottom: 0; } .accordion .panel { border-radius: 0; } .accordion .panel-heading .thumb-left, .accordion .thumb .thumb-right { display: table; max-height: 160px; max-width: 240px; overflow: hidden; height: auto; vertical-align: top; width: auto; } .accordion .panel-heading .thumb-left span, .accordion .panel-heading .thumb-left a { display: block; max-height: 160px; max-width: 240px; overflow: hidden; height: auto; } .panel-heading .thumb-left > img { display: block; width: 100%; } .accordion .panel-heading figure + .top-content + .thumb-content { display: table-cell; padding-bottom: 40px; } .accordion .panel-heading .thumb-content.none-last { display: block; } .accordion .panel-heading .thumb-content > * { padding-top: 10px; } .accordion .panel-heading .thumb-left a .media-object, .product-inquiry figure a .media-object, .product-inquiry figure span .media-object { width: 100%; } .panel-collapsed, .accordion .panel-collapse .panel-body { padding: 20px; } .accordion .panel-collapsed .title { margin-top: 0; } .accordion .panel-body > * { margin-top: 20px; word-wrap: break-word; } .accordion .panel-body .thumb > * { margin-top: 5px; } .accordion .panel-body .thumb:first-child { margin-top: 0; } .accordion .panel-body h4, .accordion .panel-body h5 { font-weight: bold; margin: 10px 0; } .accordion .panel-heading .thumb-left { margin: 0 20px 0 0; } .accordion .thumb .thumb-right { margin: 10px 0 0 20px; } .accordion .thumb .thumb-right + .top-content + .thumb-content, .accordion .thumb .thumb-right + .thumb-content { margin-right: 250px; } .accordion .panel-body .thumb-left { margin: 10px 20px 0 0; } .accordion .panel-body .thumb-left span, .accordion .panel-body .thumb-left a { display: block; max-height: 100px; max-width: 160px; overflow: hidden; height: auto; } .accordion .panel-body .thumb-left + * { margin-top: 10px; } .accordion .panel-body .thumbnail h4 + figure { margin-top: 25px; } .accordion .panel-body .thumbnail figure + h4 { margin-top: 20px; } .accordion .panel-body .thumbnail figure a { display: block; /* max-height: 260px;*/ max-width: 400px; overflow: hidden; height: auto; } .accordion .panel-heading { background: none; border-radius: 0; } .accordion .panel-heading .thumb-heading, .heading04 { font-size: 18px; } .accordion .panel-body .thumb-heading { font-size: 16px; margin-top: 10px; word-wrap: break-word; } .accordion .panel-body .col .thumb-heading.no-margin { margin-top: 0; } .accordion .thumb-content, .accordion .panel-body .list { margin: 0; padding: 0; word-wrap: break-word; } .accordion .panel-body .list li { margin-top: 5px; } .accordion .top-content + .thumb-content .alert, .accordion .top-content + .thumb-content [class^="col-"]:last-child, .accordion .top-content + .thumb-content .alert > * { padding-bottom: 10px!important; } .list-dot { list-style: none; } .list-dot > li { padding-left: 1em; text-indent: -1em; font-size: 13px; } .list-dot > li:before { content: "・"; display: inline; } .accordion .panel-body, .container.bottom_attention .panel-body { background: #f2f2f2; border: none; border-radius: 0; } .accordion .panel-body .panel, .accordion .panel-body .thumbnail, .modal-content { border: none; border-radius: 0; } .accordion .panel-body .thumbnail { padding: 20px; } .accordion .panel-body .catalog-body .thumbnail { padding: 4px; } .accordion .panel-collapse { padding: 0 20px; } .accordion .title { background: #3e63a2; color: #fff; font-size: 18px; margin-top: 20px; padding: 10px; } .title-02 { background: #2ca6e0; color: #fff; font-size: 18px; margin-top: 20px; padding: 10px; } .accordion .panel-collapse .title:first-child { margin-top: 0; } .contact-us { padding: 25px 0; } .contact-us .panel-info { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border-color: #add7f2; border-width: 5px; } .contact-us .panel-info .panel-heading { background-color: transparent; border-bottom: none; } .contact-us .panel-info .panel-heading h3 { color: #2ca6e0; font-size: 18px; text-align: center; } .contact-us .panel-info .panel-body .panel-heading { padding-left: 0; padding-right: 0; } .contact-us .panel-info .panel-body { padding-top: 0; } .accordion .contact-us .panel-info .panel-body { background: #fff; } .accordion .contact-us .panel-info .panel-body > * { margin-top: 0; } .contact-us .btn-info, .contact-us .btn-info:visited { background-color: #2ca6e0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; color: #fff; outline: none; text-decoration: none; margin-top: 20px; min-width: 300px; } .accordion .panel-collapse > .inner-list { border: 1px solid #ccc; margin-bottom: 20px; padding: 20px; } .accordion .panel-collapse > .inner-list .text-box { margin-top: 26px; min-height: 120px; } .accordion .panel-collapse > .inner-list p { margin-top: 18px; } .block-container { padding: 25px 0; } .accordion .panel-body > .media-detail { background-color: #fff; padding-top: 10px; margin-top: 0; } /* box-content --------------------*/ .accordion .box-content { background-color: #fff; margin-top: 0; padding: 10px 20px; } .box-content .lead { font-size: 14px; margin-bottom: 0; } .box-content .list-detail > dd, .box-content .detail-photo figcaption, .box-content .detail-photo, .box-content p.text { margin-top: 10px; } .box-content .list-detail { margin-top: 20px; } .box-content .list-detail > dt { font-size: 16px; font-weight: bold; margin-top: 20px; } .box-content .list-detail dd > * { margin-left: 20px; margin-right: 20px; } .box-content .list-detail dd > .row { margin-left: -15px; margin-right: -15px; } .box-content .list-dot > li { margin-top: 5px; } .list-dot-02 li { list-style-type: square; margin: 5px 0 0 13px; padding-left: 10px; font-size: 13px; } .list-dot-02 li strong { color: #444; font-weight: bold; } .list-number-01 > li { list-style: none; line-height: 1.6; text-indent: -20px; padding-left: 20px; } .list-number { margin: 10px 0 0 20px; } .list-number > li { padding-bottom: 10px; } .box-content .list-detail > dt:first-child, .box-content .list-dot > li:first-child, .list-dot-02 li:first-child { margin-top: 0; } .no-float { overflow: hidden; } .accordion .panel-collapse .panel-body [class^="col-"] { padding: 0; position: relative; } .accordion .panel-collapse .panel-body.product-inquiry [class^="col-"] { padding: 0 10px; } .accordion .panel-body.product-inquiry .thumb { padding: 20px; } .accordion .panel-body.product-inquiry .thumb > figure { margin-top: 0; } .accordion .panel-collapse .panel-body .row [class^="col-"]:first-child { padding-right: 10px; } .accordion .panel-collapse .panel-body .row-pd [class^="col-"]:first-child { padding-right: 5px; } .accordion .panel-collapse .panel-body .row-pd [class^="col-"] { margin-top: 10px; padding: 0 5px; } .accordion .row { margin-right: 0; margin-left: 0; } .row-eq-height { display: table; width: 100%; } .accordion .panel-body .row-eq-height .col { display: table-cell; padding: 0 10px; width: 50%; overflow: hidden; position: relative; vertical-align: top; } .accordion .panel-body .row-pd .thumb { height: 100px; } .accordion .panel-body .row-pd .thumb .thumb-left { margin-right: 10px; max-width: 50px; } .accordion .panel-body .row-eq-height .col:nth-child(odd) { padding-left: 0; } .accordion .panel-body .row-eq-height .col:nth-child(even) { padding-right: 0; } .row-eq-height .col .thumbnail { margin-bottom: -1000px; padding-bottom: 1060px; } .row-eq-height .col .thumbnail img {width: 100%;} .row-eq-height .btn { position: absolute; right: 30px; bottom: 20px; } .row-eq-height .col.bd-20 .thumbnail{ background: transparent; border: 20px solid #f2f2f2; padding-bottom: 1020px; position: relative; } .row-eq-height .col.bd-20:after { background: #f2f2f2; content:''; display: block; height: 20px; position: absolute; left:0; bottom: 0; right: 10px; } .row-eq-height .col.bd-20:nth-child(even):after { left:10px; bottom: 0; right: 0; } .accordion .big-photo .thumb-left a, .accordion .big-photo .thumb-left span, .accordion .panel-heading .big-photo .thumb-left a, .accordion .panel-heading .big-photo .thumb-left, .accordion .big-photo .thumb-left a { max-height: 250px; max-width: 390px; height: auto; } .accordion .thumb-left.full-img a, .accordion .thumb-left.full-img span, .accordion .thumb-right.full-img, .accordion .panel-heading .big-photo .thumb-left.full-img, .accordion .panel-heading .big-photo .thumb-left.full-img a, .full-img { max-height: none !important; } .bottom-thumb { border-top: 1px solid #ccc; margin-top: 20px; width: 100%; } .list-thumb-01 { background-color: #fff; padding-bottom: 10px; } .accordion .panel-collapse .panel-body .row.list-thumb-01 [class^="col-"]:first-child { padding-top: 10px; padding-right: 0; } .accordion .panel-collapse .panel-body .list-thumb-01 [class^="col-"] { padding-top: 10px; } .list-thumb-01 [class^="col-"] { padding-top: 10px; } .list-thumb-01 .thumb figure { height: 150px; overflow: hidden; } .list-star { list-style: none; } .list-star > li { counter-increment: step-counter; } .list-star > li:before { content: "※"counter(step-counter)" "; } .accordion .panel-body .list .list { margin-left: 20px; padding-left: 20px; } .nssol { max-width: 30px; } /* sds page ---------------------------------------------------------------------------- */ .sds .col { padding: 10px; } .sds .dowload { margin-top: 20px; } .accordion .box-news { margin: 0; } /* info ---------------------------------------------------------------------------- */ .product-inquiry .text-inquiry { margin-bottom: 10px; } .product-inquiry figure > a, .product-inquiry figure > span { display: block; min-height: 120px; max-height: 120px; max-width: 190px; overflow: hidden; height: auto; text-overflow: ellipsis; white-space: nowrap; } .product-inquiry .thumb { background: #f2f2f2; padding: 20px 20px 0; } .product-inquiry .thumb.no-img { height: 210px; display: table; width: 100%; padding: 20px; } .product-inquiry .thumb .caption { max-height: 70px; height: 70px; padding: 10px; overflow: hidden; /*text-overflow: ellipsis; white-space: nowrap;*/ } .product-inquiry .thumb .caption a { overflow: hidden; /*text-overflow: ellipsis; white-space: nowrap;*/ } .product-inquiry .thumb.no-img .caption { display: table-cell; vertical-align: middle; } .product-inquiry .content-inquiry { margin-bottom: 25px; } .product-inquiry .content-inquiry { margin: 0 -10px; } .product-inquiry .content-inquiry .col { margin-top: 20px; padding: 0 10px; } /* for material ---------------------------------------------------------------------------- */ /*.product-inquiry .superdyma .figure { background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; height: 170px; }*/ .product-inquiry .superdyma.group-table .table-block { display: table; width: 100%; overflow: hidden; } .product-inquiry .superdyma.group-table .col { border-left: 10px solid #fff; border-right: 10px solid #fff; background: #f2f2f2; display: table-cell; overflow: hidden; position: relative; vertical-align: top; margin-bottom: -100px; padding: 0 0 100px; } .product-inquiry .superdyma.group-table .figure a img { width: 100%; } .product-inquiry .superdyma .caption { display: block; height: auto; } .pad-0 { padding: 0 !important; } .border-none { border: none; } .accordion .pull-left + .top-content + .thumb-content.none-last :last-child { padding-bottom: 0; } .btn-pad { padding: 6px 10px !important; } .iframe { min-height: 500px; height: 100%; width: 100%; } .modal-body { background: #f2f2f2; padding: 20px; } .modal-body .list { margin-left: 20px; } .modal-body .list li { margin-top: 24px; } .modal-body .list li:first-child { margin-top: 0; } .modal .content { background: #fff; padding: 20px; } .modal-footer { background: #f2f2f2; border: none; padding: 0 10px 10px; text-align: center; } #myModal .modal-footer { border-top: 1px solid #ccc; padding-top: 10px; } .modal-footer .btn { min-width: 170px; } .btn-gray { border: none; border-radius: 0; background: #808080; color: #fff; text-decoration: none; } .modal-header { background: #3e63a2; color: #fff; padding: 15px 20px; } .modal-header .modal-title { font-weight: bold; } .modal-header .close { margin-top: -5px; opacity: 1; } .modal-footer .btn + .btn { margin-left: 15px; } .modal .catalog-list { margin-bottom: 20px; } .catalog-download .collapse { display: block; } .btn-group-01 ul { margin: 5px 0 0 0; width: 100%; overflow: hidden; position:relative; } .btn-group-01 li { float: left; list-style: none; margin: 0 1.5% -100px 0; padding: 0 0 100px 0; max-width: 155px; width: 15%; background-color: #2ca6e0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; vertical-align: top; } .btn-group-01 li:last-child { margin-right: 0; } .btn-group-01 li a { color: #fff; display: table; max-height: 60px; padding: 4px 2px; text-align: center; text-decoration: none; width: 100%; } .btn-group-01 li a > * { display: table-cell; vertical-align: middle; } .btn-group-01 li:before { content: ''; display: block; height: 4px; width: 4px; background: url(https://www.nipponsteel.com/product/images_v2/com_background_03.png) no-repeat left bottom; position: absolute; bottom: 0; } .btn-group-01 li:after { content: ''; display: block; height: 4px; width: 15%; background: url(https://www.nipponsteel.com/product/images_v2/com_background_04.png) no-repeat right bottom; position: absolute; bottom: 0; } .btn-group-01 .double { max-width: 280px; } .btn-group-01 .tripble { max-width: 420px; } .list-link { margin-top: 10px; } .list-link li > .list-link { margin-top: 0; padding-left: 20px; } .list-link-01 { list-style: none; } .list-link-01 > li { font-size: 13px; line-height: 1.6; margin-top: 5px; padding-left: 24px; text-indent: -24px; } .list-link-01 > li:first-child { margin-top: 0; } .list-link-01 .list-link-01 { padding-left: 20px; } .list-link-01 > li > a { background-image: url(https://www.nipponsteel.com/product/images_v2/com_ic25.png); -webkit-background-size: 8px 12px; background-size: 8px 12px; background-position: 0 4px; background-repeat: no-repeat; color: #000; padding-left: 24px; } .list-link-02 { list-style: none; } .list-link-02 > li { font-size: 13px; line-height: 1.6; margin-top: 10px; padding-left: 15px; text-indent: -15px; } .list-link-02 > li:first-child { margin-top: 0; } .list-link-02 .list-link-01 { padding-left: 15px; } .list-link-02 > li > a { background-image: url(https://www.nipponsteel.com/product/images_v2/com_ic15.png); -webkit-background-size: 8px 14px; background-size: 8px 14px; background-position: 0 2px; background-repeat: no-repeat; padding-left: 15px; } .btn-group-02 { margin-top: 10px; } .btn-group-02 > .btn { text-decoration: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; float: none; margin-top: 4px; padding: 5px; } .btn-group-02 > .btn.btn-info { background-color: #2ca6e0; color: #fff; } .btn-group-02 > .btn > span { margin-left: 5px; padding-right: 10px; } /* #grid ---------------------------------------------------------------------------- */ .grid-1\/100 { width: 1% !important; } .grid-2\/100 { width: 2% !important; } .grid-3\/100 { width: 3% !important; } .grid-4\/100 { width: 4% !important; } .grid-5\/100 { width: 5% !important; } .grid-6\/100 { width: 6% !important; } .grid-7\/100 { width: 7% !important; } .grid-8\/100 { width: 8% !important; } .grid-9\/100 { width: 9% !important; } .grid-10\/100 { width: 10% !important; } .grid-11\/100 { width: 11% !important; } .grid-12\/100 { width: 12% !important; } .grid-13\/100 { width: 13% !important; } .grid-14\/100 { width: 14% !important; } .grid-15\/100 { width: 15% !important; } .grid-16\/100 { width: 16% !important; } .grid-17\/100 { width: 17% !important; } .grid-18\/100 { width: 18% !important; } .grid-19\/100 { width: 19% !important; } .grid-20\/100 { width: 20% !important; } .grid-21\/100 { width: 21% !important; } .grid-22\/100 { width: 22% !important; } .grid-23\/100 { width: 23% !important; } .grid-24\/100 { width: 24% !important; } .grid-25\/100 { width: 25% !important; } .grid-26\/100 { width: 26% !important; } .grid-27\/100 { width: 27% !important; } .grid-28\/100 { width: 28% !important; } .grid-29\/100 { width: 29% !important; } .grid-30\/100 { width: 30% !important; } .grid-31\/100 { width: 31% !important; } .grid-32\/100 { width: 32% !important; } .grid-33\/100 { width: 33% !important; } .grid-34\/100 { width: 34% !important; } .grid-35\/100 { width: 35% !important; } .grid-36\/100 { width: 36% !important; } .grid-37\/100 { width: 37% !important; } .grid-38\/100 { width: 38% !important; } .grid-39\/100 { width: 39% !important; } .grid-40\/100 { width: 40% !important; } .grid-41\/100 { width: 41% !important; } .grid-42\/100 { width: 42% !important; } .grid-43\/100 { width: 43% !important; } .grid-44\/100 { width: 44% !important; } .grid-45\/100 { width: 45% !important; } .grid-46\/100 { width: 46% !important; } .grid-47\/100 { width: 47% !important; } .grid-48\/100 { width: 48% !important; } .grid-49\/100 { width: 49% !important; } .grid-50\/100 { width: 50% !important; } .grid-51\/100 { width: 51% !important; } .grid-52\/100 { width: 52% !important; } .grid-53\/100 { width: 53% !important; } .grid-54\/100 { width: 54% !important; } .grid-55\/100 { width: 55% !important; } .grid-56\/100 { width: 56% !important; } .grid-57\/100 { width: 57% !important; } .grid-58\/100 { width: 58% !important; } .grid-59\/100 { width: 59% !important; } .grid-60\/100 { width: 60% !important; } .grid-61\/100 { width: 61% !important; } .grid-62\/100 { width: 62% !important; } .grid-63\/100 { width: 63% !important; } .grid-64\/100 { width: 64% !important; } .grid-65\/100 { width: 65% !important; } .grid-66\/100 { width: 66% !important; } .grid-67\/100 { width: 67% !important; } .grid-68\/100 { width: 68% !important; } .grid-69\/100 { width: 69% !important; } .grid-70\/100 { width: 70% !important; } .grid-71\/100 { width: 71% !important; } .grid-72\/100 { width: 72% !important; } .grid-73\/100 { width: 73% !important; } .grid-74\/100 { width: 74% !important; } .grid-75\/100 { width: 75% !important; } .grid-76\/100 { width: 76% !important; } .grid-77\/100 { width: 77% !important; } .grid-78\/100 { width: 78% !important; } .grid-79\/100 { width: 79% !important; } .grid-80\/100 { width: 80% !important; } .grid-81\/100 { width: 81% !important; } .grid-82\/100 { width: 82% !important; } .grid-83\/100 { width: 83% !important; } .grid-84\/100 { width: 84% !important; } .grid-85\/100 { width: 85% !important; } .grid-86\/100 { width: 86% !important; } .grid-87\/100 { width: 87% !important; } .grid-88\/100 { width: 88% !important; } .grid-89\/100 { width: 89% !important; } .grid-90\/100 { width: 90% !important; } .grid-91\/100 { width: 91% !important; } .grid-92\/100 { width: 92% !important; } .grid-93\/100 { width: 93% !important; } .grid-94\/100 { width: 94% !important; } .grid-95\/100 { width: 95% !important; } .grid-96\/100 { width: 96% !important; } .grid-97\/100 { width: 97% !important; } .grid-98\/100 { width: 98% !important; } .grid-99\/100 { width: 99% !important; } .grid-100\/100 { width: 100% !important; } /* #table01 ---------------------------------------------------------------------------- */ .table-div { display: table; margin-top: 10px; width: 100%; overflow: hidden; } .table-div > *:after, .table-div [class^="col-"]:after { clear: both; content:''; display: block; } .table-div .tb-col { display: table-cell; width: 14.3%; vertical-align: top; position: relative; } .table-div .tb-col .th, .table-div .tb-col .td { border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; color: #000; display: table; padding: 0; height: 30px; width: 100%; text-align: center; vertical-align: middle; } .table-div .tb-col .th > *, .table-div .tb-col .td > * { display: table-cell; vertical-align: middle; } .table-div .tb-col .th > *{ white-space: nowrap; } .table-div .thead.th { background: #71bbe8; height: 53px; } .table-catalog .thead.th { background: #d2d2d2; } .table-div .tbody.th { background: #add7f2; } .table-div .tbody.td { background: #fff; } .table-div .th-colspan { background: #71bbe8; border-bottom: 1px solid #f2f2f2; color: #000; display: table-cell; padding: 5px 10px; position: absolute; top: 0; left: 0; z-index: 2; text-align: center; } .table-div .th-colspan span {vertical-align: middle;} .table-div .tb-col.colspan .th { padding: 31px 1px 5px; } .table-div .th-colspan.colspan3 { width: 299%; } .table-div .rowspan.row2 { height: 60px; } /* table-div wwith bootstrap */ .table-div .tb-row [class^="col-"] { padding-left: 0; padding-right: 0; overflow: hidden; border-bottom: 1px solid #fff; position: relative; z-index: 1; } .table-div .tb-row .th { text-align: center; } .bg-blue { background-color: #e5f6ff !important; } .bg-white { background-color: #fff !important; } .bg-f2 { background-color: #f2f2f2 !important; } .bg-2ca { background: #2ca6e0 !important; } .table-div .tb-row .th, .table-div .tb-row .td { border-left: 1px solid #fff; color: #000; padding: 5px; margin-bottom: -200px; padding-bottom: 205px; } .table-div .tb-row .th, .table-div .tb-row .td:first-child { display: table; font-weight: bold; vertical-align: middle; } .table-div .tb-row .td > * { display: table; border: none; } .table-div .tb-row .th p { display: table-cell; vertical-align: middle; } .table-div .tb-row .td .capacity { margin: 4px 0 -3px; } .table-div .tb-row .td { background-color: #f2f2f2; } .table-div .tb-row .td .btn-show { font-size: 12px; } .table.table-respon thead tr th { background-color: #d2d2d2; } .table.table-respon .sizeM { width: 170px; } .table.table-respon .sizeS { width: 130px; } .table.blue-light tbody th { background: #e5f6ff; } /* nav-04 ---------------------------------------------------------------------------- */ .nav-04 { position: relative; z-index: 9!important; } .nav-04:before { background-color: #2ca6e0; content: ''; height: 30px; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 0; } .nav-04.scroll-to-fixed-fixed:before { top: 0; bottom: auto; } .nav-04 ul { border-left: 1px solid #fff; display: table; margin: 0; padding: 0; position: relative; z-index: 1; } .nav-04 ul + ul { border-left: none; } .nav-04.no-break ul li a { max-width: none; } .nav-04 ul li { background-color: #2ca6e0; border-right: 1px solid #fff; display: table-cell; height: 30px; width: 25%; text-align: center; vertical-align: middle; } .nav-04.nav-size-10 ul li { width: 10%; } .nav-04 ul li:hover, .nav-04 ul li:hover a { background-color: #2ca6e0; } .nav-04 ul li a { display: inline-block; color: #fff; font-size: 14px; letter-spacing: -1px; max-width: 140px; padding: 5px 0; position: relative; text-align: center; text-decoration: none; vertical-align: middle; width: 100%; } .nav-04 ul li.active a, .nav-04 ul li.active a:hover, .nav-04 ul li:hover, .nav-04 ul li:hover a { background: #66cfff; color: #fff; text-decoration: none; } .nav-04 ul li.active { background: #66cfff; color: #fff; } /*.nav-02 ul li:first-child a:before, .nav-02 ul li a:after { background-color: #fff; content: ''; height: 100%; position: absolute; right: 0; top: 0; width: 1px; }*/ /* nav-02 ---------------------------------------------------------------------------- */ .nav-02 /*.nav-04*/ { background: #e5f6ff; position: relative; line-height: 1; text-align: center; z-index: 9 !important; } .nav-03, .nav-05 { line-height: 1; text-align: center; } /*.nav-04 { background: #2ca6e0; }*/ .nav-02 ul, .nav-03 ul, .nav-05 ul /*.nav-04 ul*/ { display: block; margin: auto; max-width: 1010px; padding: 0 15px; list-style: none; } .nav-03.nav-03-mix ul { padding: 0 } .nav-03.nav-03-mix ul li:first-child { padding-left: 0; } .container .nav-05 ul { margin: 0 -4px; padding: 0; } .nav-05 + .btn { margin-top: 24px; } /*.nav-02 li,*/ .nav-03 li { float: left; padding: 14px 4px; white-space: nowrap; } .nav-02 li { float: left; padding: 5px 4px; white-space: nowrap; } .nav-05 li { float: left; padding: 4px; white-space: nowrap; } .nav-02 li a, .nav-03 li a { background: url(https://www.nipponsteel.com/product/images_v2/com_ic12.png) no-repeat 5px center; background-size: 14px auto; -webkit-background-size: 14px auto; color: #2ca6e0; font-size: 12px; display: block; padding: 5px 10px 5px 26px; text-decoration: none; } .nav-05 li a { background: url(https://www.nipponsteel.com/product/images_v2/com_ic12.png) no-repeat 5px center; background-size: 14px auto; -webkit-background-size: 14px auto; color: #2ca6e0; font-size: 12px; display: block; padding: 5px 6px 5px 22px; text-decoration: none; } .nav-02 ul li a:hover, .nav-03.nav-03-mix ul li a, .nav-03.nav-03-mix ul li a:hover, .nav-03 ul li a:hover, .nav-05 ul li a, .nav-02 ul .active a { background: url(https://www.nipponsteel.com/product/images_v2/com_ic13.png) no-repeat 5px center #2ca6e0; background-size: 14px auto; -webkit-background-size: 14px auto; border-radius: 4px; color: #fff; text-decoration: none; } /* bridge ---------------------------------------------------------------------------- */ .nav-02.nav-bridge ul li, .nav-02.nav-bridge ul li a { max-width: 195px; width: 195px; } .visual-01.visal-bridge .box-news { margin-top: 170px; } .external > a { background: url(https://www.nipponsteel.com/product/images_v2/blank_icon.png) no-repeat right center; background-size: 18px auto; -webkit-background-size: 18px auto; padding-right: 20px; } .arrow01 { background: url(https://www.nipponsteel.com/product/images_v2/com_ic21.gif) no-repeat 300px 20px; background-size: 19px auto; -webkit-background-size: 19px auto; padding-bottom: 20px; } .arrow03 { background: url(https://www.nipponsteel.com/product/images_v2/com_ic21.gif) no-repeat 225px 20px; background-size: 19px auto; -webkit-background-size: 19px auto; padding-bottom: 20px; } .arrow01.text-center { background: url(https://www.nipponsteel.com/product/images_v2/com_ic21.gif) no-repeat center 20px; background-size: 19px auto; -webkit-background-size: 19px auto; } .accordion .arrow02 { background-image: url(https://www.nipponsteel.com/product/images_v2/com_ic24.png); background-position: bottom center; background-repeat: no-repeat; background-size: 80px auto; -webkit-background-size: 80px auto; padding-bottom: 30px !important; } /* visual-01 ---------------------------------------------------------------------------- */ .visual-01 { position: relative; min-height: 600px; z-index: 1; } .visual-01 .visual-inner, .visual-01 .visual-inner-sp { -webkit-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 600px; position: absolute; left: 0; top: 0; right: 0; z-index: 1; -ms-behavior: url(https://www.nipponsteel.com/product/css_v2/backgroundsize.min.htc); } .visual-01 .visual-inner-sp { background-position: bottom center; } .visual-01 .bg-top { background-position: top center; } .visual-01 .bg-center { background-position: center; } /*.visual-02 .bxslider li:after, .visual-01 .visual-inner:after { background-image: url(/product/images_v2/visual_bg01.png); background-repeat: repeat; background-position: 0 0; -webkit-background-size: 4px 4px; background-size: 4px 4px; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -webkit-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; z-index: 1; }*/ .visual-01 .visual-inner-sp { display: none; } .visual-01 .visual-inner .container { min-height: 500px; position: relative; } .visual-name { background: url(https://www.nipponsteel.com/product/images_v2/com_background_02.png) repeat 0 0; color: #fff; display: table; margin: 20px 0 0 20px; height: 240px; width: 260px; position: relative; overflow: hidden; text-align: center; z-index: 2; } .visual-image { margin: 20px 0 0 20px; max-width: 260px; position: relative; z-index: 3; } .visual-image > img { height: auto; width: 100%; } .visual-name .cell { display: table-cell; vertical-align: middle; } .visual-name .jp { font-size: 50px; line-height: 1; } .visual-name .font-30 { font-size: 30px; } .visual-name .en { font-size: 24px; } .visual-text .text { min-height: 185px; color: #000; font-size: 14px; line-height: 1.6; margin: 20px 20px 0 320px; max-height: 330px; position: relative; overflow: hidden; right: 0; text-overflow: ellipsis; z-index: 3; } .visual-text.text-white .text { color: #fff; } .visual-03 {margin-bottom: 25px;} .visual-03 .visual-name { margin-left: auto; margin-right: auto; max-width: 940px; min-height: 260px; width: 100%; } .visual-03 .visual-name .cell { padding-top: 36px; } .visual-03 .visual-name .title-head span { display: block; color: #fff; font-size: 22px; padding-bottom: 5px; } .visual-03 .visual-name .title-head strong { display: block; color: #fff; font-size: 55px; font-weight: normal; } .visual-03 .visual-name .cell { vertical-align: top; } .visual-03 .visual-text .text { color: #fff; line-height: 2.1; font-size: 14px; margin: 18px 20px 0; left: 0; top: 170px; text-align: center; } .text-02 { color: #fff; margin-top: 80px; position: relative; text-align: center; z-index: 2; } .text-02 p { line-height: 1; } .font-53 { font-size: 53px; } .font-20 + .font-53 { margin-top: 25px; } .font-53 + .font-14 { margin-top: 42px; } .font-20 { font-size: 20px; } .visual-03 .font-14 { color: #fff; font-size: 14px; position: relative; text-align: center; top: 215px; z-index: 2; } .font-14 { font-size: 14px; } .lead-block-01 { background: url(https://www.nipponsteel.com/product/images_v2/area_bg.png) repeat-x 0 100%; padding: 25px 0; } .lead-block-01 .head-box { color: #2ca6e0; text-align: center; } .lead-block-01 .head-box .title-head > span { display: block; font-size: 20px; padding-bottom: 20px; } .lead-block-01 .head-box .title-head > strong { color: #2ca6e0; display: block; font-size: 52px; font-weight: normal; } .lead-block-01 .head-box .text-head { font-size: 14px; line-height: 2; margin-top: 30px; } .area-group { margin-top: 83px; text-align: center; list-style: none; width: 100%; } .area-group > .area { float: left; width: 25.4%; } .area-group > .area-arrow { float: left; width: 11.6%; height: 200px; display: block; position: relative; } .area-group > .area-arrow span { background: url(https://www.nipponsteel.com/product/images_v2/com_ic23.png); background-repeat: no-repeat; background-position: center; -webkit-background-size: auto; background-size: auto; display: block; margin-top: -20px; position: absolute; top: 50%; height: 40px; width: 100%; } .area-group > .area + .area + { margin-right: 11.7%; } .area-group > .area + .area + .area { margin-right: 0; } .area-group .area a { border: 2px solid #fff; display: block; max-width: 253px; padding: 28px; text-decoration: none; text-align: center; width: 100%; } .area-group > .area > a > img { max-width: 80px; } .area-group > .area > a > * { display: inline-block; vertical-align: middle; } .area-group > .area span { display: block; color: #000; font-size: 30px; padding-top: 19px; } .area.orange > a { background-color: #feecd0; } .area.green > a { background-color: #e7f1d7; } .area.blue > a { background-color: #c5e7fc; } .list-com { margin-left: -5px; margin-right: -5px; } .list-com a > img { vertical-align: middle; } .list-com [class^="col-"] { margin-top: 20px; padding: 0 5px; text-align: center; } .list-com [class^="col-"] a { border: 1px solid #ccc; display: block; height: 60px; line-height: 60px; overflow: hidden; } .row-news { margin-top: -260px; position: relative; z-index: 52; } .box-news { background: url(https://www.nipponsteel.com/product/images_v2/com_background_01.png) repeat 0 0; -webkit-border-radius: 0; -moz-border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; border: 0; margin: 0 auto; min-height: 130px; max-width: 940px; padding: 10px; width: 100%; } .major-awards .box-news-03, .box-news-03 { background: url(https://www.nipponsteel.com/product/images_v2/com_background_01.png) repeat 0 0; -webkit-border-radius: 0; -moz-border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0; border: 0; margin: 0 auto; padding: 5px !important; width: 100%; } .box-news-03 .panel-body { background-color: #fff; } .box-news-03 .panel-body .link-list-01, .box-news-03 .panel-body .link-list-01 li:first-child { margin: 0; } .visual-01 .box-news { background-color: #b5dbf3; position: absolute; left: 0; right: 0; bottom: 80px; z-index: 2; } .visual-01 .box-news.railways { bottom: 30px; } .box-news > .panel-heading { background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border-bottom: 0; color: #000; } .box-news > .panel-heading .panel-title { font-size: 20px; padding-bottom: 10px; } .box-news .panel-body { background-color: #fff; } .col .box-news .panel-body { min-height: 115px; } .row-news .box-news .panel-body dt { margin-top: 22px; } .box-news .panel-body dt { margin-top: 12px; } .box-news .panel-body dt:first-child { margin-top: 0; } .box-news .panel-body > dd { margin: -1.4em 0 0; padding-left: 90px; } .btn-tab-01 { border-bottom: 10px solid #2ca6e0; position: relative; z-index: 2; } .btn-tab-01 .container { margin-top: -60px; } .btn-tab-01 .list-inline { display: table; margin: 0; margin-left: 2px; padding: 0 15px; position: relative; width: 100%; vertical-align: bottom; } .btn-tab-01 .bx-viewport { height: auto!important; } .btn-tab-01 li { background-color: #d9d9d9; display: block; color: #000; font-size: 12px; padding: 0 10px; text-align: center; text-decoration: none; vertical-align: middle; } .btn-tab-01 li:hover, .btn-tab-01 li.active { color: #fff; background: #2ca6e0; } .btn-tab-01 li a { color: #000; display: block; line-height: 50px; text-decoration: none; white-space: nowrap; } .btn-tab-01 li:hover a, .btn-tab-01 li.active a{ color: #fff; text-decoration: none; } .btn-tab-02 .list-inline { display: table; margin-bottom: 0; } .btn-tab-02 .list-inline li { background-color: #d9d9d9; display: table-cell; height: 60px; text-align: center; vertical-align: middle; line-height: 4.2; } .btn-tab-02 .list-inline li a { display: inline-block; height: auto; line-height: 1.4; vertical-align: middle; } .btn-tab-02 .list-inline li:hover a, .btn-tab-02 .list-inline li.active a, .btn-tab-02 .list-inline li:hover, .btn-tab-02 .list-inline li.active { background-color: #2ca6e0; color: #fff; } .bx-wrapper { position: relative; } .btn-tab-01 .bx-prev, .btn-tab-01 .bx-next { -webkit-background-size: 7px 11px; background-size: 7px 11px; background-position: 0 50%; background-repeat: no-repeat; display: none; height: 35px; position: absolute; top: 0; text-decoration: none; text-indent: -99999px; width: 7px; } .btn-tab-01 .bx-next { background-image: url(https://www.nipponsteel.com/product/images_v2/next_ic.png); right: -10px; } .btn-tab-01 .bx-prev { background-image: url(https://www.nipponsteel.com/product/images_v2/prev_ic.png); left: -10px; } .table-scale > thead > tr > th, .table-scale > tbody > tr > th, .table-scale > tbody > tr > td, .table-scale > thead > tr > td { border: 1px solid #ddd; } .table-scale > tbody > tr > td { background: #fff; } .table-scale > thead > tr > th, .table .thead.th { background: #71bbe8; text-align: center; } .table-scale > tbody > tr > th, .tbody.th, .plank .tbody.th { background: #add7f2; } .plank.table-scale > thead > tr > th, .plank.table-scale > tbody > tr > th, .plank.table-scale > tbody > tr > td, .plank .tbody.td { border: 1px solid #fff; } .plank.table-scale > tbody > tr > td, .plank .tbody.td { background: #f2f2f2; } .table-back > tbody > tr > td, .table-back > tbody > tr > th { border-color: #fff; background-color: #f2f2f2; } .plank.table-scale > tbody > tr > td .iconLink01 > a { display: inline-block; margin: 3px 0; white-space: nowrap; } .major-awards { background: #f2f2f2; } .major-awards .panel, .accordion .box { background: #add7f2; border: none; padding: 0 10px 10px; } .major-awards .panel-heading, .accordion .box .panel-heading { border: none; font-size: 18px; padding: 20px 10px; } .accordion .box dt { text-align: left; } .link-list-01 li { list-style: none; } .link-list-01 li { margin-top: 10px; } .accordion .box dt:last-of-type { margin-bottom: 0; } .accordion .box .panel-body, .major-awards .panel-body { background: #fff; } .plank .dowload + .panel { margin-top: 20px; } .plank .panel { border: none; } .plank .panel-body > * { margin: 0; } .plank .panel figure { margin: 0 18px; } .table { color: #000; } .list-none { list-style: none; } .features-bridge .table-scale > tbody > tr > td { background: #fff; } .features-bridge .panel-body .row { /*margin: 0 -10px;*/ width: 100%; } .features-bridge .panel-body .col { padding: 0 10px; } .accordion .panel-collapse .panel-body.related-app { padding: 20px 10px; } .accordion .panel-collapse .panel-body.related-app .row { margin-top: 0; } .accordion .panel-collapse .panel-body.related-app [class^="col-"] { padding: 0 10px; } .eco-mark, .margin-top { margin-top: 20px; } .text-bold { font-weight: bold; font-size: 15px; } .list-dot-02 li.text-bold { font-size: 15px; } .table-responsive { border: none; } table.text-center td, table.text-center th { text-align: center; } table.text-left td, table.text-left th, table.text-left tbody th, .table.text-left .thead.th { text-align: left; } .table.text-middle td, .table.text-middle th { vertical-align: middle; } table.table-respon tbody tr th { background-color: #f2f2f2; } .box { margin-top: 20px; } .box dt { width: 100px; } .box dd { margin-left: 90px; } .ml-20 { margin-left: 20px !important; } .ml-60 { margin-left: 60px !important; } .ml-120 { margin-left: 120px !important; } .ml-180 { margin-left: 180px !important; } .ml-260 { margin-left: 260px !important; } .ml-410 { margin-left: 410px !important; } .mt-0 { margin-top: 0 !important; } .mt-5 { margin-top: 5px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .pl-10 { padding-left: 10px !important; } .pl-20 { padding-left: 20px !important; } .pr-0 { padding-right: 0 !important; } .group-frame > .row, .frame-img + .frame-img { margin-top: 20px; } .group-frame > .row:first-child { margin-top: 0; } .group-frame > .row > [class^="col-"]:first-child { padding: 0 10px 0 0; } .group-frame > .row > [class^="col-"]:last-child { padding: 0 0 0 10px; } .group-frame > p { font-size: 14px; margin-top: 10px; } .frame-img { background-color: #f2f2f2; -webkit-background-size: cover; background-size: cover; background-position: center; background-repeat: no-repeat; height: 300px; } .group-frame > .row [class^="col-xs"] { padding: 0; } .group-frame > .row [class^="col-xs"] + [class^="col-xs"] { margin-top: 20px; } .fh-400 { height: 400px; } .fh-620 { height: 620px; } .link-pdf { padding: 5px 0; } .dl-qa dt { padding: 10px 0; } .dl-qa dt + dd { border-bottom: 1px dashed #ddd; padding-bottom: 10px; } /* #visual-02 ---------------------------------------------------------------------------- */ .visual-02 { height: 690px; margin-top: 20px; position: relative; } .visual-02 .bx-wrapper { overflow: hidden; } .visual-02 .bxslider li { -webkit-background-size: cover!important; background-size: cover!important; height: 690px; width: 100%; } .visual-02 .visual-inner { position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; } .visual-02 .bxslider { position: relative; } .visual-02 .bxslider li { position: absolute; } .visual-02 .box-news { bottom: 40px; margin-top: 470px; } .visual-02 .bx-controls { margin: 0 auto; max-width: 1010px; padding: 0 15px; position: relative; bottom: 255px; text-align: right; z-index: 99; } .visual-02.no-bnr .bx-controls { bottom: 100px; } .visual-02 .bx-controls .bx-pager { margin: 0 auto; max-width: 940px; } .visual-02 .bx-pager-item { display: inline-block; margin-left: 5px; } .visual-02 .bx-pager-item a { background: #fff; border: 1px solid #fff; display: block; height: 5px; text-indent: 9999px; width: 50px; } .visual-02 .bx-pager-item a.active { background: #2ca6e0; } .visual-02 .slider-wrapper { max-height: 690px; overflow: hidden; position: relative; } .visual-02 .nivoSlider li { position: absolute; } .visual-02 .box-news { bottom: 40px; margin-top: 470px; } .visual-02.only-slide { height: auto; } .visual-02.only-slide .visual-inner { position: static; } .visual-02 .nivo-controlNav { margin: 0 auto; top: 30px; left: 0; right: 30px; padding: 0; position: absolute; text-align: right; z-index: 99; } .visual-02 .nivo-control { background: #fff; border: 1px solid #fff; display: inline-block; margin: 0 5px; height: 5px; text-indent: -9999px; text-align: left; width: 50px; } .visual-02 .nivo-control.active { background: #2ca6e0; } /*.visual-02 .nivoSlider:after { background-image: url(/product/images_v2/visual_bg01.png); background-repeat: repeat; background-position: 0 0; -webkit-background-size: 4px 4px; background-size: 4px 4px; content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; -webkit-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; z-index: 6; }*/ .visual-02 .nivoSlider a.nivo-imageLink { z-index: 7; } .list-bnr > ul > li { float: left; list-style: none; height: 100px; margin: 0 2.5% 0 0; padding: 0; width: 31.63%; } .visual-02 .list-bnr { position: absolute; left: 0; right: 0; bottom: 277px; z-index: 51; } .list-bnr > ul > li img { width: 100%; } .list-bnr > ul > li:last-child { margin-right: 0; } .pb-40 { padding-bottom: 40px !important; } /* six-strengths ---------------------------------------------------------------------------- */ .lead-block { padding: 30px 0 45px; position: relative; z-index: 7; } .lead-block p { padding-top: 26px; } .list-sec-01 {z-index: 6;} .list-sec-02 {z-index: 5;} .list-sec-03 {z-index: 4;} .list-sec-04 {z-index: 3;} .list-sec-05 {z-index: 2;} .list-sec-06 {z-index: 1;} [class^='list-sec-'] { -webkit-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 800px; position: relative; -ms-behavior: url(https://www.nipponsteel.com/product/css_v2/backgroundsize.min.htc); } [class^='list-sec-'] .section-inner { min-height: 830px; position: relative; } .list-sec-06 .section-inner, .list-sec-04 .section-inner, .list-sec-02 .section-inner { background-position: 50% 0; min-height: 770px; } .list-sec-04 .section-inner { -webkit-background-size: auto; background-size: auto; } .list-sec-05 .section-inner, .list-sec-03 .section-inner, .list-sec-01 .section-inner { background-image: url(https://www.nipponsteel.com/product/images_v2/visual_bg02.png); -webkit-background-size: auto; background-size: auto; background-position: 0 0; background-repeat: repeat; min-height: 830px; height: 100%; width: 100%; } .list-sec-05 .section-inner .arrow-top, .list-sec-03 .section-inner .arrow-top, .list-sec-01 .section-inner .arrow-top { background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_arrow_02.png); -webkit-background-size: auto; background-size: auto; background-position: 50% 0; background-repeat: no-repeat; display: block; height: 30px; margin-left: -25px; position: absolute; left: 50%; top: 0; right: 0; width: 50px; z-index: 3; } .list-sec-01 .section-inner .arrow-top { background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_arrow_03.png); } .list-sec-05 .section-inner .arrow-bottom, .list-sec-03 .section-inner .arrow-bottom, .list-sec-01 .section-inner .arrow-bottom { background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_arrow_01.png); -webkit-background-size: auto; background-size: auto; background-position: 50% 0; background-repeat: no-repeat; display: block; height: 30px; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3; } .list-sec-06, .list-sec-04, .list-sec-02 { background-color: #f3f3f3; background-position: 50% 0; min-height: 770px; } .heading-box { -webkit-background-size: auto; background-size: auto; background-position: 49.9999% 0; background-repeat: repeat-y; color: #fff; height: 200px; position: absolute; left: 0; top: 50px; width: 100%; z-index: 1; } .list-sec-06 .heading-box, .list-sec-04 .heading-box, .list-sec-02 .heading-box { top: 30px; } .right-tit .heading-box { background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_right_bg.png); } .heading-box > h2 > img { display: block; max-width: 100%; } .heading-box > h2 { max-width: 1010px; margin: 0 auto; } .right-tit .heading-box > h2 > img { margin-left: auto; } .left-tit .heading-box > h2 > img { margin-right: auto; } .left-tit .heading-box { background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_left_bg.png); } .list-sec-02 > .section-inner > .container { position: relative; } .list-sec-02 .highlight-box { position: absolute; top: 20px; right: 0; z-index: 2; } .highlight-box { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-image: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_bg_top100.png); background-repeat: no-repeat; background-position: center center; color: #fff; height: 220px; padding: 18px 10px; text-align: center; width: 220px; } .highlight-box .image-high { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 2px solid #fff; margin: 0 auto; height: 74px; width: 74px; overflow: hidden; } .highlight-box .image-high img { height: 100%; width: 100%; } .highlight-box .caption-high { padding: 10px 0 3px; min-height: 50px; } .highlight-box .btn-about { background: url(https://www.nipponsteel.com/product/six_strengths/images_v2/index_bg_top01.png) no-repeat center; color: #2ca6e0; height: 30px; padding: 5px 10px 3px; text-decoration: none; width: 120px; } .list-sec-02 .container .highlight-box + .technical-dev, .list-sec-02 .container > .technical-dev:first-child { margin-top: 260px; } .technical-dev .panel { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 4px solid #2ca6e0; color: #2ca6e0; min-height: 204px; } .technical-dev .panel > .panel-heading { background-color: transparent; border-bottom: 1px solid #2ca6e0; margin: 0 15px; padding: 0; } .technical-dev .panel > .panel-heading h3 { font-weight: bold; font-size: 22px; padding: 18px 0 14px; } .technical-dev .panel > .panel-heading strong { color: #e5457a; } .technical-dev .panel > .panel-body p { margin-top: 13px; } .technical-dev .panel > .panel-body p:first-child { margin-top: 4px; } .list-sec-04 { -webkit-background-size: auto; background-size: auto; } .list-sec-04 .capacity-image { display: table; margin: 340px auto 0; text-align: center; width: 725px; } .capacity-image [class^='capacity-'] { display: table-cell; vertical-align: middle; text-align: center; } .list-round { margin-top: 260px; text-align: center; } .return { margin: 17px auto 0; text-align: center; } .modal-flort .modal-content { background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .modal-flort .modal-header { background-color: transparent; } .modal-flort .modal-header .close { margin-top: -20px; } .modal-flort .modal-body { background-color: #fff; padding: 10px; } .flort-image { max-width: 140px; } .flort-image img { width: 100%; } .flort-title { color: #2ca6e0; font-size: 18px; font-weight: bold; line-height: 1.6; margin: -5.6em 0 0 155px; min-height: 102px; text-align: center; } .flort-text { line-height: 1.6; padding-top: 10px; } .chart-image { text-align: center; } /* news ---------------------------------------------------------------------------- */ .news-content { padding: 25px 0; } .sec-news-01 { background-color: #f2f2f2; } .box-news-02 { background: url(https://www.nipponsteel.com/product/images_v2/com_background_01.png) repeat 0 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; padding: 10px; } .box-news-02 > .panel-heading { background-color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; color: #2ca6e0; font-size: 18px; text-align: center; } .box-news-02 > .panel-body { background-color: #fff; } .box-news-02 .panel-body > dl > dt { margin-top: 7px; } .box-news-02 .panel-body > dl > dt:first-child { margin-top: 0; } .box-news-02 .panel-body > dl > dd { line-height: 2.5; margin: -2em 0 0; padding-left: 110px; } .box-news-02 .panel-body > ul > li { margin-top: 10px; } .box-news-02 .panel-body > ul > li:first-child { margin-top: 0; } .box-news-02 .media > .media-left { height: auto; padding-right: 15px; max-width: 130px; } .box-news-02 .media > .media-left img { max-width: 120px; } .box-news-02 .media > .media-body a { line-height: 2; } .box-news-02 .media > .media-body a:hover { color: #444; text-decoration: none; } .box-news-02 .media-02 > .media-left { display: block; float: left; max-width: none; } .box-news-02 .media-02 > .media-left .caption { padding-top: 8px; text-align: center; } .box-news-02 .media-02 > .media-body { display: block; line-height: 2; overflow: visible; width: auto; } .box-news-02 .media-02 > .media-body > p { margin-bottom: 10px; } .box-news-02 .media-02 > .media-body > p:last-child { margin-bottom: 0; } .row-news-01 .box-news-02 { padding: 5px; } .row-news-01 .box-news-02 .panel-body { min-height: 127px; padding: 10px; } .btn-news { text-align: right; } .btn-show-02:hover, .btn-show-02:active, .btn-show-02:visited, .btn-show-02:focus, .btn-show-02 { background: #2ca6e0; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #fff; min-width: 140px; padding: 2px 10px 4px; text-decoration: none; vertical-align: middle; white-space: normal; } .btn-detail-01 > .btn.btn-primary:hover, .btn-detail-01 > .btn.btn-primary:active, .btn-detail-01 > .btn.btn-primary:visited, .btn-detail-01 > .btn.btn-primary:focus, .btn-detail-01 > .btn.btn-primary { background-color: #3e63a2; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #fff; min-width: 100px; padding: 5px 10px; text-decoration: none; vertical-align: middle; } .btn-show-02 .ico-btn-next { display: inline-block; background: url(https://www.nipponsteel.com/product/images_v2/com_ic04.png) no-repeat center; background-size: cover; -webkit-background-size: cover; display: inline-block; margin: 0 5px 0 0; max-height: 18px; max-width: 10px; height: 18px; top: 4px; width: 10px; } .btn-show-02 .ico-btn-prev { display: inline-block; background: url(https://www.nipponsteel.com/product/images_v2/com_ic06.png) no-repeat center; background-size: cover; -webkit-background-size: cover; display: inline-block; margin: 0 5px 0 0; max-height: 18px; max-width: 10px; height: 18px; top: 4px; width: 10px; } .ico-blank-01 { background: url(https://www.nipponsteel.com/product/images_v2/blank_icon.png) no-repeat right center; background-size: 18px auto; -webkit-background-size: 18px auto; padding-right: 20px; } .ico-blank-02 { background: url(https://www.nipponsteel.com/product/images_v2/com_ic09.png) no-repeat left center; background-size: 10px auto; -webkit-background-size: 10px auto; padding-right: 20px; } /* catalog ---------------------------------------------------------------------------- */ .catalog-block { background-color: #f2f2f2; padding: 25px 0; } .catalog-block .row { margin-top: 20px; } .catalog-list .col .col-inner { background-color: #fff; padding: 20px; } .catalog-title { display: table-cell; font-size: 14px; line-height: 1.2; min-height: 30px; height: 30px; padding: 0 5px; word-break: break-all; vertical-align: middle; } .catalog-body { margin-top: 14px; min-height: 205px; } .catalog-list .col .thumbnail { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; float: left; margin-bottom: 5px; max-width: 50%; } .catalog-list .col .thumbnail .catalog-infor { margin-top: 10px; text-align: center; word-break: break-all; } .catalog-list .label-list { float: right; } .catalog-list .label-list li { background-color: #3e63a2; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: block; font-size: 11px; line-height: 1; margin-top: 3px; width: 90px; } .catalog-list .label-list .label.label-.primary, .catalog-list .label-list .label.label-primary { background-color: #3e63a2; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: none; display: block; font-size: 11px; line-height: 1; margin-top: 3px; max-width: 85px; white-space: inherit; word-break: break-all; width: 100%; } .modal-body .catalog-list .label-list .label.label-primary { cursor: default; pointer-events: none; } .catalog-list .btn:focus, .catalog-list .btn { background-color: #2ca6e0; -webkit-border-radius: 0; -moz-border-radius: 0; color: #fff; border-radius: 0; padding: 15px 5px 13px; text-decoration: none; white-space: normal; width: 100%; } .catalog-list .btn a:visited, .catalog-list .btn a:focus, .catalog-list .btn a { color: #fff; text-decoration: none; } .catalog-list .btn:visited, .catalog-list .btn a:visited { color: #fff; } .btn-download.btn-info:visited, .btn-download.btn-info:focus, .btn-download.btn-info { background-color: #2ca6e0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-size: 15px; margin-top: 20px; padding: 7px 20px; } .modal .btn-download { margin-top: 0; } .btn-download.btn-info em { display: inline-block; } .btn-download.btn-info .glyphicon { display: inline-block; margin-right: 10px; } .glyphicon.ico-window { background-image: url(https://www.nipponsteel.com/product/images_v2/com_ic10.png); -webkit-background-size: 10px 12px; background-size: 10px 12px; background-repeat: no-repeat; background-position: 0 0; display: inline-block; margin: 0 5px; height: 12px; width: 10px; color: #000; } .text-note { margin-bottom: 20px; } .dis-lang { background-color: #f2f2f2; } .catalog-download { padding: 25px 0; } .catalog-download + .contact-us { border-top: 1px solid #ccc; } .features { background: #3e63a2; color: #fff; font-size: 16px; padding: 3px 10px; } /* fukkou ---------------------------------------------------------------------------- */ .block-boder { border: 1px solid #ccc; padding: 20px; } .block-boder .heading-03 { background-color: #3e63a2; color: #fff; font-size: 18px; margin-top: 20px; padding: 10px; text-align: center; } .panel-blank { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .panel-blank .panel-heading:first-child .heading-03 { margin-top: 0; } .block-boder .panel-heading { border-bottom: none; padding: 0; } .panel-blank > .media-group { background-color: #f2f2f2; padding: 20px; } .panel-blank > .media-group > .row { margin-top: 20px; margin-left: -10px; margin-right: -10px; } .panel-blank > .media-group > .row:first-child { margin-top: 0; } .panel-blank > .media-group .col { padding-left: 10px; padding-right: 10px; } .panel-blank > .media-group .col .media { background-color: #fff; padding: 10px; width: 100%; } .panel-blank > .media-group .col .media-left { float: left; max-width: 160px; padding-right: 0; margin-right: 15px; } .panel-blank > .media-group .col .media-left > img { max-width: 160px; height: auto; } .panel-blank > .media-group .heading-04 { margin-top: 0; } .panel-blank > .media-group .heading-04 a { text-decoration: none; } .panel-blank > .media-group .text-detail { margin-top: 10px; } .panel-blank > .media-group .text-detail p { margin-top: 10px; } .panel-blank > .media-group .text-detail p:first-child { margin-top: 0; } .panel-blank > .panel-footer { background-color: #f2f2f2; border-top: none; padding-top: 0; text-align: center; } .panel-blank > .panel-footer .btn.btn-show-02 { min-width: 325px; } /* .media-group-01 ---------------------------------------------------------------------------- */ .media-group-01 .panel { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .media-group-01 .block-boder { margin-bottom: 20px; } .media-group-01 .block-boder:last-child { margin-bottom: 0; } .media-group-01 .block-boder .media-left { padding-right: 15px; max-width: 175px; } .media-group-01 .block-boder .media-left > img { min-width: 160px; } .media-group-01 .block-boder .media-body .heading-04 { margin-top: 5; } .media-group-01 .block-boder .media-body .heading-04 > a { color: #000; text-decoration: none; } .media-group-01 .block-boder .media-body .heading-04 .partner-img { float: right; } .media-group-01 .block-boder .media-body .text-detail { line-height: 1.6; margin-top: 13px; padding-bottom: 32px; min-height: 38px; } .media-group-01 .block-boder .media-body .text-detail p { margin-top: 10px; } .media-group-01 .block-boder .media-body .text-detail p:first-child { margin-top: 0; } .media-group-01 .block-boder .button-detail { margin-top: -38px; text-align: right; } .media-group-01 .block-boder .media-content { background-color: #f2f2f2; padding: 20px; } .media-group-01 .collapse-content { margin-top: 20px; } .media-group-01 .collapse-content > .media-content + .block-02 { margin-top: 20px; } .collapse-content .area-media { background-color: #fff; padding: 20px; } .collapse-content .area-media .row .col .thumbnail { border: none; padding: 0; } .collapse-content .area-media .lead-text-01 { color: #3e63a2; font-size: 16px; line-height: 1.8; padding-bottom: 10px; } .collapse-content .list-media > .row-height { margin-top: 20px; } .collapse-content .list-media > .row-height:first-child { margin-top: 0; } .contact-us-01 > .col-right { text-align: right; } .contact-us-01 > .col-right .btn-contact { padding-bottom: 10px; } .contact-us-01 > .col-right .btn-contact a:visited, .contact-us-01 > .col-right .btn-contact a { background-color: #2ca6e0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #fff; text-align: center; text-decoration: none; min-width: 100%; } .contact-us-01 .link-out > a { display: inline-block; } .row-height { display: table; width: 100%; } .row-height .col { display: table-cell; float: none; padding: 0 10px 0 0; overflow: hidden; position: relative; vertical-align: top; } .row-height .col:after { background: #f2f2f2 none repeat scroll 0 0; bottom: 0; content: ''; display: block; height: 20px; left: 0; position: absolute; right: 10px; height: 20px; } .row-height .col:nth-child(2n) { padding: 0 0 0 10px; } .row-height .col:nth-child(2n):after { padding-right: 0; left: 10px; right: -10px; } .row-height .col .area-media { border: 20px solid #f2f2f2; margin-bottom: -1000px; padding-bottom: 1020px; position: relative; } .dl-qa-01 { line-height: 1.6; font-size: 14px; } .dl-qa-01 > dt { color: #3e63a2; margin-top: 30px; padding-left: 15px; text-indent: -15px; } .dl-qa-01 > dt:first-child { margin-top: 0; } .dl-qa-01 > dd .marker { display: table-cell; padding-right: 10px; } .dl-qa-01 > dd .dd-answer { display: table-cell; overflow: hidden; } .dl-qa-01 > dd { line-height: 1.6; margin-top: 14px; } /* roukyu ---------------------------------------------------------------------------- */ .block-02 { margin-bottom: 20px; } .block-02 > p { line-height: 1.7; padding-top: 16px; } .block-02 .title-03 { color: #c00; border-bottom: 1px solid #ccc; font-size: 14px; padding: 0 0 10px; } .group-row .col > .panel { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: #f2f2f2; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 10px; } .group-row .col > .panel .panel-heading { background-color: #fff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 4px 10px; } .group-row .panel-heading > span { float: left; } .group-row .panel-heading .btn.btn-show-02 { float: right; margin-top: 6px; padding: 5px 10px; } .group-row .panel-heading .btn.btn-show-02 .ico-btn-next {top: 0;} .group-row .col > .panel .panel-body { padding: 25px 10px 10px; min-height: 147px; } .group-row .col > .panel .panel-body.min-h188 { min-height: 188px; } /* contact ---------------------------------------------------------------------------- */ p.date_button a { background: #2ca6e0; padding: 10px 80px; color: #fff; text-decoration: none; font-size: 14px; } /* #footer ---------------------------------------------------------------------------- */ footer { background: #3e63a2; color: #fff; padding-bottom: 35px; } footer a:visited, footer a:active, footer a:focus, footer a { color: #fff; text-decoration: none; } footer a:hover { color: #fff; text-decoration: underline; } footer ul, footer ul li { list-style: none; margin: 0; padding: 0; } footer div.pageTop, footer div.pageTop-cn { display: block; height: 20px; position: relative; width: 100%; z-index: 5; } footer div.pageTop:before, footer div.pageTop-cn:before { background-color: #204380; display: block; content: ''; height: 20px; position: absolute; top: 0; right: 0; left: 0; } footer div.pageTop a, footer div.pageTop-cn a { background-image: url(https://www.nipponsteel.com/product/images_v2/com_pagetop.png); background-repeat: no-repeat; background-position: 0 0; -webkit-background-size: 100px 50px; background-size: 100px 50px; color: #fff; display: block; font-family: Arial; font-weight: bold; margin-left: auto; height: 50px; padding-top: 28px; position: absolute; right: 0; top: -30px; text-align: center; text-decoration: none; width: 100px; } footer .pageTop a:hover, footer .pageTop-cn a:hover { text-decoration: none; } footer div.pageTop .container, footer div.pageTop-cn .container { position: relative; left: 0; right: 0; } footer h2 { border-bottom: 1px solid #9fb1d1; font-size: 14px; margin-top: 60px; margin-bottom: 10px; padding: 0 0 15px 2px; } .footerNavi { padding: 30px 0 46px; } .footerNavi .app-store p { line-height: 2.1; padding-top: 6px; } .footerNavi .app-store .btn-app { max-width: 140px; } .footerNavi .app-store .btn-app img { height: auto; width: 100%; } .footerNavi .app-store, .footerNavi ul { padding: 0 10px; } .footerNavi ul li { padding-top: 10px; } .footerLink { float: left; } .footerLink li { background-image: url(https://www.nipponsteel.com/product/images_v2/com_line01.png); -webkit-background-size: 1px 12px; background-size: 1px 12px; background-position: 0 2px; background-repeat: repeat-y; float: left; font-size: 13px; padding: 0 16px; } .footerLink li:first-child { background: none; padding-left: 0; } #copyright { float: right; font-size: 10px; } footer .col-md-4 > *:first-child, footer .col-md-3 > *:first-child { margin-top: 0; } /* #clearfix ---------------------------------------------------------------------------- */ .container:after, .footerLink:after, .list-item:after, .btn-group-01:after, #navbar .navbar-nav:after, .nav-02 ul:after, .nav-03 ul:after, .nav-04:after, .nav-05 ul:after, .content-inquiry:after, .visual-text:after, .group-row .panel-heading:after, .table-div:after, .catalog-body:after, .catalog-list .label-list:after, .thumb-content:after { content: ""; display: block; clear: both; } .table-responsive .table-div table tr th { text-align: center; vertical-align: middle; text-align: center; border-left: 1px solid #ddd; } .table-responsive .table-div table tr .th { background: #71bbe8 none repeat scroll 0 0; } .table-responsive .table-div table tr .tbody { background: #add7f2 none repeat scroll 0 0; } .table-responsive .table-div table tr td{ text-align: center; border-left: 1px solid #ddd; background: #fff none repeat scroll 0 0; } .table-responsive .table .lv02{ background: #dbeff9 none repeat scroll 0 0; } .table-responsive .table .lv04{ background: #FF8F59 none repeat scroll 0 0; } .table-responsive .table .lv05 { background: #ffdfca none repeat scroll 0 0; } .table-responsive .table .lv06{ background: #beffb5 none repeat scroll 0 0; } .color-blue { color: #06c; } .color-blue02 { color: #2ca6e0; } /* ---------------------------------------------------------------------------- */ .alert.alert-info { font-size: 15px; } .panel-group .nav-03 .text-L { font-size: 18px; font-weight: bold; } /* メインビジュアルの修正*/ .visual-02 .slider-wrapper { max-height : 580px !important; } /* ニュースとバナーの位置変え .visual-02 .list-bnr { bottom: -10px !important; } .row-news { margin-top: -390px !important; } #content > :last-child { padding-bottom: 100px !important; } */ /* ナビゲーションスタイル ---------------------------------------------------------------------------- */ .gNav.v3_nav { text-align: center; } .gNav.v3_nav .gNav-sub { top: 100%; left: 0; width: 100%; background: rgba(0,0,0,.8); padding: 28px 30px; text-align: left; } .gNav.v3_nav > li.has-sub:hover .gNav-sub { display: -webkit-flex; display: flex; flex-flow: wrap; } .gNav.v3_nav .gNav-sub:after { background: none; position: static; } .gNav.v3_nav .gNav-sub > li { width: 100%; height: auto; display: inline-block; } .gNav.v3_nav .gNav-sub > li > a { background: none; height: auto; position: static; display: inline-block; width: 100%; } .gNav.v3_nav .gNav-sub > li:hover > a, .gNav.v3_nav .gNav-sub > li.active > a { background: none; text-decoration: underline; } .gNav.v3_nav .gNav-sub > li:hover > a:after { background: none; content: ''; display: block; height: 40px; margin-top: 0; width: 8px; position: absolute; right: 12px; } @media screen and (max-width: 767px) { .gNav.v3_nav .gNav-sub { background: #e6e6e6; } .gNav.v3_nav > li.has-sub:hover .gNav-sub { display: none; } } /* category-area ---------------------------------------------------------------------------- */ .gNav.v3_nav .gNav-sub > li.category-area { width: calc(32.5% - 8px); border-bottom: 1px solid #7d7d7d; margin: 0 16px 0 0; font-size: 16px; font-weight: bold; position: relative; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; } .gNav.v3_nav .gNav-sub > li.category-area a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; } .gNav.v3_nav .gNav-sub > li.category-area.no-contents { border: none; } .gNav.v3_nav .gNav-sub > li.category-area:nth-child(3n) { margin-right: 0; } .gNav.v3_nav .gNav-sub > li.category-area:nth-child(-n+3) { border-top: 1px solid #7d7d7d; } .gNav.v3_nav .gNav-sub > li.category-area a::before{ position: absolute; left: 6px; top: 50%; content: ""; display: inline-block; width: 16px; height: 16px; -webkit-border-radius: 50%; border-radius: 50%; background: #e6e6e6; border: 1px solid #e6e6e6; margin: -8px 0 0; } .gNav.v3_nav .gNav-sub > li.category-area a::after{ position: absolute; left: 12px; top: 50%; content: ""; display: inline-block; box-sizing: border-box; border: 4px solid transparent; border-left: 5px solid #060606; margin: -4px 0 0; width: 8px; height: 8px; } .gNav.v3_nav .gNav-sub > li.category-area a:hover:before { background: #000; border: 1px solid #000; } .gNav.v3_nav .gNav-sub > li.category-area a:hover:after{ border: 4px solid transparent; border-left: 5px solid #e9e9e9; } .gNav.v3_nav .gNav-sub > li.category-area a { padding: 18px 10px 18px 34px; } .gNav.v3_nav .gNav-sub > li.category-area a:hover, .gNav.v3_nav .gNav-sub > li.category-area a:active, .gNav.v3_nav .gNav-sub > li.category-area a:focus { text-decoration: none; background: #e6e6e6; color: #333; } .gNav.v3_nav .gNav-sub > li.category-area a .v3_icon::after { content: ""; background: url(https://www.nipponsteel.com/product/images_v2/com_ic09.png) no-repeat 0 50%; display: inline-block; width: 10px; height: 15px; } .gNav.v3_nav .gNav-sub > li.category-area a:hover .v3_icon::after { background: url(https://www.nipponsteel.com/product/images_v2/blank_icon.png) no-repeat -4px 50%; width: 18px; } @media screen and (max-width: 767px) { .gNav.v3_nav > li{ letter-spacing: -.2px; } .gNav.v3_nav .gNav-sub { padding: 0; width: auto; } .gNav.v3_nav .gNav-sub > li.category-area { width: 100%; border-bottom: 1px solid #fff; border-top:none; padding: 0; margin: 0; font-size: 14px; font-weight: normal; background:#2ca6e0; } .gNav.v3_nav .gNav-sub > li.category-area a { display: block; padding: 4px 6px 2px 16px; } .gNav.v3_nav .gNav-sub > li.category-area:nth-child(-n+3) { border-top: none; } .gNav.v3_nav .gNav-sub > li.category-area:first-child { border-top: 1px solid #fff; } .gNav.v3_nav .gNav-sub > li.category-area:nth-child(9), .gNav.v3_nav .gNav-sub > li.category-area.v3_border-none { border-bottom: none; } .gNav.v3_nav .gNav-sub > li.category-area a::before, .gNav.v3_nav .gNav-sub > li.category-area a:hover:before { background: transparent; } .gNav.v3_nav .gNav-sub > li.category-area a::before, .gNav.v3_nav .gNav-sub > li.category-area a:hover:before{ border: none; } .gNav.v3_nav .gNav-sub > li.category-area a::after, .gNav.v3_nav .gNav-sub > li.category-area a:hover:after{ left: auto; right:20px; border-top: 3px solid #fff; border-right: 3px solid #fff; border-left:none; border-bottom:none; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .gNav.v3_nav .gNav-sub > li.category-area.sp-arrow-none a::after{ border: none; } .gNav.v3_nav .gNav-sub > li.category-area a:hover, .gNav.v3_nav .gNav-sub > li.category-area a:active, .gNav.v3_nav .gNav-sub > li.category-area a:focus { text-decoration: none; background: #2ca6e0; color: #fff; } .gNav.v3_nav .gNav-sub > li.category-area a .v3_icon, .gNav.v3_nav .gNav-sub > li.category-area a:hover .v3_icon{ display:block; } .gNav.v3_nav .gNav-sub > li.category-area .v3_icon { position: relative; } .gNav.v3_nav .gNav-sub > li.category-area a .v3_icon::after, .gNav.v3_nav .gNav-sub > li.category-area a:hover .v3_icon::after { position: absolute; background: url(https://www.nipponsteel.com/product/images_v2/com_ic09.png) no-repeat 0 50%; width: 10px; right:12px; top:50%; margin: -9px 0 0; } } /* banner-area ---------------------------------------------------------------------------- */ .gNav.v3_nav .gNav-sub > li.banner-area { width: calc(20% - 14px); list-style: none; box-sizing: border-box; margin: 30px 12px 0 0; vertical-align: top; } .gNav.v3_nav .gNav-sub > li.banner-area a { padding: 0; } .gNav.v3_nav .gNav-sub > li.banner-area a .txt { font-size: 12px; display: inline-block; padding: 6px 0 0; line-height: 1.5; } .gNav.v3_nav .gNav-sub > li.banner-area a:hover .txt { text-decoration: underline; } .gNav.v3_nav .gNav-sub > li.banner-area a:hover .txt sup { display: ruby; } .gNav.v3_nav .gNav-sub > li.banner-area:last-child { margin-right: 0; } .gNav.v3_nav .navbar-nav { text-align: center; } @media screen and (max-width: 767px) { .gNav.v3_nav .gNav-sub > li.banner-area a:hover, .gNav.v3_nav .gNav-sub > li.banner-area a:active { text-decoration: none; } .gNav.v3_nav .gNav-sub > li.banner-area { width: calc((100% - 20vw) / 2); background: #e6e6e6; margin: 0; border-top: none; padding: 20px 0 0 0; } .gNav.v3_nav .gNav-sub > li.banner-area:nth-child(even) { margin-right: 3vw; margin-left: 6.5vw; } .gNav.v3_nav .gNav-sub > li.banner-area:nth-child(odd) { margin-right: 6vw; margin-left: 3vw; } .gNav.v3_nav .gNav-sub > li.banner-area:last-child { padding-bottom: 20px; } .gNav.v3_nav .gNav-sub > li.banner-area a { line-height: 1.6; padding:0; } .gNav.v3_nav .gNav-sub > li.banner-area a img { vertical-align: bottom; width:100%; } .gNav.v3_nav .gNav-sub > li.banner-area a .txt { line-height: 1.2; font-size:11px; display: block; background: #fff; color: #000; text-align:center; padding: 4px 5px; } } /* has-category-top 新日鉄住金と創る世界 ---------------------------------------------------------------------------- */ @media screen and (min-width: 768px){ .gNav.v3_nav > li.has-sub:hover .gNav-sub.has-category-top{ display: block; } } .gNav-sub.has-category-top > .category-top > a{ display: block; color: #fff; text-decoration: none; text-align: center; } .gNav-sub.has-category-top > .category-top > a:hover{ text-decoration: underline; } .gNav-sub.has-category-top > .category-top > a > .txt-category-top{ background-color: #505050; padding: 10px; font-size: 16px; font-weight: bold; } .gNav-sub.has-category-top .category-top{ width: 200px; display: inline-block; } .gNav-sub.has-category-top .category-area-underlayer{ list-style: none; display: -webkit-inline-flex; display: inline-flex; -webkit-flex-flow: wrap; flex-flow: wrap; margin-left: 30px; vertical-align: top; width: calc(100% - 246px); } .gNav-sub.has-category-top .category-area-underlayer > .category-area { width: calc(50% - 8px); border-bottom: 1px solid #7d7d7d; margin: 0 16px 0 0; font-size: 16px; font-weight: bold; position: relative; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 100%; color: #fff; text-decoration: none; } .gNav-sub.has-category-top .category-area-underlayer > .category-area:nth-child(2n) { margin-right: 0; } .gNav-sub.has-category-top .category-area-underlayer > .category-area:nth-child(-n+2) { border-top: 1px solid #7d7d7d; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a::before{ position: absolute; left: 6px; top: 50%; content: ""; display: inline-block; width: 16px; height: 16px; -webkit-border-radius: 50%; border-radius: 50%; background: #e6e6e6; border: 1px solid #e6e6e6; margin: -8px 0 0; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a::after{ position: absolute; left: 12px; top: 50%; content: ""; display: inline-block; box-sizing: border-box; border: 4px solid transparent; border-left: 5px solid #060606; margin: -4px 0 0; width: 8px; height: 8px; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover:before { background: #000; border: 1px solid #000; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover:after{ border: 4px solid transparent; border-left: 5px solid #e9e9e9; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a { padding: 18px 10px 18px 34px; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:active, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:focus { text-decoration: none; background: #e6e6e6; color: #333; } @media screen and (max-width: 767px) { .gNav-sub.has-category-top > .category-top { display: block; } .gNav-sub.has-category-top > .category-top > a .img-category-top{ display: none; } .gNav-sub.has-category-top > .category-top > a > .txt-category-top{ background: none; font-size: 14px; font-weight: normal; text-align: left; padding: 0; } .gNav-sub.has-category-top .category-area-underlayer{ margin: 0; width: 100%; } .gNav-sub.has-category-top .category-area-underlayer > .category-area, .gNav-sub.has-category-top > .category-top{ width: 100%; border-bottom: 1px solid #fff; border-top:none; padding: 0; margin: 0; font-size: 14px; font-weight: normal; background:#2ca6e0; } .gNav-sub.has-category-top > .category-top{ border-bottom: none; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a, .gNav-sub.has-category-top > .category-top > a{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 46px; padding: 4px 6px 2px 16px; } .gNav-sub.has-category-top > .category-top > a{ position: relative; } .gNav-sub.has-category-top .category-area-underlayer > .category-area:nth-child(-n+2) { border-top: none; } .gNav-sub.has-category-top .category-area-underlayer > .category-area:first-child { border-top: 1px solid #fff; } .gNav-sub.has-category-top .category-area-underlayer > .category-area:nth-child(4){ border-bottom: none; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a::before, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover:before{ background: transparent; border: none; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a::after, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover:after, .gNav-sub.has-category-top > .category-top > a::after, .gNav-sub.has-category-top > .category-top > a:hover:after{ left: auto; right:20px; border-top: 3px solid #fff; border-right: 3px solid #fff; border-left:none; border-bottom:none; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .gNav-sub.has-category-top > .category-top > a::after, .gNav-sub.has-category-top > .category-top > a:hover:after{ position: absolute; top: 50%; content: ""; display: inline-block; box-sizing: border-box; margin: -4px 0 0; width: 8px; height: 8px; } .gNav-sub.has-category-top .category-area-underlayer > .category-area a:hover, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:active, .gNav-sub.has-category-top .category-area-underlayer > .category-area a:focus, .gNav-sub.has-category-top > .category-top > a:hover, .gNav-sub.has-category-top > .category-top > a:active, .gNav-sub.has-category-top > .category-top > a:focus{ text-decoration: none; background: #2ca6e0; color: #fff; } }