@charset "UTF-8"; /* -------------------------------------------------- shared/css/201907_common.css --------------------------------------------------- */ /*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* ------------------------------------------- RESET CSS ---------------------------------------------*/ html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } a.twitter code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ffff00; color: #000000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template, [hidden] { display: none; } html { font-size: 62.5%; } body { margin: 0; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", YuGothic, "MS ゴシック", sans-serif; font-weight: 400; color: #333333; min-width: 318px; } footer { margin-top: auto; } * { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; } main { position: relative; } h1, h2, h3, h4, h5, ul, ol, li, p, dl, dt, dd, figure { margin: 0; padding: 0; font-weight: 400; } ul, ol { list-style: none; } img { width: 100%; height: auto; vertical-align: top; } a { color: #356cb6; text-decoration: none; } a:hover { text-decoration: none; } input[type=text] { outline: none; } input[type=text]:focus::-webkit-input-placeholder, input[type=text]:focus:-ms-input-placeholder, input[type=text]:focus::placeholder { color: transparent; } button { border: none; outline: none; background-color: transparent; } select { outline: none; } main a { color: #356cb6; text-decoration: none; transition: all 0.3s; } #WCMheaderwrapperwrapper img { width: auto; } @font-face { font-family: glyphs; src: url("/shared/fonts/glyphs.eot?v=1522738500"); src: url("/shared/fonts/glyphs.eot?#iefix&v=1522738500") format("embedded-opentype"), url("/shared/fonts/glyphs.woff?v=1522738500") format("woff"), url("/shared/fonts/glyphs.ttf?v=1522738500") format("truetype"), url("/shared/fonts/glyphs.svg?v=1522738500#glyphs") format("svg"); font-weight: normal; font-style: normal; } /* ------------------------------------------- HEADER ---------------------------------------------*/ .header { position: relative; width: 100%; background: #ffffff; z-index: 50; } .header-inner { margin: auto; max-width: 1280px; } .header-default .header-inner { display: flex; } /* --------------------------- */ .corp-logo { width: 150px; height: 108px; display: flex; align-items: center; } .corp-logo a { display: block; width: 100%; } .corp-logo a img { transition: opacity 0.3s; } .corp-logo a:hover img { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } /* --------------------------- */ .header-utils { margin-left: auto; } .header-utils li { padding: 0 24px; display: inline-block; border-left: 1px solid #e2e6e8; font-size: 1.1rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.15em; } .header-utils li > a:hover { text-decoration: underline; } .header-utils .header-utils-search { padding: 0 14px; } .header-utils .header-utils-search > a { position: relative; cursor: pointer; padding: 5px 10px; display: block; width: 36px; } .header-utils .header-utils-search > a:before { position: absolute; left: 10px; top: 5px; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f016"; vertical-align: middle; font-size: 1.4rem; } .header-utils .header-utils-search > a:hover { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; text-decoration: none; } .header-utils .header-utils-lang > a { display: inline-block; border: 1px solid #e2e6e8; padding: 0 10px; color: #356cb6; font-weight: 700; transition: all 0.3s; } .header-utils .header-utils-lang > a:hover { text-decoration: none; color: #ffffff; background-color: #356cb6; border-color: #356cb6; } .header-utils .header-utils-lang > a:first-child { border-bottom-left-radius: 3px; border-top-left-radius: 3px; border-right: none; } .header-utils .header-utils-lang > a:last-child { border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-left: none; } .header-utils .header-utils-lang > a.active { color: #ffffff; background-color: #356cb6; border-color: #356cb6; } .header-utils .header-utils-lang > a.active:focus { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .header-utils.header-utils-chosei .header-utils-search > a { display: inline-block; width: 126px; padding-left: 32px; } .header-utils.header-utils-chosei .header-utils-search > a span:hover { text-decoration: underline; } /* --------------------------- */ .header-fixed { position: fixed; top: -1000px; left: 0; z-index: 99; width: 100%; height: 49px; background: #ffffff; border-bottom: 1px solid #e2e6e8; transition: 1s; } .header-fixed--active { top: 0; } .hasRecommend .header-fixed { width: calc(100% - 240px); } /* --------------------------- */ .header-simple { height: 60px; margin-bottom: -1px; } .header-simple-inner { position: fixed; top: 0; left: 0; right: 0; z-index: 99; margin: 0 auto; background-color: #ffffff; padding: 13px 40px; height: 60px; border-bottom: 1px solid #e2e6e8; } .header-simple .logo { display: inline-block; height: 100%; } .header-simple .logo a { display: block; height: 100%; } .header-simple .logo a img { height: 100%; } .header-simple .close { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #356cb6; font-size: 1.4rem; } .header-simple .close:before { font-size: 1.5rem; margin-right: 7px; content: "\f020"; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: -2px; } /* --------------------------- */ .printHeaderfix { max-width: 1200px; padding: 40px 0; } /* --------------------------- */ #noScriptMessage { width: 100%; padding: 3px 0 2px; background: #FFF755; } #noScriptMessage img { width: 17px; height: 17px; margin-right: 5px; } #noScriptMessage p { min-height: 40px; flex-wrap: wrap; justify-content: flex-start; align-items: center; font-size: 1.4rem; line-height: 1.3; } #noScriptMessage p span { margin-right: 1.3em; font-weight: bold; font-size: 1.6rem; } noscript + main { margin-top: 0; } /* ------------------------------------------- 緊急のお知らせ ---------------------------------------------*/ .alertTop { padding: 0 !important; border-top: 1px solid red; border-bottom: 1px solid red; background-color: #d90000; } #urgentInfo { font-size: 1.4rem; color: #ffffff; padding: 20px 0; overflow: auto; min-height: 100px; } #urgentInfo a { color: #ffffff; } #urgentInfo a:visited, #urgentInfo a:hover, #urgentInfo a:link, #urgentInfo a:active { color: #ffffff; } .urgentWrap { display: flex; flex-direction: columnn; align-items: center; } .urgentWrap > span:before { font-size: 2.5rem; display: inline-block; vertical-align: -2px; margin-right: 20px; display: inline-block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f022"; } /* ------------------------------------------- パンくずリスト ---------------------------------------------*/ .breadcrumb { background-color: #eff3f9; } .breadcrumb > ul { margin: auto; padding: 13px 40px; max-width: 1280px; } .breadcrumb > ul > li { display: inline; font-size: 1.2rem; font-weight: 400; line-height: 1.5; } .breadcrumb > ul > li:not(:first-child):before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; font-size: 0.8rem; color: #c2c6c8; margin: 0 10px; } .breadcrumb > ul > li a:hover { text-decoration: underline; } /* ------------------------------------------- local navigation ---------------------------------------------*/ .local-nav > ul { border-top: 1px solid #e2e6e8; } .local-nav > ul > li { font-size: 1.4rem; font-weight: 400; border-bottom: 1px solid #e2e6e8; } .local-nav > ul > li > a { display: block; padding: 20px 20px 20px 10px; position: relative; transition: background-color 0.3s; } .local-nav > ul > li > a:hover { background-color: #eff3f9; } .local-nav > ul > li > a:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; font-size: 1.1rem; position: absolute; right: 0; top: 50%; margin-top: -0.55rem; transition: 0.3s; } .local-nav > ul > li > a.active { font-weight: 700; cursor: default; background: #eff3f9; } .local-nav > ul > li > a.active:after { display: none; } .local-nav > ul > li > a:hover:after { right: 10px; } .local-nav-child > li { border-top: 1px solid #e2e6e8; font-size: 1.3rem; } .local-nav-child > li > a { display: block; padding: 12px 20px 12px 20px; position: relative; transition: background-color 0.3s; } .local-nav-child > li > a:hover { background-color: #eff3f9; } .local-nav-child > li > a:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; font-size: 0.8rem; position: absolute; right: 0; top: 50%; margin-top: -0.4rem; transform: scale(0.8); transition: 0.3s; } .local-nav-child > li > a.active { font-weight: 700; cursor: default; background: #eff3f9; } .local-nav-child > li > a.active:after { display: none; } .local-nav-child > li > a:hover:after { right: 10px; } .inner-local-nav-child > li { border-top: 1px solid #e2e6e8; } .inner-local-nav-child > li > a { display: block; padding: 6px 10px 6px 35px; transition: background-color 0.3s; } .inner-local-nav-child > li > a:hover { background-color: #eff3f9; } .inner-local-nav-child > li > a.active { font-weight: 700; background: #eff3f9; } .active-location { color: #ffffff !important; background-color: #356cb6 !important; } .recommendNav { display: none; } /* ------------------------------------------- FOOTER ---------------------------------------------*/ .footer { background-color: #356cb6; color: #ffffff; } .footer a { color: #ffffff; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .footer a:hover { text-decoration: underline; } /* --------------------------- */ .footer-nav { margin: auto; padding: 80px 40px; max-width: 1280px; display: flex; justify-content: space-between; } .footer-nav-col { border-right: 1px solid rgba(255, 255, 255, 0.2); flex-basis: 25%; padding: 5px 3%; position: relative; flex-basis: 33.33%; } .footer-nav-col:first-child { border-left: 1px solid rgba(255, 255, 255, 0.21); } .footer-nav-col > :first-child { margin-top: 0; } .footer-nav-col > a { display: block; position: relative; font-size: 1.6rem; font-weight: 700; margin-top: 25px; padding-left: 23px; } .footer-nav-col > a:before { position: absolute; top: 8px; left: 0; margin-top: -0.8rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; margin-right: 5px; vertical-align: bottom; font-size: 1.5rem; letter-spacing: 8px; } .footer-nav-col > a.sns { font-size: 1.4rem; font-weight: 400; padding-right: 12%; padding-left: 25px; word-break: break-all; } .footer-nav-col > a.sns:before { display: none; } .footer-nav-col > a.sns > span { font-size: 1.5rem; } .footer-nav-col .sns { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); margin: 20px 0 0; padding: 20px 0; } .footer-nav-col .sns span { font-size: 1.5rem; font-weight: 700; } .footer-nav-col .sns .sns-icon { margin: 18px 0 18px 10px; } .footer-nav-col .sns .sns-icon img { max-width: 40px; height: auto; margin-right: 25px; } .footer-nav-col .sns .sns-link > a { display: block; padding-left: 15px; position: relative; font-size: 1.2rem; font-weight: 400; color: #ffffff; margin: 4px 0; } .footer-nav-col .sns .sns-link > a:before { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); } .footer-nav-col > ul { margin-top: 20px; margin-left: 3px; font-size: 1.4rem; } .footer-nav-col > ul > li { font-weight: 400; margin-top: 8px; position: relative; } .footer-nav-col > ul > li > a { position: relative; display: block; padding-left: 18px; line-height: 1.3; } .footer-nav-col > ul > li > a:before { content: ""; position: absolute; left: 3px; top: 7px; width: 4px; height: 4px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); } .footer-nav-col > ul > li:first-child { margin-top: 0; } .sns .footer-nav-col { border-right: none; } .sns .footer-nav-col:first-child { border-left: none; } .sns .footer-nav-col > a:before { position: absolute; top: 8px; left: 0; margin-top: -0.8rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; margin-right: 5px; vertical-align: bottom; font-size: 1.5rem; letter-spacing: 8px; } .base { border-top: 1px solid rgba(255, 255, 255, 0.2); } .base-inner { margin: auto; padding: 40px 40px; max-width: 1280px; display: flex; align-items: center; justify-content: space-between; } .base-links > ul { display: flex; align-items: left; line-height: 1; margin-top: 0; } .base-links > ul > li > a { position: relative; display: block; padding-left: 15px; position: relative; font-size: 1.2rem; font-weight: 400; color: #ffffff; } .base-links > ul > li > a:before { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 4px; border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; transform: rotate(45deg); } .base-links > ul > li > a.sns > img { width: 20px; height: 20px; vertical-align: middle; display: inline-block; margin-right: 3px; } .base-links > ul > li:not(:first-child) { margin-left: 20px; } /* --------------------------- */ .copyright { font-size: 1.1rem; letter-spacing: 0.1em; font-weight: 400; } /* --------------------------- */ .headCover { position: fixed; z-index: 5; display: none; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffffff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } .spGnavCover { position: fixed; z-index: 90; display: none; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffffff; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; } /* --------------------------- */ .pageTop { cursor: pointer; position: fixed; right: 75px; bottom: 70px; z-index: 100; width: 50px; height: 50px; background: #ffffff; border-radius: 50%; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); display: none; color: #356cb6; transition: background-color 0.3s; transition: all 0.3s; } .pageTop:hover { background-color: #356cb6; color: #ffffff; } .pageTop:before, .pageTop:after { transition: border-color 0.3s; } .pageTop:hover:before, .pageTop:hover:after { border-color: #ffffff; } .pageTop:before { position: absolute; top: 50%; bottom: 50%; left: 0; right: 0; text-align: center; margin-top: -5px; font-size: 0.8rem; display: block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f011"; transform: scale(0.8); } /* --------------------------- */ .footer-simple { background-color: #356cb6; color: #ffffff; padding: 42px; } .footer-simple > .copyright { text-align: center; } /* --------------------------- */ .printFooter { position: relative; border-top: 1px solid #e2e6e8; padding: 40px 0; } .printFooter-text { text-align: right; font-size: 1.1rem; } /* ------------------------------------------- Project / Solution / Topics / Photo ---------------------------------------------*/ .title { border-bottom: 1px solid #e2e6e8; border-top: 1px solid #e2e6e8; } .title .title-inner { display: table; width: 100%; max-width: 1280px; margin: 0 auto; font-weight: 400; position: relative; } .title .title-body { display: table-cell; vertical-align: middle; padding: 20px 40px; height: 95px; } .title h1 { font-size: 3.2rem; font-weight: 400; line-height: 1.3; } .title .subtitle { font-size: 1.6rem; } h1 + .title .subtitle { float: left; margin-top: 5px; } /* ------------------------------------------- common ---------------------------------------------*/ .searchBox { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(53, 108, 182, 0.9); display: none; } .searchBox > div { width: 100%; height: 100%; position: relative; } .searchBox-contents { width: 100%; max-width: 900px; height: 110px; margin-top: -60px; padding: 0 36px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; } .searchBox-closeBtn { color: #ffffff; font-size: 1.4rem; cursor: pointer; display: block; text-align: right; transition: 0.3s; } .searchBox-closeBtn:before { font-family: glyphs; content: "\f020"; font-size: 1.5rem; display: inline-block; vertical-align: -2px; margin-right: 7px; } .searchBox-closeBtn:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .searchBox-item { position: relative; background: #ffffff; border-radius: 3px; width: 100%; margin-top: 33px; } .searchBox-item input, .searchBox-item button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .searchBox-item dt { margin-right: 60px; padding: 18px 0 18px 26px; } .searchBox-item dt input { width: 100%; height: 24px; line-height: 24px; font-size: 2rem; } .searchBox-item dd { position: absolute; top: 0; right: 0; } .searchBox-item dd button { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; cursor: pointer; transition: opacity 0.3s; } .searchBox-item dd button:hover { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .searchBox-item dd button:before { color: #356cb6; font-size: 2.1rem; display: block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f016"; } /* --------------------------- */ .floatSnsBtn ul { position: fixed; top: 35%; right: 0; z-index: 100; width: 40px; background-color: #ffffff; } .floatSnsBtn a { display: block; padding: 30px 5px; transition: opacity 0.2s; } .floatSnsBtn a:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .floatSnsBtn a.facebook { background-color: #415896; } .floatSnsBtn a.twitter { background-color: #000000; } /* ------------------------------------------- common ---------------------------------------------*/ .wrapper { width: 100%; margin: 0; padding: 48px 0 96px; } .wrapper--layout { padding-top: 0; padding-bottom: 0; } .wrapper--continuous { padding-bottom: 48px; } .wrapper--topics { padding: 36px 0; } .wrapper--separated { border-top: 1px solid #e2e6e8; } .wrapper--darkblue { background-color: #356cb6; color: #ffffff; overflow: hidden; } .wrapper--lightblue { background-color: #5d89c5; color: #ffffff; } .wrapper--paleblue { background-color: #eff3f9; } .wrapper--haze { background-color: #fafafa; } .wrapper--mist { background-color: #f2f2f2; } .wrapper--black { background-color: #000000; color: #ffffff; } .wrapper--abyss { background-color: #072670; color: #ffffff; } .wrapper--gradiant-ocean { background: linear-gradient(to bottom, #0095d6 0%, #002864 50%, #070612 100%); color: #ffffff; } .wrapper--stripe { background-image: url("/shared/images/bg_pattern_white_stripe.png"); background-color: #d7e2f0; } /* --------------------------- */ .container { font-size: 1.6rem; line-height: 1.6; margin: 0 auto; padding: 0 36px; max-width: 1272px; } .container--topics { max-width: 1012px; } .container--topics-top-nav { padding: 0 !important; max-width: 1920px; } .container--wide { max-width: 1366px; } .container--fit { padding-left: 0 !important; padding-right: 0 !important; } .container--narrow { max-width: 972px; } .container--2col { display: flex; justify-content: space-between; } .container--2col > .content-main { width: 75%; } .container--2col > .content-side { width: 19%; } /* --------------------------- */ .grid { display: flex; margin: 0 -18px; overflow: hidden; } .grid > div { padding: 0 18px; } .grid--slim { margin: 0 -12px; } .grid--slim > div { padding: 0 12px; } .grid--thin { margin: 0 -9px; } .grid--thin > div { padding: 0 9px; } .grid--tiny { margin: 0 -3px !important; } .grid--tiny > div { padding: 0 3px !important; } .grid--wrap { flex-wrap: wrap; margin-bottom: -36px; } .grid--wrap > div { position: relative; top: -36px; margin-top: 36px; } .grid--wrap.grid--slim { margin-bottom: -24px; } .grid--wrap.grid--slim > div { position: relative; top: -24px; margin-top: 24px; } .grid--wrap.grid--thin { margin-bottom: -18px; } .grid--wrap.grid--thin > div { position: relative; top: -18px; margin-top: 18px; } .grid--wrap.grid--tiny { margin-bottom: -6px; } .grid--wrap.grid--tiny > div { position: relative; top: -6px; margin-top: 6px; } .grid--layout.grid--wrap { margin-bottom: 0; } .grid--layout.grid--wrap > div { margin-top: 0; position: static; } .grid--center { justify-content: center; } .grid--reverse { flex-direction: row-reverse; } .grid-col-1 { flex-basis: 8.33333%; max-width: 8.33333%; } .grid-col-1 img { max-width: 100px; } .container--wide .grid-col-1 img { max-width: 114px; } .container--narrow .grid-col-1 img, .container--2col .grid-col-1 img { max-width: 75px; } .grid-col-2 { flex-basis: 16.66667%; max-width: 16.66667%; } .grid-col-2 img { max-width: 200px; } .container--wide .grid-col-2 img { max-width: 228px; } .container--narrow .grid-col-2 img, .container--2col .grid-col-2 img { max-width: 150px; } .grid-col-3 { flex-basis: 25%; max-width: 25%; } .grid-col-3 img { max-width: 300px; } .container--wide .grid-col-3 img { max-width: 342px; } .container--narrow .grid-col-3 img, .container--2col .grid-col-3 img { max-width: 225px; } .grid-col-4 { flex-basis: 33.33333%; max-width: 33.33333%; } .grid-col-4 img { max-width: 400px; } .container--wide .grid-col-4 img { max-width: 456px; } .container--narrow .grid-col-4 img, .container--2col .grid-col-4 img { max-width: 300px; } .grid-col-5 { flex-basis: 41.66667%; max-width: 41.66667%; } .grid-col-5 img { max-width: 500px; } .container--wide .grid-col-5 img { max-width: 570px; } .container--narrow .grid-col-5 img, .container--2col .grid-col-5 img { max-width: 375px; } .grid-col-6 { flex-basis: 50%; max-width: 50%; } .grid-col-6 img { max-width: 600px; } .container--wide .grid-col-6 img { max-width: 683px; } .container--narrow .grid-col-6 img, .container--2col .grid-col-6 img { max-width: 450px; } .grid-col-7 { flex-basis: 58.33333%; max-width: 58.33333%; } .grid-col-7 img { max-width: 700px; } .container--wide .grid-col-7 img { max-width: 797px; } .container--narrow .grid-col-7 img, .container--2col .grid-col-7 img { max-width: 525px; } .grid-col-8 { flex-basis: 66.66667%; max-width: 66.66667%; } .grid-col-8 img { max-width: 800px; } .container--wide .grid-col-8 img { max-width: 911px; } .container--narrow .grid-col-8 img, .container--2col .grid-col-8 img { max-width: 600px; } .grid-col-9 { flex-basis: 75%; max-width: 75%; } .grid-col-9 img { max-width: 900px; } .container--wide .grid-col-9 img { max-width: 1025px; } .container--narrow .grid-col-9 img, .container--2col .grid-col-9 img { max-width: 675px; } .grid-col-10 { flex-basis: 83.33333%; max-width: 83.33333%; } .grid-col-10 img { max-width: 1000px; } .container--wide .grid-col-10 img { max-width: 1139px; } .container--narrow .grid-col-10 img, .container--2col .grid-col-10 img { max-width: 750px; } .grid-col-11 { flex-basis: 91.66667%; max-width: 91.66667%; } .grid-col-11 img { max-width: 1100px; } .container--wide .grid-col-11 img { max-width: 1253px; } .container--narrow .grid-col-11 img, .container--2col .grid-col-11 img { max-width: 825px; } .grid-col-12 { flex-basis: 100%; max-width: 100%; } .grid-col-12 img { max-width: 1200px; } .container--wide .grid-col-12 img { max-width: 1366px; } .container--narrow .grid-col-12 img, .container--2col .grid-col-12 img { max-width: 900px; } .grid--2col > div { width: 50%; } .grid--3col > div { width: 33.33333%; } .grid--4col > div { width: 25%; } .grid--5col > div { width: 20%; } .grid--6col > div { width: 16.66667%; } .grid--2col > div img { max-width: 600px; } .grid--3col > div img { max-width: 400px; } .grid--4col > div img { max-width: 300px; } .grid--5col > div img { max-width: 240px; } .grid--6col > div img { max-width: 200px; } .grid--7col > div img { max-width: 172px; } .container--wide .grid--2col > div img { max-width: 683px; } .container--wide .grid--3col > div img { max-width: 456px; } .container--wide .grid--4col > div img { max-width: 342px; } .container--wide .grid--5col > div img { max-width: 273px; } .container--wide .grid--6col > div img { max-width: 228px; } .container--wide .grid--7col > div img { max-width: 196px; } .container--narrow .grid--2col > div img, .container--2col .grid--2col > div img { max-width: 450px; } .container--narrow .grid--3col > div img, .container--2col .grid--3col > div img { max-width: 300px; } .container--narrow .grid--4col > div img, .container--2col .grid--4col > div img { max-width: 225px; } .container--narrow .grid--5col > div img, .container--2col .grid--5col > div img { max-width: 180px; } .container--narrow .grid--6col > div img, .container--2col .grid--6col > div img { max-width: 150px; } .container--narrow .grid--7col > div img, .container--2col .grid--7col > div img { max-width: 128px; } .grid.grid--layout { margin: 0; } .grid.grid--layout > div { top: 0 !important; padding: 0 !important; } .grid-wrap { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -18px; } .grid-wrap > div { padding: 0 18px; } .grid-wrap--slim { margin: 0 -12px; } .grid-wrap--slim > div { padding: 0 12px; } .grid-wrap--thin { margin: 0 -9px; } .grid-wrap--thin > div { padding: 0 9px; } .grid-wrap--layout { margin: 0; } .grid-wrap--layout > div { padding: 0; } .grid-wrap--center { justify-content: center; } .grid-wrap--reverse { flex-direction: row-reverse; } .grid-wrap--2col > div { width: 50%; } .grid-wrap--2col > div:nth-child(-n+2) { margin-top: 0; } .grid-wrap--3col > div { width: 33.33333%; } .grid-wrap--3col > div:nth-child(-n+3) { margin-top: 0; } .grid-wrap--4col > div { width: 25%; } .grid-wrap--4col > div:nth-child(-n+4) { margin-top: 0; } .grid-wrap-box { margin-top: 40px; } /* --------------------------- */ .cover { padding: 0; position: relative; overflow: hidden; } .cover > .cover-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .cover > .cover-image > img { position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; margin: auto; width: auto; min-width: 100%; min-height: 100%; z-index: 1; } .cover--dark { color: #ffffff; } .cover--light { color: #333333; } .cover .text-shadow--xl-double { text-shadow: 0 0 6px black, 0 0 6px black; } .cover .text-shadow--xl { text-shadow: 0 0 6px rgba(0, 0, 0, 0.8); } .cover .text-shadow--l { text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); } .cover .text-shadow--m { text-shadow: 1px 1px 2px black; } .cover .text-outline { text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000; } .cover .text-glow--xl { text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); } .cover .text-glow--l { text-shadow: 0 0 4px rgba(255, 255, 255, 0.8); } .cover .text-glow--m { text-shadow: 1px 1px 2px white; } .cover .cover-container { display: flex; flex-wrap: wrap; flex-direction: row; height: 100%; position: relative; z-index: 3; } .cover .cover-container > div { width: 100%; } .cover .cover-content-top { align-self: flex-start; margin-top: 60px; } .cover .cover-content-middle { align-self: center; } .cover .cover-content-bottom { align-self: flex-end; margin-bottom: 82px; } .cover .cover-content-bottom:last-child { margin-bottom: 40px; } .cover .cover-content-caption { width: 100%; position: absolute; bottom: 10px; font-size: 1.4rem; text-align: right; right: 36px; left: 36px; } .cover .cover-stage { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-top: 40px; padding-bottom: 40px; } .cover .cover-stage--gradient-bottom-white-linear { background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%); } .cover .cover-stage--gradient-bottom-white-easeout { padding-top: 80px; background: linear-gradient(to top, white 20%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%); } .cover .cover-stage--dark { padding: 20px 0; background-color: rgba(0, 0, 0, 0.6); color: #ffffff; } .cover .cover-stage--gradient-bottom-smoke-easeout { padding-top: 80px; background: linear-gradient(to top, rgba(60, 60, 60, 0.4) 20%, rgba(60, 60, 60, 0.35) 40%, rgba(60, 60, 60, 0.3) 60%, rgba(60, 60, 60, 0.2) 80%, rgba(60, 60, 60, 0) 100%); } .cover .cover-heading-lv2 { font-size: 3.2rem; } .cover .cover-heading-lv3 { font-size: 2.4rem; } .cover .cover-heading-lv4 { font-size: 2rem; } /* --------------------------- */ .flex { display: flex; justify-content: center; align-items: stretch; } .flex > div { display: block; margin-left: 18px; margin-right: 18px; } .flex:not(.flex--reverse):not(.flex--wrap) > div:first-child { margin-left: 0; } .flex:not(.flex--reverse):not(.flex--wrap) > div:last-child { margin-right: 0; } .flex.flex--reverse > div:first-child { margin-right: 0; } .flex.flex--reverse > div:last-child { margin-left: 0; } .flex--slim > div { margin-left: 12px; margin-right: 12px; } .flex--thin > div { margin-left: 9px; margin-right: 9px; } .flex--tiny > div { margin-left: 3px !important; margin-right: 3px !important; } .flex--layout > div { margin-left: 0 !important; margin-right: 0 !important; } .flex--wrap { margin-left: -18px; margin-right: -18px; flex-wrap: wrap; } .flex--wrap.flex--slim { margin-left: -12px; margin-right: -12px; } .flex--wrap.flex--thin { margin-left: -9px; margin-right: -9px; } .flex--wrap.flex--tiny { margin-left: -3px !important; margin-right: -3px !important; } .flex--wrap-reverse { flex-wrap: wrap-reverse; } .flex--reverse { flex-direction: row-reverse; } .flex--col { flex-direction: col; } .flex--col-reverse { flex-direction: col-reverse; } .flex--hr-start { justify-content: flex-start; } .flex--hr-end { justify-content: flex-end; } .flex--hr-between { justify-content: space-between; } .flex--hr-around { justify-content: space-around; } .flex--vt-start { align-items: flex-start; } .flex--vt-end { align-items: flex-end; } .flex--vt-center { align-items: center; } .flex-item--align-start { align-self: flex-start; } .flex-item--align-end { align-self: flex-end; } .flex-item--align-center { align-self: center; } .flex-item--align-baseline { align-self: baseline; } .flex-item--align-stretch { align-self: stretch; } .flex-item--grow-1 { flex-grow: 1; } .flex-item--shrink-1 { flex-shrink: 1; } .flex-item--grow-2 { flex-grow: 2; } .flex-item--shrink-2 { flex-shrink: 2; } .flex-item--grow-3 { flex-grow: 3; } .flex-item--shrink-3 { flex-shrink: 3; } .flex-item--grow-4 { flex-grow: 4; } .flex-item--shrink-4 { flex-shrink: 4; } .flex-item--grow-5 { flex-grow: 5; } .flex-item--shrink-5 { flex-shrink: 5; } .flex-item--grow-6 { flex-grow: 6; } .flex-item--shrink-6 { flex-shrink: 6; } .flex-item--grow-7 { flex-grow: 7; } .flex-item--shrink-7 { flex-shrink: 7; } .flex-item--grow-8 { flex-grow: 8; } .flex-item--shrink-8 { flex-shrink: 8; } .flex-item--grow-9 { flex-grow: 9; } .flex-item--shrink-9 { flex-shrink: 9; } .flex-item--grow-10 { flex-grow: 10; } .flex-item--shrink-10 { flex-shrink: 10; } /* --------------------------- */ .float-left { float: left; } .float-right, .conversation-fr { float: right; } .float-none { float: none; } .clearfix:after { content: ""; display: block; clear: both; } /* --------------------------- */ section h2:not([class]), .section h2:not([class]), article h2:not([class]), .heading-lv2 { position: relative; margin: 48px 0 30px; padding: 13px 10px 13px 24px; background-color: #eff3f9; font-size: 2.4rem; font-weight: 700; line-height: 1.4; } section h2:not([class]):before, .section h2:not([class]):before, article h2:not([class]):before, .heading-lv2:before { display: block; position: absolute; left: 0; top: 0; width: 4px; height: 24px; background-color: #356cb6; content: ""; } section h2:not([class]):first-child, .section h2:not([class]):first-child, article h2:not([class]):first-child, .heading-lv2:first-child { margin-top: 0; } section h3:not([class]), .section h3:not([class]), article h3:not([class]), .heading-lv3 { position: relative; margin: 42px 0 24px; padding-bottom: 12px; border-bottom: 2px solid #eff3f9; font-size: 2rem; font-weight: 700; line-height: 1.4; } section h3:not([class]):before, .section h3:not([class]):before, article h3:not([class]):before, .heading-lv3:before { position: absolute; bottom: 0; left: 0; width: 30%; display: block; content: ""; border-bottom: 2px solid #356cb6; margin-bottom: -2px; } section h3:not([class]):first-child, .section h3:not([class]):first-child, article h3:not([class]):first-child, .heading-lv3:first-child { margin-top: 0; } section h4:not([class]), .section h4:not([class]), article h4:not([class]), .heading-lv4 { margin: 36px 0 24px; padding: 3px 0 3px 18px; border-left: 4px solid #356cb6; min-height: 24px; font-size: 1.8rem; font-weight: 700; line-height: 1.4; } section h4:not([class]):first-child, .section h4:not([class]):first-child, article h4:not([class]):first-child, .heading-lv4:first-child { margin-top: 0; } section h5:not([class]), .section h5:not([class]), article h5:not([class]), .heading-lv5 { margin: 30px 0 18px; font-size: 1.8rem; font-weight: 700; line-height: 1.4; } section h5:not([class]):first-child, .section h5:not([class]):first-child, article h5:not([class]):first-child, .heading-lv5:first-child { margin-top: 0; } /* --------------------------- */ .lead { margin: -40px 0; font-weight: 400; font-size: 1.8rem; line-height: 1.4; } .lead-box { padding: 36px; } .lead-box .laed-box-more { margin-top: 18px; text-align: right; } .lead-box .heading { font-size: 3.2rem; color: #356cb6; } .lead-box .subheading { margin-top: 18px; font-size: 2rem; font-weight: 700; } /* --------------------------- */ .label { display: inline-block; height: 20px; width: 120px; border-radius: 10px; text-align: center; color: #ffffff; font-size: 1.1rem; line-height: 20px; vertical-align: top; font-weight: 700; background-color: #356cb6; } .label--stretch { width: auto; min-width: 90px; padding: 0 20px; } .label--outline { border: 1px solid #356cb6; background-color: #ffffff; color: #356cb6; } .label--white-blue { background-color: #ffffff; color: #356cb6; } .label--release { background-color: #1565c0; } .label--csr, .label--prep { background-color: #00838f; } .label--ir { background-color: #6a1b9a; } .label--update { background-color: #000080; } .label--media { background-color: #c62828; } .label--others { background-color: #666666; } .label--soa { background-color: #ad1457; } .label--award { background-color: #897000; } .label--event { background-color: #2e7d32; } .label--diversity { background-color: #be4171; } .label--kenchiku { background-color: #bf543a; } .label--doboku { background-color: #7b7b1e; } .label--stock { background-color: #186171; } .label--global, .label--app { background-color: #be416f; } .label--taisin { background-color: #8c6239; } .label--sas { background-color: #866ba6; } .label--manage { background-color: #4d73be; } .label--open { background-color: #2d8471; } .label--enviroment { background-color: #2a9d13; } .label--taiwa { background-color: #a45f14; } .label--activity { background-color: #a51447; } .label--uketuke { background-color: #938512; } .label--report { background-color: #951212; } .label--woman { background-color: #a71414; } .label--life { background-color: #328e11; } .label--ikuboss { background-color: #851293; } .label--challenged { background-color: #e67031; } .label--solutionSlide { background-color: #ffffff; color: #666666; } /* --------------------------- */ .link-item a:hover { text-decoration: underline; } p.link-item { position: relative; } p.link-item:before { position: absolute; left: 0; top: 6px; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; } p.link-item > a { display: inline-block; padding-left: 20px; } p.link-item.align-right:before { position: static; margin-right: 10px; } p.link-item.align-right > a { padding-left: 0; } p.link-item--circle:before { top: 5px; content: "\f014"; font-size: 1.4rem; } p.link-item--circle.font-size-xl:before { top: 9px; } p.link-item--circle > a { padding-left: 24px; } p.link-item--anchor:before { top: 8px; content: "\f008"; } ul.link-item > li { margin-top: 10px; position: relative; } ul.link-item > li:before { position: absolute; top: 7px; left: 0; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; margin-right: 10px; } ul.link-item > li:first-child { margin-top: 0; } ul.link-item > li a { display: inline-block; padding-left: 20px; } ul.link-item--circle > li:before { top: 5px; content: "\f014"; font-size: 1.4rem; } ul.link-item--circle > li a { padding-left: 24px; } ul.link-item--anchor > li:before { top: 8px; content: "\f008"; } ul.link-item--right > li { display: table; margin-left: auto; } ul.link-item--inline { margin-bottom: -10px; } ul.link-item--inline > li { position: relative; top: -10px; display: inline-block; margin-right: 20px; } ul.link-item--inline > li:first-child { margin-top: 10px; } ul.link-item--inline > li:last-child { margin-right: 0; } ul.link-item--inline.link-item--right { text-align: right; } ul.link-item--inline.link-item--right > li { margin-right: 0; margin-left: 20px; } ul.link-item--inline.link-item--right > li:first-child { margin-left: 0; } ul.link-item--inline.link-item--right > li:last-child { margin-right: 0; } ul.link-item--2col { display: flex; flex-wrap: wrap; } ul.link-item--2col > li { padding-right: 18px; width: 50%; } ul.link-item--2col > li:nth-child(-n+2) { margin-top: 0; } ul.link-item--3col { display: flex; flex-wrap: wrap; } ul.link-item--3col > li { padding-right: 18px; width: 33.33333%; } ul.link-item--3col > li:nth-child(-n+3) { margin-top: 0; } /* --------------------------- */ section a[target=_blank]:not(class), .section a[target=_blank]:not(class), .link-icon--blank { text-indent: 0; } section a[target=_blank]:not(class):after, .section a[target=_blank]:not(class):after, .link-icon--blank:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f006"; font-size: 1rem; vertical-align: baseline; margin-left: 4px; margin-right: 4px; } section a[href$=".pdf"]:not(class), .section a[href$=".pdf"]:not(class), .link-icon--pdf, a.s_pdf { text-indent: 0; } section a[href$=".pdf"]:not(class):after, .section a[href$=".pdf"]:not(class):after, .link-icon--pdf:after, a.s_pdf:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f007"; font-size: 1.2rem; vertical-align: baseline; margin-left: 4px; margin-right: 4px; color: #c71e0d; } section a[href$=".xls"]:not(class), .section a[href$=".xls"]:not(class), section a[href$=".xlsx"]:not(class), .section a[href$=".xlsx"]:not(class), .link-icon--excel { text-indent: 0; } section a[href$=".xls"]:not(class):after, .section a[href$=".xls"]:not(class):after, section a[href$=".xlsx"]:not(class):after, .section a[href$=".xlsx"]:not(class):after, .link-icon--excel:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f018"; font-size: 1.2rem; vertical-align: baseline; margin-left: 4px; margin-right: 4px; color: #02723b; } section a[href$=".zip"]:not(class), .section a[href$=".zip"]:not(class), .link-icon--zip { text-indent: 0; } section a[href$=".zip"]:not(class):after, .section a[href$=".zip"]:not(class):after, .link-icon--zip:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f019"; font-size: 1.2rem; vertical-align: baseline; margin-left: 4px; margin-right: 4px; color: #333333; } a.link-icon--normal:after { display: none !important; } .inline-link { text-decoration: underline; } .inline-link:hover { text-decoration: none; } .text-link:hover { text-decoration: underline; } a > img { transition: opacity 0.3s; } a > img:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } /* --------------------------- */ .anchor-box > a { display: block; display: flex; height: 100%; width: 100%; padding: 10px; padding-bottom: 24px; text-align: center; justify-content: center; align-items: center; border-right: 1px solid #e2e6e8; position: relative; } .anchor-box > a:hover { background-color: #eff3f9; } .anchor-box > a:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f008"; position: absolute; left: 50%; margin-left: -0.5rem; font-size: 1rem; bottom: 10px; } .anchor-box:first-child > a:before { display: none !important; } .grid--4col .anchor-box:nth-child(4n+1) > a, .grid--3col .anchor-box:nth-child(3n+1) > a, .grid--2col .anchor-box:nth-child(2n+1) > a { border-left: 1px solid #e2e6e8; } .grid--4col .anchor-box:nth-child(4n+1) > a:before, .grid--3col .anchor-box:nth-child(3n+1) > a:before, .grid--2col .anchor-box:nth-child(2n+1) > a:before { display: block; content: ""; border-top: 1px solid #e2e6e8; position: absolute; top: 0; left: 0; width: 1500px; } /* --------------------------- */ .box-link { display: block; border: 1px solid #e2e6e8; padding: 20px 0; text-align: center; transition: background-color 0.3s; } .box-link:hover { background-color: #eff3f9; } /* --------------------------- */ .link-list { display: table; width: 100%; } .link-list > li { display: table-row; } .link-list > li > div { border-bottom: 1px solid #e2e6e8; display: table-cell; padding: 12px 0; } .link-list > li > .date { white-space: nowrap; width: 140px; } .link-list > li > .tag { padding-left: 24px; width: 150px; line-height: 1.4; } .link-list > li > .tag > div { width: auto !important; } .link-list > li > .tag span { margin: 8px 0 0 !important; vertical-align: middle; } .link-list > li > .tag span:first-child { margin-top: 0 !important; } .link-list > li > .textArea { padding-left: 24px; } .link-list > li > .textArea a { text-decoration: underline; } .link-list > li > .textArea a:hover { text-decoration: none; } .link-list > li > .text { padding-left: 24px; } .link-list > li > .text a { position: relative; display: block; margin: -12px 0 -12px -12px; padding: 12px 60px 12px 12px; } .link-list > li > .text a:before { font-style: normal; font-size: 1.2rem; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; position: absolute; top: 50%; right: 20px; bottom: 0; margin: -0.55rem auto 0; height: 0; transition: 0.3s; } /* --------------------------- */ .anchor-list { font-size: 1.6rem; line-height: 1; } .anchor-list > li { display: inline-block; } .anchor-list > li:not(:first-child) { margin-left: 30px; } .anchor-list > li > a { display: block; position: relative; padding-left: 15px; } .anchor-list > li > a:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f008"; position: absolute; display: block; font-size: 1rem; margin-top: -0.4rem; top: 50%; left: 0; } /* --------------------------- */ .list > li { margin-top: 10px; } .list > li:first-child { margin-top: 0; } .list > li a { text-decoration: underline; } .list > li a:hover { text-decoration: none; } .list > li div a { text-decoration: none; } ul.list { padding-left: 18px; } ul.list > li { position: relative; list-style-type: none; } ul.list > li:before { content: ""; display: inline-block; width: 9px; height: 9px; background-color: #acc2de; border-radius: 5px; position: absolute; left: -18px; top: 7.5px; } .list .list > li { margin-top: 10px; } ul.list--thin > li { margin-top: 0; } ol.list--thin > li { margin-top: 0; } ol.list { padding-left: 1.5em; } ol.list > li { list-style-type: decimal; } ol.list > li:nth-child(n+10) { margin-left: 0.5em; } .list--disc > li { list-style-type: disc !important; } .list--circle > li { list-style-type: circle !important; } .list--square > li { list-style-type: square !important; } .list--decimal > li { list-style-type: decimal !important; } .list--decimal-leading-zero > li { list-style-type: decimal-leading-zero !important; } .list--lower-roman > li { list-style-type: lower-roman !important; } .list--upper-roman > li { list-style-type: upper-roman !important; } .list--hiragana > li { list-style-type: hiragana !important; } .list--katakana > li { list-style-type: katakana !important; } .list--lower-alpha > li { list-style-type: lower-alpha !important; } .list--upper-alpha > li { list-style-type: upper-alpha !important; } dl.list > dt { font-weight: 700; margin-top: 18px; } dl.list > dt:first-child { margin-top: 0; } dl.list > dd { margin-left: 2em; } dl.list-def { display: flex; flex-wrap: wrap; align-items: stretch; } dl.list-def > dt, dl.list-def > dd { position: relative; margin-top: 0; padding-top: 15px; padding-bottom: 15px; } dl.list-def > dt:before, dl.list-def > dt:after { content: ""; position: absolute; border-top: 1px solid #e2e6e8; } dl.list-def > dd:before, dl.list-def > dd:after { content: ""; position: absolute; border-top: 1px solid #e2e6e8; } dl.list-def > dt:before, dl.list-def > dd:before { top: 0; } dl.list-def > dt:after, dl.list-def > dd:after { bottom: 0; display: block; } dl.list-def > dt { font-weight: 700; padding-right: 12px; width: 25%; } dl.list-def > dt:after { left: 0; right: 0; } dl.list-def > dt:first-child:before { left: 0; right: 0; display: block; } dl.list-def > dd { padding-left: 12px; width: 75%; } dl.list-def > dd:after { left: 0; right: 0; } dl.list-def > dd:nth-child(2):before { left: 0; right: 0; display: block; } dl.list-def--hd-middle > dt { display: flex; align-items: center; } dl.list-def--1-9 > dt { width: 10%; } dl.list-def--1-9 > dd { width: 90%; } dl.list-def--2-8 > dt { width: 20%; } dl.list-def--2-8 > dd { width: 80%; } dl.list-def--3-7 > dt { width: 30%; } dl.list-def--3-7 > dd { width: 70%; } dl.list-def--4-6 > dt { width: 40%; } dl.list-def--4-6 > dd { width: 60%; } dl.list-def--5-5 > dt, dl.list-def--5-5 > dd { width: 50%; } dl.list-def--15-85 > dt { width: 15%; } dl.list-def--15-85 > dd { width: 85%; } /* --------------------------- */ ul.list-def { display: table; } ul.list-def > li { display: table-row; } ul.list-def > li > span { display: table-cell; vertical-align: top; } ul.list-def > li > span:first-child { padding-right: 1.1em; white-space: nowrap; position: relative; } ul.list-def > li > span:first-child:after { position: absolute; right: 0; content: ":"; } ul.list-def > li > span:last-child { padding-left: 1em; } ul.list-def--hd-right > li > span:first-child { text-align: right; } ul.list-def--hyphen > li > span:first-child:after { content: "-"; } ul.list-def--empty > li > span:first-child { padding-right: 0; } ul.list-def--empty > li > span:first-child:after { content: ""; } /* --------------------------- */ .faq > dt, .faq > dd { position: relative; padding-left: 30px; } .faq > dt:before, .faq > dd:before { position: absolute; display: block; left: 0; top: 0; font-weight: 700; } .faq > dt { margin-top: 18px; font-weight: 700; font-size: 1.8rem; } .faq > dt:first-child { margin-top: 0; } .faq > dt:before { content: "Q."; color: #356cb6; } .faq > dd { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid #e2e6e8; } .faq > dd:before { content: "A."; color: #ad1457; } .faq > dd a { text-decoration: underline; } .faq > dd a:hover { text-decoration: none; } /* --------------------------- */ figure { text-align: center; } figure > figcaption { font-size: 1.4rem; } figure > figcaption:first-child { margin-bottom: 10px; } figure > figcaption:not(:first-child) { margin-top: 10px; } figure.figure-orig > img { width: auto; height: auto; } img.orig { width: auto !important; height: auto !important; } img.fluid { width: 100% !important; } .figure-fixed { position: relative; width: 100%; max-width: 100%; } .figure-fixed:before { content: ""; display: block; padding-top: 66.66667%; } .figure-fixed > .figure-fixed-inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center; } .figure-fixed > .figure-fixed-inner > img { max-width: 100%; max-height: 100%; width: auto; height: auto; flex-shrink: 0; } .figure-fixed.figure-fixed--1-1:before, .figure-fixed.figure-fixed--sq:before { padding-top: 100%; } .figure-fixed.figure-fixed--4-3:before, .figure-fixed.figure-fixed--std:before { padding-top: 75%; } .figure-fixed.figure-fixed--2-1:before, .figure-fixed.figure-fixed--half:before { padding-top: 50%; } /* --------------------------- */ .card { border: 1px solid #e2e6e8; } .card .card-thumb { transition: opacity 0.3s; } .card a:hover .card-thumb { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .card .card-body { transition: background-color 0.3s; } .card a:hover .card-body { background-color: #eff3f9; } .card > a { display: block; } .card .card-thumb { text-align: center; } .card .card-body { padding: 18px; } .card .card-body > .hd { font-weight: 700; font-size: 1.8rem; padding-bottom: 10px; border-bottom: 1px solid #356cb6; margin-bottom: 10px; } .card .card-body > .hd.unbordered { padding-bottom: 0; margin-bottom: 0; } .card .card-body > .hd > a, .card .card-body > .hd > span { display: flex; align-items: center; height: 100%; position: relative; padding-right: 15px; line-height: 1.3; } .card .card-body > .hd > a:after, .card .card-body > .hd > span:after { position: absolute; top: 50%; right: 0; margin-top: -0.5rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; } .card .card-body > .hd > span.kabukainfo:after { content: none; } .card .card-body > .hd > a.new-parent, .card .card-body > .hd > span.new-parent { display: block; } .card .card-body > .hd > a > span.new, .card .card-body > .hd > a > a > span.new { color: #ffffff; font-size: 1.2rem; font-family: "Oswald"; font-weight: bold; background-color: #ff0000; margin-left: 1em; padding: 2px 8px 3px; } .card .card-body > .hd > span > span.new, .card .card-body > .hd > span > a > span.new { color: #ffffff; font-size: 1.2rem; font-family: "Oswald"; font-weight: bold; background-color: #ff0000; margin-left: 1em; padding: 2px 8px 3px; } .card .card-body > .hd > span.link-icon--blank::after { content: "\f006"; } .card .card-body > .hd > a:hover { text-decoration: underline; } .card .card-body > .sub { font-weight: 700; margin-top: 10px; margin-bottom: 10px; } .card .card-body > :first-child { margin-top: 0 !important; } .card .card-body .sub-text { color: #333333; } .card .card-body li { margin-top: 5px; } .card .card-body li > p { margin-top: 5px; } .card .card-body li > p::first-child { margin-top: 0; } .card .card-body > * { margin-top: 10px; } .card .card-body > .icon { text-align: center; padding-bottom: 20px; border-bottom: 1px solid #e2e6e8; } .card .card-body > .icon > img { width: 100px; height: 100px; } .card .card-body > .link-center { margin-top: 18px; text-align: center; } .card .card-body > .link-center.row2 { height: 2.8em; } .card .card-body > .link-center.row2:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .card .card-body > .link-center span { display: inline-block; vertical-align: middle; position: relative; padding-right: 20px; line-height: 1.4; } .card .card-body > .link-center span:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; content: "\f010"; color: #356cb6; font-size: 1rem; top: 50%; margin-top: -0.5rem; right: 0; } .card .card-body > .link-center span.link-icon--blank:after { content: "\f006"; } .card .card-body > .link-center span.new { color: #ffffff; font-size: 1.2rem; font-family: "Oswald"; font-weight: bold; background-color: #ff0000; margin-left: 1em; padding: 2px 8px 3px; display: inline-block; } .card .card-body > .link-center span.new:after { display: none; } .card .card-body dl.cm { display: table; width: 100%; border-bottom: 1px solid #e2e6e8; } .card .card-body dl.cm:last-child { border-bottom: none; } .card .card-body dl.cm dt { display: table-cell; vertical-align: top; } .card .card-body dl.cm dt a { display: block; padding: 15px 0; } .card .card-body dl.cm dt a:hover { text-decoration: underline; } .card .card-body dl.cm dd { display: table-cell; padding: 15px 0; text-align: right; } .card .card-body > dl.cm span.new { color: #ffffff; font-size: 1.2rem; font-family: "Oswald"; font-weight: bold; background-color: #ff0000; padding: 1px 8px 2px; } .card .card-body dl.fb { display: table; width: 100%; border-bottom: 1px solid #e2e6e8; } .card .card-body dl.fb:last-child { border-bottom: none; } .card .card-body dl.fb dd { display: block; width: 100%; text-align: right; } .card .card-body--thin { padding: 12px; } .card .card-step { margin-top: 32px; background-color: #eff3f9; padding: 18px; position: relative; } .card .card-step:before { position: absolute; top: -32px; left: 50%; margin-left: -9px; width: 0; height: 0; border-style: solid; content: ""; display: block; border-width: 12px 9px 0 9px; border-color: #356cb6 transparent transparent transparent; } .card .card-caption { padding: 10px 0; text-align: center; } .card .card-caption > span.new { color: #ffffff; font-size: 1.2rem; font-family: "Oswald"; font-weight: bold; background-color: #ff0000; margin-left: 1em; padding: 2px 8px 3px; display: inline-block; } .card a:hover .card-caption { text-decoration: underline; } .card--bg-white { background-color: #ffffff; } .grid--layout > div > .card { border-left: none; } .grid--layout.grid--3col > div:nth-child(3n+1) > .card, .grid--layout.grid--2col > div:nth-child(2n+1) > .card { border-left: 1px solid #e2e6e8; } /* --------------------------- */ .icon-box-wrapper > div:nth-child(4n+1) .icon-box-icon, .icon-box-wrapper > div:nth-child(4n+1) .icon-box-link { border-left: 1px solid #e2e6e8; } .icon-box { border: 1px solid #e2e6e8; margin: 0 15px; } .grid-box .icon-box { margin: 0; } .icon-box a { display: block; background-color: #ffffff; transition: background-color 0.3s; } .icon-box a:hover { background-color: #eff3f9; } .icon-box .icon-box-icon { border-bottom: 1px solid #e2e6e8; display: flex; align-items: center; justify-content: center; height: 160px; margin: 0 10px; } .icon-box .icon-box-icon img { width: 100px; height: 100px; } .icon-box .icon-box-link { height: 50px; padding: 0 10px; text-align: center; } .icon-box .icon-box-link:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .icon-box .icon-box-link span { position: relative; display: inline-block; vertical-align: middle; padding: 0 15px; line-height: 1.4; } .icon-box .icon-box-link span:after { content: ""; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; margin: auto; border-top: 2px solid #356cb6; border-right: 2px solid #356cb6; transform-origin: right top; transform: rotate(45deg); } .aboutBlock.aboutBorder .icon-box-icon, .aboutBorder .icon-box-link { border-left: none !important; } div.icon-box-icon.iconBig > img { width: 150px; } .icon-box2-wrapper { overflow: hidden; margin-bottom: -36px !important; } .icon-box2-wrapper > div { margin-bottom: 36px; position: relative !important; top: 0 !important; } .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-link, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-text { border-left: 1px solid #e2e6e8; } .icon-box2-wrapper > div:nth-child(4n+1):before { content: ""; display: block; border-bottom: 1px solid #e2e6e8; position: absolute; left: 0; bottom: 0; width: 1200px; } .icon-box2 > a { display: block; transition: background-color 0.3s; } .icon-box2 > a:hover { background-color: #eff3f9; } .icon-box2 .icon-box2-icon { padding-top: 36px; border-top: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; display: flex; align-items: center; justify-content: center; } .icon-box2 .icon-box2-icon img { width: 100px; height: 100px; } .icon-box2 .icon-box2-link { padding-top: 18px; padding-bottom: 24px; text-align: center; border-right: 1px solid #e2e6e8; border-bottom: 1px solid #e2e6e8; } .icon-box2 .icon-box2-link > span { display: inline-block; position: relative; padding-left: 20px; } .icon-box2 .icon-box2-link > span:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; content: "\f010"; color: #356cb6; font-size: 1rem; top: 50%; margin-top: -0.6rem; left: 0; } .icon-box2 .icon-box2-text { padding: 18px 24px 10px 24px; border-right: 1px solid #e2e6e8; color: #333333; } /* --------------------------- */ .table > table, table.table { border-collapse: collapse; border-spacing: 0; width: 100%; } .table > table th, .table > table td { padding: 12px 24px; border: 1px solid #e2e6e8; } table.table th, table.table td { padding: 12px 24px; border: 1px solid #e2e6e8; } .table > table th a, .table > table td a { text-decoration: underline; } table.table th a, table.table td a { text-decoration: underline; } .table > table th a:hover, .table > table td a:hover { text-decoration: none; } table.table th a:hover, table.table td a:hover { text-decoration: none; } .table > table th, table.table th { background-color: #eff3f9; font-weight: 700; } .table > table td, table.table td { vertical-align: top; } .table > table th:first-child, .table > table td:first-child { border-left: none; } table.table th:first-child, table.table td:first-child { border-left: none; } .table > table th:last-child, .table > table td:last-child { border-right: none; } table.table th:last-child, table.table td:last-child { border-right: none; } .table > table .cell-vt, table.table .cell-vt { display: inline-block; writing-mode: vertical-rl; white-space: nowrap; width: 1em; line-height: 1em; } .table--thin > table th, .table--thin > table td { padding: 9px 18px; border: 1px solid #e2e6e8; } table.table--thin th, table.table--thin td { padding: 9px 18px; border: 1px solid #e2e6e8; } /* --------------------------- */ .button { display: inline-block; border: 2px solid #356cb6; border-radius: 16px; padding: 0 10px; font-size: 1.4rem; font-weight: 700; text-align: center; position: relative; transition: all 0.3s; } .button:hover { background-color: #356cb6; color: #ffffff; } .button:before, .button:after { transition: border-color 0.3s; } .button:hover:before, .button:hover:after { border-color: #ffffff; } .button--fixed { min-width: 300px; padding: 8px 20px; border-radius: 30px; font-size: 1.6rem; line-height: 1.2; } .button--angle-right { padding-right: 25px; } .button--angle-right.button--fixed { padding-right: 35px; } .button--angle-right:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; right: 10px; top: 50%; font-size: 1rem; margin-top: -0.5rem; position: absolute; } .button--angle-left { padding-left: 25px; } .button--angle-left.button--fixed { padding-left: 35px; } .button--angle-left:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f009"; left: 10px; top: 50%; font-size: 1rem; margin-top: -0.5rem; position: absolute; } .button--search { padding-right: 1.4rem; } .button--search:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f016"; right: 10px; top: 50%; margin-top: -0.7rem; position: absolute; } .button--add { padding-right: 1.4rem; } .button--add:before, .button--add:after { display: block; border-style: solid; content: ""; top: 50%; position: absolute; } .button--add:before { border-bottom-width: 1px; border-top-width: 1px; width: 10px; right: 12px; } .button--add:after { border-left-width: 1px; border-right-width: 1px; height: 10px; margin-top: -4px; right: 16px; } .button--sub { padding-right: 1.4rem; } .button--sub:before { display: block; border-style: solid; border-color: #356cb6; content: ""; top: 50%; position: absolute; border-bottom-width: 1px; border-top-width: 1px; width: 10px; right: 10px; } .button-more { font-family: Oswald; letter-spacing: 0.2rem; font-weight: 400; position: relative; display: inline-block; padding-left: 20px; transition: opacity 0.3s; } .button-more:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .button-more:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; content: "\f014"; position: absolute; top: 50%; font-size: 1.4rem; margin-top: -0.6rem; left: 0; } /* --------------------------- */ p.note { font-size: 1.4rem; margin-left: 1.4em; text-indent: -1.4em; } p.note:before { content: "※"; display: inline; margin-right: 0.4em; } ul.note { font-size: 1.4rem; } ul.note > li { margin-left: 1.4em; text-indent: -1.4em; } ul.note > li:before { content: "※"; display: inline; margin-right: 0.4em; } ol.note { font-size: 1.4rem; counter-reset: order; } ol.note > li { margin-left: 1.9em; text-indent: -1.9em; } ol.note > li:before { counter-increment: order; content: "※" counter(order); display: inline; margin-right: 0.4em; } ol.note > li:nth-child(n+10) { margin-left: 2.4em; text-indent: -2.4em; } p.note-def { font-size: 1.4rem; display: flex; justify-content: left; } p.note-def span { display: block; } p.note-def span:first-child { padding-right: 0.4em; flex-shrink: 0; } ul.note-def, ol.note-def { font-size: 1.4rem; display: table; } ul.note-def > li, ol.note-def > li { display: table-row; } ul.note-def > li > span, ol.note-def > li > span { display: table-cell; vertical-align: top; } ul.note-def > li > span:first-child, ol.note-def > li > span:first-child { padding-right: 0.4em; white-space: nowrap; text-align: right; } /* --------------------------- */ .tab-buttons { display: table; width: 100%; margin-bottom: 40px; } .tab-buttons > li { display: table-cell; vertical-align: middle; width: 33.3%; border: 1px solid #e2e6e8; padding: 10px; text-align: center; color: #356cb6; font-weight: 700; font-size: 1.6rem; cursor: pointer; transition: background-color 0.3s; transition: all 0.3s; } .tab-buttons > li:hover { background-color: #eff3f9; } .tab-buttons > li.is-current { background-color: #356cb6; border-color: #356cb6; color: #ffffff; position: relative; cursor: default; } .tab-buttons > li.is-current:before { width: 0; height: 0; border-style: solid; content: ""; display: block; border-width: 5px 5px 0 5px; border-color: #356cb6 transparent transparent transparent; position: absolute; bottom: -5px; left: 50%; margin-left: -5px; z-index: 3; } .tab-buttons > li:not(:first-child) { border-left: none; } .tab-buttons > li a { color: inherit; } .tab-buttons.col4 li { width: 25%; } .tab-content { display: none; } .tab-content.is-open { display: block; } /* --------------------------- */ .font-size-xs { font-size: 1rem; } .font-size-s { font-size: 1.2rem; } .font-size-m { font-size: 1.4rem; } .font-size-r { font-size: 1.6rem; } .font-size-l { font-size: 1.8rem; } .font-size-xl { font-size: 2rem; } .font-size-xxl { font-size: 2.4rem; } .font-size-hd { font-size: 3.2rem; } /* --------------------------- */ .indentation, .indentation-area p { text-indent: 1em; text-align: justify; } /* --------------------------- */ strong { font-weight: 700; } em { color: #d80e0e; font-style: normal; } .color-white { color: #ffffff; } .color-blue { color: #356cb6; } .br-sp1 { display: none; } /* --------------------------- */ .modalBox { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: rgba(53, 108, 182, 0.9); display: none; } .modalBox-inner { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .modalBox-comtents { /* width: 900px; */ padding: 0 36px; display: block; } .modalBox-closeBtn { color: #ffffff; font-size: 1.4rem; cursor: pointer; display: block; text-align: right; animation: none !important; border-radius: 0; } .modalBox-closeBtn:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .modalBox-closeBtn:before { font-family: glyphs; content: "\f020"; font-size: 1.5rem; display: inline-block; vertical-align: -2px; margin-right: 7px; } .modalBox img { width: 100%; display: block; margin-top: 20px; } /* --------------------------- */ .doc { max-width: 700px; margin-left: auto; margin-right: auto; text-align: justify; } .doc--wide { max-width: 800px; margin-left: auto; margin-right: auto; } .doc--narrow { max-width: 600px; margin-left: auto; margin-right: auto; } .doc--indent { text-indent: 1em; } /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro { background-color: #356cb6; height: 300px; color: #ffffff; position: relative; } .category-intro .category-intro-thumb { margin-left: 45%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden; height: 100%; } .category-intro .category-intro-thumb .category-intro-thumb-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .category-intro .category-intro-thumb .category-intro-thumb-inner > img { position: absolute; top: -100%; right: -100%; bottom: -100%; left: -100%; margin: auto; width: auto; min-width: 100%; min-height: 100%; z-index: 1; } .category-intro .category-intro-body { position: relative; z-index: 2; width: 533px; height: 300px; padding-top: 36px; padding-bottom: 36px; padding-right: 36px; background-color: #356cb6; } .category-intro .category-intro-body:after { display: block; content: ""; width: 40%; position: absolute; top: 0; right: -40%; bottom: 0; background: linear-gradient(to right, #356cb6 0%, transparent 100%); } .category-intro .category-intro-body > .hd { font-size: 2.4rem; width: 100%; line-height: 1; } .category-intro .category-intro-body > .summary { margin-top: 30px; display: flex; } .category-intro .category-intro-body .icon > img { width: 100px; height: 100px; } .category-intro .category-intro-body .text { margin-left: 36px; text-align: justify; } .category-intro .category-intro-body .link > a { margin-top: 30px; display: inline-block; color: #ffffff; border: 1px solid #ffffff; padding: 8px 12px 8px 38px; position: relative; font-weight: 400; text-align: center; min-width: 300px; border-radius: 0 !important; transition: all 0.3s; } .category-intro .category-intro-body .link > a:hover { background-color: rgba(255, 255, 255, 0.2); } .category-intro .category-intro-body .link > a:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; position: absolute; top: 50%; left: 12px; margin-top: -0.7rem; font-size: 1.4rem; } .category-intro .category-intro-body .link2 > a:hover { background-color: rgba(169, 169, 169, 0.3); } .category-intro--gray { background-color: #8a929d; } .category-intro--gray .category-intro-body { background-color: #8a929d; } .category-intro--gray .category-intro-body:after { background: linear-gradient(to right, #8a929d 0%, transparent 100%); } .category-intro--reverse .category-intro-thumb { margin-right: 45%; margin-left: 0; } .category-intro--reverse .category-intro-body { margin-left: auto; padding-right: 0; padding-left: 36px; } .category-intro--reverse .category-intro-body:after { right: auto; left: -40%; background: linear-gradient(to left, #356cb6 0%, transparent 100%); } .category-intro--gray.category-intro--reverse .category-intro-body:after { background: linear-gradient(to left, #8a929d 0%, transparent 100%); } .category-intro--h350 { height: 350px; } .category-intro--h350 .category-intro-body { height: 350px; } .category-intro--h400 { height: 400px; } .category-intro--h400 .category-intro-body { height: 400px; } /* ------------------------------------------- common ---------------------------------------------*/ .printFooter { position: relative; border-top: 1px solid #e2e6e8; padding: 40px 0; } .printFooter-text { text-align: right; font-size: 1.1rem; } /* --------------------------- */ .content-box { border: 2px solid #eff3f9; padding: 36px; } .content-box > .shift-top { margin-top: -30px; } .content-box > .heading { font-size: 1.6rem; font-weight: 700; position: relative; padding-bottom: 10px; } .content-box > .heading:after { display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 70px; border-bottom: 2px solid #356cb6; } .content-box > .subheading { font-size: 1.6rem; font-weight: 700; } /* --------------------------- */ .bg-white { background-color: #ffffff; } .bg-darkblue { background-color: #356cb6; color: #ffffff; } .bg-lightblue { background-color: #5d89c5; color: #ffffff; } .bg-paleblue { background-color: #eff3f9; } .bg-haze { background-color: #fafafa; } .bg-mist { background-color: #f2f2f2; } .bg-darkgray { background-color: #8a929d; color: #ffffff; } .bg-hr-half { position: relative; } .bg-hr-half:before { position: absolute; display: block; content: ""; top: 0; bottom: 0; left: 50%; right: 0; z-index: 0; } .bg-hr-half > * { position: relative; z-index: 1; } .bg-hr-half--left:before { left: 0; right: 50%; } .bg-hr-half--white:before { background-color: #ffffff; } .bg-hr-half--darkblue:before { background-color: #356cb6; } .bg-hr-half--lightblue:before { background-color: #5d89c5; } .bg-hr-half--paleblue:before { background-color: #eff3f9; } .bg-hr-half--haze:before { background-color: #fafafa; } .bg-hr-half--mist:before { background-color: #f2f2f2; } /* --------------------------- */ .nav-carousel { background-color: #eff3f9; position: relative; display: none; } .nav-carousel .slick-arrow { font-size: 0; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 15px; background-color: #ffffff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); color: #356cb6; cursor: pointer; transition: all 0.3s; } .nav-carousel .slick-arrow:hover { background-color: #356cb6; color: #ffffff; } .nav-carousel .slick-arrow:before, .nav-carousel .slick-arrow:after { transition: border-color 0.3s; } .nav-carousel .slick-arrow:hover:before, .nav-carousel .slick-arrow:hover:after { border-color: #ffffff; } .nav-carousel .slick-arrow:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.5rem; font-size: 1rem; z-index: 3; } .nav-carousel .slick-prev { left: 10px; } .nav-carousel .slick-prev:before { content: "\f009"; margin-left: -0.6rem; } .nav-carousel .slick-next { right: 10px; } .nav-carousel .slick-next:before { content: "\f010"; margin-left: -0.4rem; } .nav-carousel .slick-list { margin-left: 50px; margin-right: 50px; position: relative; } .nav-carousel .slick-list:before { position: absolute; display: block; content: ""; border-left: 1px solid #c9d8eb; top: 18px; bottom: 18px; left: 0; } .nav-carousel .slick-list:after { position: absolute; display: block; content: ""; border-left: 1px solid #c9d8eb; top: 18px; bottom: 18px; right: 0; } .nav-carousel .slick-track { display: flex; } .nav-carousel .slick-slide { padding: 25px 15px 15px; position: relative; float: none; height: auto; } .nav-carousel .slick-slide:first-child:before { position: absolute; display: block; content: ""; border-left: 1px solid #c9d8eb; top: 18px; bottom: 18px; left: 0; transition: all 0.3s; } .nav-carousel .slick-slide:after { position: absolute; display: block; content: ""; border-right: 1px solid #c9d8eb; top: 18px; bottom: 18px; right: 0; transition: all 0.3s; } .nav-carousel .nav-carousel-item.active, .nav-carousel .nav-carousel-item:hover { background-color: #356cb6; color: #ffffff; } .nav-carousel .nav-carousel-item.active:before, .nav-carousel .nav-carousel-item:hover:before, .nav-carousel .nav-carousel-item.active:after, .nav-carousel .nav-carousel-item:hover:after { border-color: #356cb6; } .nav-carousel .nav-carousel-item > .text { margin-top: 15px; position: relative; padding-left: 18px; font-size: 1.4rem; line-height: 1.2; } .nav-carousel .nav-carousel-item > .text:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; font-size: 1.3rem; position: absolute; left: 0; top: 3px; } /* --------------------------- */ .vis-carousel { display: none; position: relative; margin-left: auto; margin-right: auto; max-width: 850px; } .vis-carousel .slick-prev { left: -25px; } .vis-carousel .slick-prev:before { content: "\f009"; margin-left: -0.6rem; } .vis-carousel .slick-next { right: -25px; } .vis-carousel .slick-next:before { content: "\f010"; margin-left: -0.4rem; } .vis-carousel .slick-list { z-index: 1; } .vis-carousel .slick-arrow { font-size: 0; position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -42px; border-radius: 25px; background-color: #ffffff; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25); color: #356cb6; cursor: pointer; transition: all 0.3s; } .vis-carousel .slick-arrow:hover { background-color: #356cb6; color: #ffffff; } .vis-carousel .slick-arrow:before, .vis-carousel .slick-arrow:after { transition: border-color 0.3s; } .vis-carousel .slick-arrow:hover:before, .vis-carousel .slick-arrow:hover:after { border-color: #ffffff; } .vis-carousel .slick-arrow:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: absolute; top: 50%; left: 50%; margin-top: -0.5rem; font-size: 1rem; z-index: 3; } .vis-carousel .slick-dots { text-align: center; margin-top: 24px; font-size: 0; line-height: 0; } .vis-carousel .slick-dots > li { display: inline-block; margin: 0 5px; } .vis-carousel .slick-dots > li > button { font-size: 0; display: inline-block; height: 10px; width: 10px; border-radius: 5px; background-color: #eeeeee; cursor: pointer; padding: 0; } .vis-carousel .slick-dots > li.slick-active > button { background-color: #356cb6; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .sol-textlink { text-decoration: underline; } .sol-textlink:hover { text-decoration: none; } /* ------------------------------------------- about/information ---------------------------------------------*/ /* 旧グロナビ用? 不要かと Start*/ .menu-solution-item { display: flex; flex-wrap: wrap; } .menu-solution-item li { border-right: 1px solid #e2e6e8; } .menu-solution-item li a { font-size: 1.2rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.03em; } .menu-solution-item li a span:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; margin-top: 6px; margin-right: 3px; font-size: 1rem; transform: scale(0.5); } .menu-solution-item-icon { width: 90px; height: 90px; margin: auto; background: #ffffff; display: flex; justify-content: center; align-items: center; } .menu-solution-item-icon img { width: 50px; } /* 旧グロナビ用? 不要かと Start*/ /* ------------------------------------------- solution/recruit ---------------------------------------------*/ .solutionArticleWrpper { max-width: 900px; } .solutionArticleWrpper p { margin-top: 18px; } /* ------------------------------------------- Topics / Special ---------------------------------------------*/ .wrapper--topics-column { background: #f2f2f2; padding: 20px 0; margin-top: 30px; } /* ------------------------------------------- Topics / Special ---------------------------------------------*/ .ttlStyle03 { margin-bottom: 30px; } .ttlStyle03 span { display: block; position: relative; color: #356cb6; font-size: 30px; line-height: 30px; white-space: nowrap; overflow: hidden; } .ttlStyle03 span:after { content: ""; display: inline-block; position: relative; width: 99.5%; height: 2px; left: 0.5%; bottom: 13px; background-color: #4d73be; } .coverWrapper { width: 100%; overflow: hidden; position: relative; margin-bottom: 30px; } /* ------------------------------------------- Topics/ Internship2018 ---------------------------------------------*/ .topicsHero { width: 100%; overflow: hidden; position: relative; background: #dae2f0; } .topicsHero-inner { position: absolute; top: 60px; left: 0; width: 100%; } .topicsHero-ttl { color: #ffffff; font-size: 2rem; font-weight: 700; text-shadow: 2px 2px 5px #000000, 1px 1px 10px #000000; letter-spacing: 0.1em; position: absolute; } .topicsHero-ttl-label { border: 1px solid #ffffff; padding: 2px 10px 0; display: inline-block; } .topicsHero-ttl-big { font-size: 3.2rem; display: block; line-height: 1.4; margin-top: 5px; } .topicsHero-txt { width: 100%; max-width: 988px; padding: 0 24px; font-size: 1.4em; text-align: right; margin: auto; } .topicsHero--fixing img { width: 100%; max-width: 1200px; margin: auto; display: block; } .topicsHero--fixing .topicsHero-inner { top: 40px; } .topicsHero--fixing .topicsHero-ttl { padding-left: 38px; } /* ------------------------------------------- About / IR / Special  ---------------------------------------------*/ .topicsContainer { width: 100%; max-width: 988px; padding: 96px 24px 0; margin: auto; } .topicsContainer .topics-ttl { font-size: 2.4rem; text-align: left; line-height: 1.4; } .topicsContainer .topics-ttl02 { color: #356cb6; font-size: 3.2rem; } .topicsContainer .topics-txt { font-size: 1.6em; line-height: 2.2; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .topicsColumn { width: 100%; max-width: 988px; padding: 0 24px; margin: auto; padding: 70px 0; } .topicsColumn-ttl { color: #356cb6; font-size: 3.2rem; white-space: nowrap; overflow: hidden; position: relative; } .topicsColumn-ttl:after { content: ""; display: inline-block; position: relative; width: 99.5%; height: 2px; left: 0.5%; bottom: 13px; background-color: #356cb6; } .topicsColumn-ttl02 { font-size: 1.9rem; font-weight: 700; } .topicsColumn-txt { font-size: 1.6em; line-height: 2.2; margin-top: 18px; } /* ------------------------------------------- About / Topics ---------------------------------------------*/ .buleFrame { position: relative; width: 100%; max-width: 650px; margin: auto; border: 2px solid #dae2f0; } .buleFrame:before, .buleFrame:after { content: ""; width: 10px; height: 10px; border-top: solid 2px #356cb6; position: absolute; top: -2px; } .buleFrame:before { border-left: solid 2px #356cb6; left: -2px; } .buleFrame:after { border-right: solid 2px #356cb6; right: -2px; } .buleFrame-inner { position: relative; width: 100%; padding: 15px; } .buleFrame-inner:before, .buleFrame-inner:after { content: ""; width: 10px; height: 10px; border-bottom: solid 2px #356cb6; position: absolute; bottom: -2px; } .buleFrame-inner:before { border-left: solid 2px #356cb6; left: -2px; } .buleFrame-inner:after { border-right: solid 2px #356cb6; right: -2px; } .buleFrame-link { background: #eff3f9; display: table; width: 100%; height: 88px; } .buleFrame-link:hover .buleFrame-img { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .buleFrame-link:hover .buleFrame-text > span { text-decoration: underline; } .buleFrame-img { display: table-cell; width: 117px; transition: opacity 0.3s; } .buleFrame-img.vertical { width: 78px; } .buleFrame-text { display: table-cell; padding: 0 10px; vertical-align: middle; text-align: center; font-size: 1.8rem; line-height: 1.3; } .buleFrame-text:before { display: inline-block; margin-right: 10px; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; font-size: 1.4rem; } /* ------------------------------------------- Solution / Project / About ---------------------------------------------*/ .m_pager { margin-top: 60px; } .m_pager > ul { display: flex; justify-content: center; align-items: center; } .m_pager > ul > li { margin: 6px; display: block; width: 40px; height: 40px; border: 1px solid #e2e6e8; border-radius: 3px; text-align: center; line-height: 40px; } .m_pager > ul > li > a { display: block; transition: all 0.3s; } .m_pager > ul > li > a:hover { background-color: #356cb6; color: #ffffff; } .m_pager > ul > li > a:before, .m_pager > ul > li > a:after { transition: border-color 0.3s; } .m_pager > ul > li > a:hover:before, .m_pager > ul > li > a:hover:after { border-color: #ffffff; } .m_pager > ul > li.s_current { background-color: #356cb6; color: #ffffff; } .m_pager > ul > li.s_omit { border: none; } .m_pager > ul > li.s_prev > a, .m_pager > ul > li.s_prev > span { position: relative; } .m_pager > ul > li.s_prev > a:before, .m_pager > ul > li.s_prev > span:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f009"; font-size: 1rem; position: absolute; top: 50%; margin-top: -0.5rem; left: 50%; margin-left: -0.5rem; } .m_pager > ul > li.s_next > a, .m_pager > ul > li.s_next > span { position: relative; } .m_pager > ul > li.s_next > a:before, .m_pager > ul > li.s_next > span:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; font-size: 1rem; position: absolute; top: 50%; margin-top: -0.5rem; left: 50%; margin-left: -0.5rem; } /* ------------------------------------------- common ---------------------------------------------*/ .p_text { font-size: 1.4rem; line-height: 1.6; } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .m_searchField .p_toggleTitle { cursor: pointer; } .m_searchField .p_toggleContent { margin-top: 18px; display: none; } .m_searchBtn { padding: 0; width: 100%; height: 40px; line-height: 40px; color: #356cb6; border: 2px solid #356cb6; border-radius: 20px; font: inherit; font-size: 1.4rem; font-weight: 700; text-align: center; padding-right: 1.4rem; position: relative; cursor: pointer; } .m_searchBtn:after { position: absolute; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f016"; right: 10px; top: 50%; margin-top: -0.7rem; } .m_searchBtn:hover { background-color: #356cb6; color: #ffffff; transition: all 0.3s; } ul.m_checkList { margin-bottom: 40px; } ul.m_checkList li { margin-top: 20px; } ul.m_checkList label { display: block; } ul.m_checkList input[type=checkbox] { display: none; } ul.m_checkList input[type=checkbox] + span { display: flex; flex-direction: column; } ul.m_checkList input[type=checkbox] + span > span { display: flex; align-items: center; padding-left: 30px; font-size: 1.4rem; color: #356cb6; min-height: 20px; line-height: 1; font-weight: 700; position: relative; cursor: pointer; transition: all 0.1s; } ul.m_checkList input[type=checkbox] + span > span:hover { border-color: #356cb6; } ul.m_checkList input[type=checkbox] + span > span:before { content: ""; display: block; position: absolute; background-color: #e2e6e8; border-radius: 3px; width: 20px; height: 20px; top: 50%; left: 0; margin-top: -10px; transition: all 0.1s; } ul.m_checkList input[type=checkbox]:checked + span > span { border-color: #356cb6; } ul.m_checkList input[type=checkbox]:checked + span > span:before { background-color: #356cb6; } ul.m_checkList input[type=checkbox]:checked + span > span:after { position: absolute; display: block; content: ""; width: 6px; height: 8px; top: 48%; left: 7px; border: solid 2px #ffffff; border-left: 0; border-top: 0; transform: translateY(-50%) rotate(45deg); } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-search-open, .works-search-close { display: none; } .works-sidebar-scroll > p { font-size: 1.4rem; line-height: 1.5; } /* ------------------------------------------- Top ---------------------------------------------*/ /*旧トップ ここから*/ .infoFix3 { flex-basis: 100%; flex: 1 1 0; color: #ffffff; font-size: 1.4rem; font-weight: 400; line-height: 50px; padding-left: 0; letter-spacing: 0.1em; } .infoFix { flex-basis: 180px; flex-shrink: 0; } .infoFix2 { flex-basis: 200px; flex-shrink: 0; } .chouseiPickup { margin: 60px auto; } .chouseiKodomo { padding: 72px 0 60px; } .ttl-style01, .ttl-style02 { font-size: 2.6rem; font-family: "Oswald", sans-serif; font-weight: 400; letter-spacing: 0.4em; text-align: center; padding: 0; line-height: 1; letter-spacing: 0.15em; } .ttl-style01 span, .ttl-style02 span { display: block; font-size: 1.2rem; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", YuGothic, "MS ゴシック", sans-serif; font-weight: 700; letter-spacing: 0.05em; text-align: center; margin: 20px 0 0 0; } .ttl-style01 { padding-bottom: 60px; color: #ffffff; } .ttl-style01 span { color: #ffffff; } .ttl-style02 { padding-bottom: 60px; } .ttl-style02 span { color: #333333; } .ttl-style03 { color: #ffffff; font-size: 2.4rem; text-align: center; } .ttl-style03 span { display: block; font-size: 1.2rem; margin-top: 15px; } .pickup { position: relative; } .pickup:before, .pickup:after { content: ""; width: 1px; height: 80px; position: absolute; bottom: 0; background: #c2c6c8; } .pickup:before { left: 0; } .pickup:after { right: 0; } .pickup-list { display: flex; flex-wrap: wrap; margin: 50px auto 0 auto; } .pickup-item { flex-basis: 25%; } .pickup-item a img { transition: opacity 0.3s; } .pickup-item a:hover img { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .pickup-item .pickup-txt span { transition: background-color 0.3s; } .pickup-item a:hover .pickup-txt span { background-color: #eff3f9; } .pickup-txt { display: table; width: 100%; height: 80px; margin-top: 0; } .pickup-txt span { border-right: 1px solid #c2c6c8; color: #4d73be; font-size: 16px; font-size: 1.6rem; font-weight: 700; display: table-cell; vertical-align: middle; line-height: 1.5; height: 80px; padding: 0 36px; } .pickup li:nth-child(1) > a > p > span { border-left: 1px solid #c2c6c8; } .pickup .slick-arrow { position: absolute; top: 0; bottom: 0; width: 50px; height: 50px; margin: auto 0; border-radius: 50%; background: #ffffff; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.08); color: transparent; line-height: 0; cursor: pointer; transition: all 0.3s; } .pickup .slick-arrow:hover { background-color: #356cb6; } .pickup .slick-arrow:hover:before { color: #ffffff; } .pickup .slick-arrow:before { font-family: glyphs; font-size: 18px; position: absolute; top: 50%; left: 0; right: 0; font-size: 1em; color: #356cb6; transform: scale(0.6); } .pickup .slick-prev { left: -25px; } .pickup .slick-prev:before { content: "\f009"; } .pickup .slick-next { right: -25px; } .pickup .slick-next:before { content: "\f010"; } .jigyouChouse { padding: 60px 0 0; background-color: #5d89c5; } .topGrid { position: relative; height: 600px; max-width: 1240px; margin: 0 auto; } .jigyouImg { position: absolute; top: 0; right: -160px; width: 1040px; } .topGrid-textRight .jigyouImg { left: -160px; right: auto; } .jigyouOya { position: absolute; top: 80px; left: 20px; width: 360px; } .topGrid-textRight .jigyouOya { left: auto; right: 20px; } .jigyouCard, .jigyouCard2, .jigyouCard3, .jigyouCard4, .jigyouCard5 { height: 440px; padding: 40px; } .jigyouCard { background-color: #ffffff; color: #333333; } .jigyouCard2, .jigyouCard3 { background-color: #356cb6; color: #ffffff; } .jigyouCard4 { background-color: #ffffff; color: #333333; } .jigyouCard5 { background-color: #333333; color: #ffffff; } .jigayouCardwrapp { position: relative; height: 100%; } .business-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 1200px; display: block; } .business-item { width: 360px; height: 440px; background: #ffffff; padding: 40px 36px; position: relative; } .business-item-ttl { font-size: 40px; font-size: 4rem; font-family: "Oswald", sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 40px; position: relative; margin-bottom: 40px; } .business-item-ttl span { font-size: 12px; font-size: 1.2rem; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", YuGothic, "MS ゴシック", sans-serif; font-weight: 700; padding-left: 25px; line-break: strict; } .business-item-ttl:before { content: ""; background: #356cb6; position: absolute; top: 20px; left: 22px; display: block; width: 40px; height: 4px; } .business-item-txt { font-size: 21px; font-size: 2.1rem; line-height: 22px; letter-spacing: -0.01em; font-weight: 400; } .business-item-txt span { display: block; margin-top: 26px; font-size: 16px; font-size: 1.6rem; line-height: 2.52rem; letter-spacing: 0.05em; } .business-item-btn, .business-item-btn2, .business-item-btn3, .business-item-btn4 { font-size: 18px; font-size: 1.8rem; font-family: "Oswald", sans-serif; font-weight: 500; width: 60px; text-align: center; display: block; height: 90px; position: absolute; padding: 0 auto; bottom: -60px; left: -20px; z-index: 1; cursor: pointer; } .business-item-btn:before, .business-item-btn2:before, .business-item-btn3:before, .business-item-btn4:before { content: ""; font-family: glyphs; width: 60px; height: 60px; border-radius: 50%; content: "\f005"; font-size: 18px; color: #356cb6; display: inline-block; vertical-align: 3px; margin-left: 0; background-size: 20px; background-color: #ffffff; display: block; box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.08); position: absolute; padding: 20px 0 0; bottom: 0; transition: all 0.3s; } .business-item-btn:hover:before, .business-item-btn2:hover:before, .business-item-btn3:hover:before, .business-item-btn4:hover:before { background-color: #5d89c5; color: #ffffff; } .business-item-btn, .business-item-btn4 { color: #356cb6; } .business-item-btn2, .business-item-btn3 { color: #ffffff; } .wrapper--darkgray { background-color: #333333; color: #ffffff; overflow: hidden; margin: 0; padding: 0; } .wrapper--usiao { background-color: #d7e2f0; color: #ffffff; overflow: hidden; margin: 0; padding: 0; } .business-item-ttlDark, .business-item-ttlWhite { font-size: 4rem; font-family: "Oswald", sans-serif; font-weight: 400; letter-spacing: 0.01em; line-height: 40px; position: relative; margin: 0 0 40px 0; padding: 0; } .business-item-ttlDark span, .business-item-ttlWhite span { font-size: 12px; font-size: 1.2rem; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "游ゴシック", "Yu Gothic", YuGothic, "MS ゴシック", sans-serif; font-weight: 700; padding-left: 25px; line-break: strict; } .business-item-ttlDark:before, .business-item-ttlWhite:before { content: ""; position: absolute; top: 20px; left: 22px; display: block; width: 40px; height: 4px; } .business-item-ttlDark:before { background: #333333; } .business-item-ttlWhite:before { background: #356cb6; } .message { border-bottom: 1px solid #333333; padding: 100px 0 80px; } .message-ttl { color: #356cb6; font-size: 34px; font-size: 3.4rem; font-weight: 400; line-height: 1.2; text-align: center; margin-bottom: 35px; } .message-txt { font-size: 16px; font-size: 1.6rem; text-align: center; line-height: 28.8px; margin-bottom: 42px; } .topicsMenu { display: none; background: rgba(53, 108, 182, 0.9); position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; overflow: auto; } .topicsMenu .container { position: relative; overflow: auto; } .topicsMenu-closeBtn { color: #ffffff; font-size: 1.4rem; cursor: pointer; } .topicsMenu-closeBtn:before { font-family: glyphs; content: "\f020"; font-size: 1.5rem; display: inline-block; vertical-align: -2px; margin-right: 7px; } .topicsMenu-closeBtn:hover { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .topicsMenu-txt01 { color: #ffffff; font-size: 1.6rem; } .topicsMenu .figure-fixed:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: opacity 0.3s; } .topicsMenu a:hover .figure-fixed:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .mainV-info-txt a.link-icon--pdf:after, .mainV-info-txt a.link-icon--excel:after, .mainV-info-txt a.link-icon--zip:after { color: #ffffff; } .chouseiNews { padding-top: 60px; margin-bottom: 0; margin-top: 0; } .chouseiBanner { margin-bottom: 0; padding-top: 40px; padding-bottom: 40px; } .chouseiBanner a img { transition: opacity 0.3s; } .chouseiBanner a:hover img { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .chouseiLinkBtn .container { overflow: hidden; } .linkTokutei { padding: 40px 0; } .linkTokutei-list-btn { background: #ffffff; border-radius: 5px; color: #356cb6; font-size: 14px; font-size: 1.4rem; font-weight: 700; display: block; text-align: center; line-height: 60px; height: 60px; position: relative; transition: all 0.3s; } .linkTokutei-list-btn:hover { background-color: #356cb6; color: #ffffff; } .linkTokutei-list-btn:before, .linkTokutei-list-btn:after { transition: border-color 0.3s; } .linkTokutei-list-btn:hover:before, .linkTokutei-list-btn:hover:after { border-color: #ffffff; } .linkTokutei-list-btn span { font-size: 12px; font-size: 1.2rem; font-weight: 400; line-height: 22px; display: block; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 100%; } .linkTokutei-list-btn:before { content: ""; width: 8px; height: 8px; position: absolute; top: 10px; right: 10px; bottom: 0; left: auto; display: inline-block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f006"; font-size: 1rem; vertical-align: middle; margin-left: 8px; } section .blankiconNone a[target=_blank]:not(class):after, .section .blankiconNone a[target=_blank]:not(class):after, .blankiconNone a.link-blank:after { display: none; } a.link-pdf2:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f007"; font-size: 1.2rem; vertical-align: middle; margin-left: 8px; color: #ffffff; } /*旧トップ ここまで*/ /* ------------------------------------------- common ---------------------------------------------*/ .btn-sytle01 { border: 2px solid #356cb6; border-radius: 20px; color: #356cb6; display: block; font-size: 16px; font-size: 1.6rem; font-weight: 700; line-height: 36px; text-align: center; margin: 0 auto; position: relative; width: 300px; transition: all 0.3s; } .btn-sytle01:hover { background-color: #356cb6; color: #ffffff; } .btn-sytle01:before, .btn-sytle01:after { transition: border-color 0.3s; } .btn-sytle01:hover:before, .btn-sytle01:hover:after { border-color: #ffffff; } .icon-arrow--r { position: relative; } .icon-arrow--r:before { content: ""; width: 6px; height: 6px; margin: auto; vertical-align: middle; border-top: 2px solid #356cb6; border-right: 2px solid #356cb6; transform: rotate(45deg); position: absolute; top: 0; right: 15px; bottom: 0; left: auto; } .icon-arrow--t { position: relative; } .icon-arrow--t:before { content: ""; width: 6px; height: 6px; margin: auto; vertical-align: middle; border-top: 2px solid #356cb6; border-right: 2px solid #356cb6; transform: rotate(315deg); position: absolute; top: 0; right: 12px; bottom: 0; left: auto; } .infoBichousei { margin-bottom: 48px; } /* ------------------------------------------- about / company ---------------------------------------------*/ .aboutTitle { font-size: 2rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 600px; z-index: 5; color: #ffffff; display: flex; align-items: center; justify-content: center; text-align: center; text-shadow: 2px 2px 5px #000000, 1px 1px 10px #000000, 2px 2px 10px #000000, -2px -2px 10px #000000, 0 0 0 #000000; line-height: 1.8; flex-direction: column; } /* ------------------------------------------- company / CSR / About ---------------------------------------------*/ .temptitle { font-size: 4rem; margin-bottom: 30px; font-weight: 400; } body > main > div.aboutnone { display: none; } /* ------------------------------------------- company / CSR / About ---------------------------------------------*/ .imgWrapper { width: 100%; max-height: 368px; overflow: hidden; background: url("/company/about/images/img_01.jpg") no-repeat 0 0; background-size: cover; position: relative; height: 368px; } /* ------------------------------------------- company / About ---------------------------------------------*/ .presidentWrap { max-width: 1200px; width: 100%; margin: 0 auto; position: relative; height: auto; height: 560px; } .imgWrapper2 { width: 100%; height: 560px; min-height: 312px; max-height: 312px; background: url("/company/about/images/img_02.jpg") no-repeat 0 0; background-size: cover; position: relative; } .presidentImg { background: url("/company/about/images/img_17.png") no-repeat 0 0; position: absolute; right: 220px; z-index: 1; width: 254px; height: 293px; top: 19px; } .topmessageWrap { position: absolute; top: 0; left: 0; width: 100%; } .topmessageWrap-mini { position: relative; margin: 0 auto; height: 0; max-width: 1272px; padding: 0 36px; } .topMsg { position: relative; z-index: 2; width: 543px; height: 300px; padding-top: 36px; padding-bottom: 36px; padding-right: 35px; color: #ffffff; } .topMsg h3 { font-size: 24px; font-weight: 500; margin: 5px 0 30px 0; } .topMsg p { font-size: 16px; line-height: 2; } .topMsg-innerWrap { width: 100%; position: relative; height: auto; } .aboutmore3 > a { margin-top: 30px; display: inline-block; color: #ffffff; border: 1px solid #ffffff; padding: 8px 12px 8px 38px; position: relative; font-weight: 400; text-align: center; min-width: 309px; border-radius: 0 !important; transition: all 0.3s; } .aboutmore3 > a:hover { background-color: rgba(169, 169, 169, 0.3); } .aboutmore3 > a:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; position: absolute; top: 50%; left: 12px; margin-top: -0.7rem; font-size: 1.4rem; } .presidentName2 { z-index: 11; position: absolute; top: 200px; right: 100px; width: 100px; color: #ffffff; font-size: 20px; font-weight: 700; } .presidentName2 img { display: block; width: 165px; height: 43px; margin: 10px 0 0 0; filter: url(#drop-shadow); } .category-intro.keieiBox .category-intro-body:after { content: none; } .category-intro.keieiBox .category-intro-thumb .category-intro-thumb-inner > img { width: 300px; height: auto; min-width: 300px; min-height: auto; } .category-intro.keieiBox h3 { font-size: 24px; } .category-intro.keieiBox .category-intro-thumb .category-intro-thumb-inner { background: #ffffff; } /* ------------------------------------------- About / Information ---------------------------------------------*/ .bmgnone { background: none !important; } .bmgnone img { border: 1px solid #cccccc; } /* ------------------------------------------- Special ---------------------------------------------*/ .close-Window { cursor: pointer; } audio::-internal-media-controls-download-button { display: none; } audio::-webkit-media-controls-enclosure { overflow: hidden; } audio::-webkit-media-controls-panel { width: calc(100% + 30px); } /* ------------------------------------------- About / Topics / Special ---------------------------------------------*/ .videoHeader { padding-bottom: 0; border-top: 1px solid #e2e6e8; } .videoFooter { position: relative; border-top: 1px solid #e2e6e8; padding: 40px 0; } .videoFootertext { font-size: 11px; } .videoWrap { max-width: 854px; position: relative; } .videoClose { position: absolute; right: 20px; top: 30px; width: 80px; font-size: 1.4rem; } .header-innerfix { padding: 20px 40px !important; } .videoFooterflex { display: flex; flex-direction: row-reverse; align-items: baseline; align-content: space-between; width: 100%; } .video-closeBtn { color: #356cb6; font-size: 1.4rem; cursor: pointer; transition: opacity 0.3s; } .video-closeBtn:hover { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .video-closeBtn:before { font-family: glyphs; content: "\f020"; font-size: 15px; display: inline-block; vertical-align: -2px; margin-right: 7px; } .videocopy { flex-basis: 70%; } .videocc { flex-basis: 30%; text-align: right; padding-right: 10px; } /* ------------------------------------------- common ---------------------------------------------*/ .mt-m10 { margin-top: -10px !important; } .mt-m20 { margin-top: -20px !important; } .mt-m30 { margin-top: -30px !important; } .mt-m40 { margin-top: -40px !important; } .mt-m50 { margin-top: -50px !important; } .mt-m60 { margin-top: -60px !important; } .mt-m70 { margin-top: -70px !important; } .mt-m80 { margin-top: -80px !important; } .mt-m90 { margin-top: -90px !important; } .mt-m100 { margin-top: -100px !important; } /* ------------------------------------------- common ---------------------------------------------*/ .textleft { text-align: left; } /* ------------------------------------------- About / Information / IR ---------------------------------------------*/ .news_section { margin: 40px 0; } .news_section:first-child { margin: 0; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .construction-linkbox { background: #eff3f9; } .construction-linkbox .construction-link { justify-content: center; } .construction-link .grid-wrap-box { width: 20%; border-right: solid 1px #c9d8eb; } .construction-link .grid-wrap-box:first-child { border-left: solid 1px #c9d8eb; } .grid-wrap .constlink-list { padding: 0; width: 20%; text-align: center; transition: all 0.3s; } .grid-wrap .constlink-list .listinn { position: relative; height: 100%; } .grid-wrap .constlink-list .listinn:after { content: ""; position: absolute; top: 20px; right: 0; bottom: 20px; border-right: solid 1px #c9d8eb; transition: border-color 0.3s; } .grid-wrap .constlink-list .listinn a { display: block; height: 100%; padding: 30px 20px 25px; } .grid-wrap .constlink-list:first-child .listinn:before { content: ""; position: absolute; top: 20px; left: 0; bottom: 20px; border-left: solid 1px #c9d8eb; transition: border-color 0.3s; } .grid-wrap .constlink-list.active, .grid-wrap .constlink-list:hover { background: #356cb6; } .grid-wrap .constlink-list.active .listinn:before, .grid-wrap .constlink-list.active .listinn:after { border-color: #356cb6; } .grid-wrap .constlink-list:hover .listinn:before, .grid-wrap .constlink-list:hover .listinn:after { border-color: #356cb6; } .grid-wrap .constlink-list.active .listinn a, .grid-wrap .constlink-list:hover .listinn a { color: #ffffff; } .constlink-txt { position: relative; padding-left: 20px; line-height: 1.4; font-size: 14px; display: inline-block; } .constlink-txt:not(:first-child) { margin-top: 15px; } .constlink-txt:before { position: absolute; top: 10px; left: 0; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-top: -0.7rem; content: "\f014"; margin-right: 5px; vertical-align: bottom; font-size: 1.5rem; } /* ------------------------------------------- common ---------------------------------------------*/ section.otherInfo a[target=_blank]:not(class):after, section.otherInfo a.link-blank:after { margin-left: 40px; } .section.otherInfo a[target=_blank]:not(class):after, .section.otherInfo a.link-blank:after { margin-left: 40px; } .highlight { font-weight: 700; } .aC { text-align: center; font-weight: 700; margin: 30px 0; } .backLink { margin: 40px 0; text-align: right; } .news-search-form { margin-bottom: 48px; } .news-search-form h3 { font-size: 1.4rem; padding: 12px 24px; color: #356cb6; margin-top: 18px; border: 1px solid #e2e6e8; border-radius: 3px; position: relative; cursor: pointer; transition: background-color 0.3s; } .news-search-form h3:hover { background-color: #eff3f9; } .news-search-form h3:after { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.8rem; content: "\f008"; position: absolute; right: 12px; top: 50%; margin-top: -0.4rem; } .news-search-form h3.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .news-search-form h3.open:after { content: ""; } .news-search-form .news-search-form-cat { position: relative; } .news-search-form ul { display: none; z-index: 2; position: absolute; left: 0; right: 0; background-color: #ffffff; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #e2e6e8; border-top: none; padding: 18px; } .news-search-form ul li { margin-top: 18px; } .news-search-form ul li:first-child { margin-top: 0; } .news-search-form ul input { display: none; } .news-search-form ul input:checked + span { font-weight: 700; } .news-search-form ul label span { color: #356cb6; display: inline-block; cursor: pointer; font-size: 1.6rem; } .news-search { border: 1px solid #e2e6e8; } .news-search .news-search-hd { background-color: #eff3f9; text-align: center; border-bottom: 1px solid #e2e6e8; font-weight: 700; padding: 8px; transition: 0.3s; } .news-search .news-search-buttons { padding: 30px 20px; margin: 0; display: flex; flex-wrap: wrap; } .news-search .news-search-buttons li { display: block; width: calc(33.33% - 20px); margin: 10px 10px; } .news-search .news-search-buttons label { display: block; } .news-search .news-search-buttons input[type=radio] { display: none; } .news-search .news-search-buttons input[type=radio] + span { display: block; border: 1px solid #e2e6e8; border-radius: 3px; text-align: center; font-size: 1.4rem; color: #356cb6; height: 40px; line-height: 40px; font-weight: 700; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 40px; } .news-search .news-search-buttons input[type=radio] + span:before { content: ""; display: block; position: absolute; background-color: #e2e6e8; border-radius: 3px; width: 20px; height: 20px; top: 50%; left: 10px; margin-top: -10px; transition: 0.3s; } .news-search .news-search-buttons input[type=radio]:checked + span { border-color: #356cb6; } .news-search .news-search-buttons input[type=radio]:checked + span:before { background-color: #356cb6; } .news-search .news-search-buttons input[type=radio]:checked + span:after { position: absolute; display: block; content: ""; width: 6px; height: 8px; top: 48%; left: 17px; border: solid 2px #ffffff; border-left: 0; border-top: 0; transform: translateY(-50%) rotate(45deg); } /* ------------------------------------------- Privacy ---------------------------------------------*/ .newsDate { text-align: right; } /* ------------------------------------------- common ---------------------------------------------*/ #contents > p.data { text-align: right; margin: 20px 0; } #contents > p.data:first-child { margin-top: 0; } #contents p { margin-top: 18px; } #contents th { text-align: left; } #contents figure { margin-top: 30px; } #contents a { text-decoration: underline; } #contents a:hover { text-decoration: none; } .red { color: #ff0000; padding: 10px 0 30px 0; } /* ------------------------------------------- common ---------------------------------------------*/ section p:not([class]) { margin-top: 18px; } section > p, section > ul, section > ol, section > dl, section > table { margin-top: 18px; } .section p:not([class]) { margin-top: 18px; } .section > p, .section > ul, .section > ol, .section > dl, .section > table { margin-top: 18px; } section p:not([class]):first-child { margin-top: 0; } section > p:first-child, section > ul:first-child, section > ol:first-child, section > dl:first-child, section > table:first-child { margin-top: 0; } .section p:not([class]):first-child { margin-top: 0; } .section > p:first-child, .section > ul:first-child, .section > ol:first-child, .section > dl:first-child, .section > table:first-child { margin-top: 0; } article p:not([class]) { margin-top: 18px; } article p:not([class]):first-child { margin-top: 0; } article > p, article > ul, article > ol, article > dl, article > table { margin-top: 18px; } article > p:first-child, article > ul:first-child, article > ol:first-child, article > dl:first-child, article > table:first-child { margin-top: 0; } .article-separated { margin-top: 48px !important; border-top: 1px dotted #e2e6e8; padding-top: 48px !important; } .mt-section { margin-top: 96px !important; } .mt-subsection, .mt-article { margin-top: 48px !important; } .mt-adj-tall { margin-top: 36px !important; } .mt-adj-medium { margin-top: 30px !important; } .mt-adj-short { margin-top: 24px !important; } .mt-paragraph { margin-top: 18px !important; } .mt-line { margin-top: 10px !important; } .pt-section { padding-top: 96px !important; } .pt-subsection, .pt-article { padding-top: 48px !important; } .pt-adj-tall { padding-top: 36px !important; } .pt-adj-medium { padding-top: 30px !important; } .pt-adj-short { padding-top: 24px !important; } .pt-paragraph { padding-top: 18px !important; } .pt-line { padding-top: 10px !important; } .mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px !important; } .mb40 { margin-bottom: 40px !important; } .mb45 { margin-bottom: 45px !important; } .mb50 { margin-bottom: 50px !important; } .mb55 { margin-bottom: 55px !important; } .mb60 { margin-bottom: 60px !important; } .mb65 { margin-bottom: 65px !important; } .mb70 { margin-bottom: 70px !important; } .mb75 { margin-bottom: 75px !important; } .mb80 { margin-bottom: 80px !important; } .mb85 { margin-bottom: 85px !important; } .mb90 { margin-bottom: 90px !important; } .mb95 { margin-bottom: 95px !important; } .mb100 { margin-bottom: 100px !important; } .mt0 { margin-top: 0 !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt45 { margin-top: 45px !important; } .mt50 { margin-top: 50px !important; } .mt55 { margin-top: 55px !important; } .mt60 { margin-top: 60px !important; } .mt65 { margin-top: 65px !important; } .mt70 { margin-top: 70px !important; } .mt75 { margin-top: 75px !important; } .mt80 { margin-top: 80px !important; } .mt85 { margin-top: 85px !important; } .mt90 { margin-top: 90px !important; } .mt95 { margin-top: 95px !important; } .mt100 { margin-top: 100px !important; } .ml0 { margin-left: 0 !important; } .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml15 { margin-left: 15px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } .ml30 { margin-left: 30px !important; } .ml35 { margin-left: 35px !important; } .ml40 { margin-left: 40px !important; } .ml45 { margin-left: 45px !important; } .ml50 { margin-left: 50px !important; } .ml55 { margin-left: 55px !important; } .ml60 { margin-left: 60px !important; } .ml65 { margin-left: 65px !important; } .ml70 { margin-left: 70px !important; } .ml75 { margin-left: 75px !important; } .ml80 { margin-left: 80px !important; } .ml85 { margin-left: 85px !important; } .ml90 { margin-left: 90px !important; } .ml95 { margin-left: 95px !important; } .ml100 { margin-left: 100px !important; } .mr0 { margin-right: 0 !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } .mr15 { margin-right: 15px !important; } .mr20 { margin-right: 20px !important; } .mr25 { margin-right: 25px !important; } .mr30 { margin-right: 30px !important; } .mr35 { margin-right: 35px !important; } .mr40 { margin-right: 40px !important; } .mr45 { margin-right: 45px !important; } .mr50 { margin-right: 50px !important; } .mr55 { margin-right: 55px !important; } .mr60 { margin-right: 60px !important; } .mr65 { margin-right: 65px !important; } .mr70 { margin-right: 70px !important; } .mr75 { margin-right: 75px !important; } .mr80 { margin-right: 80px !important; } .mr85 { margin-right: 85px !important; } .mr90 { margin-right: 90px !important; } .mr95 { margin-right: 95px !important; } .mr100 { margin-right: 100px !important; } .pb0 { padding-bottom: 0 !important; } .pb5 { padding-bottom: 5px !important; } .pb10 { padding-bottom: 10px !important; } .pb15 { padding-bottom: 15px !important; } .pb20 { padding-bottom: 20px !important; } .pb25 { padding-bottom: 25px !important; } .pb30 { padding-bottom: 30px !important; } .pb35 { padding-bottom: 35px !important; } .pb40 { padding-bottom: 40px !important; } .pb45 { padding-bottom: 45px !important; } .pb50 { padding-bottom: 50px !important; } .pb55 { padding-bottom: 55px !important; } .pb60 { padding-bottom: 60px !important; } .pb65 { padding-bottom: 65px !important; } .pb70 { padding-bottom: 70px !important; } .pb75 { padding-bottom: 75px !important; } .pb80 { padding-bottom: 80px !important; } .pb85 { padding-bottom: 85px !important; } .pb90 { padding-bottom: 90px !important; } .pb95 { padding-bottom: 95px !important; } .pb100 { padding-bottom: 100px !important; } .pt0 { padding-top: 0 !important; } .pt5 { padding-top: 5px !important; } .pt10 { padding-top: 10px !important; } .pt15 { padding-top: 15px !important; } .pt20 { padding-top: 20px !important; } .pt25 { padding-top: 25px !important; } .pt30 { padding-top: 30px !important; } .pt35 { padding-top: 35px !important; } .pt40 { padding-top: 40px !important; } .pt45 { padding-top: 45px !important; } .pt50 { padding-top: 50px !important; } .pt55 { padding-top: 55px !important; } .pt60 { padding-top: 60px !important; } .pt65 { padding-top: 65px !important; } .pt70 { padding-top: 70px !important; } .pt75 { padding-top: 75px !important; } .pt80 { padding-top: 80px !important; } .pt85 { padding-top: 85px !important; } .pt90 { padding-top: 90px !important; } .pt95 { padding-top: 95px !important; } .pt100 { padding-top: 100px !important; } .pl0 { padding-left: 0 !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pl15 { padding-left: 15px !important; } .pl20 { padding-left: 20px !important; } .pl25 { padding-left: 25px !important; } .pl30 { padding-left: 30px !important; } .pl35 { padding-left: 35px !important; } .pl40 { padding-left: 40px !important; } .pl45 { padding-left: 45px !important; } .pl50 { padding-left: 50px !important; } .pl55 { padding-left: 55px !important; } .pl60 { padding-left: 60px !important; } .pl65 { padding-left: 65px !important; } .pl70 { padding-left: 70px !important; } .pl75 { padding-left: 75px !important; } .pl80 { padding-left: 80px !important; } .pl85 { padding-left: 85px !important; } .pl90 { padding-left: 90px !important; } .pl95 { padding-left: 95px !important; } .pl100 { padding-left: 100px !important; } .pr0 { padding-right: 0 !important; } .pr5 { padding-right: 5px !important; } .pr10 { padding-right: 10px !important; } .pr15 { padding-right: 15px !important; } .pr20 { padding-right: 20px !important; } .pr25 { padding-right: 25px !important; } .pr30 { padding-right: 30px !important; } .pr35 { padding-right: 35px !important; } .pr40 { padding-right: 40px !important; } .pr45 { padding-right: 45px !important; } .pr50 { padding-right: 50px !important; } .pr55 { padding-right: 55px !important; } .pr60 { padding-right: 60px !important; } .pr65 { padding-right: 65px !important; } .pr70 { padding-right: 70px !important; } .pr75 { padding-right: 75px !important; } .pr80 { padding-right: 80px !important; } .pr85 { padding-right: 85px !important; } .pr90 { padding-right: 90px !important; } .pr95 { padding-right: 95px !important; } .pr100 { padding-right: 100px !important; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } .mb-auto { margin-bottom: auto !important; } .mt-auto { margin-top: auto !important; } .w0per { width: 0 !important; } .mw0per { max-width: 0 !important; } .mw100 { max-width: 100px !important; } .w5per { width: 5% !important; } .mw5per { max-width: 5% !important; } .mw150 { max-width: 150px !important; } .w10per { width: 10% !important; } .mw10per { max-width: 10% !important; } .mw200 { max-width: 200px !important; } .w15per { width: 15% !important; } .mw15per { max-width: 15% !important; } .mw250 { max-width: 250px !important; } .w20per { width: 20% !important; } .mw20per { max-width: 20% !important; } .mw300 { max-width: 300px !important; } .w25per { width: 25% !important; } .mw25per { max-width: 25% !important; } .mw350 { max-width: 350px !important; } .w30per { width: 30% !important; } .mw30per { max-width: 30% !important; } .mw400 { max-width: 400px !important; } .w35per { width: 35% !important; } .mw35per { max-width: 35% !important; } .mw450 { max-width: 450px !important; } .w40per { width: 40% !important; } .mw40per { max-width: 40% !important; } .mw500 { max-width: 500px !important; } .w45per { width: 45% !important; } .mw45per { max-width: 45% !important; } .mw550 { max-width: 550px !important; } .w50per { width: 50% !important; } .mw50per { max-width: 50% !important; } .mw600 { max-width: 600px !important; } .w55per { width: 55% !important; } .mw55per { max-width: 55% !important; } .mw650 { max-width: 650px !important; } .w60per { width: 60% !important; } .mw60per { max-width: 60% !important; } .mw700 { max-width: 700px !important; } .w65per { width: 65% !important; } .mw65per { max-width: 65% !important; } .mw750 { max-width: 750px !important; } .w70per { width: 70% !important; } .mw70per { max-width: 70% !important; } .mw800 { max-width: 800px !important; } .w75per { width: 75% !important; } .mw75per { max-width: 75% !important; } .mw850 { max-width: 850px !important; } .w80per { width: 80% !important; } .mw80per { max-width: 80% !important; } .mw900 { max-width: 900px !important; } .w85per { width: 85% !important; } .mw85per { max-width: 85% !important; } .mw950 { max-width: 950px !important; } .w90per { width: 90% !important; } .mw90per { max-width: 90% !important; } .mw1000 { max-width: 1000px !important; } .w95per { width: 95% !important; } .mw95per { max-width: 95% !important; } .mw1050 { max-width: 1050px !important; } .w100per { width: 100% !important; } .mw100per { max-width: 100% !important; } .mw1100 { max-width: 1100px !important; } .align-left { text-align: left !important; } .align-center { text-align: center !important; } .align-right { text-align: right !important; } .align-justify { text-align: justify !important; } .block-left { margin-right: auto !important; } .block-center { margin-right: auto !important; margin-left: auto !important; } .block-right { margin-left: auto !important; } .valign-top { vertical-align: top !important; } .valign-bottom { vertical-align: bottom !important; } .valign-middle { vertical-align: middle !important; } .line-height-none { line-height: 1 !important; } .line-height-short { line-height: 1.25 !important; } .line-height-normal { line-height: 1.5 !important; } .line-height-tall { line-height: 2 !important; } .bordered { border: 1px solid #e2e6e8 !important; } .bt-grey { border-top: 1px solid #e2e6e8 !important; } .unbordered { border: none !important; } .display-block { display: block !important; } .display-inline-block { display: inline-block !important; } .display-inline { display: inline !important; } .ps-container { touch-action: auto; overflow: hidden !important; } .ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail { display: block; background-color: transparent; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999999; height: 12px; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999999; width: 11px; } .ps-container > .ps-scrollbar-x-rail { position: absolute; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; transition: background-color 0.2s linear, opacity 0.2s linear; bottom: 0; height: 16px; } .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x { position: absolute; background-color: #aaaaaa; border-radius: 6px; transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out; bottom: 2px; height: 12px; } .ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x { height: 12px; } .ps-container > .ps-scrollbar-y-rail { position: absolute; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; transition: background-color 0.2s linear, opacity 0.2s linear; right: 0; width: 15px; } .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { position: absolute; background-color: #aaaaaa; border-radius: 6px; transition: background-color 0.2s linear, height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out; right: 2px; width: 6px; } .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y { width: 11px; } .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x { background-color: #999999; height: 12px; } .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y { background-color: #999999; width: 11px; } .ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .ps-container:hover > .ps-scrollbar-x-rail:hover { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x { background-color: #999999; } .ps-container:hover > .ps-scrollbar-y-rail:hover { background-color: #eeeeee; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y { background-color: #999999; } /* slick */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: pan-y; } .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 { transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before { content: ""; display: table; } .slick-track:after { content: ""; display: table; 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; } /*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */ .noUi-target { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; touch-action: none; -moz-user-select: none; user-select: none; box-sizing: border-box; position: relative; direction: ltr; } .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; touch-action: none; -moz-user-select: none; user-select: none; box-sizing: border-box; } .noUi-base { width: 100%; height: 100%; position: relative; z-index: 1; } .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; transform-origin: 0 0; } html:not([dir=rtl]) .noUi-horizontal .noUi-origin { left: auto; right: 0; } .noUi-vertical .noUi-origin { width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { position: absolute; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } html:not([dir=rtl]) .noUi-horizontal .noUi-handle { right: -17px; left: auto; } .noUi-target { background: #fafafa; border-radius: 4px; border: 1px solid #d3d3d3; box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbbbbb; } .noUi-connects { border-radius: 3px; } .noUi-connect { background: #3fb8af; } .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { border: 1px solid #d9d9d9; border-radius: 3px; background: #ffffff; cursor: default; box-shadow: inset 0 0 1px #ffffff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbbbbb; } .noUi-active { box-shadow: inset 0 0 1px #ffffff, inset 0 1px 7px #dddddd, 0 3px 6px -3px #bbbbbb; } .noUi-handle:before { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #e8e7e6; left: 14px; top: 6px; } .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #e8e7e6; left: 14px; top: 6px; left: 17px; } .noUi-vertical .noUi-handle:before { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; top: 17px; } [disabled] .noUi-connect { background: #b8b8b8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } .noUi-pips { box-sizing: border-box; position: absolute; color: #999999; } .noUi-pips * { box-sizing: border-box; } .noUi-value { position: absolute; white-space: nowrap; text-align: center; } .noUi-value-sub { color: #cccccc; font-size: 10px; } .noUi-marker { position: absolute; background: #cccccc; } .noUi-marker-sub, .noUi-marker-large { background: #aaaaaa; } .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .noUi-value-horizontal { transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 15px; } .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { transform: translate(0, -50%, 0); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #d9d9d9; border-radius: 3px; background: #ffffff; color: #000000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { transform: translate(0, -50%); top: 50%; right: 120%; } @media (max-width: 767px) { body { transition: all 0.4s; position: relative; left: 0; } main { margin-top: 60px; } /* ------------------------------------------- HEADER ---------------------------------------------*/ .header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; background: #ffffff; border-bottom: 1px solid #e2e6e8; transition: all 0.4s; } .header.gnav-open { left: -270px; } .header-inner { height: 60px; background: #ffffff; padding: 9px 15px; } /* --------------------------- */ .header-simple { height: 40px; margin-bottom: -60px; } .header-simple-inner { padding: 8px 15px; height: 40px; } .header-simple .close { right: 15px; } /* --------------------------- */ .headerfixcut { position: static; height: 80px; } /* --------------------------- */ .corp-logo { width: 90px; height: auto; } .corp-logo2 { width: 124px; } /* --------------------------- */ .hamburgerMenu { transition: all 0.4s; position: absolute; top: 0; right: 0; width: 60px; height: 60px; cursor: pointer; } .hamburgerMenu span { transition: all 0.4s; position: absolute; left: 20px; width: 20px; height: 2px; background: #356cb6; } .hamburgerMenu span:nth-of-type(1) { top: 20px; } .hamburgerMenu span:nth-of-type(2) { top: 26px; } .hamburgerMenu span:nth-of-type(3) { top: 32px; } .hamburgerMenu-active span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg); } .hamburgerMenu-active span:nth-of-type(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .hamburgerMenu-active span:nth-of-type(3) { transform: translateY(-6px) rotate(45deg); } /* --------------------------- */ .global-nav { background: #356cb6; position: absolute; top: 0; right: -270px; width: 270px; z-index: 50; overflow: auto; } .global-nav-open { right: -270px; } .global-nav-list > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .global-nav-list > li:last-child { border-bottom: none; } .global-nav-list > li .global-nav-link { color: #ffffff; font-size: 1.8rem; font-weight: 700; display: block; padding: 18px 48px 18px 18px; line-height: 1.4; position: relative; } .global-nav-list > li .global-nav-link:before { font-family: glyphs; content: "\f010"; font-size: 1.4rem; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } .global-nav-list > li .global-nav-link--next:before { content: "\f023"; font-size: 1.8rem; } .global-nav-sub { padding: 20px 18px; } .global-nav-sub li a { color: #ffffff; font-size: 1.2rem; line-height: 40px; position: relative; display: block; } .global-nav-sub li a:before { font-family: glyphs; font-size: 1rem; content: "\f010"; transform: scale(0.7); position: absolute; right: 0; display: block; } .global-nav-search { padding: 20px 18px; } .global-nav-search input, .global-nav-search button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .global-nav-search form { position: relative; background: #ffffff; border-radius: 6px; width: 100%; } .global-nav-search form dt { margin-right: 40px; padding: 10px 0 10px 12px; } .global-nav-search form dt input { width: 100%; height: 24px; line-height: 24px; } .global-nav-search form dd { position: absolute; top: 0; right: 0; } .global-nav-search form dd button { display: block; padding: 14px 10px; } .global-nav-search form dd button span { width: 30px; height: 16px; display: block; } .global-nav-search form dd button span:before { color: #356cb6; font-size: 1.6rem; display: block; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f016"; } .global-nav-lang { display: flex; padding: 20px 18px; } .global-nav-lang li { width: 50%; border: 2px solid rgba(255, 255, 255, 0.2); } .global-nav-lang li:first-child { border-bottom-left-radius: 6px; border-top-left-radius: 6px; border-right: none; } .global-nav-lang li:last-child { border-bottom-right-radius: 6px; border-top-right-radius: 6px; border-left: none; } .global-nav-lang li a { display: block; font-size: 1.2rem; color: #ffffff; text-align: center; padding: 14px 0; } .global-nav-lang li a.active { background: rgba(255, 255, 255, 0.2); } .global-nav-lang li a:not(.active) { position: relative; } .global-nav-lang li a:not(.active):before { font-family: glyphs; font-size: 1rem; content: "\f010"; transform: scale(0.7); position: absolute; right: 15px; display: block; } .global-nav-closeBtn { color: #ffffff; font-size: 1.2rem; display: block; padding: 30px 18px; text-align: center; } .global-nav-closeBtn:before { font-family: glyphs; content: "\f020"; font-size: 15px; display: inline-block; vertical-align: middle; margin-right: 7px; } /* --------------------------- */ .sp-drop-menu { color: #ffffff; background-color: #356cb6; width: 270px; height: 100vh; position: fixed; top: 0; right: -270px; z-index: 10; transition: 0.3s; display: block !important; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .sp-drop-menu--open { right: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .sp-drop-menu-close-btn { display: none; } .sp-drop-menu-back { color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; display: inline-block; padding: 5px 30px; margin: 16px 18px; font-size: 1.4rem; position: relative; } .sp-drop-menu-back:before { font-family: glyphs; content: "\f009"; font-size: 1.2rem; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); } .sp-drop-menu-inner { border-top: 1px solid rgba(255, 255, 255, 0.2); overflow: auto; } .sp-drop-menu-inner > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .sp-drop-menu-link { color: #ffffff; font-size: 1.4rem; font-weight: 700; display: block; padding: 20px 30px 20px 18px; position: relative; } .sp-drop-menu-link:before { font-family: glyphs; content: "\f010"; font-size: 1.2rem; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } .sp-drop-menu-link--next:before { content: "\f023"; font-size: 1.6rem; } .sp-drop-menu-child, .sp-drop-menu-child2, .sp-drop-menu-child3, .sp-drop-menu-child4, .sp-drop-menu-child5 { position: fixed; top: 64px; right: -270px; z-index: 15; background-color: #356cb6; width: 270px; overflow: auto; transition: 0.3s; } .sp-drop-menu-child > li, .sp-drop-menu-child2 > li, .sp-drop-menu-child3 > li, .sp-drop-menu-child4 > li, .sp-drop-menu-child5 > li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .sp-drop-menu-child--open, .sp-drop-menu-child2--open, .sp-drop-menu-child3--open, .sp-drop-menu-child4--open, .sp-drop-menu-child5--open { right: 0; } body.gnav-open { position: fixed; width: 100%; left: -270px; } /* --------------------------- */ .sug_list { display: none !important; } /* --------------------------- */ .breadcrumb { display: none; } /* --------------------------- */ .title .title-body { padding: 12px 15px; height: 60px; } .title h1 { font-size: 2rem; } .title .subtitle { font-size: 1.4rem; } /* --------------------------- */ .local-nav { margin-top: 80px; } .local-nav > ul > li > a { padding: 12px 30px 12px 15px; } .local-nav > ul > li > a:after { right: 10px; } .local-nav-child > li > a { padding: 12px 30px 12px 25px; } .local-nav-child > li > a:after { right: 10px; } .inner-local-nav-child > li > a { padding: 12px 10px 12px 35px; } /* --------------------------- */ .base-inner { padding: 0; display: block; } .base-links { padding: 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .base-links .sns { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 10px 0; padding: 20px 0 0; } .base-links .sns span { font-weight: 700; font-size: 1.2rem; } .base-links > ul { display: block; } .base-links > ul li { /* --------------190730------------- */ } .base-links > ul li:not(:first-child) { margin-left: 0; } .base-links > ul li a { padding: 10px 0; } .base-links > ul li a:before { left: auto; right: 2px; top: 14px; width: 6px; height: 6px; border-width: 2px; } .base-links > ul li a span { font-weight: 700; } .base-links > ul li .sns-link { font-size: 1.1rem; padding-left: 15px; } .base-links > ul li .sns-link > a { display: block; padding-left: 15px; position: relative; font-size: 1.2rem; font-weight: 400; color: #ffffff; } .copyright { text-align: center; padding: 20px 18px; } .base--white { background: #ffffff; } .base--white .base-inner .foot-logo { display: block; width: 130px; margin: auto; } .base--white .base-inner .copyright { margin-top: 30px; background-color: #356cb6; } /* --------------------------- */ .wrapper { padding: 30px 0 48px; } .wrapper--layout { padding-top: 0; padding-bottom: 0; } .wrapper--continuous { padding-bottom: 48px; } .wrapper--topics { padding: 36px 0; } /* --------------------------- */ .container { padding: 0 18px; } .container--2col { display: block; padding: 0; } .container--2col > .content-main { padding: 0 18px; padding: auto; width: auto; } .container--2col > .content-side { width: auto; } .container--fit-sp { padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------- */ .grid { margin: 0 -9px; } .grid > div { padding: 0 9px; } .grid--slim { margin: 0 -6px; } .grid--slim > div { padding: 0 6px; } .grid--thin { margin: 0 -5px; } .grid--thin > div { padding: 0 5px; } .grid--wrap { margin-bottom: -18px; } .grid--wrap > div { top: -18px; margin-top: 18px; } .grid--wrap.grid--slim { margin-bottom: -12px; } .grid--wrap.grid--slim > div { top: -12px; margin-top: 12px; } .grid--wrap.grid--thin { margin-bottom: -10px; } .grid--wrap.grid--thin > div { top: -10px; margin-top: 10px; } .grid--center-sp { justify-content: center !important; } .grid--reverse-sp { flex-direction: row-reverse !important; } .grid-col-1-sp { flex-basis: 8.33333% !important; max-width: 8.33333% !important; } .grid-col-2-sp { flex-basis: 16.66667% !important; max-width: 16.66667% !important; } .grid-col-3-sp { flex-basis: 25% !important; max-width: 25% !important; } .grid-col-4-sp { flex-basis: 33.33333% !important; max-width: 33.33333% !important; } .grid-col-5-sp { flex-basis: 41.66667% !important; max-width: 41.66667% !important; } .grid-col-6-sp { flex-basis: 50% !important; max-width: 50% !important; } .grid-col-7-sp { flex-basis: 58.33333% !important; max-width: 58.33333% !important; } .grid-col-8-sp { flex-basis: 66.66667% !important; max-width: 66.66667% !important; } .grid-col-9-sp { flex-basis: 75% !important; max-width: 75% !important; } .grid-col-10-sp { flex-basis: 83.33333% !important; max-width: 83.33333% !important; } .grid-col-11-sp { flex-basis: 91.66667% !important; max-width: 91.66667% !important; } .grid-col-12-sp { flex-basis: 100% !important; max-width: 100% !important; } .grid--2col-sp > div { width: 50%; } .grid--3col-sp > div { width: 33.33333%; } .grid--4col-sp > div { width: 25%; } .grid--5col-sp > div { width: 20%; } .grid--6col-sp > div { width: 16.66667%; } .grid--break-sp { display: block; margin: 0; margin-bottom: 0 !important; } .grid--break-sp > div { padding: 0; width: auto; max-width: inherit; margin-top: 18px; } .grid--break-sp > div:first-child { margin-top: 0; } .grid--wrap.grid--break-sp > div { position: static; top: auto; } .grid--wrap.grid--break-sp > div:first-child { margin-top: 0; } .grid-wrap--2col { display: block; } .grid-wrap--2col > div { width: auto; margin-top: 40px !important; } .grid-wrap--2col > div:first-child { margin-top: 0 !important; } .grid-wrap--3col > div { width: 50%; } .grid-wrap--3col > div:nth-child(-n+4), .grid-wrap--3col > div:nth-child(-n+3) { margin-top: 40px; } .grid-wrap--3col > div:nth-child(-n+2) { margin-top: 0; } .grid-wrap--4col > div { width: 50%; } .grid-wrap--4col > div:nth-child(-n+4), .grid-wrap--4col > div:nth-child(-n+3) { margin-top: 40px; } .grid-wrap--4col > div:nth-child(-n+2) { margin-top: 0; } .grid-wrap-box { margin-top: 40px; } /* --------------------------- */ .cover .cover--adjust-1800 .cover-container { height: 1200px !important; } .cover .cover--adjust-1800 .cover-image > img { height: 1200px; } .cover .cover--adjust-1200 .cover-container { height: 800px !important; } .cover .cover--adjust-1200 .cover-image > img { height: 800px; } .cover .cover--adjust-900 .cover-container { height: 600px !important; } .cover .cover--adjust-900 .cover-image > img { height: 600px; } .cover .cover--adjust-750 .cover-container { height: 500px !important; } .cover .cover--adjust-750 .cover-image > img { height: 500px; } .cover .cover--adjust-600 .cover-container { height: 400px !important; } .cover .cover--adjust-600 .cover-image > img { height: 400px; } .cover .cover--adjust-450 .cover-container { height: 300px !important; } .cover .cover--adjust-450 .cover-image > img { height: 300px; } .cover .cover-content-top { margin-top: 20px; } .cover .cover-content-bottom { margin-bottom: 62px; } .cover .cover-content-bottom:last-child { margin-bottom: 20px; } .cover .cover-content-caption { right: 18px; left: 0; } /* --------------------------- */ .flex > div { margin-left: 9px; margin-right: 9px; } .flex--slim > div { margin-left: 6px; margin-right: 6px; } .flex--thin > div { margin-left: 5px; margin-right: 5px; } .flex--break-sp { display: block; } .flex--break-sp > div { margin: 0; } .flex--break-sp > div:first-child { margin-top: 0; } .flex--wrap { margin-left: -9px; margin-right: -9px; } .flex--wrap.flex--slim { margin-left: -6px; margin-right: -6px; } .flex--wrap.flex--thin { margin-left: -5px; margin-right: -5px; } .flex--wrap.flex--break-sp { margin-left: auto; margin-right: auto; } .flex--wrap-sp { flex-wrap: wrap; } /* --------------------------- */ .float-left-sp { float: left; } .float-right-sp { float: right; } .float-none-sp { float: none; } .clearfix-sp:after { content: ""; display: block; clear: both; } /* --------------------------- */ section h2:not([class]), .section h2:not([class]), article h2:not([class]), .heading-lv2 { margin: 36px 0 24px; padding: 10px 10px 10px 20px; font-size: 2rem; } section h3:not([class]), .section h3:not([class]), article h3:not([class]), .heading-lv3 { margin: 30px 0 18px; padding-bottom: 8px; font-size: 1.8rem; } section h4:not([class]), .section h4:not([class]), article h4:not([class]), .heading-lv4 { margin: 30px 0 18px; padding: 2px 0 2px 12px; font-size: 1.6rem; } section h5:not([class]), .section h5:not([class]), article h5:not([class]), .heading-lv5 { margin: 30px 0 18px; font-size: 1.6rem; } /* --------------------------- */ .lead-box { padding: 0 15px 15px; } .lead-box .heading { font-size: 2.4rem; } .lead-box .subheading { margin-top: 10px; } /* --------------------------- */ ul.link-item--2col-sp { display: flex; flex-wrap: wrap; } ul.link-item--2col-sp > li { padding-right: 18px; width: 50%; margin-top: 10px !important; } ul.link-item--2col-sp > li:nth-child(-n+2) { margin-top: 0 !important; } ul.link-item--break-col-sp { display: block; } ul.link-item--break-col-sp > li { padding-right: 0; width: auto; margin-top: 10px !important; } ul.link-item--break-col-sp > li:first-child { margin-top: 0 !important; } /* --------------------------- */ .grid--3col-sp .anchor-box > a { border-left: none !important; } .grid--3col-sp .anchor-box:nth-child(3n+1) > a { border-left: 1px solid #e2e6e8 !important; } .grid--3col-sp .anchor-box:nth-child(3n+1) > a:before { display: block; content: ""; border-top: 1px solid #e2e6e8; position: absolute; top: 0; left: 0; width: 1500px; } .grid--2col-sp .anchor-box > a { border-left: none !important; } .grid--2col-sp .anchor-box:nth-child(2n+1) > a { border-left: 1px solid #e2e6e8 !important; } .grid--2col-sp .anchor-box:nth-child(2n+1) > a:before { display: block; content: ""; border-top: 1px solid #e2e6e8; position: absolute; top: 0; left: 0; width: 1500px; } .grid--break-sp .anchor-box { border-top: 1px solid #e2e6e8; } .grid--break-sp .anchor-box:first-child { border-top: none; } .grid--break-sp .anchor-box > a { border-left: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; } .grid--break-sp .anchor-box > a:before { display: none !important; } /* --------------------------- */ dl.list-def--1-9-sp > dt { width: 10%; } dl.list-def--1-9-sp > dd { width: 90%; } dl.list-def--2-8-sp > dt { width: 20%; } dl.list-def--2-8-sp > dd { width: 80%; } dl.list-def--3-7-sp > dt { width: 30%; } dl.list-def--3-7-sp > dd { width: 70%; } dl.list-def--4-6-sp > dt { width: 40%; } dl.list-def--4-6-sp > dd { width: 60%; } dl.list-def--5-5-sp > dt, dl.list-def--5-5-sp > dd { width: 50%; } dl.list-def--15-85-sp > dt { width: 15%; } dl.list-def--15-85-sp > dd { width: 85%; } dl.list-def--break-sp { display: block; } dl.list-def--break-sp > dt, dl.list-def--break-sp > dd { padding-left: 0; padding-right: 0; width: auto; border-bottom: 1px solid #e2e6e8; } dl.list-def--break-sp > dt:before, dl.list-def--break-sp > dd:before, dl.list-def--break-sp > dt:after, dl.list-def--break-sp > dd:after { display: none !important; } dl.list-def--break-sp > dt:first-child, dl.list-def--break-sp > dd:first-child { border-top: 1px solid #e2e6e8; } dl.list-def--continuous-sp > dt:first-child:before, dl.list-def--continuous-sp > dd:nth-child(2):before { display: none !important; } ul.list-def--break-sp { display: block; } ul.list-def--break-sp > li { display: block; } ul.list-def--break-sp > li > span { display: block; } ul.list-def--break-sp > li > span:first-child { font-weight: 700; padding-right: 0; margin-top: 18px; text-align: left; } ul.list-def--break-sp > li > span:first-child:after { display: none; } ul.list-def--break-sp > li > span:last-child { padding-left: 0; margin-left: 2em; } ul.list-def--break-sp > li:first-child > span:first-child { margin-top: 0; } /* --------------------------- */ .figure-orig-sp img { width: auto !important; height: auto !important; } img.orig-sp { width: auto !important; height: auto !important; } img.fluid-sp { width: 100% !important; } /* --------------------------- */ .card { max-width: 432px; margin: 0 auto; } .card > .card-body > .icon { margin-top: 12px; padding-bottom: 30px; } .grid--layout.grid--3col-sp > div:nth-child(3n+1) > .card, .grid--layout.grid--2col-sp > div:nth-child(2n+1) > .card, .grid--layout.grid--break-sp > div > .card { border-left: 1px solid #e2e6e8; } /* --------------------------- */ .icon-box-wrapper > div:nth-child(4n+1) .icon-box-icon, .icon-box-wrapper > div:nth-child(4n+1) .icon-box-link { border-left: none; } .icon-box-wrapper > div:nth-child(3n+1) .icon-box-icon, .icon-box-wrapper > div:nth-child(3n+1) .icon-box-link { border-left: none; } .icon-box-wrapper > div:nth-child(odd) .icon-box-icon, .icon-box-wrapper > div:nth-child(odd) .icon-box-link { border-left: 1px solid #e2e6e8; } .icon-box2-wrapper { margin-bottom: -18px !important; } .icon-box2-wrapper > div { margin-bottom: 18px; } .icon-box2-wrapper > div .icon-box2-icon { padding-top: 24px; } .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-link, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-text { border-left: none; } .icon-box2-wrapper > div:nth-child(4n+1):before { display: none; } .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-link, .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-text { border-left: none; } .icon-box2-wrapper > div:nth-child(3n+1):before { display: none; } .icon-box2-wrapper > div:nth-child(odd) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(odd) .icon-box2-link, .icon-box2-wrapper > div:nth-child(odd) .icon-box2-text { border-left: 1px solid #e2e6e8; } .icon-box2-wrapper > div:nth-child(odd):before { content: ""; display: block; border-bottom: 1px solid #e2e6e8; position: absolute; left: 0; bottom: 0; width: 1200px; } /* --------------------------- */ .table > table th, .table > table td { padding: 8px; font-size: 1.4rem; } table.table th, table.table td { padding: 8px; font-size: 1.4rem; } .table > table.table--break-sp, table.table.table--break-sp { display: block; width: 100%; } .table > table.table--break-sp tbody, .table > table.table--break-sp tr, .table > table.table--break-sp th, .table > table.table--break-sp td { display: block; border-left: none; border-right: none; } table.table.table--break-sp tbody, table.table.table--break-sp tr, table.table.table--break-sp th, table.table.table--break-sp td { display: block; border-left: none; border-right: none; } .table > table.table--break-sp td, table.table.table--break-sp td { padding: 15px 10px 20px; } .table--thin > table th, .table--thin > table td { padding: 8px; font-size: 1.4rem; } table.table--thin th, table.table--thin td { padding: 8px; font-size: 1.4rem; } .table-scroll { border-bottom: 1px solid #e2e6e8; position: relative; } .table-scroll table { margin-bottom: 16px; min-width: 512px; } .table-scroll table th:first-child, .table-scroll table td:first-child { border-left: none; } .table-scroll table th:last-child, .table-scroll table td:last-child { border-right: none; } .table-scroll800 { border-bottom: 1px solid #e2e6e8; position: relative; } .table-scroll800 table { margin-bottom: 16px; min-width: 800px; } .table-scroll800 table th:first-child, .table-scroll800 table td:first-child { border-left: none; } .table-scroll800 table th:last-child, .table-scroll800 table td:last-child { border-right: none; } .table--fit-sp { width: auto; } /* --------------------------- */ .tab-buttons { margin-bottom: 20px; } /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro { background-color: transparent; height: auto; display: flex; flex-direction: column-reverse; align-items: center; } .category-intro > div:first-child { margin: 0; padding: 0; width: 100%; } .category-intro .category-intro-thumb { margin: 0; position: relative; z-index: 1; } .category-intro .category-intro-thumb .category-intro-thumb-inner { position: static; } .category-intro .category-intro-thumb .category-intro-thumb-inner > img { position: static; width: 100%; } .category-intro .category-intro-body { position: relative; width: auto; height: auto; padding: 24px; margin: 24px; margin-top: -24px; z-index: 2; } .category-intro .category-intro-body .link > a { width: 100%; min-width: auto; } .category-intro .category-intro-body:after { display: none; } .category-intro .category-intro-body .text { margin-left: 24px; } .category-intro .category-intro-body .summary { margin-top: 24px; } /* ------------------------------------------- common ---------------------------------------------*/ .content-box { padding: 18px; } .content-box > .shift-top--clear-sp { margin-top: 0; } .bg-hr-half--clear-sp:before { display: none; } /* --------------------------- */ .nav-carousel { margin: 0 -18px; } .nav-carousel .slick-list:before, .nav-carousel .slick-list:after { top: 12px; bottom: 12px; } .nav-carousel .slick-slide { padding: 18px 12px 15px; } /* --------------------------- */ .vis-carousel { margin-left: -18px; margin-right: -18px; } .vis-carousel .slick-arrow { width: 60px; height: 60px; margin-top: -44px; border-radius: 30px; } .vis-carousel .slick-arrow:before { font-size: 1.4rem; margin-top: -0.7rem; } .vis-carousel .slick-prev:before { margin-left: 0.1rem; } .vis-carousel .slick-next:before { margin-left: -1.5rem; } .vis-carousel .slick-dots { margin-top: 18px; } /* ------------------------------------------- Topics / Special ---------------------------------------------*/ .ttlStyle03 { margin-bottom: 20px; } /* ------------------------------------------- Topics/ Internship2018 ---------------------------------------------*/ .topicsHero--fixing .topicsHero-ttl { padding-left: 0; } /* ------------------------------------------- About / IR / Special  ---------------------------------------------*/ .topicsContainer { padding: 36px 12px 0; } .topicsContainer .topics-ttl { font-size: 2rem; font-weight: 700; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .topicsColumn { padding: 48px 24px; } /* ------------------------------------------- About / Topics ---------------------------------------------*/ .buleFrame-inner { padding: 10px; } .buleFrame-link { height: 68px; } .buleFrame-img { width: 90px; } .buleFrame-img.vertical { width: 60px; } .buleFrame-text { font-size: 1.6rem; } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-side { margin-top: 24px; padding: 0 36px 80px; } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .m_checkList { display: flex; flex-wrap: wrap; justify-content: space-between; } .m_checkList > li { flex-grow: 2; width: auto; margin: 0 5px; } .m_checkList > li > label > span > span { padding-right: 10px !important; } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-search-open { top: 86px; right: 26px; } .works-search-close { top: 20px; right: 20px; } /* ------------------------------------------- common ---------------------------------------------*/ .container--top { padding: 0 18px; } /* ------------------------------------------- Top ---------------------------------------------*/ /*旧トップ ここから*/ .mainV-button { bottom: 17px; } .mainV-kodomo { top: 45%; } .mainV-cap { bottom: 10px; } .mainV-info { width: calc(100% - 36px); height: 30px; bottom: -50px; } .mainV-info-anker { text-align: center; padding-left: 0; height: 30px; line-height: 30px; font-size: 12px; font-size: 1.2rem; } .mainV-info-anker:before { top: 1px; right: 12px; font-size: 12px; font-size: 1.2rem; } .mainV-scroll { bottom: 30px; display: none; } /* --------------------------- */ .infoFix2 { flex-basis: 100%; } .grid > .infoFix2 { margin-top: 0; } .chouseiPickup { margin: 60px auto 30px; overflow: hidden; } .chouseiKodomo { padding: 35px 0 30px; } .chouseiNews { padding-top: 30px; } .chouseiNews .container { padding: 0 16px; } .chouseiBanner { padding-top: 0; padding-bottom: 18px; } .chouseiBanner .container { padding: 0 27px; } .chouseiBanner .grid { display: flex; flex-wrap: wrap; } .chouseiBanner .grid > div { padding: 0 9px; margin-top: 0; } .chouseiBanner .grid .grid-col-4 { margin-top: 18px; flex-basis: 50%; max-width: 50%; } .chouseiBanner .grid .grid-col-4:nth-child(n+3) { margin-top: 18px; } .chouseiLinkBtn { padding-top: 0; padding-bottom: 0; } .chouseiLinkBtn .container { padding: 0 27px; } .chouseiLinkBtn .container .linkTokutei { padding: 0 0 18px 0; } .chouseiLinkBtn .grid { display: flex; flex-wrap: wrap; } .chouseiLinkBtn .grid > div { padding: 0 9px; } .chouseiLinkBtn .grid .grid-col-2 { margin-top: 18px; flex-basis: 50%; max-width: 50%; } .chouseiLinkBtn .grid .grid-col-2:nth-child(n+3) { margin-top: 18px; } /* --------------------------- */ .ttl-style01, .ttl-style02 { font-size: 2.1rem; } .ttl-style01 span, .ttl-style02 span { font-size: 1rem; margin-top: 10px; } .ttl-style01, .ttl-style02 { padding-bottom: 30px; } .pickup-list { margin-top: 25px; } .pickup-txt span { font-size: 14px; font-size: 1.4rem; padding: 0 17px; line-height: 25.2px; font-weight: 400; } .pickup .slick-prev { left: -45px; } .pickup .slick-prev:before { left: 25px; } .pickup .slick-next { right: -45px; } .pickup .slick-next:before { right: 25px; } .jigyouChouse { padding-top: 30px; } .topGrid { height: auto; } .jigyouImg { position: static; width: 100%; height: auto; } .jigyouOya { position: static; padding: 0 18px 45px; width: auto; } .jigyouCard, .jigyouCard2, .jigyouCard3, .jigyouCard4, .jigyouCard5 { position: relative; top: -10px; height: auto; padding: 18px 18px 60px; } .business-item-ttl { margin-bottom: 15px; } .business-item-txt { font-size: 20px; font-size: 2rem; } .business-item-txt span { font-size: 14px; font-size: 1.4rem; margin-top: 15px; } .business-item-btn:before, .business-item-btn2:before, .business-item-btn3:before, .business-item-btn4:before { padding: 14px 0 0; font-size: 2rem; width: 50px; height: 50px; top: 25px; } .business-item-btn, .business-item-btn2, .business-item-btn3, .business-item-btn4 { bottom: -101px; left: 0; width: 50px; } .business-item-ttlDark, .business-item-ttlWhite { margin-bottom: 15px; } .message { padding: 50px 0 40px; } .message-ttl { font-size: 20px; font-size: 2rem; margin-bottom: 20px; } .message-txt { margin-bottom: 30px; } .ttl-style03 { font-size: 2rem; margin-top: 40px; } .ttl-style03 span { font-size: 1rem; margin-top: 5px; } .topicsMenu { padding: 0; } .topicsMenu .container { padding: 0; } .topicsMenu .container .grid-wrap { margin: 0 9px 40px; display: flex; } .topicsMenu .container .grid-wrap > div { padding: 0 9px; } .topicsMenu-closeBtn { display: block; text-align: center; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 1.2rem; } .topicsMenu-closeBtn:before { font-size: 1.2rem; } .topicsMenu-closeBtn02 { border-bottom: none; } /* --------------------------- */ .infoBichousei .text { margin: 0; } /* --------------------------- */ .co-top-cat { margin-left: -18px; margin-right: -18px; padding: 24px; } .co-top-cat > .desc { margin-top: 18px; } .co-top-cat > .link { margin-top: 18px; } .co-top-cat > .link > a { margin-left: auto; margin-right: auto; max-width: 300px; } /* ------------------------------------------- company / CSR / About ---------------------------------------------*/ body > main > div.aboutnone { display: block; } .temptitle { display: none; } /* ------------------------------------------- company / About ---------------------------------------------*/ .presidentWrap { height: 100px; } /* ------------------------------------------- about / company ---------------------------------------------*/ .aboutTitle { margin-top: 130px; width: 100%; font-size: 1.8rem; display: relative; color: #ffffff; height: 120px; padding: 0 30px; } /* ------------------------------------------- company / CSR / About ---------------------------------------------*/ .imgWrapper { overflow: visible; background: url("/company/about/images/img_01.jpg") no-repeat -600px 0; margin-bottom: 0; } /* ------------------------------------------- company / About ---------------------------------------------*/ .topmessageWrap-mini { padding: 0; } .topmessageWrap { position: static; width: 100%; margin: 0 auto; left: 0; right: 0; height: 300px; } .topMsg { width: auto; height: auto; padding: 24px; margin: 0 24px; position: relative; top: -20px; left: 0; background: #356cb6; text-shadow: initial; text-shadow: none; } .topMsg h3 { font-size: 20px; font-size: 2.4rem; margin: 5px 0 20px 0; } .category-intro.keieiBox .category-intro-thumb { margin-bottom: 30px; } .category-intro.keieiBox .category-intro-body > .summary { display: block; } .category-intro.keieiBox .category-intro-body .link a { width: 100%; } .category-intro .category-intro-body .link > a { min-width: auto; } .category-intro.keieiBox { height: 400px; } .category-intro.keieiBox .category-intro-thumb { margin: 0 0 15px; position: relative; z-index: 1; } .aboutmore3 a { width: 100%; min-width: auto; font-size: 95%; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .construction-linkbox .construction-link { justify-content: flex-start; } /* ------------------------------------------- common ---------------------------------------------*/ .news-search-form { margin-top: 36px; } .news-search-form ul { flex-wrap: wrap; justify-content: space-between; padding: 9px; } .news-search-form ul li { flex-grow: 5; text-align: center; margin: 9px; display: inline-block; } .news-search-form ul li:first-child { margin-top: 9px; } .news-search-form ul input:checked + span { background-color: #356cb6; color: #ffffff; } .news-search-form ul label span { width: 100%; border: 1px solid #356cb6; border-radius: 18px; padding: 2px 12px; font-size: 1.4rem; } .news-search .news-search-buttons li { width: calc(100% - 20px); } .news-search .news-search-buttons input[type=radio] + span { font-size: 1.2rem; } /* ------------------------------------------- common ---------------------------------------------*/ section p:not([class]) { margin-top: 10px; } section > p, section > ul, section > ol, section > dl, section > table { margin-top: 10px; } .section p:not([class]) { margin-top: 10px; } .section > p, .section > ul, .section > ol, .section > dl, .section > table { margin-top: 10px; } article p:not([class]) { margin-top: 10px; } article > p, article > ul, article > ol, article > dl, article > table { margin-top: 10px; } .mt-section { margin-top: 48px !important; } .mt-subsection, .mt-article { margin-top: 24px !important; } .mt-adj-tall, .mt-adj-medium, .mt-adj-short { margin-top: 18px !important; } .mt-paragraph { margin-top: 12px !important; } .mt-section-sp { margin-top: 48px !important; } .mt-subsection-sp, .mt-article-sp { margin-top: 24px !important; } .mt-adj-tall-sp, .mt-adj-medium-sp, .mt-adj-short-sp { margin-top: 18px !important; } .mt-paragraph-sp { margin-top: 12px !important; } .mt-line-sp { margin-top: 10px !important; } .pt-section-sp { padding-top: 48px !important; } .pt-subsection-sp, .pt-article-sp { padding-top: 24px !important; } .pt-adj-tall-sp, .pt-adj-medium-sp, .pt-adj-short-sp { padding-top: 18px !important; } .pt-paragraph-sp { padding-top: 12px !important; } .pt-line-sp { padding-top: 10px !important; } .mb0-sp { margin-bottom: 0 !important; } .mb5-sp { margin-bottom: 5px !important; } .mb10-sp { margin-bottom: 10px !important; } .mb15-sp { margin-bottom: 15px !important; } .mb20-sp { margin-bottom: 20px !important; } .mb25-sp { margin-bottom: 25px !important; } .mb30-sp { margin-bottom: 30px !important; } .mb35-sp { margin-bottom: 35px !important; } .mb40-sp { margin-bottom: 40px !important; } .mb45-sp { margin-bottom: 45px !important; } .mb50-sp { margin-bottom: 50px !important; } .mb55-sp { margin-bottom: 55px !important; } .mb60-sp { margin-bottom: 60px !important; } .mb65-sp { margin-bottom: 65px !important; } .mb70-sp { margin-bottom: 70px !important; } .mb75-sp { margin-bottom: 75px !important; } .mb80-sp { margin-bottom: 80px !important; } .mb85-sp { margin-bottom: 85px !important; } .mb90-sp { margin-bottom: 90px !important; } .mb95-sp { margin-bottom: 95px !important; } .mb100-sp { margin-bottom: 100px !important; } .mt0-sp { margin-top: 0 !important; } .mt5-sp { margin-top: 5px !important; } .mt10-sp { margin-top: 10px !important; } .mt15-sp { margin-top: 15px !important; } .mt20-sp { margin-top: 20px !important; } .mt25-sp { margin-top: 25px !important; } .mt30-sp { margin-top: 30px !important; } .mt35-sp { margin-top: 35px !important; } .mt40-sp { margin-top: 40px !important; } .mt45-sp { margin-top: 45px !important; } .mt50-sp { margin-top: 50px !important; } .mt55-sp { margin-top: 55px !important; } .mt60-sp { margin-top: 60px !important; } .mt65-sp { margin-top: 65px !important; } .mt70-sp { margin-top: 70px !important; } .mt75-sp { margin-top: 75px !important; } .mt80-sp { margin-top: 80px !important; } .mt85-sp { margin-top: 85px !important; } .mt90-sp { margin-top: 90px !important; } .mt95-sp { margin-top: 95px !important; } .mt100-sp { margin-top: 100px !important; } .ml0-sp { margin-left: 0 !important; } .ml5-sp { margin-left: 5px !important; } .ml10-sp { margin-left: 10px !important; } .ml15-sp { margin-left: 15px !important; } .ml20-sp { margin-left: 20px !important; } .ml25-sp { margin-left: 25px !important; } .ml30-sp { margin-left: 30px !important; } .ml35-sp { margin-left: 35px !important; } .ml40-sp { margin-left: 40px !important; } .ml45-sp { margin-left: 45px !important; } .ml50-sp { margin-left: 50px !important; } .ml55-sp { margin-left: 55px !important; } .ml60-sp { margin-left: 60px !important; } .ml65-sp { margin-left: 65px !important; } .ml70-sp { margin-left: 70px !important; } .ml75-sp { margin-left: 75px !important; } .ml80-sp { margin-left: 80px !important; } .ml85-sp { margin-left: 85px !important; } .ml90-sp { margin-left: 90px !important; } .ml95-sp { margin-left: 95px !important; } .ml100-sp { margin-left: 100px !important; } .mr0-sp { margin-right: 0 !important; } .mr5-sp { margin-right: 5px !important; } .mr10-sp { margin-right: 10px !important; } .mr15-sp { margin-right: 15px !important; } .mr20-sp { margin-right: 20px !important; } .mr25-sp { margin-right: 25px !important; } .mr30-sp { margin-right: 30px !important; } .mr35-sp { margin-right: 35px !important; } .mr40-sp { margin-right: 40px !important; } .mr45-sp { margin-right: 45px !important; } .mr50-sp { margin-right: 50px !important; } .mr55-sp { margin-right: 55px !important; } .mr60-sp { margin-right: 60px !important; } .mr65-sp { margin-right: 65px !important; } .mr70-sp { margin-right: 70px !important; } .mr75-sp { margin-right: 75px !important; } .mr80-sp { margin-right: 80px !important; } .mr85-sp { margin-right: 85px !important; } .mr90-sp { margin-right: 90px !important; } .mr95-sp { margin-right: 95px !important; } .mr100-sp { margin-right: 100px !important; } .pb0-sp { padding-bottom: 0 !important; } .pb5-sp { padding-bottom: 5px !important; } .pb10-sp { padding-bottom: 10px !important; } .pb15-sp { padding-bottom: 15px !important; } .pb20-sp { padding-bottom: 20px !important; } .pb25-sp { padding-bottom: 25px !important; } .pb30-sp { padding-bottom: 30px !important; } .pb35-sp { padding-bottom: 35px !important; } .pb40-sp { padding-bottom: 40px !important; } .pb45-sp { padding-bottom: 45px !important; } .pb50-sp { padding-bottom: 50px !important; } .pb55-sp { padding-bottom: 55px !important; } .pb60-sp { padding-bottom: 60px !important; } .pb65-sp { padding-bottom: 65px !important; } .pb70-sp { padding-bottom: 70px !important; } .pb75-sp { padding-bottom: 75px !important; } .pb80-sp { padding-bottom: 80px !important; } .pb85-sp { padding-bottom: 85px !important; } .pb90-sp { padding-bottom: 90px !important; } .pb95-sp { padding-bottom: 95px !important; } .pb100-sp { padding-bottom: 100px !important; } .pt0-sp { padding-top: 0 !important; } .pt5-sp { padding-top: 5px !important; } .pt10-sp { padding-top: 10px !important; } .pt15-sp { padding-top: 15px !important; } .pt20-sp { padding-top: 20px !important; } .pt25-sp { padding-top: 25px !important; } .pt30-sp { padding-top: 30px !important; } .pt35-sp { padding-top: 35px !important; } .pt40-sp { padding-top: 40px !important; } .pt45-sp { padding-top: 45px !important; } .pt50-sp { padding-top: 50px !important; } .pt55-sp { padding-top: 55px !important; } .pt60-sp { padding-top: 60px !important; } .pt65-sp { padding-top: 65px !important; } .pt70-sp { padding-top: 70px !important; } .pt75-sp { padding-top: 75px !important; } .pt80-sp { padding-top: 80px !important; } .pt85-sp { padding-top: 85px !important; } .pt90-sp { padding-top: 90px !important; } .pt95-sp { padding-top: 95px !important; } .pt100-sp { padding-top: 100px !important; } .pl0-sp { padding-left: 0 !important; } .pl5-sp { padding-left: 5px !important; } .pl10-sp { padding-left: 10px !important; } .pl15-sp { padding-left: 15px !important; } .pl20-sp { padding-left: 20px !important; } .pl25-sp { padding-left: 25px !important; } .pl30-sp { padding-left: 30px !important; } .pl35-sp { padding-left: 35px !important; } .pl40-sp { padding-left: 40px !important; } .pl45-sp { padding-left: 45px !important; } .pl50-sp { padding-left: 50px !important; } .pl55-sp { padding-left: 55px !important; } .pl60-sp { padding-left: 60px !important; } .pl65-sp { padding-left: 65px !important; } .pl70-sp { padding-left: 70px !important; } .pl75-sp { padding-left: 75px !important; } .pl80-sp { padding-left: 80px !important; } .pl85-sp { padding-left: 85px !important; } .pl90-sp { padding-left: 90px !important; } .pl95-sp { padding-left: 95px !important; } .pl100-sp { padding-left: 100px !important; } .pr0-sp { padding-right: 0 !important; } .pr5-sp { padding-right: 5px !important; } .pr10-sp { padding-right: 10px !important; } .pr15-sp { padding-right: 15px !important; } .pr20-sp { padding-right: 20px !important; } .pr25-sp { padding-right: 25px !important; } .pr30-sp { padding-right: 30px !important; } .pr35-sp { padding-right: 35px !important; } .pr40-sp { padding-right: 40px !important; } .pr45-sp { padding-right: 45px !important; } .pr50-sp { padding-right: 50px !important; } .pr55-sp { padding-right: 55px !important; } .pr60-sp { padding-right: 60px !important; } .pr65-sp { padding-right: 65px !important; } .pr70-sp { padding-right: 70px !important; } .pr75-sp { padding-right: 75px !important; } .pr80-sp { padding-right: 80px !important; } .pr85-sp { padding-right: 85px !important; } .pr90-sp { padding-right: 90px !important; } .pr95-sp { padding-right: 95px !important; } .pr100-sp { padding-right: 100px !important; } .ml-auto-sp { margin-left: auto !important; } .mr-auto-sp { margin-right: auto !important; } .mb-auto-sp { margin-bottom: auto !important; } .mt-auto-sp { margin-top: auto !important; } .w0per-sp { width: 0 !important; } .mw0per-sp { max-width: 0 !important; } .mw100-sp { max-width: 100px !important; } .w5per-sp { width: 5% !important; } .mw5per-sp { max-width: 5% !important; } .mw150-sp { max-width: 150px !important; } .w10per-sp { width: 10% !important; } .mw10per-sp { max-width: 10% !important; } .mw200-sp { max-width: 200px !important; } .w15per-sp { width: 15% !important; } .mw15per-sp { max-width: 15% !important; } .mw250-sp { max-width: 250px !important; } .w20per-sp { width: 20% !important; } .mw20per-sp { max-width: 20% !important; } .mw300-sp { max-width: 300px !important; } .w25per-sp { width: 25% !important; } .mw25per-sp { max-width: 25% !important; } .mw350-sp { max-width: 350px !important; } .w30per-sp { width: 30% !important; } .mw30per-sp { max-width: 30% !important; } .mw400-sp { max-width: 400px !important; } .w35per-sp { width: 35% !important; } .mw35per-sp { max-width: 35% !important; } .mw450-sp { max-width: 450px !important; } .w40per-sp { width: 40% !important; } .mw40per-sp { max-width: 40% !important; } .mw500-sp { max-width: 500px !important; } .w45per-sp { width: 45% !important; } .mw45per-sp { max-width: 45% !important; } .mw550-sp { max-width: 550px !important; } .w50per-sp { width: 50% !important; } .mw50per-sp { max-width: 50% !important; } .mw600-sp { max-width: 600px !important; } .w55per-sp { width: 55% !important; } .mw55per-sp { max-width: 55% !important; } .mw650-sp { max-width: 650px !important; } .w60per-sp { width: 60% !important; } .mw60per-sp { max-width: 60% !important; } .mw700-sp { max-width: 700px !important; } .w65per-sp { width: 65% !important; } .mw65per-sp { max-width: 65% !important; } .mw750-sp { max-width: 750px !important; } .w70per-sp { width: 70% !important; } .mw70per-sp { max-width: 70% !important; } .mw800-sp { max-width: 800px !important; } .w75per-sp { width: 75% !important; } .mw75per-sp { max-width: 75% !important; } .mw850-sp { max-width: 850px !important; } .w80per-sp { width: 80% !important; } .mw80per-sp { max-width: 80% !important; } .mw900-sp { max-width: 900px !important; } .w85per-sp { width: 85% !important; } .mw85per-sp { max-width: 85% !important; } .mw950-sp { max-width: 950px !important; } .w90per-sp { width: 90% !important; } .mw90per-sp { max-width: 90% !important; } .mw1000-sp { max-width: 1000px !important; } .w95per-sp { width: 95% !important; } .mw95per-sp { max-width: 95% !important; } .mw1050-sp { max-width: 1050px !important; } .w100per-sp { width: 100% !important; } .mw100per-sp { max-width: 100% !important; } .mw1100-sp { max-width: 1100px !important; } .align-left-sp { text-align: left !important; } .align-center-sp { text-align: center !important; } .align-ight-sp { text-align: right !important; } .align-justify-sp { text-align: justify !important; } .block-left-sp { margin-right: auto !important; } .block-center-sp { margin-right: auto !important; margin-left: auto !important; } .block-right-sp { margin-left: auto !important; } .hidden-sp { display: none !important; } .bordered-sp { border: 1px solid #e2e6e8 !important; } .unbordered-sp { border: none !important; } } @media (min-width: 768px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .header-item { width: calc(100% - 150px); padding-left: 20px; } .header-default .header-utils { max-width: 405px; width: 100%; height: 40px; padding-top: 24px; } .header-default .header-utils .header-utils-lang { padding-right: 0; } .header-default .header-utils.header-utils-chosei { max-width: 100%; text-align: right; } .header-default .global-nav { max-width: 950px; width: 100%; margin-left: auto; margin-top: 20px; } /* --------------------------- */ .global-nav-list { max-width: 1200px; margin: 0 auto; display: flex; height: 48px; } .header-default .global-nav-list { max-width: 960px; } .global-nav-list > li { width: 100%; } .global-nav-list > li.global-nav-top > a, .global-nav-list > li.global-nav-top > span { display: flex; align-items: center; } .global-nav-list > li.global-nav-top > a img, .global-nav-list > li.global-nav-top > span img { width: 94px; } .global-nav-list > li > a, .global-nav-list > li > span { background: #ffffff; height: 48px; position: relative; z-index: 50; transition: 0.3s; } .global-nav-list > li:not(.global-nav-top) > a, .global-nav-list > li:not(.global-nav-top) > span { font-size: 1.5rem; letter-spacing: 0.05em; font-weight: 700; display: flex; justify-content: center; text-align: center; padding-top: 16px; cursor: pointer; } .header-fixed .global-nav-list > li:not(.global-nav-top) > a, .header-fixed .global-nav-list > li:not(.global-nav-top) > span { font-size: 1.4rem; } .global-nav-list > li:not(.global-nav-top) > a:before, .global-nav-list > li:not(.global-nav-top) > span:before { content: ""; display: block; width: 0; height: 0; border: 3px solid transparent; border-top: 3px solid #356cb6; position: absolute; right: 50%; bottom: 3px; left: 50%; margin-right: -1.5px; } .global-nav-list > li:not(.global-nav-top) > a span, .global-nav-list > li:not(.global-nav-top) > span span { color: #356cb6; } .global-nav-list > li:not(.global-nav-top) > a span:before, .global-nav-list > li:not(.global-nav-top) > span span:before { content: ""; display: block; position: absolute; left: 0; top: 14px; height: 20px; color: #e2e6e8; border-left: 1px solid #e2e6e8; } .global-nav-list > li:not(.global-nav-top) > a span.last:after, .global-nav-list > li:not(.global-nav-top) > span span.last:after { content: ""; display: block; position: absolute; right: 0; top: 15px; height: 20px; border-left: 1px solid #e2e6e8; } .global-nav-list > li:not(.global-nav-top):hover > a, .global-nav-list > li:not(.global-nav-top):hover > span { background: #356cb6; } .global-nav-list > li:not(.global-nav-top).global-active > a { background: #356cb6; } .global-nav-list > li:not(.global-nav-top):hover > a:before, .global-nav-list > li:not(.global-nav-top):hover > span:before { border-top: 3px solid #ffffff; } .global-nav-list > li:not(.global-nav-top).global-active > a:before { border-top: 3px solid #ffffff; } .global-nav-list > li:not(.global-nav-top):hover > a span, .global-nav-list > li:not(.global-nav-top):hover > span span { color: #ffffff; } .global-nav-list > li:not(.global-nav-top).global-active > a span { color: #ffffff; } .global-nav-list > li:not(.global-nav-top):hover > a span:before, .global-nav-list > li:not(.global-nav-top):hover > a span.last:after { display: none; } .global-nav-list > li:not(.global-nav-top):hover > span span:before, .global-nav-list > li:not(.global-nav-top):hover > span span.last:after { display: none; } .global-nav-list > li:not(.global-nav-top).global-active > a span:before, .global-nav-list > li:not(.global-nav-top).global-active > a span.last:after { display: none; } .global-nav-list > li.global-nomenu a:before { display: none; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > a { height: 53px; background: #356cb6; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > a:before { border-top: 3px solid #ffffff; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > a > span { color: #ffffff; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > a > span:before { display: none; } /* --------------------------- */ .sp-drop-menu-back { display: none; } .drop-menu { background-color: #eff3f9; position: absolute; top: 108px; left: 0; z-index: 45; width: 100%; visibility: hidden; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; transition: transform 0s ease, opacity 0s ease, visibility 0s linear; } .header-fixed .drop-menu { top: 49px; } .drop-menu-inner { max-width: 1280px; padding: 0 40px 40px 40px; margin: auto; } .drop-menu-link { font-size: 1.6rem; font-weight: 700; line-height: 1.4; position: relative; padding-left: 23px; display: block; color: #356cb6; } .drop-menu-link:hover { text-decoration: underline; } .drop-menu-link:before { position: absolute; top: 3px; left: 0; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; font-size: 1.4rem; vertical-align: bottom; letter-spacing: 9px; } .drop-menu-link--small { font-family: "Oswald", sans-serif; font-size: 1.4rem; letter-spacing: 0.1em; } .drop-menu-close { border-top: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-close-btn { color: #356cb6; cursor: pointer; font-size: 1.4rem; display: block; padding: 22px 0; text-align: center; transition: opacity 0.3s; } .drop-menu-close-btn:hover { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .drop-menu-close-btn:before { font-family: glyphs; content: "\f020"; font-size: 15px; display: inline-block; vertical-align: -2px; margin-right: 7px; } .drop-menu .grid { margin: 0; } .drop-menu-company li { margin-top: 14px; } .drop-menu-company li a { font-size: 1.3rem; font-weight: 400; position: relative; padding-left: 15px; color: #356cb6; display: block; line-height: 1.2; } .drop-menu-company li a:hover { text-decoration: underline; } .drop-menu-company li a:before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 4px; border-top: 1px solid #356cb6; border-right: 1px solid #356cb6; transform: rotate(45deg); } .drop-menu-company-list { margin: 0; padding-left: 24px; } .drop-menu-company-col-3, .drop-menu-company-col-2, .drop-menu-company-col-1 { border-right: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-company-col-3:first-child, .drop-menu-company-col-2:first-child, .drop-menu-company-col-1:first-child { border-left: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-company-wrap { display: flex; } .drop-menu-ir.ja-menu .drop-menu-inner { max-width: 1520px; } .drop-menu-ir li a { font-size: 1.3rem; font-weight: 400; position: relative; padding-left: 15px; color: #356cb6; display: block; line-height: 1.2; } .drop-menu-ir li a:hover { text-decoration: underline; } .drop-menu-ir li a:before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 4px; border-top: 1px solid #356cb6; border-right: 1px solid #356cb6; transform: rotate(45deg); } .drop-menu-works-col-1 p { font-size: 1.4rem; font-weight: 400; line-height: 1.8; } .drop-menu-works-ttl { font-family: "Oswald", sans-serif; font-size: 1.5em; letter-spacing: 0.2em; } .drop-menu-works-item { display: flex; } .drop-menu-works-item-figure { width: 20%; padding-right: 24px; } .drop-menu-works-item-txt { width: 80%; padding-top: 32px; position: relative; } .drop-menu-works-item-txt p { font-size: 1.4rem; font-weight: 400; line-height: 1.8; margin-top: 30px; } .drop-menu-works-item-txt .drop-menu-link--small { position: absolute; right: 0; bottom: 0; } .drop-menu-solution-col-1 p { font-size: 1.4rem; font-weight: 400; line-height: 1.8; } .drop-menu-solution-ttl { font-size: 1.4em; font-weight: 700; padding-left: 24px; } .drop-menu-solution-item { display: flex; flex-wrap: wrap; } .drop-menu-solution-item li { border-right: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-solution-item li a { font-size: 1.2rem; font-weight: 400; color: #356cb6; line-height: 1.8; letter-spacing: 0.03em; } .drop-menu-solution-item li a:hover { text-decoration: underline; } .drop-menu-solution-item li a span { position: relative; display: block; margin: 0 24px; padding-left: 10px; line-height: 1.4; } .drop-menu-solution-item li a span:before { content: ""; position: absolute; left: 0; top: 5px; width: 4px; height: 4px; border-top: 1px solid #356cb6; border-right: 1px solid #356cb6; transform: rotate(45deg); } .drop-menu-solution-item-icon { width: 90px; height: 90px; margin: auto; background: #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .drop-menu-solution-item-icon img { width: 50px; } .drop-menu-recruit-item, .drop-menu-topics-item { display: flex; flex-wrap: wrap; } .drop-menu-recruit-item li, .drop-menu-topics-item li { border-right: 1px solid rgba(53, 108, 182, 0.2); padding: 0 24px; } .drop-menu-recruit-item li p, .drop-menu-topics-item li p { font-size: 1.4rem; font-weight: 400; line-height: 1.8; } .drop-menu-recruit-item li p span, .drop-menu-topics-item li p span { display: block; font-size: 1.2rem; } .drop-menu-company-item, .drop-menu-esg-item, .drop-menu-ir-item { display: flex; flex-wrap: wrap; } .drop-menu-company-item > li, .drop-menu-esg-item > li, .drop-menu-ir-item > li { border-right: 1px solid rgba(53, 108, 182, 0.2); padding: 0 22px; } .drop-menu-company-item > li:nth-child(1), .drop-menu-esg-item > li:nth-child(1), .drop-menu-ir-item > li:nth-child(1) { border-left: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-company-item > li .drop-menu-nomal-link li, .drop-menu-esg-item > li .drop-menu-nomal-link li, .drop-menu-ir-item > li .drop-menu-nomal-link li { margin-top: 14px; } .drop-menu-company-item > li .drop-menu-nomal-link li a, .drop-menu-esg-item > li .drop-menu-nomal-link li a, .drop-menu-ir-item > li .drop-menu-nomal-link li a { font-size: 1.3rem; font-weight: 400; position: relative; padding-left: 15px; color: #356cb6; display: block; line-height: 1.2; } .drop-menu-company-item > li .drop-menu-nomal-link li a:hover, .drop-menu-esg-item > li .drop-menu-nomal-link li a:hover, .drop-menu-ir-item > li .drop-menu-nomal-link li a:hover { text-decoration: underline; } .drop-menu-company-item > li .drop-menu-nomal-link li a::before, .drop-menu-esg-item > li .drop-menu-nomal-link li a::before, .drop-menu-ir-item > li .drop-menu-nomal-link li a::before { content: ""; position: absolute; left: 0; top: 4px; width: 4px; height: 4px; border-top: 1px solid #356cb6; border-right: 1px solid #356cb6; transform: rotate(45deg); } .drop-menu-nomal-link-next li { padding-left: 16px; } .drop-menu-company-item > li p.drop-menu-text, .drop-menu-esg-item > li p.drop-menu-text, .drop-menu-ir-item > li p.drop-menu-text { font-size: 1.6rem; font-weight: 700; line-height: 1.4; position: relative; display: block; color: #356cb6; } .drop-menu-company-item > li p.drop-menu-text:hover, .drop-menu-esg-item > li p.drop-menu-text:hover, .drop-menu-ir-item > li p.drop-menu-text:hover { text-decoration: none; } .drop-menu-company-item > li > .drop-menu-policy, .drop-menu-esg-item > li > .drop-menu-policy, .drop-menu-ir-item > li > .drop-menu-policy { background: #fff; height: 130px; display: flex; justify-content: center; align-items: center; } .drop-menu-company-item > li > .drop-menu-policy img, .drop-menu-esg-item > li > .drop-menu-policy img, .drop-menu-ir-item > li > .drop-menu-policy img { max-width: 80%; display: block; } .drop-menu-ir-item > li.drop-menu-midasi-link > a { font-size: 1.6rem; font-weight: 700; line-height: 1.4; position: relative; padding-left: 23px; display: block; color: #356cb6; } .drop-menu-ir-item > li.drop-menu-midasi-link > a::before { border: none; width: inherit; height: inherit; transform: none; -webkit-transform: none; position: absolute; top: 3px; left: 0; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; font-size: 1.4rem; vertical-align: bottom; letter-spacing: 9px; } /* ------------------------------------------- 緊急のお知らせ ---------------------------------------------*/ .alertTop { padding-top: 141px; padding: 0 0 0 0 !important; } /* ------------------------------------------- common ---------------------------------------------*/ .base--white { background: #ffffff; } .base--white .base-inner { display: flex; padding: 15px 40px; } .base--white .base-inner .foot-logo { display: block; width: 130px; } .base--white .base-inner .copyright { color: #333333; } /* --------------------------- */ .pagination-list { display: flex; justify-content: space-between; margin-top: 96px; } /* --------------------------- */ .works-pickup .works-pickup-item > .image > .figure-fixed:before { padding-top: 400px; } /* ------------------------------------------- Top ---------------------------------------------*/ #videoArea { height: calc(100vh - 108px); } /*旧トップ*/ .topicsMenu-closeBtn01 { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; text-indent: 100%; white-space: nowrap; } } @media (min-width: 992px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .header-inner { padding: 0 40px; } /* ------------------------------------------- FOOTER ---------------------------------------------*/ .footer-nav-col > a.sns { position: absolute; bottom: 0; left: 15px; } /* ------------------------------------------- common ---------------------------------------------*/ .container--fit-pc { padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------- */ .grid--center-pc { justify-content: center !important; } .grid--reverse-pc { flex-direction: row-reverse !important; } .grid-col-1-pc { flex-basis: 8.33333% !important; max-width: 8.33333% !important; } .grid-col-2-pc { flex-basis: 16.66667% !important; max-width: 16.66667% !important; } .grid-col-3-pc { flex-basis: 25% !important; max-width: 25% !important; } .grid-col-4-pc { flex-basis: 33.33333% !important; max-width: 33.33333% !important; } .grid-col-5-pc { flex-basis: 41.66667% !important; max-width: 41.66667% !important; } .grid-col-6-pc { flex-basis: 50% !important; max-width: 50% !important; } .grid-col-7-pc { flex-basis: 58.33333% !important; max-width: 58.33333% !important; } .grid-col-8-pc { flex-basis: 66.66667% !important; max-width: 66.66667% !important; } .grid-col-9-pc { flex-basis: 75% !important; max-width: 75% !important; } .grid-col-10-pc { flex-basis: 83.33333% !important; max-width: 83.33333% !important; } .grid-col-11-pc { flex-basis: 91.66667% !important; max-width: 91.66667% !important; } .grid-col-12-pc { flex-basis: 100% !important; max-width: 100% !important; } .grid--2col-pc > div { width: 50%; } .grid--3col-pc > div { width: 33.33333%; } .grid--4col-pc > div { width: 25%; } .grid--5col-pc > div { width: 20%; } .grid--6col-pc > div { width: 16.66667%; } .grid--break-pc { display: block; margin: 0; margin-bottom: 0 !important; } .grid--break-pc > div { padding: 0; width: auto; max-width: inherit; margin-top: 36px; } .grid--break-pc > div:first-child { margin-top: 0; } .grid--wrap.grid--break-pc > div { position: static; top: auto; } .grid--wrap.grid--break-pc > div:first-child { margin-top: 0; } /* --------------------------- */ .flex--break-pc { display: block; } .flex--break-pc > div { margin: 0; } .flex--break-pc > div:first-child { margin-top: 0; } .flex--wrap.flex--break-pc { margin-left: auto; margin-right: auto; } .flex--wrap-pc { flex-wrap: wrap; } /* --------------------------- */ .float-left-pc { float: left; } .float-right-pc { float: right; } .float-none-pc { float: none; } .clearfix-pc:after { content: ""; display: block; clear: both; } /* --------------------------- */ .link-list > li:first-child > div { padding-top: 0; } .link-list > li > .text a:hover { background-color: #eff3f9; } .link-list > li > .text a:hover:before { right: 30px; } /* --------------------------- */ .figure-orig-pc img { width: auto !important; height: auto !important; } img.orig-pc { width: auto !important; height: auto !important; } img.fluid-pc { width: 100% !important; } /* --------------------------- */ .table--fit-pc { width: auto; } /* ------------------------------------------- about/information ---------------------------------------------*/ /* 旧グロナビ用? 不要かと Start*/ .menu-solution .menu-inner { display: flex; } .menu-solution-col-2 { width: 100%; border-left: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; } .menu-solution-item { margin-top: 35px; } .menu-solution-item li { width: 14.28%; } .menu-solution-item li:last-child { border-right: none; } .menu-solution-item li a span { display: block; margin: 0 24px; text-indent: -0.5em; padding-left: 0.5em; } /* 旧グロナビ用? 不要かと End*/ /* ------------------------------------------- common ---------------------------------------------*/ ul.m_checkList.s_col2 { display: flex; flex-wrap: wrap; } ul.m_checkList.s_col2 li { width: 50%; } ul.m_checkList.s_col2 li:nth-child(2n+1) { padding-right: 5px; } ul.m_checkList.s_col2 li:nth-child(2n) { padding-left: 5px; } ul.m_checkList.s_col2 input[type=checkbox] + span > span { padding-left: 30px; } ul.m_checkList.s_col2 input[type=checkbox] + span > span:before { width: 16px; height: 16px; left: 0; margin-top: -8px; } ul.m_checkList.s_col2 input[type=checkbox]:checked + span > span:after { left: 5px; } /* ------------------------------------------- top ---------------------------------------------*/ /*旧トップ*/ .topicsMenu-closeBtn02 { position: absolute; top: 10px; right: 40px; } /* ------------------------------------------- common ---------------------------------------------*/ .mt-section-pc { margin-top: 96px !important; } .mt-subsection-pc, .mt-article-pc { margin-top: 48px !important; } .mt-adj-tall-pc { margin-top: 36px !important; } .mt-adj-medium-pc { margin-top: 30px !important; } .mt-adj-short-pc { margin-top: 24px !important; } .mt-paragraph-pc { margin-top: 18px !important; } .mt-line-pc { margin-top: 10px !important; } .pt-section-pc { padding-top: 96px !important; } .pt-subsection-pc, .pt-article-pc { padding-top: 48px !important; } .pt-adj-tall-pc { padding-top: 36px !important; } .pt-adj-medium-pc { padding-top: 30px !important; } .pt-adj-short-pc { padding-top: 24px !important; } .pt-paragraph-pc { padding-top: 18px !important; } .pt-line-pc { padding-top: 10px !important; } .mb0-pc { margin-bottom: 0 !important; } .mb5-pc { margin-bottom: 5px !important; } .mb10-pc { margin-bottom: 10px !important; } .mb15-pc { margin-bottom: 15px !important; } .mb20-pc { margin-bottom: 20px !important; } .mb25-pc { margin-bottom: 25px !important; } .mb30-pc { margin-bottom: 30px !important; } .mb35-pc { margin-bottom: 35px !important; } .mb40-pc { margin-bottom: 40px !important; } .mb45-pc { margin-bottom: 45px !important; } .mb50-pc { margin-bottom: 50px !important; } .mb55-pc { margin-bottom: 55px !important; } .mb60-pc { margin-bottom: 60px !important; } .mb65-pc { margin-bottom: 65px !important; } .mb70-pc { margin-bottom: 70px !important; } .mb75-pc { margin-bottom: 75px !important; } .mb80-pc { margin-bottom: 80px !important; } .mb85-pc { margin-bottom: 85px !important; } .mb90-pc { margin-bottom: 90px !important; } .mb95-pc { margin-bottom: 95px !important; } .mb100-pc { margin-bottom: 100px !important; } .mt0-pc { margin-top: 0 !important; } .mt5-pc { margin-top: 5px !important; } .mt10-pc { margin-top: 10px !important; } .mt15-pc { margin-top: 15px !important; } .mt20-pc { margin-top: 20px !important; } .mt25-pc { margin-top: 25px !important; } .mt30-pc { margin-top: 30px !important; } .mt35-pc { margin-top: 35px !important; } .mt40-pc { margin-top: 40px !important; } .mt45-pc { margin-top: 45px !important; } .mt50-pc { margin-top: 50px !important; } .mt55-pc { margin-top: 55px !important; } .mt60-pc { margin-top: 60px !important; } .mt65-pc { margin-top: 65px !important; } .mt70-pc { margin-top: 70px !important; } .mt75-pc { margin-top: 75px !important; } .mt80-pc { margin-top: 80px !important; } .mt85-pc { margin-top: 85px !important; } .mt90-pc { margin-top: 90px !important; } .mt95-pc { margin-top: 95px !important; } .mt100-pc { margin-top: 100px !important; } .ml0-pc { margin-left: 0 !important; } .ml5-pc { margin-left: 5px !important; } .ml10-pc { margin-left: 10px !important; } .ml15-pc { margin-left: 15px !important; } .ml20-pc { margin-left: 20px !important; } .ml25-pc { margin-left: 25px !important; } .ml30-pc { margin-left: 30px !important; } .ml35-pc { margin-left: 35px !important; } .ml40-pc { margin-left: 40px !important; } .ml45-pc { margin-left: 45px !important; } .ml50-pc { margin-left: 50px !important; } .ml55-pc { margin-left: 55px !important; } .ml60-pc { margin-left: 60px !important; } .ml65-pc { margin-left: 65px !important; } .ml70-pc { margin-left: 70px !important; } .ml75-pc { margin-left: 75px !important; } .ml80-pc { margin-left: 80px !important; } .ml85-pc { margin-left: 85px !important; } .ml90-pc { margin-left: 90px !important; } .ml95-pc { margin-left: 95px !important; } .ml100-pc { margin-left: 100px !important; } .ml170-pc { margin-left: 170px !important; } .ml250-pc { margin-left: 250px !important; } .ml115-pc { margin-left: 100px !important; } .mr0-pc { margin-right: 0 !important; } .mr5-pc { margin-right: 5px !important; } .mr10-pc { margin-right: 10px !important; } .mr15-pc { margin-right: 15px !important; } .mr20-pc { margin-right: 20px !important; } .mr25-pc { margin-right: 25px !important; } .mr30-pc { margin-right: 30px !important; } .mr35-pc { margin-right: 35px !important; } .mr40-pc { margin-right: 40px !important; } .mr45-pc { margin-right: 45px !important; } .mr50-pc { margin-right: 50px !important; } .mr55-pc { margin-right: 55px !important; } .mr60-pc { margin-right: 60px !important; } .mr65-pc { margin-right: 65px !important; } .mr70-pc { margin-right: 70px !important; } .mr75-pc { margin-right: 75px !important; } .mr80-pc { margin-right: 80px !important; } .mr85-pc { margin-right: 85px !important; } .mr90-pc { margin-right: 90px !important; } .mr95-pc { margin-right: 95px !important; } .mr100-pc { margin-right: 100px !important; } .pb0-pc { padding-bottom: 0 !important; } .pb5-pc { padding-bottom: 5px !important; } .pb10-pc { padding-bottom: 10px !important; } .pb15-pc { padding-bottom: 15px !important; } .pb20-pc { padding-bottom: 20px !important; } .pb25-pc { padding-bottom: 25px !important; } .pb30-pc { padding-bottom: 30px !important; } .pb35-pc { padding-bottom: 35px !important; } .pb40-pc { padding-bottom: 40px !important; } .pb45-pc { padding-bottom: 45px !important; } .pb50-pc { padding-bottom: 50px !important; } .pb55-pc { padding-bottom: 55px !important; } .pb60-pc { padding-bottom: 60px !important; } .pb65-pc { padding-bottom: 65px !important; } .pb70-pc { padding-bottom: 70px !important; } .pb75-pc { padding-bottom: 75px !important; } .pb80-pc { padding-bottom: 80px !important; } .pb85-pc { padding-bottom: 85px !important; } .pb90-pc { padding-bottom: 90px !important; } .pb95-pc { padding-bottom: 95px !important; } .pb100-pc { padding-bottom: 100px !important; } .pt0-pc { padding-top: 0 !important; } .pt5-pc { padding-top: 5px !important; } .pt10-pc { padding-top: 10px !important; } .pt15-pc { padding-top: 15px !important; } .pt20-pc { padding-top: 20px !important; } .pt25-pc { padding-top: 25px !important; } .pt30-pc { padding-top: 30px !important; } .pt35-pc { padding-top: 35px !important; } .pt40-pc { padding-top: 40px !important; } .pt45-pc { padding-top: 45px !important; } .pt50-pc { padding-top: 50px !important; } .pt55-pc { padding-top: 55px !important; } .pt60-pc { padding-top: 60px !important; } .pt65-pc { padding-top: 65px !important; } .pt70-pc { padding-top: 70px !important; } .pt75-pc { padding-top: 75px !important; } .pt80-pc { padding-top: 80px !important; } .pt85-pc { padding-top: 85px !important; } .pt90-pc { padding-top: 90px !important; } .pt95-pc { padding-top: 95px !important; } .pt100-pc { padding-top: 100px !important; } .pl0-pc { padding-left: 0 !important; } .pl5-pc { padding-left: 5px !important; } .pl10-pc { padding-left: 10px !important; } .pl15-pc { padding-left: 15px !important; } .pl20-pc { padding-left: 20px !important; } .pl25-pc { padding-left: 25px !important; } .pl30-pc { padding-left: 30px !important; } .pl35-pc { padding-left: 35px !important; } .pl40-pc { padding-left: 40px !important; } .pl45-pc { padding-left: 45px !important; } .pl50-pc { padding-left: 50px !important; } .pl55-pc { padding-left: 55px !important; } .pl60-pc { padding-left: 60px !important; } .pl65-pc { padding-left: 65px !important; } .pl70-pc { padding-left: 70px !important; } .pl75-pc { padding-left: 75px !important; } .pl80-pc { padding-left: 80px !important; } .pl85-pc { padding-left: 85px !important; } .pl90-pc { padding-left: 90px !important; } .pl95-pc { padding-left: 95px !important; } .pl100-pc { padding-left: 100px !important; } .pr0-pc { padding-right: 0 !important; } .pr5-pc { padding-right: 5px !important; } .pr10-pc { padding-right: 10px !important; } .pr15-pc { padding-right: 15px !important; } .pr20-pc { padding-right: 20px !important; } .pr25-pc { padding-right: 25px !important; } .pr30-pc { padding-right: 30px !important; } .pr35-pc { padding-right: 35px !important; } .pr40-pc { padding-right: 40px !important; } .pr45-pc { padding-right: 45px !important; } .pr50-pc { padding-right: 50px !important; } .pr55-pc { padding-right: 55px !important; } .pr60-pc { padding-right: 60px !important; } .pr65-pc { padding-right: 65px !important; } .pr70-pc { padding-right: 70px !important; } .pr75-pc { padding-right: 75px !important; } .pr80-pc { padding-right: 80px !important; } .pr85-pc { padding-right: 85px !important; } .pr90-pc { padding-right: 90px !important; } .pr95-pc { padding-right: 95px !important; } .pr100-pc { padding-right: 100px !important; } .ml-auto-pc { margin-left: auto !important; } .mr-auto-pc { margin-right: auto !important; } .mb-auto-pc { margin-bottom: auto !important; } .mt-auto-pc { margin-top: auto !important; } .w0per-pc { width: 0 !important; } .mw0per-pc, .mw100-pc { max-width: 0 !important; } .w5per-pc { width: 5% !important; } .mw5per-pc { max-width: 5% !important; } .mw150-pc { max-width: 50px !important; } .w10per-pc { width: 10% !important; } .mw10per-pc { max-width: 10% !important; } .mw200-pc { max-width: 100px !important; } .w15per-pc { width: 15% !important; } .mw15per-pc { max-width: 15% !important; } .mw250-pc { max-width: 150px !important; } .w20per-pc { width: 20% !important; } .mw20per-pc { max-width: 20% !important; } .mw300-pc { max-width: 200px !important; } .w25per-pc { width: 25% !important; } .mw25per-pc { max-width: 25% !important; } .mw350-pc { max-width: 250px !important; } .w30per-pc { width: 30% !important; } .mw30per-pc { max-width: 30% !important; } .mw400-pc { max-width: 300px !important; } .w35per-pc { width: 35% !important; } .mw35per-pc { max-width: 35% !important; } .mw450-pc { max-width: 350px !important; } .w40per-pc { width: 40% !important; } .mw40per-pc { max-width: 40% !important; } .mw500-pc { max-width: 400px !important; } .w45per-pc { width: 45% !important; } .mw45per-pc { max-width: 45% !important; } .mw550-pc { max-width: 450px !important; } .w50per-pc { width: 50% !important; } .mw50per-pc { max-width: 50% !important; } .mw600-pc { max-width: 500px !important; } .w55per-pc { width: 55% !important; } .mw55per-pc { max-width: 55% !important; } .mw650-pc { max-width: 550px !important; } .w60per-pc { width: 60% !important; } .mw60per-pc { max-width: 60% !important; } .mw700-pc { max-width: 600px !important; } .w65per-pc { width: 65% !important; } .mw65per-pc { max-width: 65% !important; } .mw750-pc { max-width: 650px !important; } .w70per-pc { width: 70% !important; } .mw70per-pc { max-width: 70% !important; } .mw800-pc { max-width: 700px !important; } .w75per-pc { width: 75% !important; } .mw75per-pc { max-width: 75% !important; } .mw850-pc { max-width: 750px !important; } .w80per-pc { width: 80% !important; } .mw80per-pc { max-width: 80% !important; } .mw900-pc { max-width: 800px !important; } .w85per-pc { width: 85% !important; } .mw85per-pc { max-width: 85% !important; } .mw950-pc { max-width: 850px !important; } .w90per-pc { width: 90% !important; } .mw90per-pc { max-width: 90% !important; } .mw1000-pc { max-width: 900px !important; } .w95per-pc { width: 95% !important; } .mw95per-pc { max-width: 95% !important; } .mw1050-pc { max-width: 950px !important; } .w100per-pc { width: 100% !important; } .mw100per-pc { max-width: 100% !important; } .mw1100-pc { max-width: 1000px !important; } .align-left-pc { text-align: left !important; } .align-center-pc { text-align: center !important; } .align-ight-pc { text-align: right !important; } .align-justify-pc { text-align: justify !important; } .block-left-pc { margin-right: auto !important; } .block-center-pc { margin-right: auto !important; margin-left: auto !important; } .block-right-pc { margin-left: auto !important; } .hidden-pc { display: none !important; } .bordered-pc { border: 1px solid #e2e6e8 !important; } .unbordered-pc { border: none !important; } } @media (min-width: 768px) and (max-width: 991px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .header-inner { padding: 0 20px; } .header-simple { height: 50px; } .header-simple-inner { padding: 10px 20px; height: 50px; } .header-simple .close { right: 20px; } .header-utils li { padding: 0 15px; font-size: 1rem; } /* ------------------------------------------- Project / Solution / Topics / Photo ---------------------------------------------*/ .title .title-body { padding: 15px 24px; height: 80px; } .title h1 { font-size: 2.4rem; } /* ------------------------------------------- FOOTER ---------------------------------------------*/ .footer-nav { flex-wrap: wrap; padding: 50px 20px; } .footer-nav-col { flex-basis: 33.33%; } .footer-nav-col:last-child { flex-basis: 100%; border-right: none; } .footer-nav-col:last-child ul { display: flex; justify-content: center; padding-top: 40px; } .footer-nav-col:last-child ul li { margin-top: 0; } .footer-nav-col:last-child ul li:not(:first-child) { margin-left: 20px; } .footer-nav-col:last-child ul li a { padding-left: 15px; } .footer-nav-col:last-child .sns { text-align: center; } .footer-nav-col:last-child .sns .sns-link > a { padding-left: 0; } .footer-nav-col:last-child .sns .sns-link > a:before { left: auto; margin-left: -10px !important; } .footer-nav-col:last-child .sns .sns-icon img { margin: 10px 13px; } .sns .footer-nav-col > a:before { position: relative; top: -2px; } /* --------------------------- */ .base-inner { padding: 40px; display: block; } .base-links > ul { justify-content: center; } .copyright { margin-top: 24px; text-align: center; } /* ------------------------------------------- common ---------------------------------------------*/ .container { padding: 0 24px; } .container--fit-tb { padding-left: 0 !important; padding-right: 0 !important; } /* --------------------------- */ .grid { margin: 0 -12px; } .grid > div { padding: 0 12px; } .grid--slim { margin: 0 -8px; } .grid--slim > div { padding: 0 8px; } .grid--thin { margin: 0 -6px; } .grid--thin > div { padding: 0 6px; } .grid--wrap { margin-bottom: -24px; } .grid--wrap > div { top: -24px; margin-top: 24px; } .grid--wrap.grid--slim { margin-bottom: -16px; } .grid--wrap.grid--slim > div { top: -16px; margin-top: 16px; } .grid--wrap.grid--thin { margin-bottom: -12px; } .grid--wrap.grid--thin > div { top: -12px; margin-top: 12px; } .grid--center-tb { justify-content: center !important; } .grid--reverse-tb { flex-direction: row-reverse !important; } .grid-col-1-tb { flex-basis: 8.33333% !important; max-width: 8.33333% !important; } .grid-col-2-tb { flex-basis: 16.66667% !important; max-width: 16.66667% !important; } .grid-col-3-tb { flex-basis: 25% !important; max-width: 25% !important; } .grid-col-4-tb { flex-basis: 33.33333% !important; max-width: 33.33333% !important; } .grid-col-5-tb { flex-basis: 41.66667% !important; max-width: 41.66667% !important; } .grid-col-6-tb { flex-basis: 50% !important; max-width: 50% !important; } .grid-col-7-tb { flex-basis: 58.33333% !important; max-width: 58.33333% !important; } .grid-col-8-tb { flex-basis: 66.66667% !important; max-width: 66.66667% !important; } .grid-col-9-tb { flex-basis: 75% !important; max-width: 75% !important; } .grid-col-10-tb { flex-basis: 83.33333% !important; max-width: 83.33333% !important; } .grid-col-11-tb { flex-basis: 91.66667% !important; max-width: 91.66667% !important; } .grid-col-12-tb { flex-basis: 100% !important; max-width: 100% !important; } .grid--2col-tb > div { width: 50%; } .grid--3col-tb > div { width: 33.33333%; } .grid--4col-tb > div { width: 25%; } .grid--5col-tb > div { width: 20%; } .grid--6col-tb > div { width: 16.66667%; } .grid--break-tb { display: block; margin: 0; margin-bottom: 0 !important; } .grid--break-tb > div { padding: 0; width: auto; max-width: inherit; margin-top: 24px; } .grid--break-tb > div:first-child { margin-top: 0; } .grid--wrap.grid--break-tb > div { position: static; top: auto; } .grid--wrap.grid--break-tb > div:first-child { margin-top: 0; } .grid-wrap--2col { display: block; } .grid-wrap--2col > div { width: auto; margin-top: 40px !important; } .grid-wrap--2col > div:first-child { margin-top: 0 !important; } .grid-wrap--3col > div { width: 50%; } .grid-wrap--3col > div:nth-child(-n+3) { margin-top: 40px; } .grid-wrap--3col > div:nth-child(-n+2) { margin-top: 0; } .grid-wrap--4col > div { width: 33.33333%; } .grid-wrap--4col > div:nth-child(-n+4) { margin-top: 40px; } .grid-wrap--4col > div:nth-child(-n+3) { margin-top: 0; } .grid-wrap-box { margin-top: 40px; } /* --------------------------- */ .cover .cover-content-top { margin-top: 40px; } .cover .cover-content-bottom { margin-bottom: 72px; } .cover .cover-content-bottom:last-child { margin-bottom: 30px; } .cover .cover-content-caption { right: 24px; left: 0; } /* --------------------------- */ .flex > div { margin-left: 12px; margin-right: 12px; } .flex--slim > div { margin-left: 9px; margin-right: 9px; } .flex--thin > div { margin-left: 6px; margin-right: 6px; } .flex--break-tb { display: block; } .flex--break-tb > div { margin: 0; } .flex--break-tb > div:first-child { margin-top: 0; } .flex--wrap { margin-left: -12px; margin-right: -12px; } .flex--wrap.flex--slim { margin-left: -9px; margin-right: -9px; } .flex--wrap.flex--thin { margin-left: -6px; margin-right: -6px; } .flex--wrap.flex--break-tb { margin-left: auto; margin-right: auto; } .flex--wrap-tb { flex-wrap: wrap; } /* --------------------------- */ .float-left-tb { float: left; } .float-right-tb { float: right; } .float-none-tb { float: none; } .clearfix-tb:after { content: ""; display: block; clear: both; } /* --------------------------- */ .lead-box { padding: 24px; } .lead-box .heading { font-size: 2.7rem; } .lead-box .subheading { font-size: 1.8rem; } /* --------------------------- */ ul.link-item--2col-tb { display: flex; flex-wrap: wrap; } ul.link-item--2col-tb > li { padding-right: 18px; width: 50%; margin-top: 10px !important; } ul.link-item--2col-tb > li:nth-child(-n+2) { margin-top: 0 !important; } ul.link-item--break-col-tb { display: block; } ul.link-item--break-col-tb > li { padding-right: 0; width: auto; margin-top: 10px !important; } ul.link-item--break-col-tb > li:first-child { margin-top: 0 !important; } /* --------------------------- */ .grid--3col-tb .anchor-box > a { border-left: none !important; } .grid--3col-tb .anchor-box:nth-child(3n+1) > a { border-left: 1px solid #e2e6e8 !important; } .grid--3col-tb .anchor-box:nth-child(3n+1) > a:before { display: block; content: ""; border-top: 1px solid #e2e6e8; position: absolute; top: 0; left: 0; width: 1500px; } .grid--2col-tb .anchor-box > a { border-left: none !important; } .grid--2col-tb .anchor-box:nth-child(2n+1) > a { border-left: 1px solid #e2e6e8 !important; } .grid--2col-tb .anchor-box:nth-child(2n+1) > a:before { display: block; content: ""; border-top: 1px solid #e2e6e8; position: absolute; top: 0; left: 0; width: 1500px; } .grid--break-tb .anchor-box { border-top: 1px solid #e2e6e8; } .grid--break-tb .anchor-box:first-child { border-top: none; } .grid--break-tb .anchor-box > a { border-left: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; } .grid--break-tb .anchor-box > a:before { display: none !important; } /* --------------------------- */ dl.list-def--1-9-tb > dt { width: 10%; } dl.list-def--1-9-tb > dd { width: 90%; } dl.list-def--2-8-tb > dt { width: 20%; } dl.list-def--2-8-tb > dd { width: 80%; } dl.list-def--3-7-tb > dt { width: 30%; } dl.list-def--3-7-tb > dd { width: 70%; } dl.list-def--4-6-tb > dt { width: 40%; } dl.list-def--4-6-tb > dd { width: 60%; } dl.list-def--5-5-tb > dt, dl.list-def--5-5-tb > dd { width: 50%; } dl.list-def--15-85-tb > dt { width: 15%; } dl.list-def--15-85-tb > dd { width: 85%; } dl.list-def--break-tb { display: block; } dl.list-def--break-tb > dt, dl.list-def--break-tb > dd { padding-left: 0; padding-right: 0; width: auto; border-bottom: 1px solid #e2e6e8; } dl.list-def--break-tb > dt:before, dl.list-def--break-tb > dd:before, dl.list-def--break-tb > dt:after, dl.list-def--break-tb > dd:after { display: none !important; } dl.list-def--break-tb > dt:first-child, dl.list-def--break-tb > dd:first-child { border-top: 1px solid #e2e6e8; } dl.list-def--continuous-tb > dt:first-child:before, dl.list-def--continuous-tb > dd:nth-child(2):before { display: none !important; } ul.list-def--break-tb { display: block; } ul.list-def--break-tb > li { display: block; } ul.list-def--break-tb > li > span { display: block; } ul.list-def--break-tb > li > span:first-child { font-weight: 700; padding-right: 0; margin-top: 18px; text-align: left; } ul.list-def--break-tb > li > span:first-child:after { display: none; } ul.list-def--break-tb > li > span:last-child { padding-left: 0; margin-left: 2em; } ul.list-def--break-tb > li:first-child > span:first-child { margin-top: 0; } /* --------------------------- */ .figure-orig-tb img { width: auto !important; height: auto !important; } img.orig-tb { width: auto !important; height: auto !important; } img.fluid-tb { width: 100% !important; } /* --------------------------- */ .grid--layout.grid--3col-tb > div:nth-child(3n+1) > .card, .grid--layout.grid--2col-tb > div:nth-child(2n+1) > .card, .grid--layout.grid--break-tb > div > .card { border-left: 1px solid #e2e6e8; } /* --------------------------- */ .icon-box-wrapper > div:nth-child(4n+1) .icon-box-icon, .icon-box-wrapper > div:nth-child(4n+1) .icon-box-link { border-left: none; } .icon-box-wrapper > div:nth-child(3n+1) .icon-box-icon, .icon-box-wrapper > div:nth-child(3n+1) .icon-box-link { border-left: 1px solid #e2e6e8; } .icon-box2-wrapper { margin-bottom: -24px !important; } .icon-box2-wrapper > div { margin-bottom: 24px; } .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-link, .icon-box2-wrapper > div:nth-child(4n+1) .icon-box2-text { border-left: none; } .icon-box2-wrapper > div:nth-child(4n+1):before { display: none; } .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-icon, .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-link, .icon-box2-wrapper > div:nth-child(3n+1) .icon-box2-text { border-left: 1px solid #e2e6e8; } .icon-box2-wrapper > div:nth-child(3n+1):before { content: ""; display: block; border-bottom: 1px solid #e2e6e8; position: absolute; left: 0; bottom: 0; width: 1200px; } /* --------------------------- */ .table > table th, .table > table td { padding: 12px 18px; } table.table th, table.table td { padding: 12px 18px; } .table--thin > table th, .table--thin > table td { padding: 6px 12px; } table.table--thin th, table.table--thin td { padding: 6px 12px; } .table-scroll--tb { border-bottom: 1px solid #e2e6e8; position: relative; } .table-scroll--tb table { margin-bottom: 16px; min-width: 768px; } .table-scroll--tb table th:first-child, .table-scroll--tb table td:first-child { border-left: none; } .table-scroll--tb table th:last-child, .table-scroll--tb table td:last-child { border-right: none; } .table--fit-tb { width: auto; } /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro .category-intro-body { width: 450px; padding-top: 24px; padding-bottom: 24px; padding-right: 24px; } .category-intro .category-intro-body .text { margin-left: 24px; } .category-intro .category-intro-body:after { width: 24%; right: -24%; } .category-intro--reverse .category-intro-body { padding-right: 0; padding-left: 24px; } .category-intro--reverse .category-intro-body:after { left: -24%; } /* ------------------------------------------- common ---------------------------------------------*/ .content-box { padding: 24px; } .content-box > .shift-top--clear-tb { margin-top: 0; } /* --------------------------- */ .bg-hr-half--clear-tb:before { display: none; } /* --------------------------- */ .sol-container .content-main { width: 68% !important; } .sol-container .content-side { width: 26% !important; } .sol-title .sol-title-inner { padding: 15px 24px; min-height: 100px; } .sol-title .sol-subtitle { font-size: 2.4rem; } /* ------------------------------------------- about/information ---------------------------------------------*/ /* 旧グロナビ用? 不要かと Start*/ .menu-solution-col-2 { border-top: 1px solid #e2e6e8; padding-top: 35px; } .menu-solution-item li { flex-basis: 25%; margin-top: 35px; } .menu-solution-item li:nth-child(4n+1) { border-left: 1px solid #e2e6e8; } .menu-solution-item li a span { display: flex; align-items: flex-start; justify-content: center; } /* ------------------------------------------- Topics/ Internship2018 ---------------------------------------------*/ .topicsHero-ttl { font-size: 1.8rem; } /* ------------------------------------------- About / IR / Topics ---------------------------------------------*/ .topicsContainer { padding-top: 60px; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .topicsColumn { padding: 48px 24px; } /* ------------------------------------------- Project/ Solution ---------------------------------------------*/ .works-side { width: 26% !important; } /* ------------------------------------------- Top ---------------------------------------------*/ .mainV-cap { bottom: 0; } .chouseiLinkBtn .grid { flex-wrap: wrap; } .chouseiLinkBtn .grid .grid-col-2 { flex-basis: 33.33%; max-width: 33.33%; } .chouseiLinkBtn .grid .grid-col-2:nth-child(n+4) { margin-top: 18px; } /*旧トップ*/ .mainV-info { width: calc(100% - 72px); bottom: 40px; } .infoFix2 { flex-basis: 100%; } .chouseiPickup { margin: 0 auto 60px; } .pickup-list { display: block; overflow: hidden; max-width: 100%; width: 100%; margin-top: 50px; } .topicsMenu .container { position: static; } .topicsMenu .container .grid-warp-box { margin-top: 0; } .topicsMenu-closeBtn02 { position: absolute; top: 55px; right: 40px; } /* ------------------------------------------- About / Company ---------------------------------------------*/ .topmessageWrap-mini { padding: 0 24px; } .topMsg { width: 450px; } .aboutmore3 > a { min-width: 300px; } /* ------------------------------------------- common ---------------------------------------------*/ .mt-section-tb { margin-top: 96px !important; } .mt-subsection-tb, .mt-article-tb { margin-top: 48px !important; } .mt-adj-tall-tb { margin-top: 36px !important; } .mt-adj-medium-tb { margin-top: 30px !important; } .mt-adj-short-tb { margin-top: 24px !important; } .mt-paragraph-tb { margin-top: 18px !important; } .mt-line-tb { margin-top: 10px !important; } .pt-section-tb { padding-top: 96px !important; } .pt-subsection-tb, .pt-article-tb { padding-top: 48px !important; } .pt-adj-tall-tb { padding-top: 36px !important; } .pt-adj-medium-tb { padding-top: 30px !important; } .pt-adj-short-tb { padding-top: 24px !important; } .pt-paragraph-tb { padding-top: 18px !important; } .pt-line-tb { padding-top: 10px !important; } .mb0-tb { margin-bottom: 0 !important; } .mb5-tb { margin-bottom: 5px !important; } .mb10-tb { margin-bottom: 10px !important; } .mb15-tb { margin-bottom: 15px !important; } .mb20-tb { margin-bottom: 20px !important; } .mb25-tb { margin-bottom: 25px !important; } .mb30-tb { margin-bottom: 30px !important; } .mb35-tb { margin-bottom: 35px !important; } .mb40-tb { margin-bottom: 40px !important; } .mb45-tb { margin-bottom: 45px !important; } .mb50-tb { margin-bottom: 50px !important; } .mb55-tb { margin-bottom: 55px !important; } .mb60-tb { margin-bottom: 60px !important; } .mb65-tb { margin-bottom: 65px !important; } .mb70-tb { margin-bottom: 70px !important; } .mb75-tb { margin-bottom: 75px !important; } .mb80-tb { margin-bottom: 80px !important; } .mb85-tb { margin-bottom: 85px !important; } .mb90-tb { margin-bottom: 90px !important; } .mb95-tb { margin-bottom: 95px !important; } .mb100-tb { margin-bottom: 100px !important; } .mt0-tb { margin-top: 0 !important; } .mt5-tb { margin-top: 5px !important; } .mt10-tb { margin-top: 10px !important; } .mt15-tb { margin-top: 15px !important; } .mt20-tb { margin-top: 20px !important; } .mt25-tb { margin-top: 25px !important; } .mt30-tb { margin-top: 30px !important; } .mt35-tb { margin-top: 35px !important; } .mt40-tb { margin-top: 40px !important; } .mt45-tb { margin-top: 45px !important; } .mt50-tb { margin-top: 50px !important; } .mt55-tb { margin-top: 55px !important; } .mt60-tb { margin-top: 60px !important; } .mt65-tb { margin-top: 65px !important; } .mt70-tb { margin-top: 70px !important; } .mt75-tb { margin-top: 75px !important; } .mt80-tb { margin-top: 80px !important; } .mt85-tb { margin-top: 85px !important; } .mt90-tb { margin-top: 90px !important; } .mt95-tb { margin-top: 95px !important; } .mt100-tb { margin-top: 100px !important; } .ml0-tb { margin-left: 0 !important; } .ml5-tb { margin-left: 5px !important; } .ml10-tb { margin-left: 10px !important; } .ml15-tb { margin-left: 15px !important; } .ml20-tb { margin-left: 20px !important; } .ml25-tb { margin-left: 25px !important; } .ml30-tb { margin-left: 30px !important; } .ml35-tb { margin-left: 35px !important; } .ml40-tb { margin-left: 40px !important; } .ml45-tb { margin-left: 45px !important; } .ml50-tb { margin-left: 50px !important; } .ml55-tb { margin-left: 55px !important; } .ml60-tb { margin-left: 60px !important; } .ml65-tb { margin-left: 65px !important; } .ml70-tb { margin-left: 70px !important; } .ml75-tb { margin-left: 75px !important; } .ml80-tb { margin-left: 80px !important; } .ml85-tb { margin-left: 85px !important; } .ml90-tb { margin-left: 90px !important; } .ml95-tb { margin-left: 95px !important; } .ml100-tb { margin-left: 100px !important; } .ml150-tb { margin-left: 150px !important; } .ml200-tb { margin-left: 200px !important; } .mr0-tb { margin-right: 0 !important; } .mr5-tb { margin-right: 5px !important; } .mr10-tb { margin-right: 10px !important; } .mr15-tb { margin-right: 15px !important; } .mr20-tb { margin-right: 20px !important; } .mr25-tb { margin-right: 25px !important; } .mr30-tb { margin-right: 30px !important; } .mr35-tb { margin-right: 35px !important; } .mr40-tb { margin-right: 40px !important; } .mr45-tb { margin-right: 45px !important; } .mr50-tb { margin-right: 50px !important; } .mr55-tb { margin-right: 55px !important; } .mr60-tb { margin-right: 60px !important; } .mr65-tb { margin-right: 65px !important; } .mr70-tb { margin-right: 70px !important; } .mr75-tb { margin-right: 75px !important; } .mr80-tb { margin-right: 80px !important; } .mr85-tb { margin-right: 85px !important; } .mr90-tb { margin-right: 90px !important; } .mr95-tb { margin-right: 95px !important; } .mr100-tb { margin-right: 100px !important; } .pb0-tb { padding-bottom: 0 !important; } .pb5-tb { padding-bottom: 5px !important; } .pb10-tb { padding-bottom: 10px !important; } .pb15-tb { padding-bottom: 15px !important; } .pb20-tb { padding-bottom: 20px !important; } .pb25-tb { padding-bottom: 25px !important; } .pb30-tb { padding-bottom: 30px !important; } .pb35-tb { padding-bottom: 35px !important; } .pb40-tb { padding-bottom: 40px !important; } .pb45-tb { padding-bottom: 45px !important; } .pb50-tb { padding-bottom: 50px !important; } .pb55-tb { padding-bottom: 55px !important; } .pb60-tb { padding-bottom: 60px !important; } .pb65-tb { padding-bottom: 65px !important; } .pb70-tb { padding-bottom: 70px !important; } .pb75-tb { padding-bottom: 75px !important; } .pb80-tb { padding-bottom: 80px !important; } .pb85-tb { padding-bottom: 85px !important; } .pb90-tb { padding-bottom: 90px !important; } .pb95-tb { padding-bottom: 95px !important; } .pb100-tb { padding-bottom: 100px !important; } .pt0-tb { padding-top: 0 !important; } .pt5-tb { padding-top: 5px !important; } .pt10-tb { padding-top: 10px !important; } .pt15-tb { padding-top: 15px !important; } .pt20-tb { padding-top: 20px !important; } .pt25-tb { padding-top: 25px !important; } .pt30-tb { padding-top: 30px !important; } .pt35-tb { padding-top: 35px !important; } .pt40-tb { padding-top: 40px !important; } .pt45-tb { padding-top: 45px !important; } .pt50-tb { padding-top: 50px !important; } .pt55-tb { padding-top: 55px !important; } .pt60-tb { padding-top: 60px !important; } .pt65-tb { padding-top: 65px !important; } .pt70-tb { padding-top: 70px !important; } .pt75-tb { padding-top: 75px !important; } .pt80-tb { padding-top: 80px !important; } .pt85-tb { padding-top: 85px !important; } .pt90-tb { padding-top: 90px !important; } .pt95-tb { padding-top: 95px !important; } .pt100-tb { padding-top: 100px !important; } .pl0-tb { padding-left: 0 !important; } .pl5-tb { padding-left: 5px !important; } .pl10-tb { padding-left: 10px !important; } .pl15-tb { padding-left: 15px !important; } .pl20-tb { padding-left: 20px !important; } .pl25-tb { padding-left: 25px !important; } .pl30-tb { padding-left: 30px !important; } .pl35-tb { padding-left: 35px !important; } .pl40-tb { padding-left: 40px !important; } .pl45-tb { padding-left: 45px !important; } .pl50-tb { padding-left: 50px !important; } .pl55-tb { padding-left: 55px !important; } .pl60-tb { padding-left: 60px !important; } .pl65-tb { padding-left: 65px !important; } .pl70-tb { padding-left: 70px !important; } .pl75-tb { padding-left: 75px !important; } .pl80-tb { padding-left: 80px !important; } .pl85-tb { padding-left: 85px !important; } .pl90-tb { padding-left: 90px !important; } .pl95-tb { padding-left: 95px !important; } .pl100-tb { padding-left: 100px !important; } .pr0-tb { padding-right: 0 !important; } .pr5-tb { padding-right: 5px !important; } .pr10-tb { padding-right: 10px !important; } .pr15-tb { padding-right: 15px !important; } .pr20-tb { padding-right: 20px !important; } .pr25-tb { padding-right: 25px !important; } .pr30-tb { padding-right: 30px !important; } .pr35-tb { padding-right: 35px !important; } .pr40-tb { padding-right: 40px !important; } .pr45-tb { padding-right: 45px !important; } .pr50-tb { padding-right: 50px !important; } .pr55-tb { padding-right: 55px !important; } .pr60-tb { padding-right: 60px !important; } .pr65-tb { padding-right: 65px !important; } .pr70-tb { padding-right: 70px !important; } .pr75-tb { padding-right: 75px !important; } .pr80-tb { padding-right: 80px !important; } .pr85-tb { padding-right: 85px !important; } .pr90-tb { padding-right: 90px !important; } .pr95-tb { padding-right: 95px !important; } .pr100-tb { padding-right: 100px !important; } .ml-auto-tb { margin-left: auto !important; } .mr-auto-tb { margin-right: auto !important; } .mb-auto-tb { margin-bottom: auto !important; } .mt-auto-tb { margin-top: auto !important; } .w0per-tb { width: 0 !important; } .mw0per-tb { max-width: 0 !important; } .mw100-tb { max-width: 100px !important; } .w5per-tb { width: 5% !important; } .mw5per-tb { max-width: 5% !important; } .mw150-tb { max-width: 150px !important; } .w10per-tb { width: 10% !important; } .mw10per-tb { max-width: 10% !important; } .mw200-tb { max-width: 200px !important; } .w15per-tb { width: 15% !important; } .mw15per-tb { max-width: 15% !important; } .mw250-tb { max-width: 250px !important; } .w20per-tb { width: 20% !important; } .mw20per-tb { max-width: 20% !important; } .mw300-tb { max-width: 300px !important; } .w25per-tb { width: 25% !important; } .mw25per-tb { max-width: 25% !important; } .mw350-tb { max-width: 350px !important; } .w30per-tb { width: 30% !important; } .mw30per-tb { max-width: 30% !important; } .mw400-tb { max-width: 400px !important; } .w35per-tb { width: 35% !important; } .mw35per-tb { max-width: 35% !important; } .mw450-tb { max-width: 450px !important; } .w40per-tb { width: 40% !important; } .mw40per-tb { max-width: 40% !important; } .mw500-tb { max-width: 500px !important; } .w45per-tb { width: 45% !important; } .mw45per-tb { max-width: 45% !important; } .mw550-tb { max-width: 550px !important; } .w50per-tb { width: 50% !important; } .mw50per-tb { max-width: 50% !important; } .mw600-tb { max-width: 600px !important; } .w55per-tb { width: 55% !important; } .mw55per-tb { max-width: 55% !important; } .mw650-tb { max-width: 650px !important; } .w60per-tb { width: 60% !important; } .mw60per-tb { max-width: 60% !important; } .mw700-tb { max-width: 700px !important; } .w65per-tb { width: 65% !important; } .mw65per-tb { max-width: 65% !important; } .mw750-tb { max-width: 750px !important; } .w70per-tb { width: 70% !important; } .mw70per-tb { max-width: 70% !important; } .mw800-tb { max-width: 800px !important; } .w75per-tb { width: 75% !important; } .mw75per-tb { max-width: 75% !important; } .mw850-tb { max-width: 850px !important; } .w80per-tb { width: 80% !important; } .mw80per-tb { max-width: 80% !important; } .mw900-tb { max-width: 900px !important; } .w85per-tb { width: 85% !important; } .mw85per-tb { max-width: 85% !important; } .mw950-tb { max-width: 950px !important; } .w90per-tb { width: 90% !important; } .mw90per-tb { max-width: 90% !important; } .mw1000-tb { max-width: 1000px !important; } .w95per-tb { width: 95% !important; } .mw95per-tb { max-width: 95% !important; } .mw1050-tb { max-width: 1050px !important; } .w100per-tb { width: 100% !important; } .mw100per-tb { max-width: 100% !important; } .mw1100-tb { max-width: 1100px !important; } .align-left-tb { text-align: left !important; } .align-center-tb { text-align: center !important; } .align-ight-tb { text-align: right !important; } .align-justify-tb { text-align: justify !important; } .block-left-tb { margin-right: auto !important; } .block-center-tb { margin-right: auto !important; margin-left: auto !important; } .block-right-tb { margin-left: auto !important; } .hidden-tb { display: none !important; } .bordered-tb { border: 1px solid #e2e6e8 !important; } .unbordered-tb { border: none !important; } } @media (min-width: 768px) and (min-width: 768px) and (max-width: 991px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .global-nav-list > li:not(.global-nav-top) > a, .global-nav-list > li:not(.global-nav-top) > span { font-size: 1rem; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > .is-current { height: 53px; background: #356cb6; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > .is-current:before { border-top: 3px solid #ffffff; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > .is-current > span { color: #ffffff; } .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover > .is-current > span:before { display: none; } .drop-menu--open { visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: translateY(0); } .drop-menu-company-col-2 { width: 50%; } .drop-menu-company-col-3 { width: 33.3333333333%; } .drop-menu-ir-list-1 { width: 35%; } .drop-menu-ir-list-2 { width: 65%; } .drop-menu-ir-figure-items { width: 50%; } .drop-menu-ir-figure-items:nth-child(n+3) { margin-top: 24px; } .drop-menu-works-col-2, .drop-menu-solution-col-2 { border-top: 1px solid rgba(53, 108, 182, 0.2); padding-top: 35px; } .drop-menu-solution-item li { flex-basis: 25%; margin-top: 35px; } .drop-menu-solution-item li:nth-child(4n+1) { border-left: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-recruit-item li, .drop-topics-company-item li { flex-basis: 33.33%; margin-top: 40px; } .drop-menu-recruit-item li:nth-child(3n+1), .drop-topics-company-item li:nth-child(3n+1) { border-left: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-company-item > li, .drop-menu-esg-item > li, .drop-menu-ir-item > li { flex-basis: 33.33%; -webkit-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; margin-top: 40px; } .drop-menu-company-item > li:nth-child(4), .drop-menu-esg-item > li:nth-child(4), .drop-menu-ir-item > li:nth-child(4) { border-left: 1px solid rgba(53, 108, 182, 0.2); } } @media (min-width: 768px) and (min-width: 992px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .global-nav-list > li:not(.global-nav-top):not(.global-nomenu):hover .drop-menu { visibility: visible; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; transform: translateY(0); transition: transform 0.6s ease, opacity 0.5s ease, visibility 0.5s linear; } .drop-menu-company-list-wrap { display: flex; } .drop-menu-company-list-item { /*width: 50%;*/ padding-left: 24px; border-left: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-company-list-item:first-child { padding-left: 0; border-left: none; } .drop-menu-company-col-3 { width: 100%; } .drop-menu-company-col-2 { width: 50%; } .drop-menu-company-col-1 { width: 100%; } .drop-menu-ir-list-1 { width: 20%; } .drop-menu-ir-list-2 { width: 80%; } .drop-menu-works .drop-menu-inner { display: flex; } .drop-menu-works-col-1 { width: 20%; padding-right: 24px; } .drop-menu-works-col-2 { width: 80%; border-left: 1px solid rgba(53, 108, 182, 0.2); border-right: 1px solid rgba(53, 108, 182, 0.2); padding: 0 24px; } .drop-menu-solution .drop-menu-inner { display: flex; } .drop-menu-solution-col-1 { width: 20%; padding-right: 24px; } .drop-menu-solution-col-2 { width: 80%; border-left: 1px solid rgba(53, 108, 182, 0.2); border-right: 1px solid rgba(53, 108, 182, 0.2); } .drop-menu-solution-item { margin-top: 35px; } .drop-menu-solution-item li { width: 14.28%; } .drop-menu-solution-item li:last-child { border-right: none; } .drop-menu-recruit-item, .drop-menu-topics-item { border-left: 1px solid rgba(53, 108, 182, 0.2); margin-top: 35px; } .drop-menu-recruit-item li, .drop-menu-topics-item li { width: 20%; } .drop-menu-company-item, .drop-menu-esg-item, .drop-menu-ir-item { margin-top: 35px; } .drop-menu-company-item > li, .drop-menu-esg-item > li, .drop-menu-ir-item > li { width: 20%; } .ja-menu .drop-menu-ir-item > li { width: 16.6666666667%; padding: 0 8px; } .ja-menu .drop-menu-ir-item > li.drop-menu-midasi-link > a { font-size: 1.5rem; } } @media screen and (max-width: 767px) { /* ------------------------------------------- 緊急のお知らせ ---------------------------------------------*/ .alertEx { margin-top: 0 !important; } .alertTop { margin-top: 60px !important; } } @media screen and (min-width: 1200px) { body.hasRecommend { padding-right: 241px; } .recommendNav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; overflow-y: auto; background-color: #ffffff; width: 240px; border-left: 1px solid #e2e6e8; } body.hasRecommend .recommendNav { display: block; } .recommendNav-title { background-color: #356cb6; padding: 50px 0; text-align: center; color: #ffffff; font-size: 1.8rem; font-weight: bold; } .recommendNav li { border-bottom: 1px solid #e2e6e8; } .recommendNav-link { display: block; padding: 24px; transition: background-color 0.3s; } .recommendNav-link:hover { background-color: #eff3f9; } .recommendNav-link:hover img { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .recommendNav-link-text { position: relative; padding: 10px 0 0 22px; font-size: 1.4rem; font-weight: bold; line-height: 1.5; } .recommendNav-link-text:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f014"; position: absolute; top: 14px; left: 0; font-size: 1.5rem; } } @media (min-width: 1200px) { body.hasRecommend .pageTop { right: 265px; } /* ------------------------------------------- Solution ---------------------------------------------*/ .sol-sidebar .tab-buttons { position: fixed; top: 140px; width: 220px; right: 20px; } .sol-sidebar .works-sidebar-scroll { top: 220px; } /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-sidebar { position: fixed; width: 260px; top: 0; bottom: 0; right: 0; border-left: 1px solid #e2e6e8; background-color: #ffffff; z-index: 3; } body.with-works-sidebar { padding-right: 260px; } body.with-works-sidebar .header-fixed { width: auto; right: 260px; } body.with-works-sidebar .pageTop { right: 325px; } .works-sidebar-heading, .works-sidebar-scroll, .works-sidebar-button { position: fixed; width: 260px; } .works-sidebar-heading { height: 120px; } .works-sidebar-scroll { padding: 0 20px; top: 120px; right: 0; bottom: 80px; overflow: hidden; } .works-sidebar-button { position: fixed; right: 0; bottom: 0; width: 260px; padding: 20px; } } @media screen and (max-width: 479px) { /* ------------------------------------------- common ---------------------------------------------*/ .floatSnsBtn { height: 35px; } .floatSnsBtn ul { top: auto; left: 0; bottom: 0; width: auto; } .floatSnsBtn li { float: left; width: 50%; } .floatSnsBtn a { padding: 5px 0; text-align: center; } .floatSnsBtn a img { width: 25px; } .br-tb { display: none; } } @media (max-width: 479px) { /* ------------------------------------------- common ---------------------------------------------*/ .container { padding: 0 12px; } .container--2col { padding: 0; } .container--2col > .content-main { padding: 0 12px; } .grid--break-xs { display: block; margin: 0; margin-bottom: 0 !important; } .grid--break-xs > div { padding: 0; width: auto; max-width: inherit; margin-top: 18px; } .grid--break-xs > div:first-child { margin-top: 0; } .grid--wrap.grid--break-xs > div { position: static; top: auto; } .grid--wrap.grid--break-xs > div:first-child { margin-top: 0; } .grid-wrap--2col, .grid-wrap--3col { display: block; } .grid-wrap--2col > div, .grid-wrap--3col > div { width: auto; margin-top: 24px !important; } .grid-wrap--2col > div:first-child, .grid-wrap--3col > div:first-child { margin-top: 0 !important; } .grid-wrap--4col > div { width: 50%; } .grid-wrap--4col > div:nth-child(-n+4), .grid-wrap--4col > div:nth-child(-n+3) { margin-top: 24px; } .grid-wrap--4col > div:nth-child(-n+2) { margin-top: 0; } .grid-wrap--break-xs { display: block; } .grid-wrap--break-xs > div { width: auto; margin-top: 24px !important; } .grid-wrap--break-xs > div:first-child { margin-top: 0 !important; } .grid-wrap-box { margin-top: 24px; } .flex--break-xs { display: block; } .flex--break-xs > div { margin: 0; } .flex--break-xs > div:first-child { margin-top: 0; } .flex--wrap.flex--break-xs { margin-left: auto; margin-right: auto; } .flex--wrap-xs { flex-wrap: wrap; } .float-left-xs { float: left; } .float-right-xs { float: right; } .float-none-xs { float: none; } .clearfix-xs:after { content: ""; display: block; clear: both; } .link-list > li > .tag { padding: 0 0 3px; width: auto; } .link-list > li > .tag:empty { display: none; } .link-list > li > .tag span { margin: 0 8px 5px 0 !important; } dl.list-def--continuous-xs > dt:first-child:before, dl.list-def--continuous-xs > dd:nth-child(2):before { display: none !important; } ul.list-def--break-xs { display: block; } ul.list-def--break-xs > li { display: block; } ul.list-def--break-xs > li > span { display: block; } ul.list-def--break-xs > li > span:first-child { font-weight: 700; padding-right: 0; margin-top: 18px; text-align: left; } ul.list-def--break-xs > li > span:first-child:after { display: none; } ul.list-def--break-xs > li > span:last-child { padding-left: 0; margin-left: 2em; } ul.list-def--break-xs > li:first-child > span:first-child { margin-top: 0; } .figure-orig-xs img { width: auto !important; height: auto !important; } img.orig-xs { width: auto !important; height: auto !important; } img.fluid-xs { width: 100% !important; } .icon-box2-wrapper > div .icon-box2-icon { padding-top: 18px; border-left: 1px solid #e2e6e8 !important; } .icon-box2-wrapper > div .icon-box2-link { border-left: 1px solid #e2e6e8 !important; } .icon-box2-wrapper > div .icon-box2-text { border-left: 1px solid #e2e6e8 !important; border-bottom: 1px solid #e2e6e8; margin-bottom: 0; padding: 18px; } .icon-box2-wrapper > div:before { display: none !important; } .tab-buttons > li { padding: 6px; font-size: 1.2rem; } /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro .category-intro-body { margin: 0; } .category-intro .category-intro-body .summary { display: block; } .category-intro .category-intro-body .icon { display: none; } .category-intro .category-intro-body .text { margin-left: 0; } /* ------------------------------------------- common ---------------------------------------------*/ .content-box { padding: 18px; } .content-box > .shift-top--clear-xs { margin-top: 0; } .nav-carousel .slick-arrow { transform: scale(0.7); } .nav-carousel .slick-prev { left: 6px; } .nav-carousel .slick-next { right: 6px; } .nav-carousel .slick-list { margin-left: 40px; margin-right: 40px; } .nav-carousel .slick-slide { padding: 12px; } /* ------------------------------------------- About /Company ---------------------------------------------*/ .topMsg { margin: 0 !important; } .conversation-fl, .conversation-fr { float: none; margin: 20px; text-align: center; } /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .grid-wrap .constlink-list { width: 50%; } .grid-wrap .constlink-list .listinn a { padding: 20px 15px 15px; } /* ------------------------------------------- common ---------------------------------------------*/ .mt-section-xs { margin-top: 48px !important; } .mt-subsection-xs, .mt-article-xs { margin-top: 24px !important; } .mt-adj-tall-xs, .mt-adj-medium-xs, .mt-adj-short-xs { margin-top: 18px !important; } .mt-paragraph-xs { margin-top: 12px !important; } .mt-line-xs { margin-top: 10px !important; } .pt-section-xs { padding-top: 48px !important; } .pt-subsection-xs, .pt-article-xs { padding-top: 24px !important; } .pt-adj-tall-xs, .pt-adj-medium-xs, .pt-adj-short-xs { padding-top: 18px !important; } .pt-paragraph-xs { padding-top: 12px !important; } .pt-line-xs { padding-top: 10px !important; } .mb0-xs { margin-bottom: 0 !important; } .mb5-xs { margin-bottom: 5px !important; } .mb10-xs { margin-bottom: 10px !important; } .mb15-xs { margin-bottom: 15px !important; } .mb20-xs { margin-bottom: 20px !important; } .mb25-xs { margin-bottom: 25px !important; } .mb30-xs { margin-bottom: 30px !important; } .mb35-xs { margin-bottom: 35px !important; } .mb40-xs { margin-bottom: 40px !important; } .mb45-xs { margin-bottom: 45px !important; } .mb50-xs { margin-bottom: 50px !important; } .mb55-xs { margin-bottom: 55px !important; } .mb60-xs { margin-bottom: 60px !important; } .mb65-xs { margin-bottom: 65px !important; } .mb70-xs { margin-bottom: 70px !important; } .mb75-xs { margin-bottom: 75px !important; } .mb80-xs { margin-bottom: 80px !important; } .mb85-xs { margin-bottom: 85px !important; } .mb90-xs { margin-bottom: 90px !important; } .mb95-xs { margin-bottom: 95px !important; } .mb100-xs { margin-bottom: 100px !important; } .mt0-xs { margin-top: 0 !important; } .mt5-xs { margin-top: 5px !important; } .mt10-xs { margin-top: 10px !important; } .mt15-xs { margin-top: 15px !important; } .mt20-xs { margin-top: 20px !important; } .mt25-xs { margin-top: 25px !important; } .mt30-xs { margin-top: 30px !important; } .mt35-xs { margin-top: 35px !important; } .mt40-xs { margin-top: 40px !important; } .mt45-xs { margin-top: 45px !important; } .mt50-xs { margin-top: 50px !important; } .mt55-xs { margin-top: 55px !important; } .mt60-xs { margin-top: 60px !important; } .mt65-xs { margin-top: 65px !important; } .mt70-xs { margin-top: 70px !important; } .mt75-xs { margin-top: 75px !important; } .mt80-xs { margin-top: 80px !important; } .mt85-xs { margin-top: 85px !important; } .mt90-xs { margin-top: 90px !important; } .mt95-xs { margin-top: 95px !important; } .mt100-xs { margin-top: 100px !important; } .ml0-xs { margin-left: 0 !important; } .ml5-xs { margin-left: 5px !important; } .ml10-xs { margin-left: 10px !important; } .ml15-xs { margin-left: 15px !important; } .ml20-xs { margin-left: 20px !important; } .ml25-xs { margin-left: 25px !important; } .ml30-xs { margin-left: 30px !important; } .ml35-xs { margin-left: 35px !important; } .ml40-xs { margin-left: 40px !important; } .ml45-xs { margin-left: 45px !important; } .ml50-xs { margin-left: 50px !important; } .ml55-xs { margin-left: 55px !important; } .ml60-xs { margin-left: 60px !important; } .ml65-xs { margin-left: 65px !important; } .ml70-xs { margin-left: 70px !important; } .ml75-xs { margin-left: 75px !important; } .ml80-xs { margin-left: 80px !important; } .ml85-xs { margin-left: 85px !important; } .ml90-xs { margin-left: 90px !important; } .ml95-xs { margin-left: 95px !important; } .ml100-xs { margin-left: 100px !important; } .mr0-xs { margin-right: 0 !important; } .mr5-xs { margin-right: 5px !important; } .mr10-xs { margin-right: 10px !important; } .mr15-xs { margin-right: 15px !important; } .mr20-xs { margin-right: 20px !important; } .mr25-xs { margin-right: 25px !important; } .mr30-xs { margin-right: 30px !important; } .mr35-xs { margin-right: 35px !important; } .mr40-xs { margin-right: 40px !important; } .mr45-xs { margin-right: 45px !important; } .mr50-xs { margin-right: 50px !important; } .mr55-xs { margin-right: 55px !important; } .mr60-xs { margin-right: 60px !important; } .mr65-xs { margin-right: 65px !important; } .mr70-xs { margin-right: 70px !important; } .mr75-xs { margin-right: 75px !important; } .mr80-xs { margin-right: 80px !important; } .mr85-xs { margin-right: 85px !important; } .mr90-xs { margin-right: 90px !important; } .mr95-xs { margin-right: 95px !important; } .mr100-xs { margin-right: 100px !important; } .pb0-xs { padding-bottom: 0 !important; } .pb5-xs { padding-bottom: 5px !important; } .pb10-xs { padding-bottom: 10px !important; } .pb15-xs { padding-bottom: 15px !important; } .pb20-xs { padding-bottom: 20px !important; } .pb25-xs { padding-bottom: 25px !important; } .pb30-xs { padding-bottom: 30px !important; } .pb35-xs { padding-bottom: 35px !important; } .pb40-xs { padding-bottom: 40px !important; } .pb45-xs { padding-bottom: 45px !important; } .pb50-xs { padding-bottom: 50px !important; } .pb55-xs { padding-bottom: 55px !important; } .pb60-xs { padding-bottom: 60px !important; } .pb65-xs { padding-bottom: 65px !important; } .pb70-xs { padding-bottom: 70px !important; } .pb75-xs { padding-bottom: 75px !important; } .pb80-xs { padding-bottom: 80px !important; } .pb85-xs { padding-bottom: 85px !important; } .pb90-xs { padding-bottom: 90px !important; } .pb95-xs { padding-bottom: 95px !important; } .pb100-xs { padding-bottom: 100px !important; } .pt0-xs { padding-top: 0 !important; } .pt5-xs { padding-top: 5px !important; } .pt10-xs { padding-top: 10px !important; } .pt15-xs { padding-top: 15px !important; } .pt20-xs { padding-top: 20px !important; } .pt25-xs { padding-top: 25px !important; } .pt30-xs { padding-top: 30px !important; } .pt35-xs { padding-top: 35px !important; } .pt40-xs { padding-top: 40px !important; } .pt45-xs { padding-top: 45px !important; } .pt50-xs { padding-top: 50px !important; } .pt55-xs { padding-top: 55px !important; } .pt60-xs { padding-top: 60px !important; } .pt65-xs { padding-top: 65px !important; } .pt70-xs { padding-top: 70px !important; } .pt75-xs { padding-top: 75px !important; } .pt80-xs { padding-top: 80px !important; } .pt85-xs { padding-top: 85px !important; } .pt90-xs { padding-top: 90px !important; } .pt95-xs { padding-top: 95px !important; } .pt100-xs { padding-top: 100px !important; } .pl0-xs { padding-left: 0 !important; } .pl5-xs { padding-left: 5px !important; } .pl10-xs { padding-left: 10px !important; } .pl15-xs { padding-left: 15px !important; } .pl20-xs { padding-left: 20px !important; } .pl25-xs { padding-left: 25px !important; } .pl30-xs { padding-left: 30px !important; } .pl35-xs { padding-left: 35px !important; } .pl40-xs { padding-left: 40px !important; } .pl45-xs { padding-left: 45px !important; } .pl50-xs { padding-left: 50px !important; } .pl55-xs { padding-left: 55px !important; } .pl60-xs { padding-left: 60px !important; } .pl65-xs { padding-left: 65px !important; } .pl70-xs { padding-left: 70px !important; } .pl75-xs { padding-left: 75px !important; } .pl80-xs { padding-left: 80px !important; } .pl85-xs { padding-left: 85px !important; } .pl90-xs { padding-left: 90px !important; } .pl95-xs { padding-left: 95px !important; } .pl100-xs { padding-left: 100px !important; } .pr0-xs { padding-right: 0 !important; } .pr5-xs { padding-right: 5px !important; } .pr10-xs { padding-right: 10px !important; } .pr15-xs { padding-right: 15px !important; } .pr20-xs { padding-right: 20px !important; } .pr25-xs { padding-right: 25px !important; } .pr30-xs { padding-right: 30px !important; } .pr35-xs { padding-right: 35px !important; } .pr40-xs { padding-right: 40px !important; } .pr45-xs { padding-right: 45px !important; } .pr50-xs { padding-right: 50px !important; } .pr55-xs { padding-right: 55px !important; } .pr60-xs { padding-right: 60px !important; } .pr65-xs { padding-right: 65px !important; } .pr70-xs { padding-right: 70px !important; } .pr75-xs { padding-right: 75px !important; } .pr80-xs { padding-right: 80px !important; } .pr85-xs { padding-right: 85px !important; } .pr90-xs { padding-right: 90px !important; } .pr95-xs { padding-right: 95px !important; } .pr100-xs { padding-right: 100px !important; } .ml-auto-xs { margin-left: auto !important; } .mr-auto-xs { margin-right: auto !important; } .mb-auto-xs { margin-bottom: auto !important; } .mt-auto-xs { margin-top: auto !important; } } @media (max-width: 991px) and (min-width: 768px) { /* ------------------------------------------- common ---------------------------------------------*/ .cover .cover--adjust-1800 .cover-container { height: 1500px !important; } .cover .cover--adjust-1800 .cover-image > img { height: 1500px; } .cover .cover--adjust-1200 .cover-container { height: 1000px !important; } .cover .cover--adjust-1200 .cover-image > img { height: 1000px; } .cover .cover--adjust-900 .cover-container { height: 750px !important; } .cover .cover--adjust-900 .cover-image > img { height: 750px; } .cover .cover--adjust-750 .cover-container { height: 625px !important; } .cover .cover--adjust-750 .cover-image > img { height: 625px; } .cover .cover--adjust-600 .cover-container { height: 500px !important; } .cover .cover--adjust-600 .cover-image > img { height: 500px; } .cover .cover--adjust-450 .cover-container { height: 375px !important; } .cover .cover--adjust-450 .cover-image > img { height: 375px; } /* ------------------------------------------- FOOTER ---------------------------------------------*/ .footer-nav-col { flex-basis: 50%; } } @media (max-width: 991px) { /* ------------------------------------------- common ---------------------------------------------*/ .link-list { display: block; padding-bottom: 12px; border-bottom: 1px solid #e2e6e8; } .link-list > li { display: block; padding-bottom: 12px; overflow: hidden; } .link-list > li > div { border-bottom: none; display: block; padding: 0; } .link-list > li > .date { width: auto; border-top: 1px solid #e2e6e8; padding-top: 12px; margin-bottom: 5px; } .link-list > li > .date:empty { display: none; } .link-list > li > .textArea { overflow: hidden; padding-left: 0; } .link-list > li > .text { padding-left: 0; overflow: hidden; } .link-list > li > .text a { margin: 0; padding: 0 30px 0 0; } .link-list > li > .text a:before { right: 5px; } /* ------------------------------------------- Top / Topics ---------------------------------------------*/ #videoArea { height: 557px; } #videoArea .video { width: auto; height: 557px; } .mainV-info { margin: 10px auto 0; } .mainV-info-anker { border-left: none; } } @media (min-width: 479px) and (max-width: 991px) { /* ------------------------------------------- common ---------------------------------------------*/ .link-list > li > .tag { float: left; padding: 0 15px 1px 0; } } @media (max-width: 1199px) { /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-sidebar { display: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; padding: 20px; background-color: #ffffff; z-index: 1000; } .works-sidebar-body { width: 640px; margin: 80px auto 0; max-width: 100%; } .works-sidebar-heading { display: none; } .works-sidebar-scroll { position: relative; overflow: hidden; padding: 0 10px; max-height: 600px; } .works-sidebar-scroll .m_checkList { display: flex; flex-wrap: wrap; } .works-sidebar-scroll .m_checkList li { padding-right: 20px; width: 25em; white-space: nowrap; } .works-sidebar-scroll .p_toggleContent { overflow: hidden; } .works-sidebar-button { margin-top: 20px; padding: 0 10px; } .works-search-open, .works-search-close { display: block; position: absolute; background-color: #356cb6; color: #ffffff; width: 80px; height: 80px; border-radius: 50px; text-align: center; cursor: pointer; } .works-search-open:before, .works-search-close:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; font-size: 2rem; margin-top: 20px; margin-bottom: 10px; } .works-search-open { position: fixed; z-index: 3; } .works-search-open:before { content: "\f005"; } .works-search-close { position: absolute; } .works-search-close:before { content: "×"; margin-top: 15px; font-size: 2.4rem; } } @media (min-width: 768px) and (max-width: 1199px) { /* ------------------------------------------- Project / Solution ---------------------------------------------*/ .works-search-open { top: 134px; right: 26px; } .works-search-close { top: 20px; right: 20px; } } @media (max-width: 768px) { /* ------------------------------------------- common ---------------------------------------------*/ #videoArea { height: 300px; overflow: visible; } #videoArea .video { width: auto; height: 432px; } br.br-sp { display: none; } } @media (max-width: 1920px) { /* ------------------------------------------- common ---------------------------------------------*/ #videoArea .video { width: auto; } } @media (max-width: 468px) { /* ------------------------------------------- common ---------------------------------------------*/ #videoArea .video { width: auto; height: 300px; } .br-sp1 { display: block; } } @media (min-width: 0) and (max-width: 468px) { .mainV-cap { bottom: 10px; } } @media screen and (min-width: 0) and (max-width: 321px) { .mainV-cap { width: 180px; right: 10px; } } @media screen and (min-width: 322px) and (max-width: 768px) { .mainV-cap { width: 300px; right: 30px; } } @media screen and (min-width: 1921px) { .mainV-cap { right: 30px; } } @media (min-width: 768px) and (max-width: 1000px) { /* ------------------------------------------- 旧トップ ---------------------------------------------*/ .jigyouImg { left: 120px; right: auto; } .topGrid-textRight .jigyouImg { left: auto; right: 120px; } } @media screen and (max-width: 375px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .presidentImg { left: 0; } } @media screen and (min-width: 321px) and (max-width: 768px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .presidentName2 { top: 200px; right: 100px; } } @media screen and (max-width: 320px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .presidentName2 { top: 200px; left: 20px; } } @media (max-width: 1100px) and (min-width: 861px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .category-intro.keieiBox .category-intro-thumb .category-intro-thumb-inner > img { left: -85%; } } @media (max-width: 860px) and (min-width: 768px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .category-intro.keieiBox .category-intro-thumb .category-intro-thumb-inner > img { width: 200px; min-width: 200px; right: -50%; left: -25%; } } @media (max-width: 1123px) and (min-width: 768px) { /* ------------------------------------------- About / Company ---------------------------------------------*/ .category-intro.picttune .category-intro-thumb .category-intro-thumb-inner > img { left: -130%; } } @media screen and (max-width: 1280px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .printHeaderfix { padding: 40px 40px !important; } } @media (max-width: 375px) { /* ------------------------------------------- HEADER ---------------------------------------------*/ .videoHeader { padding-top: 50px; } /* ------------------------------------------- FOOTER ---------------------------------------------*/ .videoFooterflex { display: block; margin: 0; padding: 0; } .videocopy { text-align: center; margin: 0 auto; width: 100%; } .videocc { text-align: center; width: 100%; margin: 20px auto; padding-right: 0; } } @media screen and (min-width: 992px) { /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro .category-intro-body .link > a.maxanchor { min-width: 330px; } } @media screen and (max-width: 991px) { /* ------------------------------------------- About / CSR /Company ---------------------------------------------*/ .category-intro .category-intro-body .link > a.maxanchor { min-width: initial; } } @media (min-width: 480px) and (max-width: 767px) { /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .grid-wrap .constlink-list { width: 33.33%; } } @media (max-width: 1123px) { /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .constlink-txt { text-align: left; } } @media screen and (max-width: 767px) { /* ------------------------------------------- Solution / Topics ---------------------------------------------*/ .construction-link { margin: 0; } .construction-linkbox .container { padding: 0; } } i.h-log-01:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_04.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-02:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_05.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-03:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_06.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-04:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_07.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-05:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_08.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-06:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_09.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } i.h-log-07:before { content: ""; display: inline-block; width: 2.6em; height: 2.6em; background: url(company/csr/materiality/images/img_index_10.png) no-repeat; background-size: contain; margin-right: 0.2em; vertical-align: -1em; } /* ------------- IR株価表示 -------------- */ span.kabukaInfo { font-style: normal; font-size: 12px; padding-bottom: 5px; } .card .card-body > .hd > a:after, .card .card-body > .hd > span.kabukaInfo:before { display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f006"; font-size: 1rem; vertical-align: baseline; margin-left: 4px; margin-right: 4px; } .card .card-body > .hd > a:after, .card .card-body > .hd > span.kabukaInfo:after { content: none; } /* フローティングバナー */ .float_bnr { position: fixed; margin: 15px 20px; z-index: 99998; bottom: 50px; right: 0px; } .float_bnr_close { font-weight: bold; position: absolute; top: -15px; right: -15px; z-index: 99999; padding: 4px 8px; border: none; background-color: #f8f8f8; border-radius: 25px; cursor: pointer; box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); } .hide { display: none; opacity: 0; animation: fadeOut 0.3s ease-out 0s forwards; } @keyframes fadeOut { 0% { display: block; opacity: 0; } 1% { display: none; opacity: 0; } 100% { display: none; opacity: 1; } } @media (max-width: 767px) { .float_bnr { text-align: center; bottom: 0px; width: 60%; } .float_bnr_close { top: -16px; right: -18px; padding: 6px 12px; font-size: 21px; } }/*# sourceMappingURL=common.css.map */