/* @import url('http://example.com/example_style.css'); */ /* ========================================================================== 共通 ========================================================================== */ html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%;/*Chrome,Safari*/ -ms-text-size-adjust: 100%;/*EgdeMobile*/ -moz-text-size-adjust: 100%;/*firefox*/ scroll-behavior: smooth; } /**/ body.menu_open { overflow: hidden; position: fixed; width: 100%; } body.top_body { position: relative; z-index: 0; } body.top_body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/top_main_visual.png); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; } @media screen and (max-width: 999px) { body.top_body::before { background-position-y: top; /* background-color: #f2f2f2; */ /* background-size: contain; */ background-size: cover; background-image: url(https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/top_main_visual_tab.png); } } @media screen and (max-width: 767px) { body.top_body::before { background-position-y: bottom; background-size: cover; background-image: url(https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/top_main_visual_sp.png); } } /* top　service section */ body.top_servise_locked { overflow: hidden; } /*製品紹介一覧　スクロール調整*/ body.lock_scroll { overflow: hidden; } .side_menu { max-height: 80vh; overflow: hidden; } .side_menu.scrollable { overflow: auto; } @media screen and (max-width: 999px) { body.lock_scroll { overflow: auto; } } /* コンテンツ幅 */ .mx1392 { max-width: 1392px; margin-right: auto; margin-left: auto; } .mx1312 { max-width: 1312px; margin-right: auto; margin-left: auto; } .mx1100 { max-width: 1100px; margin-right: auto; margin-left: auto; } .mx1280 { max-width: 1280px; margin-right: auto; margin-left: auto; } .mx1180 { max-width: 1180px; margin-right: auto; margin-left: auto; } .mx800 { max-width: 800px; margin-right: auto; margin-left: auto; } .mx880 { max-width: 880px; margin-right: auto; margin-left: auto; } /* 下層テンプレート　DNDエリア */ .template_dnd_wrapper { padding-bottom: 80px; } /* 余白 */ .pt-0 { padding-top: 0!important; } .pb-0 { padding-bottom: 0!important; } .pl-0 { padding-left: 0!important; } .pb-5 { padding-bottom: 5px!important; } .pt-20 { padding-top: 20px!important; } .pb-20 { padding-bottom: 20px!important; } .m-0 { margin: 0!important; } .mt-0 { margin-top: 0!important } .mt-65 { margin-top: -65px!important; } .mt-40 { margin-top: 40px!important; } .mt-32 { margin-top: 32px!important; } .mt-24 { margin-top: 24px!important; } .mt-60 { margin-top: 60px!important; } .mb-0 { margin-bottom: 0px!important; } .mb-10 { margin-bottom: 10px!important; } .mb-16 { margin-bottom: 16px!important; } .mb-20 { margin-bottom: 20px!important; } .mb-32 { margin-bottom: 32px!important; } .mb--60 { margin-bottom: -60px!important; } .mr-32 { margin-right: 32px!important; } .ml-32 { margin-left: 32px!important; } .ml-16 { margin-left: 16px!important; } .overflow-hidden { overflow: hidden!important; } .w-100 { width: 100%!important } .block { display: block!important; } .j-center { justify-content: center!important; } .a-center { align-items: center!important; } .margin0auto { margin: 0 auto; } .content-wrapper { margin: 0 auto; padding: 0 40px; } .pc.tb { display: block!important; } .tb, .tb_flex { display: none!important; } .sp { display: none!important; } @media screen and (max-width: 999px) { .content-wrapper { padding: 0 40px; } .pc { display: none!important; } .tb { display: block!important; } .tb_flex { display: flex!important; } .container { padding: 0 40px; } } @media screen and (max-width: 767px) { .content-wrapper { padding: 0 20px; } .pc.tb { display: none!important; } .sp { display: block!important; } .container { padding: 0 16px; } .sp-p-0 { padding: 0!important; } } /* ========================================================================== 下層テンプレート ========================================================================== */ .column2 { display: flex; flex-direction: row; } .column1 { max-width: 736px; margin: 0 auto; } .dnd_area { width: 100%; } .column1.dynamic_page_hubdb_row { padding: 60px 0 80px 0; } @media screen and (max-width: 999px) { } @media screen and (max-width: 767px) { } /* ========================================================================== hover ========================================================================== */ /*.trans { transition: all 0.3s ease-in-out; } .hov_zoom { overflow: hidden; position: relative; transition: all 0.3s ease-in-out; } .hov_zoom:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } .hov_zoom:hover .menu_title { color: #0F3C72; } .hov_zoom img { transition: transform 0.5s ease-in-out; transform-origin: bottom; } .hov_zoom:hover img { transform: scale(1.1); } */ /* ========================================================================== テキスト ========================================================================== */ .hs_cos_wrapper_type_rich_text h1, .hs_cos_wrapper_type_module h1, .blog-post h1 { margin-bottom: 24px; line-height: 150%; } @media screen and (max-width: 999px) { .hs_cos_wrapper_type_rich_text h1, .hs_cos_wrapper_type_module h1, .blog-post h1 { font-size: 32px; } } .hs_cos_wrapper_type_rich_text h2, .hs_cos_wrapper_type_module h2, .index_main h2, .blog_index h2, .cad_list h2 { margin: 80px 0 40px 0; padding: 0 0 0 20px; line-height: 150%; font-size: 32px; font-weight: 700; border-left: solid 4px #45AEBF; } @media screen and (max-width: 999px) { .hs_cos_wrapper_type_rich_text h2, .hs_cos_wrapper_type_module h2, .index_main h2, .blog_index h2, .cad_list h2 { font-size: 26px; margin: 40px 0 20px 0; padding: 0 0 0 10px; } } .hs_cos_wrapper_type_rich_text h3, .hs_cos_wrapper_type_module h3, .about_wrapper h3, .column1 h3, .dynamic_page_hubdb_row h3 { font-weight: 700; border-bottom: solid 3px #45AEBF; margin: 80px 0 32px 0; padding: 0px 0 8px 20px; line-height: 180%; } @media screen and (max-width: 999px) { .hs_cos_wrapper_type_rich_text h3, .hs_cos_wrapper_type_module h3, .about_wrapper h3, .column1 h3, .dynamic_page_hubdb_row h3 { margin: 40px 0 20px 0; padding: 0px 0 8px 10px; font-size: 24px; } } @media screen and (max-width: 767px) { .hs_cos_wrapper_type_rich_text h3, .hs_cos_wrapper_type_module h3, .about_wrapper h3, .column1 h3 { } } .hs_cos_wrapper_type_rich_text h4, .hs_cos_wrapper_type_module h4{ font-weight: 700; padding: 10px 0 10px 20px; margin: 40px 0 24px 0; line-height: 120%; background-color: #F0F8FA; } @media screen and (max-width: 767px) { .hs_cos_wrapper_type_rich_text h4, .hs_cos_wrapper_type_module h4 { font-size: 20px; margin: 40px 0 16px 0; padding: 10px 0 10px 10px; } } .hs_cos_wrapper_type_rich_text h5, .hs_cos_wrapper_type_module h5{ margin: 32px 0 16px 0; line-height: 150%; padding: 0 0 0 20px; } @media screen and (max-width: 767px) { .hs_cos_wrapper_type_rich_text h5, .hs_cos_wrapper_type_module h5 { font-size: 18px; padding: 0 0 0 10px; } } .hs_cos_wrapper_type_rich_text p, .hs_cos_wrapper_type_module p, .blog-post p { line-height: 200%; margin: 0; font-size: 16px; text-align: left; } .hs_cos_wrapper_type_rich_text p { padding: 0 20px; } .hs_cos_wrapper_type_module p { padding: 0; } .hs_cos_wrapper_type_rich_text p img { margin: 20px 0; } @media screen and (max-width: 999px) { .hs_cos_wrapper_type_rich_text p { padding: 0 10px; } } /* scroll-margin-top */ h1, h2, h3, h4, h5, a[data-hs-anchor] { scroll-margin-top: 180px; } @media screen and (max-width: 999px) { h1, h2, h3, h4, h5,a[data-hs-anchor] { scroll-margin-top: 100px; } } /* ========================================================================== 箇条書き・番号付きリスト ========================================================================== */ /* ul */ .hs_cos_wrapper_type_rich_text ul{ line-height: 180%; padding: 0 20px; margin: 24px 0 0 0; } #hs_cos_wrapper_widget_1758516036212_ ul/*table module*/ { padding: 0; margin: 0; } .hs_cos_wrapper_type_rich_text li { list-style: none; position: relative; padding-left: 20px; line-height: 2; margin-top: 10px; } #hs_cos_wrapper_widget_1758516036212_ li/*table module*/ { list-style: none; position: relative; padding-left: 20px; margin-top: 10px; } .hs_cos_wrapper_type_rich_text li:first-child, #hs_cos_wrapper_widget_1758516036212_ li:first-child/*table module*/{ margin-top: 0; } .hs_cos_wrapper_type_rich_text li:before, #hs_cos_wrapper_widget_1758516036212_ li:before { border-radius: 50%; width: 6px; height: 6px; display: block; position: absolute; left: 0; top: 0.9em; content: ""; background: #45AEBF; } ul[style*="list-style-type: circle;"] li:before { position: absolute; background: none; left: 0; top: 0; content: url(https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/icon/icon_list02.svg); } ul[style*="list-style-type: square;"] li:before { position: absolute; background: none; left: 0; top: -2px; content: url(https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/icon/icon_list03.svg); } /* ol */ .hs_cos_wrapper_type_rich_text ol { counter-reset: ol_number; line-height: 180%; padding: 0 20px; margin: 24px 0 0 0; } .hs_cos_wrapper_type_rich_text ol li:nth-child(n+10) { padding-left: 35px; } .hs_cos_wrapper_type_rich_text ol li:before { position: absolute; background: none; left: 0; top: 0; width: 100%; counter-increment: ol_number; content: counter(ol_number)'.'; color: #45AEBF; font-weight: 700; } /* ol ローマ数字 */ .hs_cos_wrapper_type_rich_text ol[style*="list-style-type: upper-roman;"] { counter-reset: roman; /* 独自のカウンタ名を定義 */ line-height: 180%; padding: 0 20px; margin: 24px 0 0 0; list-style: none; /* 通常の番号は非表示 */ position: relative; } .hs_cos_wrapper_type_rich_text ol[style*="list-style-type: upper-roman;"] li { position: relative; padding-left: 2em; } .hs_cos_wrapper_type_rich_text ol[style*="list-style-type: upper-roman;"] li:nth-child(n+10) { padding-left: 2.5em; } .hs_cos_wrapper_type_rich_text ol[style*="list-style-type: upper-roman;"] li::before { counter-increment: roman; content: counter(roman, upper-roman) "."; position: absolute; left: 0; top: 0; color: #45AEBF; font-weight: 700; } @media screen and (max-width: 999px) { .hs_cos_wrapper_type_rich_text li{ padding-left: 20px; } .hs_cos_wrapper_type_rich_text li:before { left: 0; } } /* ========================================================================== リンクテキスト ========================================================================== */ .hs_cos_wrapper_type_rich_text a { color: #45AEBF; } .hs_cos_wrapper_type_rich_text a, .hs_cos_wrapper_type_module a { transition: all .15s; } .hs_cos_wrapper_type_rich_text a:hover { text-decoration: none; color: #112A75; } /* blank */ .hs_cos_wrapper_type_rich_text a[target="_blank"]{ display: inline-block; padding: 0 0 0 28px; position: relative; } .hs_cos_wrapper_type_rich_text a[target="_blank"]:before { content: url('https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/icon/icon_blank.svg'); left: 0px; position: absolute; top: 2px; } /* a.pdf icon */ .hs_cos_wrapper_type_rich_text a.pdf:before {/*.hs_cos_wrapper_type_module a.pdf:before*/ content: url('https://146185278.fs1.hubspotusercontent-eu1.net/hubfs/146185278/Infrastructure%20Segment/common/icon/icon_pdf.svg'); left: 0px; top: 2px; position: absolute; } /* .hs_cos_wrapper_type_rich_text a[target="_blank"]:has(> img), .hs_cos_wrapper_type_module a[target="_blank"]:has(> img){ padding: 0; position: unset; } */ /* ========================================================================== トップに戻るボタン ========================================================================== */ a.pageTop-btn { transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; position: fixed; right: 50px; bottom: 50px; z-index: -1; opacity: 0; height: 53px; width: 53px; padding: 10px; background-image: url(https://41801273.fs1.hubspotusercontent-na1.net/hubfs/41801273/icon/TOP-button.svg); background-repeat: no-repeat; } a.pageTop-btn.show { z-index: 1; opacity: 1; } @media screen and (max-width: 767px) { a.pageTop-btn { right: 20px; bottom: 20px; padding: 10px; } } /* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* CSS variables */ :root { --column-gap: 2.13%; --column-width-multiplier: 8.333; } /* Mobile layout */ .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12{ min-height: 1px; width: 100%; } /* Desktop layout */ @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100)); } .row-fluid .span2 { width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100)); } .row-fluid .span3 { width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100)); } .row-fluid .span4 { width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100)); } .row-fluid .span5 { width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100)); } .row-fluid .span6 { width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100)); } .row-fluid .span7 { width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100)); } .row-fluid .span8 { width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100)); } .row-fluid .span9 { width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100)); } .row-fluid .span10 { width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100)); } .row-fluid .span11 { width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100)); } } .content-wrapper { margin: 0 auto; padding: 0 1rem; } @media screen and (min-width: 1380px) { .content-wrapper { padding: 0; } } .dnd-section > .row-fluid { margin: 0 auto; } .dnd-section .dnd-column { padding: 0 1rem; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Elements Base HMTL elements are styled in this section (,

, ,

,