@charset "UTF-8"; /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ /* Document ========================================================================== */ html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { outline-width: 0; } /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* ============================================================================ * Elements * ========================================================================= */ body { padding: 0; line-height: 1; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Verdana", "Osaka", sans-serif; color: #000000; background: #ffffff; } sup { position: static; vertical-align: 0.5em; } /* ============================================================================ * Header * ========================================================================= */ .header-main-wrapper { border-bottom: 2.5px solid #eeeeee; } .header-main { margin: 0 auto; display: table; width: 100%; max-width: 1000px; } .header-logo { padding: 10px 15px; display: table-cell; width: 100%; vertical-align: middle; } .header-logo-pc { display: none; } .header-logo-pc-item-wrapper { margin: 0; } .header-logo-pc-item { display: inline-block; } .header-logo-pc-item:hover, .header-logo-pc-item:focus { opacity: 0.7; } .header-logo-pc-item-img { vertical-align: middle; } .header-logo-sp { display: block; } .header-logo-sp-item-wrapper { margin: 0; } .header-logo-sp-item { display: inline-block; } .header-logo-sp-item:hover, .header-logo-sp-item:focus { opacity: 0.7; } .header-logo-sp-item-img { vertical-align: middle; } .header-main-nav-wrapper { display: none; vertical-align: middle; } .header-main-nav { margin: 0; padding: 0; display: table; width: 100%; } .header-main-nav > * { padding: 0 0 0 6px; display: table-cell; font-size: 14px; text-align: center; vertical-align: middle; } .header-main-nav > *:first-child { padding: 0; } .header-main-nav > * > a { display: block; color: #000000; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } .header-main-nav > * > a:hover, .header-main-nav > * > a:focus { opacity: 0.7; } .header-main-nav-corporate-item { padding: 10px 14px 10px 38px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-corporate-01.png") 9px center no-repeat #ffffff; } .header-main-nav-english-item { padding: 10px 14px 10px 38px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-language-01.png") 9px center no-repeat #ffffff; } .header-main-nav-inquiry-item { padding: 10px 11px 10px 37px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-inquiry-01.png") 8px center no-repeat #ffffff; } .header-main-nav-search { padding: 0 0 0 30px; width: 176px; } .header-main-nav-search-form { display: table; table-layout: fixed; } .header-main-nav-search-text-wrapper { margin: 0; display: table-cell; width: 142px; vertical-align: middle; } .header-main-nav-search-text { padding: 0 7px !important; /* Google カスタム検索自動スタイル対策 */ border: 0 !important; /* Google カスタム検索自動スタイル対策 */ width: 142px; height: 31px; background: #e0e9f0 !important; /* Google カスタム検索自動スタイル対策 */ color: #000000; font-size: 14px; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Verdana", "Osaka", sans-serif; text-indent: 0 !important; /* Google カスタム検索自動スタイル対策 */ vertical-align: middle; box-sizing: border-box; } .header-main-nav-search-button-wrapper { margin: 0; display: table-cell; width: 34px; vertical-align: middle; } .header-main-nav-search-button { padding: 0; border: 0; width: 34px; height: 31px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-search-01.png") center center no-repeat #005cac; color: #ffffff; vertical-align: middle; overflow: hidden; text-indent: 100%; white-space: nowrap; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .header-main-button-wrapper { display: table-cell; width: 45px; height: 45px; } .header-main-button { padding: 0; border: 0; width: 45px; height: 45px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-menu-open-01.png") center center no-repeat #005cac; background-size: 45px 45px; color: #ffffff; vertical-align: middle; overflow: hidden; text-indent: 100%; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .header-main-button.is-open { background-image: url("https://www.nipponsteel.com/en/steelinc/images/icon-menu-close-01.png"); } .header-sub-wrapper { padding: 10px 10px 14px 10px; display: none; position: absolute; z-index: 100; width: 100%; background: #f5f5f5; box-sizing: border-box; } .header-sub-wrapper.is-open { display: block; } :root:not([data-script-enabled="true"]) .header-sub-wrapper { display: block; position: static; width: auto; } .header-sub { margin: 0 auto; } .header-nav-wrapper { position: relative; } .header-nav { margin: 0; padding: 0; list-style-type: none; } .header-nav-item-wrapper { margin: 0 0 2px 0; } .header-nav-item-wrapper:last-child { margin: 0; } .header-nav-item { padding: 12px 38.5px 10px 14px; display: block; position: relative; line-height: 1.75; background: #ffffff; color: #666666; text-decoration: none; } .header-nav-item:after { content: ""; display: block; width: 8.5px; height: 15px; position: absolute; top: 50%; right: 18px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-menu-arrow-01.png") center center no-repeat; background-size: 8.5px 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .has-sub .header-nav-item:after { -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .header-nav-item.is-open:after { -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } .header-nav-item-br { display: none; } .header-nav-sub-wrapper { display: none; } .header-nav-sub-wrapper.is-open { display: block; } :root:not([data-script-enabled="true"]) .header-nav-sub-wrapper { display: block; } .header-nav-sub { margin: 0; padding: 0; list-style-type: none; } .header-nav-sub-inner { margin: 0; padding: 0; list-style-type: none; } .header-nav-sub-item-wrapper { margin: 0 0 2px 0; } .header-nav-sub-item-wrapper:first-child { margin: 2px 0; } .header-nav-sub-item-wrapper:last-child { margin: 0; } .header-nav-sub-item { padding: 11px 37.5px 9px 13px; display: block; border: 1px solid #cccccc; line-height: 1.75; position: relative; background: #e6e6e6; color: #666666; text-decoration: none; } .header-nav-sub-item:after { content: ""; display: block; width: 8.5px; height: 15px; position: absolute; top: 50%; right: 17px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-menu-arrow-01.png") center center no-repeat; background-size: 8.5px 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .header-nav-sub-close-button-wrapper { display: none; } .header-nav-sub-close-button { margin: 0; padding: 0; display: inline-block; border: 0; width: 40px; height: 40px; overflow: hidden; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-menu-close-02.png") center center no-repeat; text-indent: 100%; white-space: nowrap; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .header-sub-nav-search { padding: 18px 9px 0 9px; } .header-sub-nav-search-form { margin: 0; display: table; border-bottom: 1px solid #9b9b9b; width: 100%; } .header-sub-nav-search-text-wrapper { margin: 0; display: table-cell; vertical-align: middle; } .header-sub-nav-search-text { padding: 0 7px !important; /* Google カスタム検索自動スタイル対策 */ border: 0 !important; /* Google カスタム検索自動スタイル対策 */ width: 100%; height: 29px; background: transparent !important; /* Google カスタム検索自動スタイル対策 */ color: #000000; font-size: 14px; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "Verdana", "Osaka", sans-serif; text-indent: 0 !important; /* Google カスタム検索自動スタイル対策 */ vertical-align: middle; box-sizing: border-box; } .header-sub-nav-search-button-wrapper { margin: 0; display: table-cell; vertical-align: middle; } .header-sub-nav-search-button { padding: 0; border: 0; width: 20px; height: 29px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-search-02.png") center 0 no-repeat; background-size: 20px 20px; color: #000000; vertical-align: middle; overflow: hidden; text-indent: 100%; box-sizing: border-box; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .header-sub-nav-wrapper { padding: 0 9px; } .header-sub-nav { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 19px 0 0 0; padding: 0; } .header-sub-nav-item-wrapper { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; font-size: 14px; text-align: center; } .header-sub-nav-item-wrapper:first-child { text-align: left; } .header-sub-nav-item-wrapper:last-child { text-align: right; } .header-sub-nav-item { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; align-items: center; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; color: #666666; text-decoration: none; } .header-sub-nav-item-inner { -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; display: block; } /* ============================================================================ * Footer * ========================================================================= */ .footer-page-top-wrapper { margin: 0; height: 55px; text-align: right; } .footer-page-top-inner { position: relative; top: 50px; width: 100%; } .footer-page-top-inner:before { content: ""; border-top: 1px solid #ffffff; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #005cac; } .footer-page-top-content { margin: 0 auto; padding: 0 0 5px 0; height: 0; line-height: 1; } .footer-page-top { padding: 28px 0 0 0; border-width: 1px 0 0 1px; border-style: solid; border-color: #ffffff; display: inline-block; position: relative; top: -50px; width: 50px; height: 22px; background: #005cac; color: #ffffff; font-size: 11px; text-align: center; text-decoration: none; } .footer-page-top:before { content: ""; border-width: 1px 0 0 1px; border-style: solid; border-color: #ffffff; display: block; position: absolute; top: 15px; left: 50%; width: 10px; height: 10px; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); } .footer-page-top-fixed { position: fixed; left: 0; top: auto; bottom: 0; z-index: 50; } .footer-main-wrapper { background: #ebebeb; } .footer-logo { padding: 20px 15px; text-align: center; } .footer-logo-pc { display: none; } .footer-logo-pc-item-wrapper { margin: 0; } .footer-logo-pc-item { display: inline-block; } .footer-logo-pc-item:hover, .footer-logo-pc-item:focus { opacity: 0.7; } .footer-logo-pc-item-img { vertical-align: middle; } .footer-logo-sp { display: block; } .footer-logo-sp-item-wrapper { margin: 0; } .footer-logo-sp-item { display: inline-block; } .footer-logo-sp-item:hover, .footer-logo-sp-item:focus { opacity: 0.7; } .footer-logo-sp-item-img { vertical-align: middle; } .footer-main-nav { margin: 0 auto; padding: 0; display: table; list-style-type: none; } .footer-main-nav-item-wrapper { padding: 0 0 0 30px; display: table-cell; vertical-align: middle; white-space: nowrap; } .footer-main-nav-item-wrapper:first-child { padding: 0; } .footer-main-nav-item { padding: 0 0 0 12px; display: block; position: relative; color: #666666; font-size: 12px; text-decoration: none; } .footer-main-nav-item:before { content: ""; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666666; position: absolute; top: 50%; left: 0; width: 5px; height: 5px; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .footer-copyright-wrapper { padding: 15px 0 15px 0; } .footer-copyright { margin: 0; line-height: 1.75; font-size: 10px; text-align: center; } .footer-copyright-br { display: inline; } /* ============================================================================ * Main * ========================================================================= */ .main-breadcrumb-wrapper { background: #eeeeee; font-size: 10px; } .main-breadcrumb { margin: 0 auto; padding: 9px 15px; max-width: 1000px; list-style-type: none; } .main-breadcrumb:after { content: ""; display: table; clear: left; } .main-breadcrumb-item-wrapper { float: left; } .main-breadcrumb-item-wrapper:after { content: ">"; padding: 0 5px; display: inline-block; vertical-align: middle; } .main-breadcrumb-item-wrapper:last-child:after { display: none; } .main .main-breadcrumb-item, .main .main-breadcrumb-item:link, .main .main-breadcrumb-item:visited, .main .main-breadcrumb-item:hover, .main .main-breadcrumb-item:focus, .main .main-breadcrumb-item:active { color: #000000; text-decoration: underline; } .main-wrapper { margin: 0 auto 50px auto; padding: 0 15px; max-width: 1000px; } .main-wrapper-02 { background: #f5f5f5; } .main-wrapper-02-inner { margin: 0 auto 50px auto; padding: 25px 15px; max-width: 1000px; } .main-heading-01-wrapper { margin: 0 0 23px 0; padding: 0 15px; background: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-01.png") center center no-repeat #002a4d; background-size: cover; } .main-heading-01 { margin: 0 auto; padding: 40px 0 37px 0; max-width: 1000px; line-height: 1.75; color: #ffffff; font-size: 23px; font-weight: normal; text-shadow: 0 2px 5px #000000; } .main-heading-01-with-read-wrapper { margin: 0 0 23px 0; padding: 0 15px; background-position: center center; background-repeat: no-repeat; background-color: #002a4d; background-size: cover; } .main-heading-01-with-read { margin: 0 auto; padding: 25px 0; max-width: 1000px; } .main-heading-01-read { margin: 0 0 2px 0; } .main-heading-01-read-inner { border: 5px solid #005cac; display: table; background: #ffffff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.75); } .main .main-heading-01-read-content { margin: 0; padding: 6px 10px 1px 10px; display: table-cell; line-height: 1.25; color: #00325d; font-weight: bold; text-align: center; vertical-align: middle; } .main-heading-01-read-content-first { display: table-cell; font-size: 10px; } .main-heading-01-read-content-last { display: table-cell; font-size: 16px; } .main-heading-01-read-content-last-large { display: table-cell; font-size: 16px; } .main-heading-01-item { margin: 0; padding: 0; line-height: 1.75; color: #ffffff; font-size: 23px; font-weight: normal; text-shadow: 0 2px 5px #000000; } .main-heading-delivery { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-delivery-01.png"); } .main-heading-proposal { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-proposal-01.png"); } .main-heading-technology { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-technology-01.png"); } .main-heading-quality { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-quality-01.png"); } .main-heading-scene { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-heading-scene-01.png"); } .main-heading-02-normal { margin: 40px 0 18px 0; padding: 0 0 0 28px; border-bottom: 1px solid #d9d9d9; line-height: 1.75; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-heading-02-normal-sp.png") 0 2px no-repeat; background-size: 19px 22px; color: #005cac; font-size: 18px; font-weight: bold; } .main-heading-02-normal:first-of-type { margin: 0 0 18px 0; } .main-heading-02 { margin: 0 0 17px 0; border-bottom: 1px solid #d9d9d9; line-height: 1.75; font-size: 17px; font-weight: bold; } .main-heading-03 { margin: 0 0 15px 0; padding: 0 0 0 10px; border-left: 2px solid #005cac; line-height: 1.75; font-size: 15px; font-weight: bold; } .main-heading-04 { margin: 0 0 13px 0; line-height: 1.75; font-size: 13px; font-weight: bold; } .main-heading-04-inner { display: inline-block; border-bottom: 1px solid #d9d9d9; } .main em { font-weight: bold; font-style: normal; } .main strong { color: #005cac; font-weight: bold; font-style: normal; } .main .main-text-emergency { color: #e30000; font-weight: normal; font-style: normal; } .main p { margin: 0 0 13px 0; line-height: 1.75; font-size: 13px; } .main p:last-child { margin: 0; } .main-product-error-01 { display: none; } .main a { color: #005cac; } .main a:hover, .main a:focus, .main a:active { color: #4c8dc5; text-decoration: none; } .main a[target="_blank"]:after { content: ""; margin: 0 0 0 4px; display: inline-block; width: 15px; height: 15px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-anchor-window-01.png") center center no-repeat; vertical-align: middle; text-decoration: none; } .main a[href$=".pdf"]:after { content: ""; margin: 0 0 0 4px; display: inline-block; width: 15px; height: 15px; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-anchor-pdf-01.png") center center no-repeat; vertical-align: middle; text-decoration: none; } .main-column-2 { margin: 0 0 13px 0; } .main-column-2 > .column { margin: 0 0 13px 0; } .main-column-2 > .column:last-child { margin: 0; } .main-column-3 { margin: 0 0 13px 0; } .main-column-3 > .column { margin: 0 0 13px 0; } .main-column-3 > .column:last-child { margin: 0; } .main-column-4 { margin: 0 0 13px 0; } .main-column-4 > .column { margin: 0 0 13px 0; } .main-column-4 > .column:last-child { margin: 0; } .main-img-01 { vertical-align: middle; max-width: 100%; } .main-figure-01 { margin: 0 0 13px 0; } .main-figure-01:last-child { margin: 0; } .main-figure-01 > figcaption { line-height: 1.75; font-size: 14px; } .main-figure-01 > img { margin: 0 auto; display: block; } .main-figure-02 { margin: 0 0 13px 0; } .main-figure-02:last-child { margin: 0; } .main-figure-02 > figcaption { line-height: 1.75; font-size: 14px; text-align: center; } .main-figure-02 > img { margin: 0 auto; display: block; max-width: 100%; } .main-list-01 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-01:last-child { margin: 0; } .main-list-01 > li { margin: 0; padding: 0 0 0 14px; position: relative; line-height: 1.75; font-size: 13px; } .main-list-01 > li:last-child { margin: 0; } .main-list-01 > li:before { content: ""; display: block; position: absolute; top: 9px; left: 2px; width: 4px; height: 4px; background: #005bac; } .main-list-02 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-02:last-child { margin: 0; } .main-list-02 > li { margin: 0; padding: 0 0 0 14px; position: relative; line-height: 1.75; font-size: 13px; } .main-list-02 > li:last-child { margin: 0; } .main-list-02 > li:before { content: ""; display: block; position: absolute; top: 9px; left: 4px; width: 3px; height: 3px; background: #005bac; border-radius: 50%; } .main-list-02-inline { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-02-inline:after { content: ""; display: table; clear: left; } .main-list-02-inline:last-child { margin: 0; } .main-list-02-inline > li { margin: 0 13px 0 0; padding: 0 0 0 14px; position: relative; float: left; line-height: 1.75; font-size: 13px; } .main-list-02-inline > li:last-child { margin: 0; } .main-list-02-inline > li:before { content: ""; display: block; position: absolute; top: 9px; left: 4px; width: 3px; height: 3px; background: #005bac; border-radius: 50%; } .main-list-03 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-03:last-child { margin: 0; } .main-list-03 > li { margin: 0; padding: 0 0 0 14px; position: relative; line-height: 1.75; font-size: 13px; } .main-list-03 > li:last-child { margin: 0; } .main-list-03 > li:before { content: ""; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #005bac; position: absolute; top: 9px; left: 5px; width: 4px; height: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main-list-03-inline { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-03-inline:after { content: ""; display: table; clear: left; } .main-list-03-inline:last-child { margin: 0; } .main-list-03-inline > li { margin: 0 13px 0 0; padding: 0 14px 0 0; position: relative; float: left; line-height: 1.75; font-size: 13px; } .main-list-03-inline > li:last-child { margin: 0; } .main-list-03-inline > li:after { content: ""; display: block; border-width: 0 2px 2px 0; border-style: solid; border-color: #005bac; position: absolute; top: 9px; right: 0; width: 4px; height: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main-list-03-right { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-03-right:last-child { margin: 0; } .main-list-03-right > li { margin: 0; padding: 0; line-height: 1.75; font-size: 13px; text-align: right; } .main-list-03-right > li:last-child { margin: 0; } .main-list-03-right > li > .main-list-03-right-item { padding: 0 0 0 14px; display: inline-block; position: relative; } .main-list-03-right > li > .main-list-03-right-item:before { content: ""; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #005bac; position: absolute; top: 9px; left: 5px; width: 4px; height: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main-list-04 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-04:last-child { margin: 0; } .main-list-04 > li { margin: 0; padding: 0 0 0 14px; position: relative; line-height: 1.75; color: #555555; font-size: 12px; } .main-list-04 > li:last-child { margin: 0; } .main-list-04 > li:before { content: "※"; display: block; position: absolute; top: 0; left: 0; } .main-list-05 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-05:last-child { margin: 0; } .main-list-05 > li { margin: 0; padding: 0 0 0 32px; position: relative; line-height: 1.75; color: #555555; font-size: 12px; } .main-list-05 > li:last-child { margin: 0; } .main-list-05 > li > .number { display: block; position: absolute; top: 0; left: 0; } .main-list-06 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-06:last-child { margin: 0; } .main-list-06 > li { margin: 0; padding: 0 0 0 26px; position: relative; line-height: 1.75; font-size: 13px; font-weight: bold; } .main-list-06 > li:last-child { margin: 0; } .main-list-06 > li > .number { display: block; border: 1px solid #005bac; position: absolute; top: 3px; left: 0; width: 16px; height: 16px; line-height: 16px; color: #005bac; font-size: 9px; text-align: center; border-radius: 50%; box-sizing: border-box; } .main-list-07 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-07:last-child { margin: 0; } .main-list-07 > li { margin: 0 0 6px 0; padding: 0 0 0 20px; position: relative; line-height: 1.75; font-size: 13px; } .main-list-07 > li:last-child { margin: 0; } .main-list-07 > li > .number { display: block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; line-height: 16px; color: #ffffff; font-size: 9px; text-align: center; background: #00cc9e; } .main-list-08 { margin: 0 0 13px 0; padding: 0; list-style-type: none; } .main-list-08:last-child { margin: 0; } .main-list-08 > li { margin: 0; padding: 0 0 0 16px; position: relative; line-height: 1.75; font-size: 13px; } .main-list-08 > li:last-child { margin: 0; } .main-list-08 > li:before { content: ""; display: block; border-width: 6px 0 6px 11px; border-style: solid; border-color: transparent transparent transparent #0057a7; position: absolute; top: 5px; left: 0; width: 0; height: 0; } .main-list-09 { margin: 0 0 13px 0; padding: 10px; list-style-type: none; background: #0057a7; } .main-list-09:last-child { margin: 0; } .main-list-09 > li { margin: 0 0 10px 0; padding: 16px 9px 5px 9px; position: relative; line-height: 1.75; background: #ffffff; font-size: 13px; } .main-list-09 > li:last-child { margin: 0; } .main-list-09 > li > .number { margin: 0 auto 9px auto; display: block; width: 30px; height: 30px; line-height: 30px; color: #ffffff; font-size: 17px; font-weight: bold; text-align: center; background: #0057a7; } .main-list-09 > li > p { margin: 0 0 0 0; font-weight: bold; } .main-list-09 > li > p > em { color: #0057a7; font-size: 20px; } .main-list-09 > li > p > em > sup { font-size: 13px; font-weight: normal; } .main-list-and-description-01 { margin: 0 0 13px 0; } .main-list-and-description-01:last-child { margin: 0; } .main-list-and-description-01 > .title-wrapper > .title { margin: 0; font-weight: bold; } .main-list-and-description-01 > .item-wrapper { margin: 0; padding: 0; list-style-type: none; } .main-list-and-description-01 > .item-wrapper > .item { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; align-items: center; margin: 0 0 6px 0; padding: 0 0 0 20px; position: relative; width: 100%; line-height: 1.75; font-size: 13px; box-sizing: border-box; } .main-list-and-description-01 > .item-wrapper > .item:last-child { margin: 0; } .main-list-and-description-01 > .item-wrapper > .item > .item-number { display: block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; line-height: 16px; color: #ffffff; font-size: 9px; text-align: center; background: #005cac; } .main-list-and-description-01 > .item-wrapper > .item > .item-title { -ms-flex-order: 0; order: 0; -ms-flex: 0 1 100%; flex: 0 1 100%; padding: 0; display: block; } .main-list-and-description-01 > .item-wrapper > .item > .item-line { -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; display: block; position: relative; } .main-list-and-description-01 > .item-wrapper > .item > .item-line:before { content: ""; display: block; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background: #dddddd; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .main-list-and-description-01 > .item-wrapper > .item > .item-description { -ms-flex-order: 0; order: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 0 0 0 7px; display: block; } .main-list-and-description-02 { margin: 0 0 13px 0; } .main-list-and-description-02:last-child { margin: 0; } .main-list-and-description-02 > .content-wrapper { margin: 0 0 13px 0; } .main-list-and-description-02 > .content-wrapper:last-child { margin: 0; } .main-list-and-description-02 > .content-wrapper > .content > .title-wrapper > .title { margin: 0; font-weight: bold; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper { margin: 0; padding: 0; list-style-type: none; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item { margin: 0 0 6px 0; padding: 0 0 0 20px; display: table; position: relative; width: 100%; line-height: 1.75; font-size: 13px; box-sizing: border-box; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item:last-child { margin: 0; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item > .item-number { display: block; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; line-height: 16px; color: #ffffff; font-size: 9px; text-align: center; background: #00a2de; border-radius: 50%; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item > .item-title { display: table-cell; width: 40%; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item > .item-description { display: table-cell; } .main-list-and-description-03 { margin: 0 0 13px 0; } .main-list-and-description-03:last-child { margin: 0; } .main-list-and-description-03 > .item-wrapper { margin: 0; padding: 0; list-style-type: none; } .main-list-and-description-03 > .item-wrapper > .item { padding: 10px 0; border-top: 1px solid #dadada; width: 100%; line-height: 1.75; font-size: 13px; } .main-list-and-description-03 > .item-wrapper > .item:last-child { border-bottom: 1px solid #dadada; } .main-list-and-description-03 > .item-wrapper > .item > .item-title { padding: 0; display: block; width: 200px; } .main-list-and-description-03 > .item-wrapper > .item > .item-description { padding: 0; display: block; } .main-product-list-01 { margin: 0; padding: 0; list-style-type: none; } .main-product-list-01 > .item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0 0 20px 0; background: #ffffff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); } .main-product-list-01 > .item > .header { -ms-flex-order: 0; order: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; padding: 15px 20px; background: #005cac; } .main-product-list-01 > .item > .header > .tags { margin: 0 0 11px 0; text-align: center; } .main-product-list-01 > .item > .header > .tags > .tag { padding: 0 1em; display: inline-block; background: #ffffff; color: #005cac; font-size: 12px; text-align: center; border-radius: 1.75em; } .main-product-list-01 > .item > .header > .title { color: #ffffff; font-size: 18px; font-weight: bold; } .main-product-list-01 > .item > .main { -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 15px 25px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #005cac; } .main-product-list-01 > .item > .main > .tags > .tag-omission { padding: 7px 0 6px 0; display: inline-block; min-width: 120px; line-height: 1.16667; background: #218bce; color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border-radius: 2.33333em; } .main-product-list-01 > .item > .main > .tags > .tag-strength { padding: 7px 0 6px 0; display: inline-block; min-width: 120px; line-height: 1.16667; background: #ff9500; color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border-radius: 2.33333em; } .main-product-list-01 > .item > .main > .tags > .tag-environment { padding: 7px 0 6px 0; display: inline-block; min-width: 120px; line-height: 1.16667; background: #00b68d; color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; border-radius: 2.33333em; } .main-product-list-01 > .item > .main > .list { margin: 0; padding: 0; list-style-type: none; } .main-product-list-01 > .item > .main > .list > li { margin: 0 0 9px 0; padding: 0 0 0 9px; line-height: 1.5; position: relative; font-size: 12px; } .main-product-list-01 > .item > .main > .list > li:before { content: ""; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 2px; background: #005cac; } .main-product-list-01 > .item > .main > .list > li:last-child { margin: 0; } .main-product-list-01 > .item > .main > .list > li > p { margin: 0 0 3px 0; line-height: 1.5; font-size: 12px; } .main-product-list-01 > .item > .main > .list > li > p:last-child { margin: 0; } .main-product-list-01 > .item > .main > .list > li > .list { margin: 0; padding: 0; list-style-type: none; } .main-product-list-01 > .item > .main > .list > li > .list > li { margin: 0 0 0 0; padding: 0 0 0 9px; line-height: 1.5; position: relative; font-size: 12px; } .main-product-list-01 > .item > .main > .list > li > .list > li:before { content: ""; display: block; position: absolute; top: 7px; left: 0; width: 2px; height: 2px; background: #005cac; } .main-product-list-01 > .item > .main > .list > li > .list > li:last-child { margin: 0; } .main-product-list-01 > .item > .main > .list > li > .list > li > p { margin: 0 0 3px 0; line-height: 1.5; font-size: 12px; } .main-product-list-01 > .item > .main > .list > li > .list > li > p:last-child { margin: 0; } .main-product-list-01 > .item > .footer { -ms-flex-order: 0; order: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; border-width: 0 1px 1px 1px; border-style: solid; border-color: #005cac; } .main-product-list-01 > .item > .footer > .link-wrapper { margin: 0; line-height: 1; font-size: 14px; } .main-product-list-01 > .item > .footer > .link-wrapper > .link { padding: 12px 14px; display: block; text-align: center; background: #00a2de; } .main-product-list-01 > .item > .footer > .link-wrapper > .link, .main-product-list-01 > .item > .footer > .link-wrapper > .link:link, .main-product-list-01 > .item > .footer > .link-wrapper > .link:visited, .main-product-list-01 > .item > .footer > .link-wrapper > .link:hover, .main-product-list-01 > .item > .footer > .link-wrapper > .link:focus, .main-product-list-01 > .item > .footer > .link-wrapper > .link:active { color: #ffffff; text-decoration: none; } .main-product-list-01 > .item > .footer > .link-wrapper > .link:hover, .main-product-list-01 > .item > .footer > .link-wrapper > .link:focus, .main-product-list-01 > .item > .footer > .link-wrapper > .link:active { opacity: 0.7; } .main-product-list-01 > .item > .footer > .link-wrapper > .link > .link-inner { padding: 0 0 0 14px; display: inline-block; position: relative; } .main-product-list-01 > .item > .footer > .link-wrapper > .link > .link-inner:before { content: ""; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #ffffff; width: 5px; height: 5px; position: absolute; top: 3px; left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .main .main-button-01 { margin: 0; padding: 7px 56px 7px 52px; display: inline-block; border: 1px solid #005cac; position: relative; line-height: 2; background: #005cac; font-size: 12px; text-align: center; vertical-align: middle; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .main .main-button-01, .main .main-button-01:link, .main .main-button-01:visited, .main .main-button-01:hover, .main .main-button-01:focus, .main .main-button-01:active { color: #ffffff; text-decoration: none; } .main .main-button-01:hover, .main .main-button-01:focus, .main .main-button-01:active { background: #d6eaf4; color: #005cac; } .main .main-button-01:after { content: ""; display: block; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; border-width: 1px 1px 0 0; border-style: solid; border-color: #ffffff; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main .main-button-01:hover:after, .main .main-button-01:focus:after, .main .main-button-01:active:after { border-color: #005cac; } .main .main-button-01-full { margin: 0; padding: 7px 26px 7px 7px; display: block; border: 1px solid #005cac; position: relative; line-height: 1.75; background: #005cac; font-size: 13px; text-align: center; vertical-align: middle; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .main .main-button-01-full, .main .main-button-01-full:link, .main .main-button-01-full:visited, .main .main-button-01-full:hover, .main .main-button-01-full:focus, .main .main-button-01-full:active { color: #ffffff; text-decoration: none; } .main .main-button-01-full:hover, .main .main-button-01-full:focus, .main .main-button-01-full:active { background: #d6eaf4; color: #005cac; } .main .main-button-01-full:after { content: ""; display: block; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; border-width: 1px 1px 0 0; border-style: solid; border-color: #ffffff; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main .main-button-01-full:hover:after, .main .main-button-01-full:focus:after, .main .main-button-01-full:active:after { border-color: #005cac; } .main .main-button-02 { margin: 0; padding: 0; display: table; width: 100%; height: 60px; position: relative; background: #00a2de; font-size: 14px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25); } .main .main-button-02, .main .main-button-02:link, .main .main-button-02:visited, .main .main-button-02:hover, .main .main-button-02:focus, .main .main-button-02:active { color: #ffffff; text-decoration: none; } .main .main-button-02:hover, .main .main-button-02:focus, .main .main-button-02:active { background: #4cbee8; box-shadow: none; } .main .main-button-02:after { content: ""; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #ffffff; width: 12px; height: 12px; position: absolute; top: 50%; right: 16px; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transform-origin: center -50%; transform-origin: center -50%; } .main .main-button-02-inner { padding: 0 29px 0 22px; display: table-cell; vertical-align: middle; } .main .main-button-02-em { font-size: 24px; } .main-button-03 { margin: 0 0 6px 0; display: inline-block; position: relative; } .main-button-03 > input[type="checkbox"] { position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main-button-03 > input[type="checkbox"]:checked + .main-button-03-inner { background: #555555; color: #ffffff; } .main-button-03 > input[type="checkbox"]:focus + .main-button-03-inner { outline: 1px dotted #000000; } .main-button-03 > .main-button-03-inner { padding: 5px 0; display: inline-block; border: 1px solid #555555; width: 140px; line-height: 1.75; background: #ffffff; color: #555555; font-size: 10px; text-align: center; border-radius: 3px; cursor: pointer; } .main-button-04 { margin: 0 0 12px 0; display: inline-block; position: relative; } .main-button-04 > input[type="checkbox"] { position: absolute; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .main-button-04 > input[type="checkbox"]:checked + .main-button-04-inner { background: #005cac; color: #ffffff; } .main-button-04 > input[type="checkbox"]:focus + .main-button-04-inner { outline: 1px dotted #000000; } .main-button-04 > .main-button-04-inner { padding: 9px ; /*display: inline-block;*/ border: 1px solid #005cac; width: 140px; line-height: 2; background: #ffffff; color: #005cac; font-size: 10px; text-align: center; border-radius: 3px; cursor: pointer; } .main-circle-01 { display: inline-block; width: 12px; height: 12px; border: 4px solid #005cac; overflow: hidden; text-indent: 100%; white-space: nowrap; border-radius: 50%; } .main-circle-02 { display: inline-block; width: 12px; height: 12px; border: 4px solid #555555; overflow: hidden; text-indent: 100%; white-space: nowrap; border-radius: 50%; } .main-table-list-01 { margin: 0 0 13px 0; width: 100%; border-spacing: 0; font-size: 13px; } .main-table-list-01:last-child { margin: 0; } .main-table-list-01 > tbody > tr:first-child > td { border-top: 0; } .main-table-list-01 > tbody > tr > td { padding: 16px 0; border-top: 1px dashed #dddddd; line-height: 1.75; vertical-align: middle; } .main-table-list-01 > tbody > tr > td:first-child { width: 145px; } .main-table-01-wrapper { margin: 0 0 13px 0; width: 100%; overflow: auto; } .main-table-01-wrapper:last-child { margin: 0; } .main-table-01 { margin: 0; width: 100%; table-layout: fixed; border-spacing: 0; } .main-table-01 > thead > tr > th { padding: 2px 0; border-width: 0 0 1px 1px; border-style: solid; border-color: #cccccc; line-height: 1.75; background: #00a2de; color: #ffffff; font-size: 13px; font-weight: bold; text-align: center; vertical-align: middle; box-sizing: border-box; } .main-table-01 > thead > tr > th:first-child { border-width: 0 0 1px 1px; width: 104px; } .main-table-01 > thead > tr > th:nth-child(2) { width: 104px; } .main-table-01 > thead > tr > th:nth-child(3) { width: 250px; } .main-table-01 > thead > tr > th:nth-child(4) { width: 182px; } .main-table-01 > thead > tr > th:nth-child(5) { width: 120px; } .main-table-01 > thead > tr > th:nth-child(6) { width: 120px; } .main-table-01 > thead > tr > th:nth-child(7) { width: 120px; } .main-table-01 > thead > tr > th:last-child { border-width: 0 1px 1px 1px; } .main-table-01 > tbody > tr > th { padding: 14px 7px; border-width: 0 0 1px 1px; border-style: solid; border-color: #cccccc; line-height: 1.75; background: #eeeeee; font-size: 13px; font-weight: normal; vertical-align: middle; box-sizing: border-box; } .main-table-01 > tbody > tr > th:first-child { border-width: 0 0 1px 1px; } .main-table-01 > tbody > tr > th:last-child { border-width: 0 1px 1px 1px; } .main-table-01 > tbody > tr > td { padding: 7px; border-width: 0 0 1px 1px; border-style: solid; border-color: #cccccc; line-height: 1.75; background: #ffffff; font-size: 13px; vertical-align: middle; box-sizing: border-box; } .main-table-01 > tbody > tr > td:last-child { border-width: 0 1px 1px 1px; } .main-table-01 > tbody > tr > td .main-list-02 { margin: 0; } .main-table-01 > tbody > tr > td .main-list-02 > li { line-height: 1.45; font-size: 12px; } .main-table-01 > tbody > tr > td .main-list-03 { margin: 0; } .main-table-01 > tbody > tr > td > p { margin: 0; font-size: 13px; } .main-table-01 .em-01 { background: #fff1e9; } .main-table-01 .em-02 { background: #e9fffa; } .main-table-01 .em-03 { background: #fffcea; } .main-table-01 .strong-01 { background: #ff5a00; color: #ffffff; } .main-table-01 .strong-02 { background: #00b78e; color: #ffffff; } .main-table-01 .strong-03 { background: #e8cc00; color: #ffffff; } .main-table-02 { margin: 0 0 13px 0; border-spacing: 0; } .main-table-02:last-child { margin: 0; } .main-table-02 > thead > tr > th { padding: 14px 7px; border-width: 0 0 2px 2px; border-style: solid; border-color: #ffffff; width: 220px; line-height: 1.75; background: #00a2de; color: #ffffff; font-size: 13px; font-weight: bold; text-align: center; vertical-align: middle; box-sizing: border-box; } .main-table-02 > thead > tr > th:first-child { border-width: 0 0 2px 0; } .main-table-02 > tbody > tr > td { padding: 14px 7px; border-width: 0 0 2px 2px; border-style: solid; border-color: #ffffff; line-height: 1.75; background: #e5f7ff; font-size: 13px; vertical-align: middle; box-sizing: border-box; } .main-table-02 > tbody > tr > td:first-child { border-width: 0 0 2px 0; } .main-table-02 > tbody > tr:last-child > td { border-width: 0 0 0 2px; } .main-table-02 > tbody > tr:last-child > td:first-child { border-width: 0; } .main-table-03-wrapper { margin: 0 0 13px 0; width: 100%; overflow: auto; } .main-table-03-wrapper:last-child { margin: 0; } .main-table-03 { margin: 0; border-top: 2px solid #555555; width: 1000px; table-layout: fixed; border-spacing: 0; } .main-table-03 > thead > tr > th { padding: 7px; border-width: 0 1px 1px 0; border-style: solid; border-color: #555555; line-height: 1.75; background: #eeeeee; font-size: 13px; font-weight: normal; vertical-align: middle; box-sizing: border-box; } .main-table-03 > thead > tr > th:first-child { border-width: 0 1px 1px 1px; } .main-table-03 > thead > tr > th.not-first-child { border-width: 0 1px 1px 0; } .main-table-03 > tbody > tr > th { padding: 7px; border-width: 0 1px 1px 0; border-style: solid; border-color: #555555; line-height: 1.75; background: #eeeeee; font-size: 13px; font-weight: normal; vertical-align: middle; box-sizing: border-box; } .main-table-03 > tbody > tr > th:first-child { border-width: 0 1px 1px 1px; } .main-table-03 > tbody > tr > th.not-first-child { border-width: 0 1px 1px 0; } .main-table-03 > tbody > tr > td { padding: 7px; border-width: 0 1px 1px 0; border-style: solid; border-color: #555555; line-height: 1.75; background: #ffffff; font-size: 13px; font-weight: normal; vertical-align: middle; box-sizing: border-box; } .main-table-03 > tbody > tr > td:first-child { border-width: 0 1px 1px 1px; } .main-table-03 > tbody > tr > td.not-first-child { border-width: 0 1px 1px 0; } .main-table-03 .em-01 { background: #e5f6fd; } .main-table-03 .em-02 { background: #fef2f2; } .main-table-03 .strong-01 { background: #f38272; color: #ffffff; } .main-table-03 .strong-02 { background: #0057a7; color: #ffffff; } .main-table-03 .empty { background: url("https://www.nipponsteel.com/en/steelinc/images/bg-empty-cell-01.png") 0 0 repeat #ffffff; } .main-box-01 { margin: 0 0 13px 0; padding: 8px; border: 2px solid #0057a7; } .main-box-01:last-child { margin: 0; } .main-box-01 > .main-column-3 { margin: 0 0 13px 0; } .main-box-01 > .main-column-3:last-child { margin: 0; } .main-box-01 > .main-column-3 p { margin: 0; } .main-box-01-heading-01 { margin: 0 0 15px 0; padding: 0 10px; line-height: 1.75; background: #0057a7; color: #ffffff; font-size: 15px; } .main-box-01-column-wrapper { margin: 0 0 13px 0; } .main-box-01-column > .main-list-08 { margin: 0; } .main-box-02 { margin: 0 0 13px 0; padding: 10px; position: relative; background: #0057a7; } .main-box-02:last-child { margin: 0; } .main-box-02-column-wrapper { margin: 10px 0 0 0; } .main-box-02-column-wrapper:first-child { margin: 0; } .main-box-02-column { background: #ffffff; } .main-box-02-column:last-child { padding: 14px 8px 4px 8px; } .main .main-box-02-name { margin: 0; padding: 7px 0 5px 0; position: relative; background: #ff5a00; color: #ffffff; font-size: 13px; font-weight: bold; text-align: center; } .main .main-box-02-name:before { content: ""; display: block; border-width: 13px 9px 0 9px; border-style: solid; border-color: #ff5a00 transparent transparent transparent; width: 0; height: 0; position: absolute; bottom: -13px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .main .main-box-02-value { margin: 0; padding: 14px 0 6px 0; background: #00a2de; color: #ffffff; font-size: 17px; font-weight: bold; text-align: center; } .main .main-box-02-description { font-weight: bold; } .main .main-box-02-description > em { color: #005cac; font-size: 20px; } .main-box-03 { margin: 0 0 13px 0; padding: 10px; border: 1px solid #555555; } .main-box-03:last-child { margin: 0; } .main .main-box-04 { margin: 0 0 15px 0; padding: 10px; line-height: 1.75; background: #0057a7; color: #ffffff; font-size: 15px; font-weight: bold; } .main-box-05 { padding: 10px; background: #d6eaf4; } .main-tab-01 { margin: 0 0 13px 0; } .main-tab-01:last-child { margin: 0; } .main-tab-01-tabs { margin: 0; padding: 0; list-style-type: none; } .main-tab-01-tab-wrapper { margin: 0 0 1px 0; line-height: 1.75; font-size: 13px; } .main-tab-01-tab-wrapper:last-child { margin: 0; } .main-tab-01-tab { padding: 10px 27px 10px 10px; display: block; position: relative; background: #dedede; } .main .main-tab-01-tab, .main .main-tab-01-tab:link, .main .main-tab-01-tab:visited, .main .main-tab-01-tab:hover, .main .main-tab-01-tab:focus, .main .main-tab-01-tab:active { color: #005cac; text-decoration: none; } .main .is-active > .main-tab-01-tab, .main .main-tab-01-tab.is-active, .main .main-tab-01-tab:hover, .main .main-tab-01-tab:focus, .main .main-tab-01-tab:active { background: #005cac; color: #ffffff; } .main-tab-01-tab:after { content: ""; border-width: 0 1px 1px 0; border-style: solid; border-color: #005cac; width: 4px; height: 4px; position: absolute; top: 50%; right: 11px; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .main .main-tab-01-tab:hover:after, .main .main-tab-01-tab:focus:after, .main .main-tab-01-tab:active:after { border-color: #ffffff; } .main-tab-01-tab.is-active:after { border-width: 1px 0 0 1px; border-color: #ffffff; } .main-tab-01-content { border-width: 0 1px 1px 1px; border-style: solid; border-color: #005cac; } .main-toggle-01 { margin: 0; } .main-toggle-01.is-open { margin: 0 0 13px 0; } .main-toggle-01-button { margin: 0 0 10px 0; position: relative; font-size: 14px; cursor: pointer; } .main-toggle-01-button:after { content: ""; display: block; border-width: 0 1px 1px 0; border-style: solid; border-color: #005cac; width: 8px; height: 8px; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .is-open .main-toggle-01-button:after { border-width: 1px 0 0 1px; } .main-toggle-01-content { display: none; } .is-open .main-toggle-01-content, :root:not([data-script-enabled="true"]) .main-toggle-01-content { display: block; } .main-text-center { text-align: center; } .main-text-right { text-align: right; } .main-mb-0 { margin-bottom: 0 !important; } .main-mb-5 { margin-bottom: 5px !important; } .main-mb-10 { margin-bottom: 10px !important; } .main-mb-20 { margin-bottom: 20px !important; } .main-mb-30 { margin-bottom: 30px !important; } .main-mb-40 { margin-bottom: 40px !important; } .main-mb-50 { margin-bottom: 50px !important; } .main-fs-10 { font-size: 10px !important; } .main-fs-11 { font-size: 11px !important; } .main-fs-12 { font-size: 12px !important; } .main-fs-13 { font-size: 13px !important; } .main-fs-14 { font-size: 14px !important; } .main-fs-15 { font-size: 15px !important; } .main-fs-16 { font-size: 16px !important; } .main-fs-17 { font-size: 17px !important; } .main-fs-18 { font-size: 18px !important; } .main-fs-19 { font-size: 19px !important; } .main-fs-20 { font-size: 20px !important; } .main-fs-21 { font-size: 21px !important; } .main-fs-22 { font-size: 22px !important; } .main-fs-23 { font-size: 23px !important; } .main-fs-24 { font-size: 24px !important; } .main-fs-25 { font-size: 25px !important; } .main-fs-26 { font-size: 26px !important; } .main-fs-27 { font-size: 27px !important; } .main-fs-28 { font-size: 28px !important; } .main-fs-29 { font-size: 29px !important; } .main-fs-30 { font-size: 30px !important; } .main-fs-31 { font-size: 31px !important; } .main-fs-32 { font-size: 32px !important; } .main-fs-33 { font-size: 33px !important; } .main-fs-34 { font-size: 34px !important; } .main-fs-35 { font-size: 35px !important; } .main-fs-36 { font-size: 36px !important; } .main-fs-37 { font-size: 37px !important; } .main-fs-38 { font-size: 38px !important; } .main-fs-39 { font-size: 39px !important; } .main-fs-40 { font-size: 40px !important; } /* ============================================================================ * トップページ * ========================================================================= */ .top-wrapper-normal { padding: 20px 15px 0; } .top-wrapper-point { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-top-wrapper-point-sp.png"); background-repeat: no-repeat; background-size: cover; padding: 12px 15px 15px; } .top-wrapper-point > *:last-child { margin-bottom: 0; } .top-wrapper-products { background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-top-wrapper-products-sp.jpg"); background-repeat: no-repeat; background-size: cover; padding: 13px 15px 14px; } .top-wrapper-info { background-color: #eee; padding: 0 15px; } .top-carousel-01 { position: relative; } .top-carousel-01 > .slick-arrow { margin: 0; padding: 0; display: inline-block; border: 0; width: 32px; height: 32px; position: absolute; z-index: 1; bottom: 0; color: #ffffff; white-space: nowrap; overflow: hidden; text-indent: 100%; cursor: pointer; } .top-carousel-01 > .slick-prev { left: 0; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-carousel-arrow-left-01.png") center center no-repeat; background-size: 21px 32px; } .top-carousel-01 > .slick-next { right: 0; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-carousel-arrow-right-01.png") center center no-repeat; background-size: 21px 32px; } .top-carousel-01 > .slick-dots { margin: 0; padding: 0; list-style-type: none; position: absolute; bottom: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .top-carousel-01 > .slick-dots:after { content: ""; display: table; clear: left; } .top-carousel-01 > .slick-dots > li { padding: 0 8px 0 0; float: left; line-height: 14px; } .top-carousel-01 > .slick-dots > li:last-child { padding: 0 0 0 7px; } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause { width: 14px; height: 14px; position: relative; border-radius: 50%; } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause:before { content: ""; display: block; border-width: 0 2px 0 2px; border-style: solid; border-color: #005cac; width: 2px; height: 7px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause.slick-play:before { border-width: 4px 0 4px 4px; border-color: transparent transparent transparent #005cac; width: 0; height: 0; } .top-carousel-01 > .slick-dots > li > button { margin: 0; padding: 0; border: 0; display: inline-block; width: 14px; height: 14px; background: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-indent: 100%; vertical-align: middle; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.7); cursor: pointer; } .top-carousel-01 > .slick-dots > li.slick-active > button { background: #2ca6e0; } .top-carousel-01 a { display: block; } .top-carousel-01 img { display: block; width: 100%; } .top-box-info-01 { font-size: 13px; line-height: 1.0769; background: #eee; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto; padding: 11px 0 10px; } .top-box-info-01 > *:first-child { margin-top: 0; } .top-box-info-01 > *:last-child { margin-bottom: 0; } .top-box-info-01 a, .top-box-info-01 a:hover, .top-box-info-01 a:focus, .top-box-info-01 a:active { color: #000; } .top-box-info-01 .content { line-height: 1.45; margin: 0 0 9px; } .top-box-info-01 .heading { font-size: 13px; font-weight: bold; letter-spacing: .03em; color: #005cac; margin: 0 0 8px; } .top-box-info-01 .button { font-size: 12px; text-decoration: none; text-align: left; background: #005cac; display: inline-block; min-width: 70px; padding: 6px 18px 3px; } .top-box-info-01 .button, .top-box-info-01 .button:hover, .top-box-info-01 .button:focus, .top-box-info-01 .button:active { color: #fff; } .top-heading-01 { font-size: 18px; font-weight: normal; line-height: 1.3; letter-spacing: .02em; text-align: center; color: #fff; max-width: 178px; margin: 0 auto 19px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } .top-heading-01 img { width: 100%; max-width: 100%; display: block; } .top-heading-02 { font-size: 18px; font-weight: bold; line-height: 1.3; letter-spacing: .04em; text-align: center; color: #fff; margin: 0 0 8px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } .top-list-point-01 { font-weight: bold; letter-spacing: -.03em; box-sizing: border-box; width: 100%; width: 100%; max-width: 1000px; margin: 0 auto 18px; padding: 0; } .top-list-point-01 > ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; margin: -10px 0 0 -10px; padding: 0; list-style: none; } .top-list-point-01 > ul > li { font-size: 10px; line-height: 1.13; letter-spacing: 0.02em; text-align: center; background: #fff; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; width: calc(33.3333% - 10px); min-height: calc(24.1vw - 10px); margin: 10px 0 0 10px; } .top-list-point-01 > ul > li em { font-size: 15px; font-weight: bold; display: block; margin: 4px 0 0; } .top-list-point-01 > ul > li span { display: block; width: 100%; } .top-list-point-01 > ul > li a { text-decoration: none; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 100%; border: 5px solid #0e508e; box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); } .top-list-point-01 > ul > li a, .top-list-point-01 > ul > li a:hover, .top-list-point-01 > ul > li a:focus, .top-list-point-01 > ul > li a:active { color: #00325d; } .top-list-point-01 > ul > li a > span { display: block; } .top-list-link-01 { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; } .top-list-link-01 > li { margin: 0 0 10px; } .top-list-link-01 > li:last-child { margin-bottom: 0; } .top-list-link-01 > li a { font-size: 13px; line-height: 1.1769; text-decoration: none; background: #005cac; position: relative; display: block; display: -ms-flexbox; display: flex; display: -webkit-flex; -ms-flex-align: center; align-items: center; box-sizing: border-box; width: 100%; height: 0; min-height: 45px; padding: 8px 16px 6px 52px; border: 1.5px solid #dadada; -webkit-align-items: center; } .top-list-link-01 > li a, .top-list-link-01 > li a:hover, .top-list-link-01 > li a:focus, .top-list-link-01 > li a:active { color: #fff; } .top-list-link-01 > li a::before { background-repeat: no-repeat; background-size: 21px 21px; position: absolute; top: 0; bottom: 0; left: 10px; display: block; width: 21px; height: 21px; margin: auto; content: ""; } .top-list-link-01 > li a > span { position: relative; display: block; padding: 0 15px 0 0; } .top-list-link-01 > li a > span::after { position: absolute; top: 0; right: 0; bottom: 0; display: block; width: 7px; height: 7px; margin: auto; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; } .top-list-link-01 > li.of-type-01 a::before { background-image: url("https://www.nipponsteel.com/en/steelinc/images/icon-list-link-sp-01.png"); } .top-list-link-01 > li.of-type-02 a::before { background-image: url("https://www.nipponsteel.com/en/steelinc/images/icon-list-link-sp-02.png"); } .top-link-media-01 a { text-decoration: none; display: block; } .top-link-media-01 a, .top-link-media-01 a:hover, .top-link-media-01 a:focus, .top-link-media-01 a:active { color: #000; } .top-link-media-01 a p { line-height: 1.6538; position: relative; padding: 0 0 0 11px; } .top-link-media-01 a p::before { position: absolute; top: .45em; left: -2px; display: block; width: 7px; height: 7px; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-width: 1px 1px 0 0; border-style: solid; border-color: #1167b2; } .top-link-media-01 .media { margin: 0 0 1px; border: 1.5px solid #dadada; } .top-link-media-01 .media img { display: block; width: 100%; } .top-link-products-01 { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 14px; font-size: 18px; font-weight: bold; color: #fff; position: relative; z-index: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; box-sizing: border-box; } .top-link-products-01 a { font-size: 12px; font-weight: bold; text-decoration: none; text-align: left; } .top-link-products-01 a, .top-link-products-01 a:hover, .top-link-products-01 a:focus, .top-link-products-01 a:active { color: #fff; } .top-link-products-01 > a { width: 100%; background-color: #00325d; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; border: 3px solid #dadada; height: 17.34375vw; padding: 4px; } .top-link-products-01 > a::after { display: block; content: ""; max-width: 44vw; -ms-flex-preferred-size: 44vw; flex-basis: 44vw; height: 100%; box-sizing: border-box; background-image: url("https://www.nipponsteel.com/en/steelinc/images/top-link-products-02-sp.jpg"); background-repeat: no-repeat; background-position: right center; background-size: contain; } .top-link-products-01 > a > * { -ms-flex: 1; flex: 1 1 0%; } .top-link-products-01 > a > .text { position: relative; display: block; letter-spacing: 0.05em; text-align: center; } .top-link-products-01 > a > .text > span { display: inline-block; position: relative; padding: 0 13px 0 0; } .top-link-products-01 > a > .text > span::after { display: block; margin: auto; position: absolute; width: 8px; height: 8px; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; bottom: 0; right: 3px; top: -1px; } .top-column-products-01 { box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 20px 0; } .top-column-products-01 > .inner { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .top-column-products-01 > .inner > .column { width: 100%; height: 100%; margin: 0 0 12px; } @media screen and (min-width: 864px){ .header-main-wrapper{ border-bottom: 5px solid #eeeeee; } .header-logo{ padding: 14px 0 20px 0; } .header-logo-pc{ display: block; } .header-logo-sp{ display: none; } .header-main-nav-wrapper{ display: table-cell; } .header-main-button-wrapper{ display: none; } .header-sub-wrapper{ padding: 0; display: block; position: static; width: auto; background: #005cac; } .header-sub{ max-width: 1000px; } .header-nav{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; } .header-nav-item-wrapper{ display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0; border-right: 1px solid #006ecd; } .header-nav-item-wrapper:first-child{ border-left: 1px solid #006ecd; } .header-nav-item-wrapper:last-child{ margin: 0; } .header-nav-item{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; align-items: center; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 12px 16px; position: static; background: #005cac; color: #ffffff; text-align: center; } .header-nav-item.is-open, .header-nav-item:hover, .header-nav-item:focus{ background: #005cac; background: linear-gradient(#005cac, #00325d); } .header-nav-item:after{ display: none; } .header-nav-item-inner{ display: block; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; } .header-nav-item-br{ display: inline; } .header-nav-sub-wrapper{ -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; display: none; position: absolute; z-index: 100; left: 0; width: 100%; background: #00325d; } .header-nav-sub-wrapper.is-open{ display: table; } :root:not([data-script-enabled="true"]) .header-nav-sub-wrapper{ position: static; } .header-nav-sub{ display: table-cell; vertical-align: middle; } .header-nav-sub-inner{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; } .header-nav-sub-item-wrapper{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0; font-size: 16px; text-align: center; } .header-nav-sub-item-wrapper:first-child{ margin: 0; } .header-nav-sub-item-wrapper:last-child{ margin: 0; } .header-nav-sub-item{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; align-items: center; -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 20px; border: 0; height: 100px; position: static; background: transparent; color: #ffffff; } .header-nav-sub-item:after{ display: none; } .header-nav-sub-item-inner{ -ms-flex-order: 0; order: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0 auto; display: inline-block; vertical-align: middle; } .header-nav-sub-item-inner:before{ content: ""; margin: 0 16px 0 0; display: inline-block; border-width: 2px 2px 0 0; border-style: solid; border-color: #ffffff; width: 10px; height: 10px; vertical-align: middle; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .header-nav-sub-close-button-wrapper{ padding: 0 35px; display: table-cell; width: 40px; vertical-align: middle; } .header-sub-nav-search{ display: none; } .header-sub-nav-wrapper{ display: none; } .footer-page-top-content{ max-width: 1000px; } .footer-page-top{ border-width: 1px 1px 0 1px; } .footer-main{ margin: 0 auto; display: table; width: 100%; max-width: 1000px; } .footer-logo{ padding: 0 0 34px 0; display: table-cell; text-align: left; vertical-align: bottom; } .footer-logo-pc{ display: block; } .footer-logo-sp{ display: none; } .footer-main-content{ padding: 28px 0 28px 0; display: table-cell; vertical-align: middle; } .footer-main-nav{ margin: 0 0 0 auto; } .footer-main-nav-item{ font-size: 14px; } .footer-copyright{ font-size: 14px; text-align: right; } .footer-copyright-br{ display: none; } .main-breadcrumb-wrapper{ font-size: 12px; } .main-breadcrumb{ padding: 9px 0; } .main-breadcrumb-item-wrapper:after{ padding: 0 7px; } .main-wrapper{ padding: 0; } .main-wrapper-02-inner{ padding: 30px 0; } .main-heading-01-wrapper{ margin: 0 0 36px 0; padding: 0; } .main-heading-01{ font-size: 36px; } .main-heading-01-with-read-wrapper{ margin: 0 0 36px 0; padding: 0; } .main-heading-01-with-read{ padding: 0; } .main-heading-01-with-read-inner{ display: table; width: 100%; } .main-heading-01-read{ margin: 0; padding: 30px 0; display: table-cell; width: 160px; height: 160px; vertical-align: middle; } .main-heading-01-read-inner{ border: 10px solid #005cac; width: 140px; height: 140px; } .main .main-heading-01-read-content{ padding: 0; } .main-heading-01-read-content-first{ display: block; font-size: 1rem; } .main-heading-01-read-content-last{ display: block; font-size: 25px; } .main-heading-01-read-content-last-large{ display: block; font-size: 30px; } .main-heading-01-item{ padding: 30px 0 30px 52px; display: table-cell; font-size: 36px; vertical-align: middle; } .main-heading-02-normal{ margin: 80px 0 30px 0; padding: 0 0 0 38px; border-bottom: 2px solid #d9d9d9; background: url("https://www.nipponsteel.com/en/steelinc/images/icon-heading-02-normal.png") 0 10px no-repeat; background-size: auto auto; font-size: 30px; } .main-heading-02-normal:first-of-type{ margin: 0 0 30px 0; } .main-heading-02{ margin: 0 0 24px 0; border-bottom: 2px solid #d9d9d9; font-size: 24px; } .main-heading-03{ margin: 0 0 20px 0; padding: 0 0 0 20px; font-size: 20px; } .main-heading-04{ margin: 0 0 18px 0; font-size: 18px; } .main p{ margin: 0 0 16px 0; font-size: 1rem; } .main-column-2{ margin: 0 0 16px 0; position: relative; } .main-column-2:after{ content: ""; display: table; clear: left; } .main-column-2 > .column{ margin: 0; padding: 0 0 0 10px; float: left; width: 50%; box-sizing: border-box; } .main-column-2 > .column:first-child{ margin: 0; padding: 0 10px 0 0; } .main-column-3{ margin: 0 0 16px 0; position: relative; } .main-column-3:after{ content: ""; display: table; clear: left; } .main-column-3 > .column{ margin: 0; padding: 0 10px 0 10px; float: left; width: 33.33%; box-sizing: border-box; } .main-column-3 > .column:first-child{ padding: 0 10px 0 0; } .main-column-3 > .column:nth-child(3){ padding: 0 0 0 10px; } .main-column-4{ margin: 0 0 16px 0; position: relative; } .main-column-4:after{ content: ""; display: table; clear: left; } .main-column-4 > .column{ margin: 0; padding: 0 8px 0 8px; float: left; width: 25%; box-sizing: border-box; } .main-column-4 > .column:first-child{ padding: 0 8px 0 0; } .main-column-4 > .column:nth-child(4){ padding: 0 0 0 8px; } .main-figure-01{ margin: 0 0 16px 0; } .main-figure-02{ margin: 0 0 16px 0; } .main-list-01{ margin: 0 0 16px 0; } .main-list-01 > li{ margin: 0 0 8px 0; padding: 0 0 0 20px; font-size: 1rem; } .main-list-01 > li:before{ top: 9px; left: 5px; width: 6px; height: 6px; } .main-list-02{ margin: 0 0 16px 0; } .main-list-02 > li{ margin: 0 0 8px 0; padding: 0 0 0 20px; font-size: 1rem; } .main-list-02 > li:before{ top: 10px; left: 6px; width: 4px; height: 4px; } .main-list-02-inline{ margin: 0 0 16px 0; } .main-list-02-inline > li{ margin: 0 16px 0 0; padding: 0 0 0 20px; font-size: 1rem; } .main-list-02-inline > li:before{ top: 10px; left: 6px; width: 4px; height: 4px; } .main-list-03{ margin: 0 0 16px 0; } .main-list-03 > li{ margin: 0 0 8px 0; padding: 0 0 0 20px; font-size: 1rem; } .main-list-03 > li:before{ top: 12px; left: 8px; width: 5px; height: 5px; } .main-list-03-inline{ margin: 0 0 16px 0; } .main-list-03-inline > li{ margin: 0 13px 0 0; padding: 0 20px 0 0; font-size: 1rem; } .main-list-03-inline > li:after{ top: 12px; right: 0; width: 5px; height: 5px; } .main-list-03-right{ margin: 0 0 16px 0; } .main-list-03-right > li{ margin: 0 0 8px 0; font-size: 1rem; } .main-list-03-right > li > .main-list-03-right-item{ padding: 0 0 0 20px; } .main-list-03-right > li > .main-list-03-right-item:before{ top: 12px; left: 8px; width: 5px; height: 5px; } .main-list-04{ margin: 0 0 16px 0; } .main-list-04 > li{ margin: 0 0 8px 0; padding: 0 0 0 20px; font-size: 14px; } .main-list-05{ margin: 0 0 16px 0; } .main-list-05 > li{ margin: 0 0 8px 0; padding: 0 0 0 37px; font-size: 14px; } .main-list-06{ margin: 0 0 16px 0; } .main-list-06 > li{ margin: 0 0 8px 0; padding: 0 0 0 35px; font-size: 1rem; } .main-list-06 > li > .number{ top: 0; left: 0; width: 23px; height: 23px; line-height: 23px; font-size: 12px; } .main-list-07{ margin: 0 0 16px 0; } .main-list-07 > li{ margin: 0; padding: 0 0 0 28px; font-size: 1rem; } .main-list-07 > li > .number{ top: 2px; left: 0; width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .main-list-08{ margin: 0 0 16px 0; } .main-list-08 > li{ margin: 0 0 8px 0; padding: 0 0 0 25px; font-size: 1rem; } .main-list-08 > li:before{ top: 8px; } .main-list-09{ margin: 0 0 16px 0; padding: 20px; } .main-list-09 > li{ margin: 0 0 20px 0; padding: 14px 16px 14px 68px; font-size: 1rem; } .main-list-09 > li > .number{ margin: 0; position: absolute; top: 20px; left: 20px; width: 28px; height: 28px; line-height: 28px; font-size: 1rem; } .main-list-09 > li > p{ margin: 0; } .main-list-09 > li > p > em{ font-size: 24px; } .main-list-09 > li > p > em > sup{ font-size: 16px; } .main-list-and-description-01{ margin: 0 0 16px 0; display: table; width: 100%; } .main-list-and-description-01 > .title-wrapper{ display: table-cell; width: 72px; vertical-align: top; } .main-list-and-description-01 > .item-wrapper{ display: table-cell; vertical-align: top; } .main-list-and-description-01 > .item-wrapper > .item{ -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .main-list-and-description-01 > .item-wrapper > .item{ margin: 0; padding: 0 0 0 28px; font-size: 1rem; } .main-list-and-description-01 > .item-wrapper > .item > .item-number{ top: 2px; left: 0; width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .main-list-and-description-01 > .item-wrapper > .item > .item-title{ -ms-flex: 0 1 auto; flex: 0 1 auto; } .main-list-and-description-01 > .item-wrapper > .item > .item-title{ padding: 0 8px 0 0; } .main-list-and-description-01 > .item-wrapper > .item > .item-description{ padding: 0 0 0 18px; } .main-list-and-description-02{ margin: 0 0 16px 0; display: table; width: 100%; } .main-list-and-description-02 > .content-wrapper{ margin: 0; padding: 0 0 0 10px; display: table-cell; border-left: 1px solid #dddddd; width: 50%; box-sizing: border-box; } .main-list-and-description-02 > .content-wrapper:first-child{ padding: 0 10px 0 0; border-left: 0; } .main-list-and-description-02 > .content-wrapper > .content{ display: table; width: 100%; } .main-list-and-description-02 > .content-wrapper > .content > .title-wrapper{ display: table-cell; width: 72px; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper{ display: table-cell; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item{ margin: 0; padding: 0 0 0 28px; font-size: 1rem; } .main-list-and-description-02 > .content-wrapper > .content > .item-wrapper > .item > .item-number{ top: 2px; left: 0; width: 20px; height: 20px; line-height: 20px; font-size: 12px; } .main-list-and-description-03{ margin: 0 0 16px 0; } .main-list-and-description-03 > .item-wrapper > .item{ padding: 0; display: table; font-size: 1rem; } .main-list-and-description-03 > .item-wrapper > .item > .item-title{ padding: 17px 0; display: table-cell; } .main-list-and-description-03 > .item-wrapper > .item > .item-description{ padding: 17px 0; display: table-cell; } .main-product-list-01{ display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: stretch; align-items: stretch; } .main-product-list-01 > .item{ -ms-flex-order: 0; order: 0; -ms-flex: 0 1 313px; flex: 0 1 313px; margin: 0 10px 20px 10px; } .main-product-list-01 > .item > .header{ padding: 20px; } .main-product-list-01 > .item > .header > .tags > .tag{ font-size: 13px; } .main-product-list-01 > .item > .header > .title{ font-size: 20px; text-align: center; } .main-product-list-01 > .item > .main{ padding: 18px 27px; } .main-product-list-01 > .item > .main > .tags > .tag-omission{ min-width: 120px; } .main-product-list-01 > .item > .main > .tags > .tag-strength{ min-width: 120px; } .main-product-list-01 > .item > .main > .tags > .tag-environment{ min-width: 120px; } .main-product-list-01 > .item > .main > .list > li{ line-height: 1.42857; font-size: 14px; } .main-product-list-01 > .item > .main > .list > li:before{ top: 8px; } .main-product-list-01 > .item > .main > .list > li > p{ line-height: 1.42857; font-size: 14px; } .main-product-list-01 > .item > .main > .list > li > .list > li{ line-height: 1.42857; font-size: 14px; } .main-product-list-01 > .item > .main > .list > li > .list > li:before{ top: 8px; } .main-product-list-01 > .item > .main > .list > li > .list > li > p{ line-height: 1.42857; font-size: 14px; } .main .main-button-01{ padding: 10px 75px 10px 70px; font-size: 1rem; } .main .main-button-01-full{ padding: 10px 29px 10px 10px; font-size: 1rem; } .main .main-button-02{ height: 90px; font-size: 18px; } .main .main-button-02-em{ font-size: 28px; } .main-button-03 > .main-button-03-inner{ padding: 7px 0; width: 157px; font-size: 13px; } .main-button-04 > .main-button-04-inner{ padding: 7px; width: 157px; font-size: 13px; } .main-table-list-01{ margin: 0 0 16px 0; font-size: 1rem; } .main-table-list-01 > tbody > tr > td{ vertical-align: top; } .main-table-list-01 > tbody > tr > td:first-child{ width: 200px; } .main-table-01-wrapper{ margin: 0 0 16px 0; } .main-table-01 > thead > tr > th{ font-size: 14px; } .main-table-01 > tbody > tr > th{ font-size: 14px; } .main-table-01 > tbody > tr > td{ font-size: 14px; } .main-table-01 > tbody > tr > td .main-list-02 > li{ margin: 0 0 3px 0; padding: 0 0 0 16px; font-size: 14px; } .main-table-01 > tbody > tr > td .main-list-02 > li:before{ top: 6px; } .main-table-01 > tbody > tr > td > p{ font-size: 14px; } .main-table-02{ margin: 0 0 16px 0; } .main-table-02 > thead > tr > th{ font-size: 14px; } .main-table-02 > tbody > tr > td{ font-size: 14px; } .main-table-03-wrapper{ margin: 0 0 16px 0; } .main-table-03 > thead > tr > th{ font-size: 14px; } .main-table-03 > tbody > tr > th{ font-size: 14px; } .main-table-03 > tbody > tr > td{ font-size: 14px; } .main-box-01{ margin: 0 0 16px 0; padding: 30px; } .main-box-01 > .main-column-3{ margin: 0 0 16px 0; } .main-box-01-heading-01{ margin: 0 0 20px 0; padding: 1px 20px; font-size: 20px; } .main-box-01-column-wrapper{ margin: 0 0 16px 0; } .main-box-01-column-wrapper:after{ content: ""; display: table; clear: left; } .main-box-01-column{ margin: 0 0 0 15px; float: left; } .main-box-01-column:first-child{ margin: 0; } .main-box-02{ margin: 0 0 16px 0; padding: 20px; } .main-box-02-column-wrapper{ margin: 20px 0 0 0; display: table; width: 100%; } .main-box-02-column-wrapper:first-child{ margin: 0; } .main-box-02-column{ display: table-cell; } .main-box-02-column:first-child{ width: 152px; } .main-box-02-column:last-child{ padding: 0 16px 0 32px; vertical-align: middle; } .main .main-box-02-name{ padding: 5px 0 0 0; font-size: 14px; font-weight: normal; } .main .main-box-02-name:before{ border-width: 7px 5px 0 5px; bottom: -7px; } .main .main-box-02-value{ padding: 14px 0 8px 0; font-size: 1rem; } .main .main-box-02-description > em{ font-size: 24px; } .main-box-03{ margin: 0 0 16px 0; padding: 20px; } .main .main-box-04{ font-size: 20px; } .main-box-05{ padding: 20px; } .main-tab-01{ margin: 0 0 16px 0; } .main-tab-01-tabs{ display: table; table-layout: fixed; width: 100%; } .main-tab-01-tab-wrapper{ margin: 0; padding: 0 0 0 10px; display: table-cell; font-size: 1rem; vertical-align: middle; } .main-tab-01-tab-wrapper:first-child{ padding: 0; } .main-tab-01-tab{ padding: 6px 16px; position: static; text-align: center; } .main-tab-01-tab:after{ display: none; } .main-tab-01-content{ border-width: 1px; } .main-toggle-01{ margin: 0 0 16px 0; } .main-toggle-01.is-open{ margin: 0 0 16px 0; } .main-toggle-01-button{ margin: 0 0 24px 0; position: static; font-size: 24px; cursor: text; } .main-toggle-01-button:after{ display: none; } .main-toggle-01-content{ display: block; } .main-mb-0-pc{ margin-bottom: 0 !important; } .main-mb-5-pc{ margin-bottom: 5px !important; } .main-mb-10-pc{ margin-bottom: 10px !important; } .main-mb-20-pc{ margin-bottom: 20px !important; } .main-mb-30-pc{ margin-bottom: 30px !important; } .main-mb-40-pc{ margin-bottom: 40px !important; } .main-mb-50-pc{ margin-bottom: 50px !important; } .main-fs-10-pc{ font-size: 10px !important; } .main-fs-11-pc{ font-size: 11px !important; } .main-fs-12-pc{ font-size: 12px !important; } .main-fs-13-pc{ font-size: 13px !important; } .main-fs-14-pc{ font-size: 14px !important; } .main-fs-15-pc{ font-size: 15px !important; } .main-fs-16-pc{ font-size: 16px !important; } .main-fs-17-pc{ font-size: 17px !important; } .main-fs-18-pc{ font-size: 18px !important; } .main-fs-19-pc{ font-size: 19px !important; } .main-fs-20-pc{ font-size: 20px !important; } .main-fs-21-pc{ font-size: 21px !important; } .main-fs-22-pc{ font-size: 22px !important; } .main-fs-23-pc{ font-size: 23px !important; } .main-fs-24-pc{ font-size: 24px !important; } .main-fs-25-pc{ font-size: 25px !important; } .main-fs-26-pc{ font-size: 26px !important; } .main-fs-27-pc{ font-size: 27px !important; } .main-fs-28-pc{ font-size: 28px !important; } .main-fs-29-pc{ font-size: 29px !important; } .main-fs-30-pc{ font-size: 30px !important; } .main-fs-31-pc{ font-size: 31px !important; } .main-fs-32-pc{ font-size: 32px !important; } .main-fs-33-pc{ font-size: 33px !important; } .main-fs-34-pc{ font-size: 34px !important; } .main-fs-35-pc{ font-size: 35px !important; } .main-fs-36-pc{ font-size: 36px !important; } .main-fs-37-pc{ font-size: 37px !important; } .main-fs-38-pc{ font-size: 38px !important; } .main-fs-39-pc{ font-size: 39px !important; } .main-fs-40-pc{ font-size: 40px !important; } .main-sp-show{ display: none !important; } .top-carousel-01 > .slick-arrow{ width: 100px; height: 100px; } .top-carousel-01 > .slick-prev{ background-size: auto auto; } .top-carousel-01 > .slick-next{ background-size: auto auto; } .top-carousel-01 > .slick-dots{ bottom: 16px; } .top-carousel-01 > .slick-dots > li{ line-height: 24px; } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause{ width: 24px; height: 24px; } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause:before{ border-width: 0 4px 0 4px; height: 12px; } .top-carousel-01 > .slick-dots > li:last-child > .slick-pause.slick-play:before{ border-width: 6px 0 6px 6px; } .top-carousel-01 > .slick-dots > li > button{ width: 16px; height: 16px; } } @media screen and (max-width: 863px){ .main-mb-0-sp{ margin-bottom: 0 !important; } .main-mb-5-sp{ margin-bottom: 5px !important; } .main-mb-10-sp{ margin-bottom: 10px !important; } .main-mb-20-sp{ margin-bottom: 20px !important; } .main-mb-30-sp{ margin-bottom: 30px !important; } .main-mb-40-sp{ margin-bottom: 40px !important; } .main-mb-50-sp{ margin-bottom: 50px !important; } .main-fs-10-sp{ font-size: 10px !important; } .main-fs-11-sp{ font-size: 11px !important; } .main-fs-12-sp{ font-size: 12px !important; } .main-fs-13-sp{ font-size: 13px !important; } .main-fs-14-sp{ font-size: 14px !important; } .main-fs-15-sp{ font-size: 15px !important; } .main-fs-16-sp{ font-size: 16px !important; } .main-fs-17-sp{ font-size: 17px !important; } .main-fs-18-sp{ font-size: 18px !important; } .main-fs-19-sp{ font-size: 19px !important; } .main-fs-20-sp{ font-size: 20px !important; } .main-fs-21-sp{ font-size: 21px !important; } .main-fs-22-sp{ font-size: 22px !important; } .main-fs-23-sp{ font-size: 23px !important; } .main-fs-24-sp{ font-size: 24px !important; } .main-fs-25-sp{ font-size: 25px !important; } .main-fs-26-sp{ font-size: 26px !important; } .main-fs-27-sp{ font-size: 27px !important; } .main-fs-28-sp{ font-size: 28px !important; } .main-fs-29-sp{ font-size: 29px !important; } .main-fs-30-sp{ font-size: 30px !important; } .main-fs-31-sp{ font-size: 31px !important; } .main-fs-32-sp{ font-size: 32px !important; } .main-fs-33-sp{ font-size: 33px !important; } .main-fs-34-sp{ font-size: 34px !important; } .main-fs-35-sp{ font-size: 35px !important; } .main-fs-36-sp{ font-size: 36px !important; } .main-fs-37-sp{ font-size: 37px !important; } .main-fs-38-sp{ font-size: 38px !important; } .main-fs-39-sp{ font-size: 39px !important; } .main-fs-40-sp{ font-size: 40px !important; } .main-pc-show{ display: none !important; } } @media screen and (min-width: 769px){ .top-wrapper-normal{ padding: 41px 15px 26px; } .top-wrapper-point{ background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-top-wrapper-point-pc.png"); padding: 40px 11px 42px; } .top-wrapper-products{ background-image: url("https://www.nipponsteel.com/en/steelinc/images/bg-top-wrapper-products-pc.jpg"); padding: 41px 15px 42px; } .top-box-info-01{ -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; padding: 21px 0 18px; } .top-box-info-01 .content{ display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 0; } .top-box-info-01 .content .date{ min-width: 90px; padding: 0 20px 0 0; } .top-box-info-01 .heading{ font-size: 18px; min-width: 76px; margin: 0; padding: 0 20px 0 0; } .top-box-info-01 .button{ font-size: 14px; position: relative; min-width: 87px; margin: 0 0 0 20px; padding: 13px 18px 8px; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .top-box-info-01 .button::after{ position: absolute; top: 1px; right: 19px; bottom: 0; display: block; width: 10px; height: 10px; margin: auto; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-width: 1px 1px 0 0; border-style: solid; border-color: #fff; } .top-heading-01{ max-width: none; font-size: 36px; margin: 0 0 27px; } .top-heading-01 img{ display: inline-block; width: auto; } .top-heading-02{ font-size: 36px; margin: 0 0 33px; } .top-list-point-01 > ul{ margin: -14px 0 0 -14px; } .top-list-point-01 > ul > li{ font-size: 20px; width: calc(20% - 14px); min-height: calc(12.6vw - 14px); max-height: 184px; margin: 14px 0 0 14px; } .top-list-point-01 > ul > li em{ font-size: 30px; } .top-list-point-01 > ul > li a{ transition: .3s; border: 10px solid #0e508e; } .top-list-point-01 > ul > li a:active, .top-list-point-01 > ul > li a:focus, .top-list-point-01 > ul > li a:hover{ color: #fff; background: #00324d; border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 rgba(0, 0, 0, 0.7); } .top-list-link-01 > li{ margin: 0 0 20px; } .top-list-link-01 > li > a{ font-size: 18px; min-height: 90px; padding: 8px 28px 6px 75px; transition: .3s; border-width: 3px; } .top-list-link-01 > li > a:active, .top-list-link-01 > li > a:focus, .top-list-link-01 > li > a:hover{ opacity: .7; } .top-list-link-01 > li > a::before{ background-size: 42px 42px; left: 18px; width: 42px; height: 42px; } .top-list-link-01 > li > a::after{ position: absolute; top: 0; right: 15px; bottom: 0; display: block; width: 13px; height: 13px; margin: auto; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; } .top-list-link-01 > li > a > span::after{ display: none; } .main .top-list-link-01 > li > a::after{ margin: auto; } .top-link-media-01 a{ transition: .3s; } .top-link-media-01 a:active, .top-link-media-01 a:focus, .top-link-media-01 a:hover{ opacity: .7; } .top-link-media-01 .media{ margin: 0 0 8px; border: 3px solid #dadada; } .top-link-products-01{ padding: 0; height: auto; max-width: 1000px; } .top-link-products-01::after{ position: absolute; z-index: -1; top: 0; left: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; content: ""; background: #fff; } .top-link-products-01 a{ font-size: 30px; height: 180px; padding: 12px; transition: .3s; } .top-link-products-01 a:active, .top-link-products-01 a:focus, .top-link-products-01 a:hover{ opacity: .7; } .top-link-products-01 > a::after{ width: 63.402%; max-width: 63.402%; -ms-flex-preferred-size: 63.402%; flex-basis: 63.402%; background-image: url("https://www.nipponsteel.com/en/steelinc/images/top-link-products-02-pc.jpg"); } .top-link-products-01 > a > .text{ width: 36.598%; max-width: 36.598%; -ms-flex-preferred-size: 36.598%; flex-basis: 36.598%; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.04em; text-align: center; } .top-link-products-01 > a > .text > span{ padding: 0 38px 0 0; } .top-link-products-01 > a > .text > span::after{ top: -3px; right: 6px; width: 18px; height: 18px; } .top-column-products-01{ padding: 0; } .top-column-products-01 > .inner{ margin: -20px 0 0 -20px; } .top-column-products-01 > .inner > .column{ display: -ms-flexbox; display: flex; display: -webkit-flex; width: calc(33.3333% - 20px); margin: 20px 0 0 20px; } } @media screen and (min-width: 1000px){ .top-list-point-01 > ul > li{ min-height: 147px; } }