/* Generic */ /* ------------------------------------------------------------------------------------ web fonts ------------------------------------------------------------------------------------ */ /* Shopify Sans */ @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 300; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--light.woff2) format("woff2"); } @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 400; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--regular.woff2) format("woff2"); } @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 500; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--medium.woff2) format("woff2"); } @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 700; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--bold.woff2) format("woff2"); } @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 800; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--extrabold.woff2) format("woff2"); } @font-face { font-display: swap; font-family: ShopifySans; font-style: normal; font-weight: 900; src: url(https://cdn.shopify.com/static/fonts/ShopifySans--black.woff2) format("woff2"); } /* icon */ @font-face { font-family: "sym_icon"; src: url("//48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/sym_icon.ttf") format("truetype"); font-weight: normal; font-style: normal; } /* Noto */ @font-face { font-family: "Noto Sans JP"; src: url("//48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/NotoSansJP-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; } @font-face { font-family: "Noto Serif JP"; src: url("//48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/NotoSerifJP-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; } /* InterTight */ @font-face { font-family: "Inter Tight"; src: url("//48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/InterTight-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; } /* Poppins */ @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-ThinItalic.ttf") format("truetype"); font-weight: 100; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "Poppins"; src: url("//48962580.fs1.hubspotusercontent-na2.net/hubfs/48962580/raw_assets/public/themes/shopify/fonts/Poppins-BlackItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; } /* ------------------------------------------------------------------------------------ local fonts ------------------------------------------------------------------------------------ */ @font-face { font-family: monospace; font-style: italic; font-weight: 400; src: local("Menlo Italic"), local(Menlo-Italic), local("Consolas Italic"), local(Consolas-Italic), local("Courier New Italic"); } @font-face { font-family: monospace; font-style: italic; font-weight: 700; src: local("Menlo Bold Italic"), local(Menlo-BoldItalic), local(Monaco), local("Consolas Bold Italic"), local(Consolas-BoldItalic), local("Courier New Bold Italic"); } @font-face { font-family: monospace; font-style: normal; font-weight: 400; src: local("Menlo Regular"), local(Menlo-Regular), local(Monaco), local(Consolas), local("Courier New"); } @font-face { font-family: monospace; font-style: normal; font-weight: 700; src: local("Menlo Bold"), local(Menlo-Bold), local(Monaco), local("Consolas Bold"), local(Consolas-Bold), local("Courier New Bold"); } /* ------------------------------------------------------------------------------------ icon fonts ------------------------------------------------------------------------------------ */ [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "sym_icon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* font-size setting */ [class^="icon-"][class*="_16_"], [class*=" icon-"][class*="_16_"] { font-size: 16px !important; font-size: 1.6rem !important; } [class^="icon-"][class*="_24_"], [class*=" icon-"][class*="_24_"] { font-size: 24px !important; font-size: 2.4rem !important; } .icon-new_16_s .path1:before { content: "\e900"; color: rgb(226, 0, 0); } .icon-new_16_s .path2:before { content: "\e901"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-arrow_16_up_m:before { content: "\e902"; } .icon-arrow_16_up_s:before { content: "\e903"; } .icon-arrow_24_up_l:before { content: "\e904"; } .icon-plus_16_m:before { content: "\e905"; } .icon-plus_16_s:before { content: "\e906"; } .icon-new_24 .path1:before { content: "\e907"; color: rgb(226, 0, 0); } .icon-new_24 .path2:before { content: "\e908"; margin-left: -0.9169921875em; color: rgb(255, 255, 255); } .icon-new_24 .path3:before { content: "\e909"; margin-left: -0.9169921875em; color: rgb(255, 255, 255); } .icon-new_24 .path4:before { content: "\e90a"; margin-left: -0.9169921875em; color: rgb(255, 255, 255); } .icon-new_24 .path5:before { content: "\e90b"; margin-left: -0.9169921875em; color: rgb(255, 255, 255); } .icon-arrow_16_left_m:before { content: "\e90c"; } .icon-arrow_16_left_s:before { content: "\e90d"; } .icon-arrow_24_left_l:before { content: "\e90e"; } .icon-pdf_24_white_l .path1:before { content: "\e90f"; color: rgb(255, 255, 255); } .icon-pdf_24_white_l .path2:before { content: "\e910"; margin-left: -0.75em; color: rgb(226, 0, 0); } .icon-pdf_24_white_l .path3:before { content: "\e911"; margin-left: -0.75em; color: rgb(221, 221, 221); } .icon-arrow_16_down_m:before { content: "\e912"; } .icon-arrow_16_down_s:before { content: "\e913"; } .icon-arrow_24_down_l:before { content: "\e914"; } .icon-arrow_24_pagetop:before { content: "\e915"; } .icon-movie_16_s .path1:before { content: "\e916"; color: rgb(226, 0, 0); } .icon-movie_16_s .path2:before { content: "\e917"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-movie_24_l .path1:before { content: "\e918"; color: rgb(226, 0, 0); } .icon-movie_24_l .path2:before { content: "\e919"; margin-left: -1em; color: rgb(255, 255, 255); } .icon-pdf_16_white_m .path1:before { content: "\e91a"; color: rgb(255, 255, 255); } .icon-pdf_16_white_m .path2:before { content: "\e91b"; margin-left: -0.875em; color: rgb(226, 0, 0); } .icon-pdf_16_white_m .path3:before { content: "\e91c"; margin-left: -0.875em; color: rgb(221, 221, 221); } .icon-pdf_24_red_l .path1:before { content: "\e91d"; color: rgb(226, 0, 0); } .icon-pdf_24_red_l .path2:before { content: "\e91e"; margin-left: -0.75em; color: rgb(255, 255, 255); } .icon-pdf_24_red_l .path3:before { content: "\e91f"; margin-left: -0.75em; color: rgb(165, 0, 0); } .icon-anchor_16_m:before { content: "\e920"; } .icon-anchor_16_s:before { content: "\e921"; } .icon-anchor_24_l:before { content: "\e922"; } .icon-pdf_16_red_m .path1:before { content: "\e923"; color: rgb(226, 0, 0); } .icon-pdf_16_red_m .path2:before { content: "\e924"; margin-left: -0.875em; color: rgb(255, 255, 255); } .icon-pdf_16_red_m .path3:before { content: "\e925"; margin-left: -0.875em; color: rgb(165, 0, 0); } .icon-pdf_16_red_s .path1:before { content: "\e926"; color: rgb(226, 0, 0); } .icon-pdf_16_red_s .path2:before { content: "\e927"; margin-left: -0.75em; color: rgb(165, 0, 0); } .icon-pdf_16_red_s .path3:before { content: "\e928"; margin-left: -0.75em; color: rgb(255, 255, 255); } .icon-pdf_16_white_s .path1:before { content: "\e929"; color: rgb(255, 255, 255); } .icon-pdf_16_white_s .path2:before { content: "\e92a"; margin-left: -0.75em; color: rgb(221, 221, 221); } .icon-pdf_16_white_s .path3:before { content: "\e92b"; margin-left: -0.75em; color: rgb(226, 0, 0); } .icon-win_16_m:before { content: "\e92c"; } .icon-win_24_l:before { content: "\e92d"; } .icon-arrow_16_right_m:before { content: "\e92e"; } .icon-arrow_16_right_s:before { content: "\e92f"; } .icon-arrow_24_right_l:before { content: "\e930"; } .icon-win_16_s:before { content: "\e931"; } /* stylelint-disable */ /*! normalize.css v6.0.0 | 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 * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* stylelint-enable */ /* ============================================== RESET ============================================== */ /* ------ link ------ */ a { color: inherit; text-decoration: none; } a:hover { color: inherit; } /* ------ base ------ */ address, body, dd, div, dl, dt, figure, form, h1, h2, h3, h4, h5, input, li, ol, p, select, table, td, th, ul { margin: 0; padding: 0; } html { font-size: 62.5%; /*10px*/ background-color: #000; } @media screen and (max-width: 639px) { html { /*font-size: 59.375%;*/ /*9.5px*/ } } body { color: var(--default); background-color: var(--white); margin: 0; font-family: "Noto Sans JP", Helvetica, Arial, sans-serif; font-size: 15px; font-size: 1.5rem; line-height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a img, img { border: 0; vertical-align: bottom; } li, ul { list-style: none; } /*.ipad body, .iphone body, .ipod body, .mac body { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Hiragino Kaku Gothic ProN', '繝偵Λ繧ｮ繝手ｧ偵ざ ProN W3', sans-serif; }*/ * { box-sizing: border-box; } table { width: 100%; } input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; font-size: 16px; font-size: 1.6rem; } input[type="submit"], input[type="button"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 1; font-size: 16px; font-size: 1.6rem; } small, .small { font-size: 10px !important; font-size: 1rem !important; } img { width: 100%; /*max-width: 100%;*/ height: auto; } /* ------ clearfix ------ */ .clearfix:after { content: ""; display: block; clear: both; } /* Objects */ /* ============================================== CONTAINER ============================================== */ .container { max-width: 1120px; width: calc(100% - (20px * 2)); margin: 0 auto; } /* ============================================== CONTENTS ============================================== */ .contents { padding-top: 100px; background-color: #fff; } @media screen and (max-width: 1048px) { .contents { padding-top: 70px; } } /* ============================================== SECTION ============================================== */ .mod_section1 { padding: 100px 0; } @media screen and (max-width: 899px) { .mod_section1 { padding: 80px 0; } } /* ============================================== MAINAREA ============================================== */ * + .mod_mainarea { padding-top: 50px; padding-bottom: 100px; } @media screen and (max-width: 899px) { * + .mod_mainarea { padding-top: 40px; padding-bottom: 80px; } } /* ============================================== COLUMN ============================================== */ .mod_maincolumn { width: calc(100% - 321px); } @media screen and (max-width: 1119px) { .mod_maincolumn { width: 100% !important; } } .mod_subcolumn { width: 271px; } @media screen and (max-width: 1119px) { .mod_subcolumn { width: 100% !important; margin-top: 60px; } } /* ============================================== BOX ============================================== */ * + .mod_btnbox1 { margin-top: 60px; } .mod_btnbox1 > * + * { margin-top: 40px; } @media screen and (min-width: 900px) { .conbox:nth-of-type(n+3) { margin-top: 100px; } } .mod_set5 { border-top: #CBCBCB 1px solid; padding-top: 30px; } .mod_set5:first-of-type { margin-top: 50px; } .mod_set5 + .mod_set5 { margin-top: 30px; } .mod_set5 .icon > img { width: auto; height: 39px; } .mod_set5 .icon + * { margin-top: 25px; } .mod_set5 p { margin-top: 10px; font-size: 16px; font-size: 1.6rem; line-height: 1.6; } .mod_set5.style2 { border-top: none; padding-top: 0; } .mod_set5:first-of-type, .mod_set5 + .mod_set5 { margin-top: 50px; } .mod_set5.style2 .icon { margin: auto; width: 64px; height: 64px; background-color: #ADEB48; border-radius: 35px; position: relative; } .mod_set5.style2 .icon > img { width: auto; height: 26px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mod_set5.style2 .icon + * { margin-top: 40px; } .mod_productlinkbox { margin-top: 50px; border-radius: 16px; background-color: var(--primary); } .mod_productlinkbox > a { display: flex; justify-content: space-between; position: relative; width: 100%; min-height: 340px; } .mod_productlinkbox .textbox { padding: 57px 0 110px 57px; font-weight: bold; width: calc(100% - 270px); } .mod_productlinkbox .textbox > .text { font-size: 20px; font-size: 2rem; line-height: 1.4; color: var(--light-green); } .mod_productlinkbox .textbox > .title { margin-top: 15px; font-size: 55px; font-size: 5.5rem; line-height: 1.2; color: var(--white); } @media screen and (min-width: 900px) { .mod_productlinkbox .textbox > .title { padding-bottom: 45px; } } .mod_productlinkbox .textbox > .title > span { display: inline-block; } .mod_productlinkbox .thu { text-align: center; width: 100%; } .mod_productlinkbox .thu > img { width: 100%; max-width: 404px; } .mod_productlinkbox .btn { position: absolute; left: 57px; bottom: 60px; } @media screen and (min-width: 900px) { .mod_productlinkbox .thu { text-align: right; width: calc(100% - 510px); min-width: 300px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } .mod_productlinkbox .thu > img { width: 100%; max-width: 404px; position: relative; /*top: 50%; transform: translateY(-50%);*/ } } @media screen and (max-width: 899px) { .mod_productlinkbox { margin-top: 40px; } .mod_productlinkbox > a { display: block; padding: 50px 30px 120px; } .mod_productlinkbox > a > * { width: 100% !important; } .mod_productlinkbox .textbox { padding: 0; width: 100%; } .mod_productlinkbox .thu { margin-top: 23px; } .mod_productlinkbox .btn { left: 30px; bottom: 50px; } } @media screen and (max-width: 639px) { .mod_productlinkbox .textbox > .title { font-size: 40px; font-size: 4rem; } } .mod_iconbox1 > span + span { margin-left: 5px; } .mod_iconbox1 > .icon_new { padding: 7px 13px 8px; background-color: var(--primary); border-radius: 4px; color: #CDF986; font-size: 16px; font-size: 1.6rem; line-height: 1; font-weight: bold; display: inline-block; } .mod_iconbox1 > .icon_cat { padding: 9px 13px; background-color: var(--white); border-radius: 4px; font-size: 13px; font-size: 1.3rem; line-height: 1; font-weight: bold; display: inline-block; } .mod_lnavi1 > .title > span, .mod_lnavi1 > .title > a { display: block; color: var(--white); font-size: 18px; font-size: 1.8rem; font-weight: bold; line-height: 1.4; text-align: center; background-color: var(--primary); border-radius: 6px 6px 0 0; padding: 25px; } .mod_lnavi1 > .title > a:hover { text-decoration: underline; } .mod_lnavi1 > ul { border: var(--primary) 1px solid; border-top: none; border-radius: 0 0 6px 6px; } .mod_lnavi1 > ul > li + li { border-top: #CCC 1px solid; } .mod_lnavi1 > ul > li a { display: block; padding: 20px 20px 20px 32px; position: relative; color: var(--default); font-size: 14px; font-size: 1.4rem; line-height: 1.4; font-weight: bold; } .mod_lnavi1 > ul > li a > .icon { position: absolute; left: 20px; top: 22px; } .mod_lnavi1 > ul > li a:hover { text-decoration: underline; } @media screen and (min-width: 1120px) { .mod_lnavi1 { position: sticky; top: 110px; } } /* Elements */ form.hs-form fieldset { margin: 20px 0; max-width: initial; } form.hs-form fieldset.hidden { margin: 0; } form.hs-form fieldset.form-columns-0 { margin-top: -15px; } form.hs-form fieldset.form-columns-1 .hs-form-field { width: 100%; } form.hs-form fieldset.form-columns-1 .hs-form-field .hs-input { width: 100%; } form.hs-form fieldset.form-columns-2 .hs-form-field:last-child { margin-left: 26px; } section.contents form.hs-form fieldset.form-columns-2 .hs-form-field:last-child { margin-left: 20px; } form.hs-form fieldset label .hs-form-required { font-size: 0; } form.hs-form fieldset .hs-fieldtype-booleancheckbox { text-align: center; } form.hs-form fieldset .hs-form-booleancheckbox label .hs-form-required { font-size: 0; } form.hs-form .hs-fieldtype-file .input { border: none !important; } form.hs-form .hs_product_image legend { margin-bottom: 10px; } form.hs-form input[type="file"] { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--dark-gray); } form.hs-form input[type="file"]:before { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: var(--dark-gray); } form.hs-form .form-columns-0 .hs-richtext { width: 100%; } form.hs-form fieldset p { font-size: 14px; } form.hs-form .privacySet { margin: 0; text-align: center; } form.hs-form .privacySet h3 { font-weight: 700; font-size: 18px; margin-top: 0.8em !important; margin-bottom: 0.8em; color: var(--black); } form.hs-form .privacySet p { margin: 0 0 1em 0; } form.hs-form .privacySet p a { text-decoration: underline; } form.hs-form .privacySet p a:hover { text-decoration: none; } form.hs-form .hs-error-msgs { margin: .5em 0 0 0; list-style: none; } form.hs-form .hs_error_rollup { text-align: center; margin: 0 0 1em 0; } form.hs-form .hs-form-field .grecaptcha-badge { text-align: center; margin: 0 auto 30px; } form.hs-form fieldset.form-columns-2 { display: grid; grid-template-columns: 48% 48%; } form.hs-form fieldset.form-columns-3 { display: grid; grid-template-columns: 31% 31% 31%; grid-column-gap: 23px; } section.contents form.hs-form fieldset.form-columns-3 { grid-column-gap: 19px; } form.hs-form fieldset.form-columns-2 .hs-form-field { width: 100%; } form.hs-form fieldset.form-columns-3 .hs-form-field { width: 100%; } form.hs-form fieldset.form-columns-2 .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio), section.contents form.hs-form fieldset.form-columns-2 .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio), section.contents form.hs-form fieldset.form-columns-3 .hs-form-field:not(.hs-fieldtype-checkbox):not(.hs-fieldtype-radio) { display: flex; flex-direction: column; justify-content: flex-start; } form.hs-form fieldset legend { font-size: 14px; line-height: 1.45; color: var(--black); margin: 0 0 8px; } form.hs-form fieldset legend a { border-bottom: 1px solid var(--light-blue); color: var(--light-blue); display: inline-block; margin-bottom: -1px; } form.hs-form fieldset legend a:hover { border: 0; } form.hs-form p.text { font-size: 16px; line-height: 2; color: var(--black); margin-bottom: 30px; } form.hs-form fieldset ul.inputs-list.multi-container { display: flex; flex-wrap: wrap; } form.hs-form fieldset ul.inputs-list li.hs-form-radio, form.hs-form fieldset ul.inputs-list li.hs-form-checkbox { width: 50%; } form.hs-form fieldset label:not(.hs-form-radio-display):not(.hs-error-msg):not(.hs-form-booleancheckbox-display):not(.hs-form-checkbox-display) { cursor: default; position: relative; color: var(--black); text-align: left; font-size: 15px; font-style: normal; font-weight: 700; line-height: 1.6; letter-spacing: 1.4px; margin-bottom: 4px; display: inline-block; } form.hs-form .hs-error-msgs label.hs-error-msg, form.hs-form .hs_error_rollup label.hs-main-font-element { font-size: 13px; font-weight: 400; line-height: 1.45; color: #ff0000; } form.hs-form fieldset .hs-form-field .input { margin: 0; } form.hs-form fieldset .hs-form-field .input textarea { width: 100%; padding: 17px 14px; margin-right: 0; border: 1px solid var(--black); border-radius: 3px; } form.hs-form fieldset .hs-form-field .input input:not([type=radio]):not([type=file]) { border: 1px solid #6C757D; border-radius: 3px; height: 48px; margin-right: 0; padding: 16px 14px; width: 100%; background-color: #fff; } form.hs-form fieldset .hs-form-field .input input:-internal-autofill-selected { background-color: var(--light-red) !important; } form.hs-form fieldset .hs-form-field .input:has(input[type=file]) { padding: 8px; } form.hs-form fieldset .hs-form-field .input input::placeholder { font-size: 16px; font-weight: 1.45; color: var(--gray); } form.hs-form fieldset .hs-form-field .input textarea::placeholder { font-size: 16px; font-weight: 1.45; color: var(--dark-gray-sub); } form.hs-form fieldset .hs-form-field:not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-checkbox) .input input:focus, form.hs-form fieldset .hs-form-field .input textarea:focus { outline: 0; } form.hs-form fieldset .hs-form-field .input input.invalid, form.hs-form fieldset .hs-fieldtype-select .input select.invalid, form.hs-form fieldset .hs-fieldtype-select .input:has(select.invalid):after, form.hs-form ul.inputs-list.invalid, form.hs-form fieldset .hs-fieldtype-file:has(.hs-error-msgs) .input:has(input[type=file]) { background: var(--light-red); } form.hs-form fieldset label .hs-form-required:after { background-color: #CE2500; border: 1px solid #CE2500; border-radius: 2px; color: #fff; content: "必須"; font-size: 10px; font-weight: 700; letter-spacing: 1px; line-height: 1.6; margin-left: 3px; padding: 1px 6px 0; white-space: nowrap; position: absolute; top: 1px; } form.hs-form .form-privacy { font-size: 14px; line-height: 1.45; color: var(--black); margin-top: 10px; margin-bottom: 35px; } form.hs-form .form-privacy a{ display: inline-block; color: var(--light-blue); border-bottom: 1px solid var(--light-blue); margin-bottom: -1px; } form.hs-form .form-privacy a:hover { border-bottom: none; } form.hs-form .hs-form fieldset .hs-fieldtype-booleancheckbox span { font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--black); } form.hs-form .actions:has(.hs-button.primary) { margin-top: 40px; text-align: center; } form.hs-form .hs-button.primary { background: var(--white); border: 1px solid var(--primary); border-radius: 60px; color: var(--primary); cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: 1.6px; width: 380px; padding: 24px; text-align: center; transition: .3s; } form.hs-form .hs-button.primary:hover { opacity: .8; } form.hs-form [type=checkbox]:checked { background-image: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e); } form.hs-form [type=checkbox]:checked, form.hs-form [type=checkbox]:checked:focus { border-color: transparent; background-color: var(--light-blue) !important; background-size: 22px 22px; background-position: center; background-repeat: no-repeat; border: none !important; } form.hs-form fieldset .hs-fieldtype-radio label:has(input)::before { content: ""; background: #F5F5F5; border-radius: 100%; border: 1px solid var(--light-gray); display: inline-block; min-width: 20px; height: 20px; position: relative; text-align: center; transition: all 250ms ease; } form.hs-form fieldset .hs-fieldtype-radio label:has([type=radio]:checked)::before { background-color: var(--light-blue); box-shadow: inset 0 0 0 4px var(--white); } form.hs-form fieldset .hs-fieldtype-radio label:has(input) { display: flex; grid-column-gap: 15px; align-items: center; width: fit-content; padding: 8px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--black); } form.hs-form fieldset .hs-fieldtype-radio label>input { display: none; } form.hs-form fieldset .hs-form-booleancheckbox label { display: flex; grid-column-gap: 15px; align-items: center; justify-content: start; margin: 0 auto; padding: 8px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--primary); } form.hs-form fieldset .hs-fieldtype-checkbox .input label { display: flex; grid-column-gap: 15px; align-items: center; margin: 0 auto; padding: 8px; font-size: 15px; font-weight: 400; line-height: 1.45; cursor: default; color: var(--black); } form.hs-form fieldset .hs_privacy_policy_check:has(ul.hs-error-msgs) .hs-form-booleancheckbox label { background: #FBEFEE; } form.hs-form fieldset .hs-form-booleancheckbox label input, form.hs-form fieldset .hs-fieldtype-checkbox label input { width: 20px !important; height: 20px !important; max-width: 20px; min-width: 20px; padding: 0 !important; background: var(--white); } form.hs-form fieldset .hs-form-booleancheckbox label input:focus { outline: 0; } form.hs-form fieldset .hs-fieldtype-checkbox label input:focus { outline: 0; } form.hs-form fieldset .hs-fieldtype-select .input select { border: 1px solid #6C757D; border-radius: 3px; color: var(--black); font-size: 1rem; height: 48px; line-height: 1.45; margin-right: 0; padding: 10px 14px; width: 100% !important; background: #fff; } form.hs-form fieldset .hs-fieldtype-select .input select option { color: var(--black); } form.hs-form fieldset .hs-fieldtype-select .hs-input.is-placeholder, form.hs-form fieldset .hs-fieldtype-select .input select option:first-child { color: #6C757D; } form.hs-form fieldset .hs-fieldtype-date .input>.hs-dateinput input { font-size: 16px; line-height: 1.45; color: var(--black); } form.hs-form fieldset .hs-fieldtype-select .input { position: relative; width: 100%; } form.hs-form fieldset .hs-fieldtype-select .input:after { align-items: center; background: #fff; content: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2036%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1818_4177)%22%3E%3Cpath%20d%3D%22M0.857422%200.999023L0.999268%2034.999%22%20stroke%3D%22%236C757D%22%2F%3E%3Cpath%20d%3D%22M13%2012.999L18%207.99902L23%2012.999%22%20stroke%3D%22%236C757D%22%2F%3E%3Cpath%20d%3D%22M23%2023.999L18%2028.999L13%2023.999%22%20stroke%3D%22%236C757D%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1818_4177%22%3E%3Crect%20width%3D%2224%22%20height%3D%2236%22%20fill%3D%22white%22%20transform%3D%22translate(0%20-0.000976562)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E'); display: flex; font-size: 10px; height: 25px; padding-left: 15px; padding-top: 3px; pointer-events: none; position: absolute; right: 22px; top: 12px; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); width: 30px; } form.hs-form fieldset .hs-fieldtype-select .input select:focus { outline: 0; } form.hs-form fieldset .hs-form-booleancheckbox label span { position: relative; display: flex; } form.hs-form fieldset .hs-form-booleancheckbox label:has(.hs-form-required) { padding-right: 40px; } @media screen and (max-width: 1024px) { h3.form-title { font-size: 18px; margin-bottom: 20px; } form.hs-form fieldset { display: flex; flex-direction: column; justify-content: space-between; margin: 0; } form.hs-form fieldset.form-columns-0, form.hs-form fieldset.form-columns-1 .hs-form-field, form.hs-form fieldset.form-columns-2 .hs-form-field, form.hs-form fieldset.form-columns-3 .hs-form-field { width: 100% !important; margin: 0 0 30px; } form.hs-form fieldset.form-columns-2 .hs-form-field .hs-input { width: 100% !important; } form.hs-form fieldset .input:last-child { margin: 0 0 0 0; } form.hs-form .privacySet { margin: 0 0 30px 0; text-align: center; } form.hs-form #agreeWrap { display: flex !important; align-items: flex-start; text-align: left; } form.hs-form fieldset.form-columns-2 .hs-form-field:last-child { margin-left: 0; } section.contents form.hs-form fieldset.form-columns-2 .hs-form-field:last-child { margin-left: 0; } form.hs-form p.text { font-size: 15px; } form.hs-form .form-privacy { font-size: 15px; margin: 0 0 30px; } form.hs-form .form-privacy a.tac { width: 100%; margin-top: 0; margin-right: 0; margin-bottom: 20px; } form.hs-form fieldset label { font-size: 12px; } form.hs-form .hs-button.primary { width: auto; } form.hs-form fieldset .hs-form-booleancheckbox label { font-size: 15px; } form.hs-form .hs_recaptcha { margin-top: 10px; } form.hs-form fieldset .hs-fieldtype-radio label:has(input) { font-size: 15px; width: 100%; } form.hs-form fieldset .hs-fieldtype-checkbox .input label { font-size: 15px; } form.hs-form fieldset .hs-fieldtype-select .input select { font-size: 15px; } form.hs-form fieldset .hs-fieldtype-date .input input[type=date] { font-size: 15px; } form.hs-form fieldset .hs-fieldtype-date .input input[type=file] { font-size: 15px; } } @media screen and (max-width: 599px) { form.hs-form fieldset.form-columns-2, form.hs-form fieldset.form-columns-3 { display: block; } } .c-btn { display: inline-block; transition: .3s; width: fit-content; cursor: pointer; } .c-btn.cta { display: flex; align-items: center; } .section-cta.tar .c-btn.cta { margin-left: auto; padding-right: 0; } .c-btn.arrow-right.cta i, .c-btn.arrow-right1.cta i { transform: translate(-25%, 0px); } .c-btn.arrow-right, .c-btn.arrow-right1 { font-size: 18px; font-weight: 700; margin-top: 45px; padding-left: 15px; position: relative; text-decoration: none; } .c-btn.arrow-right i, .c-btn.arrow-right1 i { border-radius: 50%; color: #fff; display: inline-block; height: 36px; left: 0; line-height: 1; overflow-x: hidden; position: relative; top: 50%; transform: translate(-25%, -3px); transition: .4s ease; vertical-align: middle; width: 36px; z-index: 0; background-color: #000000; } .c-btn.arrow-right i:before, .c-btn.arrow-right1 i:before { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%2216%22%20viewBox%3D%220%200%2010%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.5%201.82446L8.10449%207.9104L1.5%2014.1755%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E') no-repeat 50% / contain; content: ""; height: 16px; position: absolute; right: 10.5px; top: calc(50% - 8px); width: 13px; } .c-btn.arrow-right:hover i:before, .c-btn.arrow-right1:hover i:before, .c-btn.arrow-right2:hover i:before { animation: arrow-line .4s cubic-bezier(.785,.135,.15,.86) 1 normal; } .c-btn.arrow-right:hover i, .c-btn.arrow-right1:hover i { background-color: #1C2F19; } .c-btn.arrow-right.inversion i, .c-btn.arrow-right1.inversion i { background-color: #1C2F19; } .c-btn.arrow-right.inversion:hover i, .c-btn.arrow-right1.inversion:hover i { background-color: #000000; } .c-btn.arrow-right2 { text-decoration: none; font-weight: bold; font-size: 14px; display: inline-block; position: relative; margin-top: 40px; color: #1C2F19; } .c-btn.arrow-right2:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: center right; transform-origin: center right; -webkit-transition: -webkit-transform 400ms ease; transition: -webkit-transform 400ms ease; transition: transform 400ms ease; transition: transform 400ms ease, -webkit-transform 400ms ease; will-change: transform; background: #1C2F19; } .c-btn.arrow-right2:hover:after { transform: scaleX(1); transform-origin: center left; } .c-btn.arrow-right2 i { width: 18px; height: 18px; overflow-x: hidden; z-index: 0; top: calc(50% - 9px); right: -25px; border-radius: 50%; transition: 400ms ease; display: inline-block; vertical-align: middle; color: #ffffff; line-height: 1; position: absolute; background-color: #1C2F19; } .c-btn.arrow-right2 i:before { background: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2213%22%20height%3D%2211%22%20viewBox%3D%220%200%2013%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.755859%205.47027C0.755859%205.07182%201.07886%204.74882%201.4773%204.74882L9.83582%204.74882L6.73873%201.65173C6.45699%201.36999%206.45699%200.913197%206.73873%200.631455C7.02047%200.349713%207.47726%200.349713%207.75901%200.631455L12.0877%204.96013C12.3694%205.24187%2012.3694%205.69866%2012.0877%205.98041L7.75901%2010.3091C7.47727%2010.5908%207.02047%2010.5908%206.73873%2010.3091C6.45699%2010.0273%206.45699%209.57054%206.73873%209.2888L9.83582%206.19171L1.4773%206.19171C1.07886%206.19171%200.755859%205.86871%200.755859%205.47027Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E') no-repeat 50%/contain; content: ""; height: 16px; position: absolute; right: 3px; top: calc(50% - 8px); width: 12px; } .section-cta.tar .c-btn.arrow-right2 { margin-right: 25px; } .c-btn.arrow-right2.inversion { color: #cdf986; } .c-btn.arrow-right2.inversion:after { background: #cdf986; } .c-btn.arrow-right2.inversion i { background: #cdf986; } .c-btn.arrow-right2.inversion:hover i { background-color: #cdf986; } .c-btn.arrow-right3 { display: inline-block; font-size: 14.028px; font-style: normal; font-weight: 700; height: 20px; letter-spacing: 1.403px; line-height: 1.6; position: relative; margin-top: 10px; color: #1C2F19; } .c-btn.arrow-right3 span { content: ""; width: 20px; height: 20px; right: -30px; top: 1px; mask-position: center; mask-repeat: no-repeat; position: absolute; background: #1C2F19; mask-image: url('data:image/svg+xml;utf8,'); } .c-btn.arrow-right3:hover span { animation: arrow-line-small .4s cubic-bezier(.785,.135,.15,.86) 1 normal; } .c-btn.file, .c-btn.contact, .c-btn.custom, .c-btn.file-default, .c-btn.contact-default, .c-btn.custom-default { font-weight: 700; font-size: 16px; border: 1px solid; padding: 8px 16px 8px 38px; margin-top: 40px; position: relative; color: #1C2F19; background-color: #fff; border-color: #1C2F19; } .c-btn.file i, .c-btn.file-default i { content: ""; height: 16px; position: absolute; left: 16px; top: calc(50% - 7px); width: 15px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;utf8,'); background: #1C2F19; } .c-btn.contact i, .c-btn.contact-default i { content: ""; height: 16px; position: absolute; left: 16px; top: calc(50% - 6px); width: 20px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;utf8,'); background: #1C2F19; } .c-btn.custom > span > i > span, .c-btn.custom-default > span > i > span { display: inline-block; height: 18px; left: 11px; min-width: 18px; position: absolute; top: calc(50% - 16px); transition: .3s; width: 18px; } .c-btn.custom i span svg path, .c-btn.custom-default i span svg path { fill: #1C2F19; } .c-btn.custom:hover i span svg path, .c-btn.custom-default:hover i span svg path { fill: #fff; } .c-btn.file:hover, .c-btn.contact:hover, .c-btn.custom:hover, .c-btn.file-default:hover, .c-btn.contact-default:hover, .c-btn.custom-default:hover { color: #fff; background-color: #1C2F19; } .c-btn.file:hover i, .c-btn.contact:hover i, .c-btn.custom:hover i, .c-btn.file-default:hover i, .c-btn.contact-default:hover i, .c-btn.custom-default:hover i { background-color: #fff; } .c-btn svg { max-height: 25px; max-width: 25px; } .c-btn path { fill: #fff; max-width: 25px; height: 25px; } .c-btn:hover path { fill: #1C2F19; } .c-btn.file.inversion, .c-btn.contact.inversion, .c-btn.custom.inversion, .c-btn.file-default.inversion, .c-btn.contact-default.inversion, .c-btn.custom-default.inversion { color: #fff; background-color: #1C2F19; border-color: #1C2F19; } .c-btn.file.inversion:hover, .c-btn.contact.inversion:hover, .c-btn.custom.inversion:hover, .c-btn.file-default.inversion:hover, .c-btn.contact-default.inversion:hover, .c-btn.custom-default.inversion:hover { color: #1C2F19; background-color: #fff; border-color: #1C2F19; } .c-btn.file.inversion i, .c-btn.contact.inversion i, .c-btn.custom.inversion i, .c-btn.file-default.inversion i, .c-btn.contact-default.inversion i, .c-btn.custom-default.inversion i { background-color: #fff; } .c-btn.file.inversion:hover i, .c-btn.contact.inversion:hover i, .c-btn.custom.inversion:hover i, .c-btn.file-default.inversion:hover i, .c-btn.contact-default.inversion:hover i, .c-btn.custom-default.inversion:hover i { background-color: #1C2F19; } .section-cta.tac .c-btn.file-circle, .section-cta.tac .c-btn.contact-circle { margin-left: auto; margin-right: auto; } .section-cta.tar .c-btn.file-circle, .section-cta.tar .c-btn.contact-circle { margin-left: auto; } .section-cta.tac:has(.c-btn.custom-circle) { display: flex; justify-content: center; } .c-btn.file-circle, .c-btn.download-circle, .c-btn.contact-circle { font-weight: 700; font-size: 18px; padding: 8px 16px 8px 10px; margin-top: 40px; position: relative; display: flex; align-items: center; } .c-btn.file-circle span:first-child, .c-btn.download-circle span:first-child, .c-btn.contact-circle span:first-child { position: relative; width: 30px; display: inline-block; left: -10px; top: calc(50% - 7px); width: 62px; min-width: 62px; height: 62px; transition: .3s; border-radius: 50px; background-color: #1C2F19; } .c-btn.file-circle:hover span:first-child, .c-btn.contact-circle:hover span:first-child, .c-btn.custom-circle:hover > span:first-child { box-shadow: 0px 4px 10px rgba(0, 0, 0, .12); background-color: #fff; } .c-btn.file-circle span i, .c-btn.download-circle span i { content: ""; height: 16px; position: absolute; left: 24px; top: calc(50% - 7px); width: 15px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;utf8,'); background: #ffffff; } .c-btn.contact-circle span i { content: ""; height: 16px; position: absolute; left: 24px; top: calc(50% - 5px); width: 20px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;utf8,'); background: #ffffff; } .c-btn.file-circle:hover span i, .c-btn.contact-circle:hover span i { background-color: #1C2F19; } .section-cta.tac:has(.c-btn.custom-circle) { display: flex; justify-content: center; } .section-cta.tar:has(.c-btn.custom-circle) { display: flex; justify-content: end; } .c-btn.custom-circle { align-items: center; display: flex; font-size: 18px; font-weight: 700; margin-top: 40px; padding: 8px 16px 8px 10px; position: relative; } .c-btn.custom-circle > span:first-child { background-color: #1C2F19; border-radius: 50px; display: inline-block; height: 62px; left: -10px; min-width: 62px; position: relative; top: calc(50% - 30px); transition: .3s; width: 62px; } .c-btn.custom-circle i { max-width: 40px; max-height: 35px; position: absolute; bottom: 0; right: 0; top: 50%; left: calc(50% + 1px); transform: translate(-50%, -50%); text-align: center; } .c-btn.custom-circle i span svg path { fill: #fff; } .c-btn.custom-circle:hover i span svg path { fill: #1C2F19; } .c-btn.tel { font-size: 20px; font-weight: 700; line-height: 30px; margin-top: 40px; position: relative; display: flex; align-items: center; } .c-btn.tel span { display: inline-block; height: 35px; left: -10px; position: relative; top: calc(50% - 40px); width: 35px; border-radius: 3px; background-color: #1C2F19; } .c-btn.tel span i { content: ""; height: 24px; position: absolute; left: 10px; top: calc(50% - 12px); width: 16px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;utf8,'); background: #ffffff; } .c-btn.btn-medium, .c-btn.btn-small, .c-btn.btn-large { font-weight: 700; font-size: 16px; border: 1px solid; margin-top: 40px; display: inline-block; position: relative; color: #fff; background-color: #1C2F19; border-color: #1C2F19; } .c-btn.btn-medium { padding: 16px 32px; } .c-btn.btn-small { padding: 8px 32px; } .c-btn.btn-large { padding: 21px 32px; } .c-btn.btn-medium:hover, .c-btn.btn-small:hover, .c-btn.btn-large:hover { color: #1C2F19; background-color: #fff; } .c-btn.btn-medium.inversion, .c-btn.btn-small.inversion, .c-btn.btn-large.inversion { color: #1C2F19; background-color: #fff; } .c-btn.btn-medium.inversion:hover, .c-btn.btn-small.inversion:hover, .c-btn.btn-large.inversion:hover { color: #fff; background-color: #1C2F19; } .section-content > .section-cta .c-btn.file-circle { padding-right: 0; } .section-content > .section-cta .c-btn.arrow-right2 { margin-right: 25px; } @keyframes arrow-line { 0% { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); -webkit-transform-origin: right center; transform-origin: right center } 50% { -webkit-transform: translateX(50px) scaleX(.1); transform: translateX(50px) scaleX(.1); -webkit-transform-origin: right center; transform-origin: right center } 50.1% { -webkit-transform: translateX(-50px) scaleX(0); transform: translateX(-50px) scaleX(0); -webkit-transform-origin: left center; transform-origin: left center } to { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes arrow-line-small { 0% { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); -webkit-transform-origin: right center; transform-origin: right center } 50% { -webkit-transform: translateX(10px) scaleX(.1); transform: translateX(10px) scaleX(.1); -webkit-transform-origin: right center; transform-origin: right center } 50.1% { -webkit-transform: translateX(-10px) scaleX(0); transform: translateX(-10px) scaleX(0); -webkit-transform-origin: left center; transform-origin: left center } to { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); -webkit-transform-origin: left center; transform-origin: left center } } @media screen and (max-width: 639px) { .section-content + .section-cta.tar, .section-content > .section-cta.tar { text-align: center !important; } .c-btn.arrow-right { font-size: 16px; }.c-btn.arrow-right i { height: 48px; width: 48px; } .c-btn.arrow-right i:before { right: 18px; width: 9px; } .c-btn.download-circle span i, .c-btn.file-circle span i { left: 17.5px; } .c-btn.contact-circle, .c-btn.download-circle, .c-btn.file-circle { font-size: 14px; } .c-btn.contact-circle span:first-child, .c-btn.download-circle span:first-child, .c-btn.file-circle span:first-child { height: 48px; min-width: 48px; width: 48px; } .c-btn.contact-circle span i { left: 16px; } .c-btn.tel span { left: 0px; margin-right: 10px; } } .mod_btn1, .mod_btn1s { display: block; font-size: 20px; font-size: 2rem; font-weight: bold; line-height: 1.4; text-align: center; width: 100%; max-width: 378px; background-color: var(--sub); border-radius: 40px; margin: 0 auto; padding: 26px 15px; } a:hover .mod_btn1, a.mod_btn1:hover, a:hover .mod_btn1s, a.mod_btn1s:hover { background-color: var(--normal-green); transition-duration: .15s; } .mod_btn1s { font-size: 15px; font-size: 1.5rem; max-width: 160px; padding: 14px 15px 15px; } .mod_btn2 { display: block; font-size: 20px; font-size: 2rem; font-weight: bold; line-height: 1.4; color: var(--primary-web); text-align: center; width: 100%; max-width: 585px; background-color: var(--white); border: var(--primary) 2px solid; border-radius: 56px; margin: 0 auto; } .mod_btn2 > span { display: block; padding: 22px 15px; border: var(--white) 1px solid; border-radius: 56px; } a:hover .mod_btn2, a.mod_btn2:hover { border: var(--primary) 2px solid; color: var(--primary); transition-duration: .15s; } a:hover .mod_btn2 > span, a.mod_btn2:hover > span { border: var(--primary) 1px solid; transition-duration: .15s; } .mod_btn3s { display: block; font-size: 20px; font-size: 2rem; font-weight: bold; line-height: 1.4; color: var(--white); text-align: center; width: 100%; max-width: 220px; background-color: var(--primary); border-radius: 40px; padding: 14px; } a:hover .mod_btn3s, a.mod_btn3s:hover { background-color: var(--black); transition-duration: .15s; } .mod_btn4 { display: block; font-size: 15px; font-size: 1.5rem; font-weight: bold; line-height: 1.4; color: var(--white); text-align: center; width: 200px; background-color: var(--dark-green); border-radius: 40px; margin: 0 auto; padding: 18px 15px; } a:hover .mod_btn4 { background-color: var(--gray); transition-duration: .15s; } .mod_btntop { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 50; } .mod_btntop > a { display: flex; align-items: center; justify-content: center; color: #FFFFFF; width: 48px; height: 48px; background: var(--default); border-radius: 3px; opacity: .5; } .mod_textlink1 { color: var(--primary) ; font-size: 15px; font-size: 1.5rem; line-height: 1.4; font-weight: bold; text-align: right; margin-top: 50px; } .mod_textlink1 > a:hover { text-decoration: underline; } .mod_textlink1 .icon_after { vertical-align: -1px; display: inline-block; } @media screen and (max-width: 899px) { .mod_textlink1 { margin-top: 40px; } } .mod_button { padding: 18px 30px; display: inline-block; font-size: 15px; font-weight: 700; border: 1px solid var(--primary); border-radius: 60px; background-color: var(--white); } .mod_button02 { padding: 30px; max-width: 380px; width: 100%; display: inline-block; font-size: 18px; font-weight: 700; text-align: center; border-radius: 60px; background-color: var(--sub); } a.animation-button, button.animation-button { margin-top: auto; align-items: center; border: 1px solid var(--primary-web-new); appearance: none; border-radius: 20px; color: var(--primary-web-new); display: flex !important; font-size: 16px; font-weight: 700; gap: 30px; height: 40px; justify-content: center; letter-spacing: 0.1em; line-height: 160%; margin: 25px auto 0; overflow: hidden; padding: 5px 20px 5px 40px; position: relative; text-decoration: none; width: fit-content; } a.animation-button:before, button.animation-button:before { background: #fff; border-radius: 50px; content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; transform: scaleX(0); transform-origin: right top; transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1); width: 100%; z-index: 0; } a.animation-button:hover:before, button.animation-button:hover:before { background: #fff; transform: scale(1.1); transform-origin: left top; left: -2px; top: -2px; } a.animation-button.animation-button-primary, button.animation-button.animation-button-primary { margin-top: auto; cursor: pointer; align-items: center; border: 1px solid var(--primary-we-new); appearance: none; border-radius: 20px; background-color: var(--primary-web-new); color: #fff; display: flex !important; font-size: 16px; font-weight: 700; gap: 30px; height: 40px; justify-content: center; letter-spacing: 0.1em; line-height: 160%; margin: 25px auto 0; overflow: hidden; padding: 5px 20px 5px 40px; position: relative; text-decoration: none; width: fit-content; } a.animation-button.animation-button-primary:before, button.animation-button.animation-button-primary:before { background: #fff; border-radius: 50px; content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; transform: scaleX(0); transform-origin: right top; transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1); width: 100%; z-index: 0; } a.animation-button.animation-button-primary:hover, button.animation-button.animation-button-primary:hover{ color: var(--primary-web); } a.animation-button.animation-button-primary:hover:before, button.animation-button.animation-button-primary:hover:before { background: #fff; transform: scale(1.1); transform-origin: left top; left: -2px; top: -2px; } a.animation-button.animation-button-primary.noicon, button.animation-button.animation-button-primary.noicon{ padding: 10px 0; width: 100%; max-width: 300px; } a.animation-button .layer, button.animation-button .layer{ position: relative; z-index: 1; } a.animation-button.animation-button-bk:hover{ color:#fff; } a.animation-button.animation-button-bk svg path{ fill: var(--primary-web); } a.animation-button.animation-button-bk:hover svg path{ fill: #fff; } a.animation-button.animation-button-bk:before, a.animation-button.animation-button-bk:hover:before{ background: var(--primary-web-new); } a.animation-button.animation-button-white{ background: var(--primary-web-new); color: #fff; } a.animation-button.animation-button-white:before, a.animation-button.animation-button-white:hover:before{ background: #fff; } a.animation-button span, a.animation-button svg { position: relative; z-index: 1; } * + .mod_topicpath { margin-top: 3%0px; } .mod_topicpath { display: flex; flex-wrap: wrap; margin-top: 10px; } .mod_topicpath ul li { color: var(--primary-web); font-size: 1.2rem; font-weight: 400; line-height: 160%; /* 19.2px */ letter-spacing: 0.1em; } .mod_topicpath ul li:last-child { margin-right: 0; } .mod_topicpath .hs-breadcrumb-menu-divider:before { content: "\e92f"; color: #7a7a7a; vertical-align: -2px; font-family: "sym_icon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 16px !important; font-size: 1.6rem !important; padding-right: 10px; } .mod_topicpath__blog { margin-bottom: 70px; } .mod_topicpath__blog ul li { display: flex; align-items: center; gap: 10px; } .mod_topicpath__blog ul li a { transition: 300ms ease; } .mod_topicpath__blog ul li a:hover { color: var(--primary-web); text-decoration: none; } .mod_topicpath__blog ul li:after { content: "\e92f"; color: var(--default); vertical-align: -2px; font-family: "sym_icon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; font-size: 16px !important; font-size: 1.6rem !important; } .mod_topicpath__blog ul li:last-child:after { content: none; } .mod_topicpath ul li a { color: #7a7a7a; font-size: 1.2rem; font-weight: 400; line-height: 160%; letter-spacing: 0.1em; } .mod_topicpath ul li a:hover { text-decoration: underline; } .breadcumb.breadcumb--inhero { position: absolute; width: 100%; top: 370px; } @media screen and (max-width: 768px) { .breadcumb { display: none; } } .hs-breadcrumb-menu-item { padding: 0; } /*==================================================== pagination ====================================================*/ ul.pagination { display: flex; justify-content: center; align-items: center; margin: 100px 0; } @media (max-width: 768px) { ul.pagination { margin: 50px 0 100px; } } ul.pagination li a path { fill: #000000; } ul.pagination li.double-arrow-item:first-child a { align-items: center; border-radius: 3px; display: flex; height: 40px; justify-content: center; margin-right: 8px; transition: background .3s; width: 40px; } ul.pagination li.double-arrow-item:last-child a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 3px; margin-left: 8px; margin-right: 0; transition: background 0.3s; } ul.pagination li.double-arrow-item a:hover { background: #f1f1f1; } ul.pagination li.left-arrow-item a { align-items: center; border-radius: 3px; display: flex; height: 40px; justify-content: center; margin-right: 8px; transition: background .3s; width: 40px; } ul.pagination li.num-item a, ul.pagination li.num-item span { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 16px; line-height: 2; letter-spacing: 1.6px; color: #333; background: var(--white); border: 1px solid #F0FBCC; border-radius: 3px; margin-right: 10px; transition: background 0.3s; } ul.pagination li.num-item a:hover { color: var(--white); background: #1C2F19; border: 1px solid transparent; } ul.pagination li.num-item.current span { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 16px; line-height: 2; letter-spacing: 1.6px; color: #333; background: #F4F6EC; border: 1px solid #F0FBCC; border-radius: 3px; margin-right: 10px; } ul.pagination li.right-arrow-item a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 3px; margin-left: 0px; transition: background 0.3s; } ul.pagination li.left-arrow-item a:hover, ul.pagination li.right-arrow-item a:hover { background: #f1f1f1; } /* Components */ .header { position: fixed; width: 100%; z-index: 999; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.6) 90%, rgba(255, 255, 255, 0) 100% ); } .header__inner { height: 100px; padding: 15px 100px; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 1500px) { .header__inner { padding: 15px 20px; } } .header__inner .header__logo { width: 249px; height: 45px; } @media (max-width: 1500px) { .header__inner .header__logo { width: calc(249px * 0.8); height: calc(45px * 0.8); } } @media (max-width: 768px) { .header__inner .header__logo { width: 170px; height: 52px; display: flex; align-items: center; } } .header__logo-link { transition: all 0.3s ease; } .header__logo-link:hover { opacity: 0.4; } .header__inner nav ul { display: flex; align-items: center; gap: 40px; } @media (max-width: 1500px) { .header__inner nav ul { gap: 16px; } } .header__inner nav ul li a { color: var(--primary-web); font-size: 1.6rem; font-style: normal; font-weight: 700; line-height: 160%; letter-spacing: 0.05em; transition: all 0.3s ease; position: relative; } @media (max-width: 1200px) { .header__inner nav ul li a { font-size: 1.4rem; } } .header__inner nav ul li a:after { content: ""; position: absolute; width: 0; height: 2px; background-color: var(--primary-web); bottom: -5px; left: 0; transition: width 0.3s ease; } .header__inner nav ul li a:hover { opacity: 0.8; } .header__inner nav ul li a:hover::after { width: 100%; } .header__inner nav ul li a:hover svg path { opacity: 0.8; } .header__inner nav ul li.hs-item-has-children > a { display: flex; align-items: center; } .header__inner nav ul li.hs-item-has-children > a svg { margin-left: 8px; transition: transform 0.3s ease; } .header__inner nav ul li.hs-item-has-children:hover > a svg { transform: rotate(180deg); } .header__inner nav ul li ul.hs-menu-children-wrapper { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 10px; z-index: 100; flex-direction: column; gap: 10px; } .header__inner nav ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { display: flex; } .header__inner nav ul li ul.hs-menu-children-wrapper li a { font-size: 1.4rem; } .header__nav-wrapper { display: flex; align-items: center; gap: 24px; } @media (max-width: 1500px) { .header__nav-wrapper { gap: 16px; } } @media (max-width: 1048px) { .header__nav-wrapper { gap: 8px; } } .header__nav-wrapper .header__contact { border-radius: 300px; background: var(--primary-web-new); width: 180px; padding: 0; height: 53px; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--white); text-align: center; font-size: 18px; font-weight: 700; line-height: 140%; position: relative; border: 2px solid var(--primary-web-new); transition: all 0.3s ease; padding-right: 10px; } .header__nav-wrapper .header__contact:hover { background-color: var(--white); color: var(--primary-web); border: 2px solid var(--primary-web); } .header__nav-wrapper .header__contact:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAxMiAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuNDUxOTkgNy4wODAyM0wzLjUxMjk5IDYuMDIwMjRMOS4yOTE5OSAxMS43OTcyQzkuMzg1MTQgMTEuODg5OCA5LjQ1OTA3IDExLjk5OTkgOS41MDk1MiAxMi4xMjExQzkuNTU5OTcgMTIuMjQyNCA5LjU4NTk0IDEyLjM3MjQgOS41ODU5NCAxMi41MDM3QzkuNTg1OTQgMTIuNjM1MSA5LjU1OTk3IDEyLjc2NTEgOS41MDk1MiAxMi44ODYzQzkuNDU5MDcgMTMuMDA3NiA5LjM4NTE0IDEzLjExNzcgOS4yOTE5OSAxMy4yMTAyTDMuNTEyOTkgMTguOTkwMkwyLjQ1Mjk5IDE3LjkzMDJMNy44NzY5OSAxMi41MDUyTDIuNDUxOTkgNy4wODAyM1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); position: absolute; width: 12px; height: 24px; background-repeat: no-repeat; background-size: contain; top: 50%; right: 20px; transform: translateY(-50%); transition: all 0.3s ease; } .header__nav-wrapper .header__contact:hover:after { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxMiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuNDUxOTkgNi41ODAyM0wzLjUxMjk5IDUuNTIwMjRMOS4yOTE5OSAxMS4yOTcyQzkuMzg1MTQgMTEuMzg5OCA5LjQ1OTA3IDExLjQ5OTkgOS41MDk1MiAxMS42MjExQzkuNTU5OTcgMTEuNzQyNCA5LjU4NTk0IDExLjg3MjQgOS41ODU5NCAxMi4wMDM3QzkuNTg1OTQgMTIuMTM1MSA5LjU1OTk3IDEyLjI2NTEgOS41MDk1MiAxMi4zODYzQzkuNDU5MDcgMTIuNTA3NiA5LjM4NTE0IDEyLjYxNzcgOS4yOTE5OSAxMi43MTAyTDMuNTEyOTkgMTguNDkwMkwyLjQ1Mjk5IDE3LjQzMDJMNy44NzY5OSAxMi4wMDUyTDIuNDUxOTkgNi41ODAyM1oiIGZpbGw9IiMxQzJGMTkiLz4KPC9zdmc+Cg=="); } .header__search { appearance: unset; border: unset; background: unset; padding: 0; cursor: pointer; align-items: center; padding: 0 10px; order: -1; height: 100%; display: flex; } .header__search:focus, .header__search:focus-visible { outline: none; } .header__search-form-container { display: flex; align-items: center; vertical-align: middle; position: relative; height: 42px; box-sizing: border-box; border: 2px solid transparent; border-radius: 30px; background-color: transparent; width: 45px; overflow: hidden; transition: width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } .header__search-form-container.search-active { width: 250px; background-color: #fff; border: 2px solid #002e00; } @media (max-width: 1500px) { .header__search-form-container.search-active { width: 200px; } } .header__search-form-container .hs-search-field { display: flex; align-items: center; border: none; border-radius: 0; padding: 0; background-color: transparent; height: 100%; box-sizing: border-box; width: 100%; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 0.2s 0.1s ease, visibility 0.2s 0.1s ease; } .header__search-form-container.search-active .hs-search-field { opacity: 1; visibility: visible; } .header__search-form-container .hs-search-field__input { border: none; outline: none; flex-grow: 1; font-size: 1.4rem; padding: 0 8px; height: 100%; box-sizing: border-box; background-color: transparent; line-height: normal; color: var(--primary-web); pointer-events: auto; padding-left: 5px; } .header__search-form-container .hs-search-field__input:focus, .header__search-form-container .hs-search-field__input:focus-visible { outline: none; } .header__search-form-container .hs-search-field__input::placeholder { color: #aeaeae; opacity: 1; font-size: 1rem; } @media (max-width: 1500px) { .header__search-form-container .hs-search-field__input::placeholder { font-size: 0.8rem; } } @media (max-width: 1048px) { .header__search-form-container .hs-search-field__input::placeholder { font-size: 1rem; } } .header__search-form-container .hs-search-field__suggestions, .header__search-form-container .hs-search-results__title, .header__search-form-container .hs-search-results__description, .header__search-form-container .hs-search-results__listing, .header__search-form-container .hs-search-no-results { display: none !important; } .header__search-form-container .hs-search-field__button { display: none; } .header__search-icon-mobile { display: none; /* Initially hidden, shown only in mobile search active */ } /* Mobile Styles */ .header__mobile-menu-trigger, .header__back-button, .mobile-nav { display: none; /* Initially hidden on desktop */ } @media (max-width: 1048px) { .header__inner { padding: 15px 20px; /* Adjust padding for mobile */ height: 70px; } .header__nav, .header__contact--desktop { display: none !important; } .header__search-form-container { /* Mobile specific adjustments if PC version differs too much */ /* For now, assume PC version is okay, but can be overridden */ } .header.mobile-search-active .header__nav-wrapper { justify-content: space-between; width: 100%; } .header.mobile-search-active .header__search-form-container { width: auto; flex-grow: 1; order: 0; } .header.mobile-search-active .header__search-icon-mobile { display: inline-flex; /* Show mobile search icon */ align-items: center; padding-left: 15px; /* Space for icon */ padding-right: 8px; } .header.mobile-search-active .header__search-icon-mobile svg { width: 20px; /* Adjust size as needed */ height: 20px; } .header.mobile-search-active .hs-search-field__input { padding-left: 10px !important; /* Ensure space after icon, override if necessary */ } .header__mobile-menu-trigger { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 10px; cursor: pointer; width: 40px; height: 40px; order: 2; /* Rightmost */ } .header__mobile-menu-icon { display: block; position: relative; width: 24px; height: 2px; background-color: var(--primary-web); transition: all 0.3s ease; } .header__mobile-menu-icon::before, .header__mobile-menu-icon::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--primary-web); transition: all 0.3s ease; } .header__mobile-menu-icon::before { top: -7px; } .header__mobile-menu-icon::after { bottom: -7px; } body.mobile-menu-active .header__mobile-menu-icon { background-color: transparent; /* Middle bar disappears */ } body.mobile-menu-active .header__mobile-menu-icon::before { transform: translateY(7px) rotate(45deg); } body.mobile-menu-active .header__mobile-menu-icon::after { transform: translateY(-7px) rotate(-45deg); } .header__back-button { display: none; /* Hidden by default, shown when mobile-search-active */ background: none; border: none; padding: 10px; cursor: pointer; width: 40px; height: 40px; order: -1; /* Leftmost when search is active */ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAABCcAAAQnAEmzTo0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADFSURBVHgB7dXBCcIwFMbx75WCV49qUTJCHMENHEE3cCSdwBEcwbhBQSoevXooT3sRizHJIS8ezP8USOAHpXkBcrm/TOmRmurJEhErfAc6tGU6MPO+0pVGpIog9Llk4l1jGoNIEYLR6woRo1+gVjgF+gGnQntwSvQFK62GLd+PHQrZTEmDRW3qW2nbZUINgci2fv/UBNqeT5c1BPv6c0njzuskiXsHiBQeNDIlcHJtSuLkO9AfLMU85gvlrcNnerxBLpdz9ABU14uIai/jUgAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .header.mobile-search-active .header__logo, .header.mobile-search-active .header__search { /* This is the PC search button, ensure it's hidden */ display: none !important; } .header__search-icon-mobile { /* Default state for the new mobile icon container */ display: none; } .header.mobile-search-active .header__back-button { display: flex; } .header.mobile-search-active .header__search-form-container { border-color: #002e00; /* Ensure border is visible */ background-color: #fff; /* Ensure background is visible */ } .header.mobile-search-active .header__search-form-container .hs-search-field { opacity: 1; visibility: visible; } .mobile-nav { display: block; /* Override initial none for transition */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1001; /* Above header */ padding: 40px; box-sizing: border-box; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateX(100%); transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; } body.mobile-menu-active .mobile-nav { visibility: visible; opacity: 1; transform: translateX(0); } body.mobile-menu-active { overflow: hidden; /* Prevent background scroll when menu is open */ } .mobile-nav__inner { padding-top: 15px; /* Adjusted for search bar */ position: relative; display: flex; flex-direction: column; height: 100%; } .mobile-nav__search-container .hs-search-field { border: 1px solid #ccc; border-radius: 25px; /* More rounded corners */ background-color: #f8f9fa; /* Light grey background for input field */ padding: 10px 15px; display: flex; align-items: center; } .mobile-nav__search-container .hs-search-field__input { font-size: 1.4rem; border: none; outline: none; flex-grow: 1; background-color: transparent; padding-left: 5px; /* Space for potential icon */ width: 220px; } .mobile-nav__search-container .hs-search-field__input:focus, .mobile-nav__search-container .hs-search-field__input:focus-visible { outline: none; } .mobile-nav__search-container .hs-search-field__input::placeholder { color: #6c757d; /* Placeholder text color */ } /* If HubSpot module adds a search button/icon inside, style or hide it */ .mobile-nav__search-container .hs-search-field__button { display: none; /* Assuming we want a cleaner look like the reference */ } /* Add a search icon if not provided by the module, or style the module's one */ .mobile-nav__search-container .hs-search-field::before { content: ""; display: inline-block; width: 20px; /* Adjusted to match header icon */ height: 20px; /* Adjusted to match header icon */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='26' viewBox='0 0 25 26' fill='%23171E16'%3E%3Cpath d='M3.03659 3.15867C5.0562 1.05689 7.72197 -0.00157243 10.3687 1.75329e-06C13.0162 -0.00157243 15.6812 1.05689 17.7009 3.15867C19.7219 5.25894 20.7405 8.03117 20.7374 10.7828C20.7397 12.7053 20.2316 14.6302 19.2458 16.3361L24.267 21.5577C25.2443 22.5741 25.2443 24.2213 24.267 25.2377C23.2904 26.2541 21.7057 26.2541 20.7291 25.2377L15.7072 20.0153C14.0676 21.0412 12.2159 21.5688 10.3687 21.5664C7.72202 21.5688 5.0562 20.5104 3.03664 18.4085C1.0163 16.3083 -0.00223923 13.5368 7.62939e-06 10.7828C-0.00306892 8.03117 1.01625 5.25894 3.03659 3.15867ZM5.868 15.4649C7.11546 16.7614 8.73295 17.4009 10.3687 17.4041C12.0046 17.4009 13.6213 16.7614 14.8703 15.4649C16.117 14.1661 16.7319 12.4847 16.735 10.7828C16.7319 9.08252 16.117 7.40043 14.8703 6.10234C13.6213 4.80588 12.0046 4.16635 10.3687 4.16315C8.73295 4.16635 7.11545 4.80583 5.86721 6.10234C4.62054 7.40043 4.00557 9.08252 4.0025 10.7828C4.00557 12.4848 4.62054 14.1661 5.868 15.4649Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; /* Ensure icon scales correctly */ margin-right: 8px; /* Space between icon and input text */ } .mobile-nav__close { position: absolute; top: -25px; right: -15px; background: none; border: none; padding: 10px; cursor: pointer; width: 40px; height: 40px; } .mobile-nav__close::before, .mobile-nav__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; background-color: var(--primary-web); } .mobile-nav__close::before { transform: translate(-50%, -50%) rotate(45deg); } .mobile-nav__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .mobile-nav__menu { padding: 4px 8px 0; } .mobile-nav__menu ul { list-style: none; padding: 0; margin: 0; } .mobile-nav__menu ul li, .mobile-nav__footer { opacity: 0; transition-delay: 0s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-duration: 0.4s; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .mobile-nav__menu ul li:nth-child(1) { transition-delay: 0.2s; } .mobile-nav__menu ul li:nth-child(2) { transition-delay: 0.3s; } .mobile-nav__menu ul li:nth-child(3) { transition-delay: 0.4s; } .mobile-nav__menu ul li:nth-child(4) { transition-delay: 0.5s; } .mobile-nav__menu ul li:nth-child(5) { transition-delay: 0.6s; } .mobile-nav__footer { transition-delay: 0.7s; } .mobile-menu-active .mobile-nav__menu ul li, .mobile-menu-active .mobile-nav__footer { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .mobile-nav__menu ul li a { display: block; padding: 20px 0; color: var(--primary-web); font-size: 1.6rem; font-weight: bold; text-decoration: none; } .mobile-nav__menu ul li:last-child a { padding-bottom: 24px; } .mobile-nav .header__contact--mobile { display: block; text-align: center; width: 100%; padding: 15px; box-sizing: border-box; background-color: var(--primary-web); /* Dark background like image */ color: #fff; /* White text */ border-radius: 30px; /* Rounded corners */ font-weight: bold; text-decoration: none; font-size: 1.8rem; border: 2px solid var(--primary-web); transition: all 0.3s ease; } .mobile-nav .header__contact--mobile:hover { background-color: var(--white); color: var(--primary-web); border: 2px solid var(--primary-web); } /* Ensure search suggestions are hidden in mobile nav search as well */ .mobile-nav__search-container .hs-search-field__suggestions, .mobile-nav__search-container .hs-search-results__title, .mobile-nav__search-container .hs-search-results__description, .mobile-nav__search-container .hs-search-results__listing, .mobile-nav__search-container .hs-search-no-results { display: none !important; } } .footer { margin-top: 50px; } @media (max-width: 768px) { .footer { margin-top: 0; } } .footer__official { padding: 50px 0px; background: #f0fbcc; } .footer__official__inner { display: flex; max-width: 1200px; flex-direction: column; align-items: center; gap: 40px; margin: 0 auto; } @media (max-width: 768px) { .footer__official__inner { gap: 20px; } } .footer__official__inner h2 { font-size: 3rem; font-weight: 700; line-height: 140%; } .footer__powered { padding: 50px 0; } @media (max-width: 768px) { .footer__powered { padding: 50px 0 0; } } .footer__powered__inner { margin: 0 auto; max-width: 1200px; width: 100%; } .footer__powered__inner h2 { font-size: 3rem; } .footer__powered__inner__content__data { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; } @media (max-width: 768px) { .footer__powered__inner__content__data { grid-template-columns: 1fr; gap: 0px; margin-top: 20px; } } .footer__powered__inner__content__data__text { padding: 0 20px; } .footer__powered__inner__content__data__logo { padding-right: 100px; } @media (max-width: 768px) { .footer__powered__inner__content__data__logo { padding-right: 0; } } .footer__powered__inner__content__data__logo a { display: block; margin-left: auto; transition: 0.3s ease; width: 180px; width: 287px; } @media (max-width: 768px) { .footer__powered__inner__content__data__logo a { width: 100%; margin-left: auto; text-align: center; } } .footer__powered__inner__content__data__logo a:hover { opacity: 0.8; } .footer__powered__inner__content__data__logo a span { color: #141414; font-size: 1.8rem; font-weight: 700; line-height: 180%; letter-spacing: normal; } .footer__powered__inner__content__data__logo a img { padding: 30px 53px; } @media (max-width: 768px) { .footer__powered__inner__content__data__logo a img { width: 180px; height: auto; padding: 30px 0; } } .footer__powered__inner__content__data__name { color: #141414; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; line-height: 1.8; } #pagetop { position: fixed; bottom: 165px; right: 40px; cursor: pointer; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, bottom 0.3s; z-index: 99; transform: translateX(calc(100% + 20px)); } @media (max-width: 768px) { #pagetop { bottom: 50px; right: 20px; } } #pagetop:hover { opacity: 0.7 !important; /* Ensure hover effect is visible */ } #pagetop.is-scrolling { opacity: 0.5 !important; /* Adjust as needed */ } .footer__powered__inner__content__data__address { color: #141414; font-size: 1.5rem; font-weight: 400; line-height: 1.8; letter-spacing: normal; } .footer__powered__inner__content__data__pmark { height: 80px; margin-top: 20px; transition: 0.3s ease; width: 80px; } @media (max-width: 768px) { .footer__powered__inner__content__data__pmark { width: 60px; height: 60px; margin: 0 auto; } } .footer__powered__inner__content__data__pmark:hover { opacity: 0.8; } .footer__bottom { padding: 50px 0; } @media (max-width: 768px) { .footer__bottom { padding: 0 0 20px; } } .footer__bottom__inner { display: flex; justify-content: space-between; margin: 0 auto; max-width: 1200px; padding: 0 20px; } @media (max-width: 768px) { .footer__bottom__inner { padding: 0 22px; flex-direction: column-reverse; align-items: center; gap: 20px; justify-content: unset; } } .footer__bottom__inner .copy { color: #c9ced1; display: inline-block; font-size: 1.1rem !important; line-height: normal; letter-spacing: normal; } .footer__bottom__inner .links { display: flex; gap: 16px; } @media (max-width: 768px) { .footer__bottom__inner .links { margin-top: 10px; flex-direction: column; gap: 0; } } .footer__bottom__inner .links a { color: #15141b; text-decoration: underline; font-size: 1.2rem; letter-spacing: 0.1em; transition: 0.3s ease; line-height: 1.8; } /* Templates */ .section-header { position: relative; } .section-header h1 { font-size: 35px; line-height: 1.5; font-weight: 700; } .section-header h2 { font-size: 32px; line-height: 48px; position: relative; z-index: 1; display: block; font-weight: 700; margin-bottom: 40px; } .section-header h3 { font-size: 28px; line-height: 42px; position: relative; z-index: 1; display: block; font-weight: 700; margin-bottom: 40px; } .section-header h1.u-textcolor--default, .section-header h2.u-textcolor--default, .section-header h3.u-textcolor--default { color: ; } h4 { font-size: 24px; font-weight: 700; line-height: 36px; } h5 { font-size: 20px; font-weight: 700; line-height: 30px; } .section-header:has(.subtitle) h2, .section-header:has(.subtitle) h3 { margin-top: 40px; } .section-header .border { top: -6px; content: ""; height: 4px; left: 50%; position: absolute; text-align: center; transform: translateX(-50%); width: 30px; z-index: 1; border-radius: 50px; } .section-header .border.u-bgcolor--default { background-color: ; } .section-header:has(.tar .border) { text-align: right; } .section-header .subtitle { font-family: ; font-weight: 700; left: 50%; position: absolute; text-align: center; transform: translate(-50%, -50%); z-index: 0; width: 100%; top: -10px; } .section-header .subtitle:has(+ h2 .border), .section-header .subtitle:has(+ h3 .border) { top: -26px; } .section-header .subtitle.u-textcolor--default { color: ; } .section-header .subtitle { font-size: 18px; } .section-header .subtitle:has(+ h3) { font-size: 15px; } .section-header .subtitle:has(+.tal) { text-align: left; } .section-header:has(h2.tal) .border { left: 29px; width: 55px; } .section-header:has(h3.tal) .border { left: 16px; } .section-header .subtitle:has(+.tar) { text-align: right; } .section-header:has(h2.tar) .border { right: -23px; left: auto; width: 55px; } .section-header:has(h3.tar) .border { right: -13px; left: auto; } .section-content .section-text { margin: 56px 0 40px; } @media screen and (max-width: 768px) { .section-header h1 { font-size: 28px; line-height: 1.4; } .section-header h2, .section-header h2:has(.border), .section-header h2:has(.subtitle) { font-size: 28px; } .section-header h3, .section-header h3:has(.border), .section-header h3:has(.subtitle) { font-size: 22px; } .section-header h2 + .subtitle, .section-header h3 + .subtitle { font-size: 65px; } .section-header:has(h2 + .subtitle), .section-header:has(h3 + .subtitle) { margin: 0 0 30px; } .section-header .subtitle { font-size: 16px; } .section-content .section-text { margin: 30px 0 40px; } } .section-cta, .btn_disp { display: block; position: relative; } .u-img-wrap, .u-img-wrap img { max-width: 100%; height: auto; } .section-text ul, .text-content ul { margin-top: 20px; } .section-text ul li::marker, .text-content ul li::marker { content: ''; } .section-text ul li, .text-content ul li { margin-left: 30px; line-height: 2; position: relative; font-size: 16px; } .section-text ul li:before, .text-content ul li:before { content: ''; width: 15px; height: 15px; background: #00479C; position: absolute; top: 17px; transform: translateY(-50%); left: -25px; border-radius: 100%; } .section-text ul.circle li:before, .text-content ul.circle li:before { background: initial; border: 2px solid #00479C; width: 13px; height: 13px; } .section-text ul.square li:before, .text-content ul.square li:before { border-radius: 0; left: -23px; } .grid { display: grid; } .grid.column3 { grid-template-columns: repeat(3, 1fr); gap: 40px 24px; } @media screen and (max-width: 936px) { .grid.column3 { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 639px) { .grid.column3 { grid-template-columns: repeat(1, 1fr); } } .u-textcolor--AEB2B7 { color: #AEB2B7; } /*lp-contents*/ .lp-contents .brsp { display: none; } @media (max-width: 768px) { .lp-contents .brsp { display: block; } } .lp-contents h2 { font-size: 4rem; line-height: 140%; position: relative; } @media (max-width: 768px) { .lp-contents h2 { font-size: 2.4rem; } } /*Innovation campaign*/ .lp-innovation-campaign { font-family: "Noto Sans JP", sans-serif; font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 1.8; color: #333; } @media (max-width: 1200px) { .lp-innovation-campaign .lp-container { padding: 0 20px; } } .lp-innovation-campaign .hero { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-campaign/bg-hero.jpg); background-size: cover; background-position: center; padding: 224px 0; font-family: "Noto Serif JP", serif; } @media (max-width: 768px) { .lp-innovation-campaign .hero { padding: 112px 0; } } @media (max-width: 550px) { .lp-innovation-campaign .hero { min-height: 90svh; display: flex; align-items: center; padding: 0; background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-campaign/hero-sp.jpg); } .lp-innovation-campaign .hero .hero__content { margin-top: -50px; } } .lp-innovation-campaign .hero .hero__title { color: #fff; font-size: 8rem; font-weight: 700; line-height: 1.2; margin-bottom: 28px; } @media (max-width: 768px) { .lp-innovation-campaign .hero .hero__title { font-size: 6.2rem; } } @media (max-width: 500px) { .lp-innovation-campaign .hero .hero__title { line-height: 1.2; font-size: 5.4rem; } } .lp-innovation-campaign .hero .hero__titleBottom { color: #fff; line-height: 1.5; font-size: 3.6rem; text-shadow: 0px 0px 10px var(--primary-web); } @media (max-width: 768px) { .lp-innovation-campaign .hero .hero__titleBottom { font-size: 2.4rem; } } .lp-innovation-campaign .cta-banner { max-width: 800px; margin: 0 auto 0; } .lp-innovation-campaign .cta-banner .container { transition: filter 300ms ease; filter: brightness(1); } .lp-innovation-campaign .cta-banner .container:hover { filter: brightness(1.2); } .lp-innovation-campaign .cta-banner .container .lp-banner-image { display: block; box-shadow: 0px 5px 25px 0 rgba(28, 47, 25, 0.4); border-radius: 10px; } .lp-innovation-campaign .cta-banner .container .lp-banner-text { display: block; padding: 10px 0; color: #1a0dab; font-size: 1.5rem; font-weight: 400; line-height: 180%; text-decoration-line: underline; } .lp-innovation-campaign .hero-bottom { margin: -45px auto 0; background: unset !important; } .lp-innovation-campaign h2.border-left { padding-left: 2rem; } .lp-innovation-campaign h2.border-left:before { content: ""; height: 1lh; width: 4px; background: var(--primary-web); display: block; border-radius: 30px; position: absolute; left: 0px; top: 2%; } .lp-innovation-campaign .intro .intro__content { margin-top: 40px; } @media (max-width: 768px) { .lp-innovation-campaign .intro .intro__content { margin-top: 20px; } } .lp-innovation-campaign .assignment { background: #f0fbcc !important; } .lp-innovation-campaign .assignment .assignment__grid { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } @media (max-width: 768px) { .lp-innovation-campaign .assignment .assignment__grid { gap: 20px; grid-template-columns: 1fr; margin-top: 40px; } } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item { background: #fff; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 30px; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__title { display: flex; flex-direction: column; align-items: center; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__title span { background: var( --Middle-gradate, linear-gradient(90deg, var(--primary-web) 0%, #87aa5c 100%) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2rem; font-weight: 700; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__title strong { background: var( --Middle-gradate, linear-gradient(90deg, var(--primary-web) 0%, #87aa5c 100%) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Noto Serif JP" serif; font-size: 8.8rem; font-weight: 700; line-height: 100%; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item h3 { font-size: 2rem; font-weight: 700; line-height: 150%; text-align: center; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__image { width: 180px; height: 120px; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__text { margin-left: 20px; } .lp-innovation-campaign .assignment .assignment__grid .assignment__grid__item .assignment__grid__item__text li { list-style: disc; } .lp-innovation-campaign .cta-banner-sec h2 { font-size: 3.5rem; line-height: 140%; margin-bottom: 24px; } @media (max-width: 768px) { .lp-innovation-campaign .cta-banner-sec h2 { font-size: 2.4rem; margin-bottom: 20px; } } .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom { display: flex; justify-content: center; gap: 20px; position: relative; margin-top: 80px; padding-top: 80px; } @media (max-width: 768px) { .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom { flex-wrap: wrap; gap: 30px; margin-top: 30px; padding-top: 30px; } } .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom:before { content: ""; position: absolute; width: 1000px; height: 1px; background: var(--primary-web); top: 0; } @media (max-width: 768px) { .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom:before { width: 90%; } } .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom .cta-banner-bottom-item { filter: brightness(1); transition: filter 0.3s ease; max-width: 390px; width: 100%; } @media (max-width: 768px) { .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom .cta-banner-bottom-item { max-width: unset; width: 90%; } } .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom .cta-banner-bottom-item:hover { filter: brightness(1.2); } .lp-innovation-campaign .cta-banner-sec .cta-banner-bottom .cta-banner-bottom-item img { box-shadow: 0px 0px 20px 0px rgba(135, 170, 92, 0.5); border-radius: 10px; } .lp-innovation-campaign .resource__section { background: #ffffea !important; } .resource__section .container { max-width: 1200px; } .lp-innovation-campaign .resource__section .mod_form_twocolumn { margin-top: 70px !important; } @media (max-width: 768px) { .lp-innovation-campaign .resource__section .mod_form_twocolumn { margin-top: 30px !important; } } .lp-innovation-campaign .resource__section .mod_form_twocolumn h3 { font-size: 3rem; line-height: 140%; } @media (max-width: 1200px) { .lp-innovation-campaign .resource__section .mod_form_twocolumn h3 { font-size: 2.6rem; } } @media (max-width: 768px) { .lp-innovation-campaign .resource__section .mod_form_twocolumn h3 { font-size: 2rem; } } .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__image { margin: 60px 0; } @media (max-width: 768px) { .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__image { margin: 30px 0; } } .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__text strong { font-size: 2.4rem; font-weight: 700; line-height: 140%; } @media (max-width: 768px) { .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__text strong { font-size: 1.8rem; } } .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__text ul { margin: 24px 0; } .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__text ul li { line-height: 2; } .lp-innovation-campaign .resource__section .mod_form_twocolumn .resource__content__left__text p { font-size: 16px; font-weight: 400; line-height: 150%; } .lp-innovation-campaign .official { background-color: #f0fbcc !important; } .lp-innovation-campaign .official h2 { font-size: 3rem; } @media (max-width: 768px) { .lp-innovation-campaign .official h2 { font-size: 3rem; } } .lp-innovation-campaign .official .official__image { width: 225px; margin: 40px auto 0; } .lp-innovation-campaign .powered { padding: 76px 0 !important; } @media (max-width: 768px) { .lp-innovation-campaign .powered { padding: 35px 0 !important; } } .lp-innovation-campaign .powered h2 { font-size: 3rem; } .lp-innovation-campaign .powered .powwerdby__data { display: grid; margin-top: 40px; grid-template-columns: 1fr 1fr; } @media (max-width: 768px) { .lp-innovation-campaign .powered .powwerdby__data { grid-template-columns: 1fr; gap: 40px; } } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo { padding-right: 120px; } @media (max-width: 768px) { .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo { padding-right: 0; margin: 0 auto; } } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo a { display: block; width: 180px; margin-left: auto; transition: 300ms ease; width: 287px; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo a:hover { opacity: 0.8; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo a p { color: #141414; font-size: 18px; font-weight: 700; line-height: 180%; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo a img { padding: 30px 53px; } @media (max-width: 768px) { .lp-innovation-campaign .powered .powwerdby__data .powwerdby__logo a { padding: 0; margin: 0; } } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .powwerdby__name { font-size: 1.8rem; font-weight: 700; color: #141414; margin-bottom: 8px; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .powwerdby__address { color: #141414; font-size: 15px; font-weight: 400; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .sns-icons { display: flex; gap: 25px; margin: 16px 0; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .sns-icons a { transition: 300ms ease; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .sns-icons a:hover { opacity: 0.8; } @media (max-width: 768px) { .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .sns-icons { align-items: baseline; justify-content: center; } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .sns-icons a { width: 30px; } } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .p-mark { height: 80px; width: 80px; transition: 300ms ease; margin-top: 20px; } @media (max-width: 768px) { .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .p-mark { margin: 20px auto; width: 60px; height: 60px; } } .lp-innovation-campaign .powered .powwerdby__data .powwerdby__text .p-mark:hover { opacity: 0.8; } .lp-innovation-campaign .footer-bottom { border-top: #c9ced1 solid 1px; margin: 0 auto; max-width: 1200px; } .lp-innovation-campaign .footer-bottom .footer-bottom__content { padding: 0 22px; display: flex; justify-content: space-between; align-items: flex-end; } @media (max-width: 768px) { .lp-innovation-campaign .footer-bottom .footer-bottom__content { display: block; } } .lp-innovation-campaign .footer-bottom .footer-bottom__content .copy { font-size: 1.1rem !important; color: #c9ced1; line-height: normal; display: inline-block; } .lp-innovation-campaign .footer-bottom .footer-bottom__content .links { display: flex; gap: 16px; } .lp-innovation-campaign .footer-bottom .footer-bottom__content .links a { transition: 300ms ease; font-size: 1.4rem; letter-spacing: 0.1em; } @media (max-width: 768px) { .lp-innovation-campaign .footer-bottom .footer-bottom__content .links a { font-size: 1.3rem; } } .lp-innovation-campaign .footer-bottom .footer-bottom__content .links a:hover { text-decoration: underline; } /*lp-innovationhub-2025spring*/ .lp-innovationhub-2025spring { font-family: "Noto Sans JP", sans-serif; font-size: 1.8rem; font-style: normal; font-weight: 400; line-height: 1.8; color: #333; } .lp-innovationhub-2025spring .hero .lp-container { max-width: 100%; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .lp-container { padding: 0 20px; } } .lp-innovationhub-2025spring .lp-container .hero__content { display: flex; } @media (max-width: 768px) { .lp-innovationhub-2025spring .lp-container .hero__content { flex-direction: column-reverse; } } .lp-innovationhub-2025spring .hero .lp-container { padding: 0 !important; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__image { width: 60%; } @media (max-width: 768px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__image { width: 100%; height: 300px; } } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__image img { object-fit: cover; height: 100%; width: 100%; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text { width: 40%; background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/hero-bg.svg); padding: 50px 110px 50px 80px; background-size: cover; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text { padding: 50px; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text { width: 100%; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text { padding: 50px 20px; } } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--logo { width: 165px; height: 49px; margin-bottom: 20px; margin-left: auto; } @media (max-width: 768px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--logo { margin-left: unset; margin-right: auto; } } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--title { color: #fffdf9; font-family: "Inter Tight"; font-size: 8rem; font-weight: 200; line-height: 120%; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--title { font-size: 5.5rem; } } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--text { color: #fffdf9; text-shadow: 0px 0px 10px var(--primary-web); font-size: 18px; font-weight: 500; line-height: 180%; margin: 24px 0 36px; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--data strong { color: #cdf986; font-size: 18px; font-weight: 700; line-height: 180%; display: block; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--data span { color: #fffdf9; font-size: 18px; font-weight: 400; line-height: 180%; display: block; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--data.hero__content__text--data--bottom { margin-top: 16px; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--button.button { border-radius: 40px; background: #cdf986; padding: 14px 40px 15px 40px; color: #000; text-align: center; font-family: Helvetica; font-size: 15px; font-weight: 700; line-height: 140%; margin: 36px auto 0; width: fit-content; display: block; transition: 300ms ease; } .lp-innovationhub-2025spring .lp-container .hero__content .hero__content__text .hero__content__text--button.button:hover { background: #caec93; } .lp-innovationhub-2025spring h2 { color: #15141b; font-size: 3.5rem; font-weight: 500; line-height: 140%; } .lp-innovationhub-2025spring:has(:not(.hero)) .button { border-radius: 40px; background: #cdf986; margin: 0 auto; max-width: 378px; padding: 26px 0; color: #000; font-size: 18px; font-weight: 700; line-height: 180%; display: block; transition: 300ms ease; text-align: center; } @media (max-width: 768px) { .lp-innovationhub-2025spring:has(:not(.hero)) .button { padding: 16px 0; } } .lp-innovationhub-2025spring .button:hover { background: #caec93; } .lp-innovationhub-2025spring .about .about__content .about__main__text { margin: 40px 0; } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex { margin: 37px 0; display: grid; grid-template-columns: 280px 280px 280px 280px; flex-wrap: wrap; gap: 26px; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex { margin: 37px 0; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex { flex-direction: column; } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item { width: 100%; } } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__image { width: 280px; height: 280px; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__image { width: 100%; height: 280px; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__image { width: 100%; height: auto; aspect-ratio: 1/1; } } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__image img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item { flex: unset; width: 100%; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item { flex: unset; width: 100%; } } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text { display: grid; gap: 8px; margin-top: 16px; max-width: 280px; } @media (max-width: 768px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text { max-width: 100%; } } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text .pickup-speakers__content__flex__item__text__title { color: #15141b; font-size: 2.2rem; font-weight: 700; line-height: 140%; } @media (max-width: 768px) { .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text .pickup-speakers__content__flex__item__text__title { font-size: 1.8rem; } } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text .pickup-speakers__content__flex__item__text__data li { color: #15141b; line-height: 160%; } .lp-innovationhub-2025spring .pickup-speakers__content .pickup-speakers__content__flex .pickup-speakers__content__flex__item .pickup-speakers__content__flex__item__text .pickup-speakers__content__flex__item__text__description { color: #15141b; font-size: 15px; font-weight: 400; line-height: 180%; } .lp-innovationhub-2025spring .pickup-speakers__content .more { position: relative; width: fit-content; margin-left: auto; color: #15141b; font-size: 15px; font-weight: 700; line-height: 180%; } .lp-innovationhub-2025spring .pickup-speakers__content .more a { position: relative; padding-right: 20px; margin-right: 16px; } .lp-innovationhub-2025spring .pickup-speakers__content .more a:before { content: ""; background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/icon-right.svg); background-size: cover; width: 20px; height: 20px; display: block; border-radius: 50%; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); transition: 300ms ease; } .lp-innovationhub-2025spring .pickup-speakers__content .more a:hover:before { transform: translateY(-50%) rotate(450deg); } .lp-innovationhub-2025spring section.base { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/bg-cta-1.png); background-size: cover; } @media (max-width: 768px) { .lp-innovationhub-2025spring section.base { background-position: center; } } .lp-innovationhub-2025spring .base h2 { color: #fffdf9; font-size: 3rem; font-weight: 700; line-height: 140%; } .lp-innovationhub-2025spring .base .base__sub-text strong { color: #fffdf9; display: block; text-shadow: 0px 0px 10px var(--primary-web); font-size: 18px; font-weight: 700; line-height: 180%; margin: 32px 0 16px; } .lp-innovationhub-2025spring .base .base__description { color: #fffdf9; text-shadow: 0px 0px 10px var(--primary-web); font-size: 15px; font-weight: 400; line-height: 180%; margin-bottom: 40px; } .lp-innovationhub-2025spring section.base.zone2 { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/zone2.png); } .lp-innovationhub-2025spring section.base.zone3 { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/zone3.png); } .lp-innovationhub-2025spring section.base.zone4 { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/zone4.png); } .lp-innovationhub-2025spring section.base.zone5 { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/Overlay.png); } .lp-innovationhub-2025spring section.base.zone6 { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/zone6.png); } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex { margin: 37px 0 0; display: grid; grid-template-columns: 280px 280px 280px 280px; gap: 26px; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex { gap: 20px; justify-content: space-around; display: flex; flex-wrap: wrap; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex { flex-direction: column; } } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item { flex: 1 1 20%; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item { flex: unset; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item { flex: unset; width: 100%; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item { flex: unset; width: 100%; } } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__image { width: 280px; height: 280px; } @media (max-width: 768px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__image { width: 100%; height: auto; aspect-ratio: 1/1; } } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__image img { width: 100%; height: 100%; object-fit: cover; } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text { display: grid; gap: 8px; margin-top: 16px; max-width: 280px; } @media (max-width: 768px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text { max-width: 100%; } } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text .speakers__content__flex__item__text__title { color: #15141b; font-size: 2.2rem; font-weight: 700; line-height: 140%; } @media (max-width: 768px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text .speakers__content__flex__item__text__title { font-size: 1.8rem; } } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text .speakers__content__flex__item__text__data li { color: #15141b; line-height: 160%; } .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text .speakers__content__flex__item__text__description { color: #15141b; font-size: 15px; font-weight: 400; line-height: 180%; max-width: 280px; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .speakers__content .speakers__content__flex .speakers__content__flex__item .speakers__content__flex__item__text .speakers__content__flex__item__text__description { max-width: 100%; } } .lp-innovationhub-2025spring .event-booth .lp-container { max-width: 100%; padding: 0; } .lp-innovationhub-2025spring .event-booth__content { padding: 70px 0; display: flex; align-items: center; } @media (max-width: 768px) { .lp-innovationhub-2025spring .event-booth__content { padding: 40px 0; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .event-booth__content { display: block; } } .lp-innovationhub-2025spring .event-booth__content .event-booth__content__left { width: 60%; } @media (max-width: 768px) { .lp-innovationhub-2025spring .event-booth__content .event-booth__content__left { width: 55%; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .event-booth__content .event-booth__content__left { width: 100%; } } .lp-innovationhub-2025spring .event-booth__content .event-booth__content__left img { width: 100%; height: 100%; object-fit: cover; } .lp-innovationhub-2025spring .event-booth__content .event-booth__content__right { margin: 0 20px; width: calc(40% - 40px); } @media (max-width: 768px) { .lp-innovationhub-2025spring .event-booth__content .event-booth__content__right { width: calc(45% - 40px); } } @media (max-width: 550px) { .lp-innovationhub-2025spring .event-booth__content .event-booth__content__right { margin: 20px 0 0; width: 100%; padding: 0 20px; } } .lp-innovationhub-2025spring .event-booth__content .event-booth__content__right img { width: 100%; height: 100%; object-fit: cover; } .lp-innovationhub-2025spring .access { background: #f8fbe9; } .lp-innovationhub-2025spring .access .access__content { display: flex; gap: 42px; } @media (max-width: 768px) { .lp-innovationhub-2025spring .access .access__content { flex-direction: column-reverse; } } .lp-innovationhub-2025spring .access .access__content__text, .lp-innovationhub-2025spring .access .access__content__map { flex: 1; } @media (max-width: 768px) { .lp-innovationhub-2025spring .access .access__content__map { width: 100vw; margin: -40px calc(50% - 50vw) 0; } .lp-innovationhub-2025spring .access .access__content__map .hs-responsive-embed { max-width: 100% !important; height: 300px !important; } .lp-innovationhub-2025spring .access .access__content__map .hs-responsive-embed iframe { height: 300px !important; } } .lp-innovationhub-2025spring .access .access__content__text__desc { color: #15141b; font-family: "Inter Tight"; font-size: 20px; font-weight: 400; line-height: 135%; letter-spacing: 0.25px; margin: 16px 0 26px; } .lp-innovationhub-2025spring .access h3 { color: #15141b; font-family: "Inter Tight"; font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -0.25px; margin-bottom: 16px; } .lp-innovationhub-2025spring .access .access__content__text__address { color: #15141b; font-family: "Inter Tight"; font-size: 17px; font-weight: 400; line-height: 27px; } .lp-innovationhub-2025spring .access .access__content__text__link { display: flex; padding: 21px 35px; flex-direction: column; align-items: flex-start; border-radius: 100px; border: 3px solid #172d14; width: fit-content; color: #15141b; text-align: center; font-family: "Inter Tight"; font-size: 17px; font-weight: 700; line-height: 27px; margin-top: 32px; transition: 300ms ease; } @media (max-width: 768px) { .lp-innovationhub-2025spring .access .access__content__text__link { padding: 15px 0px; width: 80%; text-align: center; display: block; margin: 32px auto 0; } } .lp-innovationhub-2025spring .access .access__content__text__link:hover { border-radius: 0px; background: #172d14; color: #fff; } .lp-innovationhub-2025spring .ftr-contact { background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/bg_ftr_cta.png); background-size: cover; background-position: right; } .lp-innovationhub-2025spring .ftr-contact h2 { text-align: center; color: #fff; font-size: 3rem; font-weight: 700; line-height: 140%; margin-bottom: 55px; } .lp-innovationhub-2025spring .spring-footer { background: #000; } .lp-innovationhub-2025spring .spring-footer .spring-footer__content { padding: 64px 20px; display: flex; justify-content: space-between; } @media (max-width: 768px) { .lp-innovationhub-2025spring .spring-footer .spring-footer__content { justify-content: center; align-items: center; flex-direction: column; } } .lp-innovationhub-2025spring .spring-footer .lp-container .spring-footer__sns ul { display: flex; gap: 23px; } @media (max-width: 768px) { .lp-innovationhub-2025spring .spring-footer .lp-container .spring-footer__logo { width: 220px; } .lp-innovationhub-2025spring .spring-footer .lp-container .spring-footer__sns li { width: 30px; } .lp-innovationhub-2025spring .spring-footer .lp-container .spring-footer__sns ul { margin-top: 50px; } } .lp-innovationhub-2025spring .timeline { position: relative; } .lp-innovationhub-2025spring .timeline h2 { margin-bottom: 40px; } /* .lp-innovationhub-2025spring .timeline [data-time="10:00 - 10:20"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="10:30 - 10:50"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="11:00 - 11:30"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="12:00 - 12:30"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="13:00 - 13:20"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="13:30 - 13:50"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="14:00 - 14:30"] { margin:0; } .lp-innovationhub-2025spring .timeline [data-time="15:00 - 15:30"] { margin:0; } */ .lp-innovationhub-2025spring .timeline .timline__header { display: grid; grid-template-columns: 1fr 1fr 1fr; place-items: center; inset: 0; text-align: center; margin-left: 55px; position: sticky; top: 0; gap: 4px; margin-bottom: 8px; } .lp-innovationhub-2025spring .timeline .timline__header dl { padding: 16px; color: #fff; font-weight: 700; background: #3c7318; width: 100%; } .lp-innovationhub-2025spring .timeline .timline__header dl:nth-child(2) { background: #87aa5c; } .lp-innovationhub-2025spring .timeline .timline__header dl:nth-child(3) { background: var(--primary-web); } .lp-innovationhub-2025spring .timeline .timline__header dl dt { font-size: 3rem; line-height: 140%; border-bottom: solid 2px; padding-bottom: 12px; margin-bottom: 12px; } .lp-innovationhub-2025spring .timeline .timeline__time { position: absolute; background: rgba(255, 255, 255, 0.5); } .lp-innovationhub-2025spring .timeline .timeline__time span { color: #15141b; font-size: 15px; font-weight: 400; line-height: 180%; display: block; } .lp-innovationhub-2025spring .timeline .timeline__time div { flex-direction: column; display: flex; justify-content: space-between; } .lp-innovationhub-2025spring .timeline .timeline__body { margin-left: 55px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column article { display: flex; padding: 30px 16px; flex-direction: column; align-items: flex-start; gap: 16px; cursor: pointer; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column.timeline__day1 article { border: 8px solid #3c7318; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column.timeline__day2 article { border: 8px solid #87aa5c; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column.timeline__day3 article { border: 8px solid var(--primary-web); } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content { display: flex; align-items: center; gap: 16px; align-self: stretch; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content div.timeline__body__content__text { width: calc(100% - 100px); display: flex; flex-direction: column; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content div.timeline__body__content__text .timeline__body__content__title { font-size: 16px; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content .timeline__body__content__company { color: #15141b; font-size: 16px; font-weight: 700; line-height: 140%; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content span.timeline__body__content__text { color: #15141b; font-size: 15px; font-weight: 400; line-height: 180%; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content .timeline__body__content__img { width: 100px; height: 100px; } .lp-innovationhub-2025spring .timeline .timeline__body .timeline__column .timeline__body__content .timeline__body__content__img img { width: 100%; height: 100%; object-fit: cover; } .lp-innovationhub-2025spring .timeline .timeline__body__modal { right: -100%; position: fixed; top: 0; transition: 300ms ease-in-out; background: #fff; width: 30vw; height: 100svh; z-index: 2; overflow: scroll; padding: 40px 16px; cursor: auto; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .timeline .timeline__body__modal { width: 40vw; } } @media (max-width: 1048px) { .lp-innovationhub-2025spring .timeline .timeline__body__modal { width: 50vw; } } @media (max-width: 768px) { .lp-innovationhub-2025spring .timeline .timeline__body__modal { width: 60vw; } } @media (max-width: 550px) { .lp-innovationhub-2025spring .timeline .timeline__body__modal { width: 100vw; } } .lp-innovationhub-2025spring .timeline .timeline__day1 .timeline__body__modal { border: 8px solid #3c7318; } .lp-innovationhub-2025spring .timeline .timeline__day2 .timeline__body__modal { border: 8px solid #87aa5c; } .lp-innovationhub-2025spring .timeline .timeline__day3 .timeline__body__modal { border: 8px solid var(--primary-web); } .lp-innovationhub-2025spring .timeline .timeline__body__modal.open { right: 0; transition: 300ms ease-in-out; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .modalClose { appearance: none; -webkit-appearance: none; border: none; background-color: unset; background-image: url(https://48962580.fs1.hubspotusercontent-na1.net/hubfs/48962580/innovation-hub-2025/closeBtn.png); height: 30px; width: 30px; display: block; margin-left: auto; margin-top: -20px; cursor: pointer; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: #15141b; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__title { font-size: 18px; font-weight: 700; line-height: 180%; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__text { font-size: 15px; font-weight: 400; line-height: 180%; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__speaker { display: flex; align-items: flex-start; gap: 16px; align-self: stretch; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__speaker img { width: 100px; height: 100%; object-fit: cover; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__speaker .timeline__body__modal__content__speaker__text { width: calc(100% - 100px); } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__speaker .timeline__body__modal__content__speaker__text strong { font-size: 22px; font-style: normal; font-weight: 700; line-height: 140%; display: block; } .lp-innovationhub-2025spring .timeline .timeline__body__modal .timeline__body__modal__content .timeline__body__modal__content__speaker .timeline__body__modal__content__speaker__text .timeline__body__modal__content__speaker__company { font-size: 18px; font-style: normal; font-weight: 400; line-height: 160%; } @media (max-width: 1200px) { .lp-innovationhub-2025spring .timeline .timeline__content { overflow: scroll; } .lp-innovationhub-2025spring .timeline .timeline__content .timeline__contant { min-width: 1200px; } } /* @media ( max-width: 1048px ){ .lp-innovationhub-2025spring .timeline .timeline__content .timeline__contant{ min-width: 150vw; } } @media ( max-width: 820px ){ .lp-innovationhub-2025spring .timeline .timeline__content .timeline__contant{ min-width: 200vw; } } @media ( max-width: 550px ){ .lp-innovationhub-2025spring .timeline .timeline__content .timeline__contant{ min-width: 400vw; } } */ .lp-innovationhub-2025spring.no-scroll { overflow: hidden; transition: 300ms ease; } .lp-innovationhub-2025spring.no-scroll:before { content: ""; width: 100%; height: 100%; display: block; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 1; } .seminar-lp .lp-logo-section { background: #f1f5f2; padding-top: 80px; } .seminar-lp.it-week .lp-logo-section { background: #fff; padding: 30px 0; } @media (max-width: 768px) { .seminar-lp .lp-logo-section { padding: 30px 20px 0; margin-bottom: -30px; } .seminar-lp.it-week .lp-logo-section { padding: 30px 20px 0px; margin-bottom: 20px; } } @media (max-width: 768px) { .it-week .form__top { padding: 0 20px; } } .it-week .form__top h2 { color: #000; font-size: 3.5rem; font-weight: 700; line-height: 140%; margin-bottom: 16px; } @media (max-width: 768px) { .it-week .form__top h2 { font-size: 2.4rem; } } .it-week .form__top .form__top__content { display: flex; flex-direction: column; gap: 16px; color: #444; font-size: 1.2rem; font-weight: 500; line-height: 134%; letter-spacing: 0.13px; } .it-week .form__top .form__top__content a { color: #444444; } .it-week .form__top .form__top__content a:hover { text-decoration: underline; } .it-week .mod_one_column_form { background: #f8fbea; display: flex; width: 980px; justify-content: center; align-items: center; margin: 40px auto 0; } @media (max-width: 980px) { .it-week .mod_one_column_form { width: 100%; } } .it-week .mod_one_column_form .form-wrap { background: #f8fbea; padding: 70px 0; max-width: 660px; } @media (max-width: 660px) { .it-week .mod_one_column_form .form-wrap { padding: 40px 20px; max-width: 100%; } } .it-week.seminar-lp form.hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; } .it-week.seminar-lp form.hs-form fieldset label .hs-form-required:after { background: unset; color: red; content: "*"; font-size: 12px !important; font-weight: 700; line-height: 180%; top: 0; left: 0; padding: 0; margin: 0; } .it-week.seminar-lp form.hs-form fieldset label.not-required:after { content: unset; } .it-week.seminar-lp form.hs-form fieldset label:not(.hs-form-radio-display):not(.hs-error-msg):not( .hs-form-booleancheckbox-display ):not(.hs-form-checkbox-display) { font-weight: 700; } .it-week.seminar-lp form.hs-form fieldset .hs-form-booleancheckbox label .hs-form-required { position: relative; } .it-week.seminar-lp form.hs-form fieldset .hs-form-booleancheckbox label:has(.hs-form-required) { margin: 0 auto 0 0px; } .it-week.seminar-lp form.hs-form .hs-button.primary { background: #cdf986; padding: 15px 40px; color: #000; } /* Common */ /* 関連記事表示 */ #lp-content section.lists { padding: 100px 0; } @media screen and (max-width: 1024px) { #lp-content section.lists { padding: 60px 0; } } .form-1column-content, .form-2column-content { padding: 60px 0; margin-top: 80px; background: #F5F5F5; } /* 2Column */ .form-2column-content .wrapper { margin: 0 auto; max-width: 1200px; padding: 0 20px; } .form-2column-content .wrapper section.contents { display: flex; justify-content: space-between; gap: 0 50px; } .form-2column-content .wrapper section.contents .info { width: 47.5%; } .form-2column-content h1 { font-size: 30px; font-style: normal; font-weight: 700; line-height: 1.5; margin-bottom: 30px; color: #000000; } .form-2column-content .wrapper section.contents .info .img { align-items: center; display: flex; justify-content: center; min-height: 270px; max-width: 550px; margin-bottom: 30px; } .form-2column-content .wrapper section.contents .info .img img { height: auto; max-height: 100%; max-width: 100%; min-height: 120px; min-width: 120px; width: 100%; } .form-2column-content .wrapper section.contents .info h2 { color: #000000; margin-bottom: 10px; font-size: 20px; font-style: normal; font-weight: 700; line-height: 160%; letter-spacing: 2px; margin-top: 30px; } .form-2column-content .wrapper section.contents .info .lists li { font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: 1.6px; padding-left: 25px; position: relative; margin-top: 4px; } .form-2column-content .wrapper section.contents .info .lists li:first-child { margin-top: 0; } .form-2column-content .wrapper section.contents .info .lists li:before { content: ''; width: 15px; height: 15px; background: #1C2F19; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; border-radius: 100%; } .form-2column-content .wrapper section.contents .info .lists.frame { border: 1px solid #000000; padding: 20px; background: #fff; } .form-2column-content .wrapper section.contents .info .lists.frame li { font-size: 15px; font-weight: 700; line-height: 1.8; letter-spacing: 1.6px; margin-top: 10px; } .form-2column-content .wrapper section.contents .info .lists.frame li:before { top: 13px; } .form-2column-content .wrapper section.contents .info .lists.frame li span { font-weight: 400; } .form-2column-content .wrapper section.contents .info p.text { font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: 1.6px; margin-top: 10px; } .form-2column-content .wrapper section.contents .form { width: 50%; height: fit-content; background: #FAFAFA; padding: 40px 35px; border-radius: 8px; max-width: 560px; } .form-2column-content .wrapper section.contents .form h3 { font-size: 22px; font-weight: 700; line-height: 1.45; color: #000000; text-align: center; margin-bottom: 30px; } .form-2column-content .wrapper section.contents .form p.desc { font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: 1.4px; color: #000000; } @media screen and (max-width: 1024px) { .form-2column-content .wrapper section.contents { flex-direction: column; margin: 0 auto; max-width: 700px; } .form-2column-content .wrapper section.contents .info { width: 100%; } .form-2column-content .wrapper section.contents .info h2 { font-size: 18px; } .form-2column-content .wrapper section.contents .info h3 { font-size: 18px; } .form-2column-content .wrapper section.contents .info .img { min-height: auto; max-width: initial; } .form-2column-content .wrapper section.contents .info .img img { height: auto; max-width: 100%; min-width: auto; width: auto; padding: 0; } .form-2column-content .wrapper section.contents .form { width: 100%; padding: 40px 20px; } .form-2column-content .wrapper section.contents .form p.desc { font-size: 15px; } } @media screen and (max-width: 500px) { form.hs-form fieldset ul.inputs-list li.hs-form-checkbox, form.hs-form fieldset ul.inputs-list li.hs-form-radio { width: 100%; } } .search-results-top { padding: 70px 0; background: #F8FBFF; } .search-results-top .wrapper { max-width: 940px; margin: 0 auto; padding: 0 20px; } .search-results-top .wrapper h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.45; margin-bottom: 20px; } .search-results-top .wrapper .search-page-form { width: 100%; height: 50px; display: flex; } .search-results-top .wrapper .search-page-form .input-keyword { font-size: .875rem;; line-height: 1.5; width: 100%; background: var(--white); border: 1px solid #DDDDDD; border-right: 0; padding: 15px 10px 15px 28px; border-radius: 3px 0 0 3px; } .search-results-top .wrapper .search-page-form .input-keyword:focus { border: 1px solid var(--light-blue); outline: 0; } .search-results-top .wrapper .search-page-form .input-keyword::placeholder { font-size: .875rem;; line-height: 1.5; color: #767676; } .search-results-top .wrapper .search-page-form .search-button { min-width: 50px; height: 50px; background: var(--light-blue); display: flex; align-items: center; justify-content: center; border-radius: 0 3px 3px 0; transition: opacity 0.3s; } .search-results-top .wrapper .search-page-form .search-button:hover { opacity: 0.6; } .search-results-top .wrapper .search-page-form .search-button:disabled { opacity: 1; background: var(--gray); } .search-results-list:not(.search-results-list:has(.search-empty )) { padding: 60px 0; } .search-results-list:not(.search-results-list:has(.search-empty )) .wrapper { max-width: 1240px; margin: 0 auto; padding: 0 20px; } .search-results-list .wrapper .search-empty { text-align: center; background: #F8FBFF; margin: -30px auto 0 auto; padding-bottom: 70px; } .search-results-list .wrapper .search-empty p { line-height: 2; color: var(--dark-gray); } .search-results-list .wrapper .search-empty .cta a { max-width: 290px; width: 100%; height: 71px; display: flex; justify-content: center; align-items: center; background: var(--blue); border-radius: 5px; font-size: 1.25rem; line-height: 1.45; color: var(--white); cursor: pointer; margin: 40px auto auto; transition: background-color .3s; } .search-results-list .wrapper .search-empty .cta a:hover { background-color: var(--light-blue); } .search-results-list .wrapper .result-item { display: flex; grid-column-gap: 40px; padding: 40px 0 40px 20px; border-top: 1px solid #EDEDED; } .search-results-list .wrapper .result-item .hs-search-results__featured-image { max-width: 167px; min-width: 167px; width: 100%; border-radius: 3px; overflow: hidden; } .search-results-list .wrapper .result-item .hs-search-results__featured-image img { width: 100%; object-fit: cover; border-radius: 3px; aspect-ratio: 3 / 2; transition: transform 0.3s; } .search-results-list .wrapper #hsresults li a:hover .result-item .hs-search-results__featured-image img { transform: scale(1.1, 1.1); } .search-results-list .wrapper .result-item .result-texts { display: flex; grid-row-gap: 20px; flex-direction: column; justify-content: center; } .search-results-list .wrapper .result-item .result-texts .title { font-size: 1.375rem; line-height: 1.45; } .search-results-list .wrapper .result-item .result-texts .title h3 { display: inline; background: linear-gradient(var(--black),var(--black)) 0 100%/0 1px no-repeat; position: relative; transition: background .3s; } .search-results-list .wrapper #hsresults li a:hover .result-item .result-texts .title h3 { background-size: 100% 1px; } .search-results-list .result-item .result-texts p { line-height: 1.45; color: var(--dark-gray); display: -webkit-inline-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* pagenation */ .search-results-list .wrapper .page-navi ul.page-numbers { display: flex; justify-content: center; align-items: center; margin-top: 70px; } .search-results-list .wrapper .page-navi ul.page-numbers li.hs-search-results__first-page a.page-number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #F0F4F5; border-radius: 3px; margin-right: 8px; transition: background 0.3s; } .search-results-list .wrapper .page-navi ul.page-numbers li.hs-search-results__last-page a.page-number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #F0F4F5; border-radius: 3px; margin-left: 8px; margin-right: 0; transition: background 0.3s; } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__prev-page a.page-number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #F0F4F5; border-radius: 3px; margin-right: 40px; transition: background 0.3s; } .search-results-list .wrapper .page-navi ul.page-numbers li a.page-number, .search-results-list .wrapper .page-navi ul.page-numbers li span.page-number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 16px; line-height: 2; letter-spacing: 1.6px; color: var(--blue); background: var(--white); border: 1px solid #E6E6E6; border-radius: 3px; margin-right: 8px; transition: background 0.3s; } .search-results-list .wrapper .page-navi ul.page-numbers li a.page-number:hover { color: var(--white); background: var(--blue); border: 1px solid transparent; } .search-results-list .wrapper .page-navi ul.page-numbers li span.page-number.current { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; font-size: 16px; line-height: 2; letter-spacing: 1.6px; color: var(--white); background: var(--blue); border: 1px solid #E6E6E6; border-radius: 3px; margin-right: 8px; } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__next-page a.page-number { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #F0F4F5; border-radius: 3px; margin-left: 32px; transition: background 0.3s; } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__prev-page a.page-number:hover, .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__next-page a.page-number:hover { background: var(--blue); } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__first-page a.page-number:hover svg path, .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__last-page a.page-number:hover svg path, .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__prev-page a.page-number:hover svg path, .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__next-page a.page-number:hover svg path { fill: var(--white); } @media screen and (max-width: 1024px) { .search-results-top { padding: 50px 20px 40px 20px; } .search-results-top .wrapper { padding: 0; } .search-results-top .wrapper h2 { margin-bottom: 30px; } .search-results-top .wrapper .search-page-form .search-button { min-width: 45px; } .search-results-top .wrapper .search-page-form .search-button svg { width: 25px; height: 25px; } .search-results-top .wrapper .search-page-form .input-keyword { padding-left: 20px; } .search-results-list .wrapper .result-item { flex-direction: column; padding: 40px 0; } .search-results-list .wrapper #hsresults { display: flex; flex-wrap: wrap; grid-column-gap: 20px; } .search-results-list .wrapper #hsresults li { width: calc(50% - 10px); } .search-results-list .wrapper #hsresults li:first-child .result-item { padding-top: 0; border: none; } .search-results-list .wrapper #hsresults li:nth-child(2) .result-item { padding-top: 0; border: none; } .search-results-list .wrapper .result-item .hs-search-results__featured-image { max-width: 100%; border-radius: 3px 3px 0 0; } .search-results-list .wrapper .result-item .hs-search-results__featured-image img { height: 100%; border-radius: 3px 3px 0 0; aspect-ratio: 5 / 3; } .search-results-list .wrapper .result-item .result-texts { margin-top: 20px; } .search-results-list .result-item .result-texts p { -webkit-line-clamp: 5; } /* pagenation */ .search-results-list .wrapper .page-navi ul.page-numbers { margin-top: 60px; grid-column-gap: 5px; } .search-results-list .wrapper .page-navi ul.page-numbers li.hs-search-results__first-page a.page-number { width: 35px; height: 35px; margin-right: 0; } .search-results-list .wrapper .page-navi ul.page-numbers li.hs-search-results__last-page a.page-number { width: 35px; height: 35px; margin-left: 0; } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__prev-page a.page-number { width: 35px; height: 35px; margin-right: 0; } .search-results-list .wrapper .page-navi ul.page-numbers li a.page-number, .search-results-list .wrapper .page-navi ul.page-numbers li span.page-number { width: 35px; height: 35px; margin-right: 0; } .search-results-list .wrapper .page-navi ul.page-numbers li span.page-number.current { width: 35px; height: 35px; margin-right: 0; } .search-results-list .wrapper .page-navi ul.page-numbers .hs-search-results__next-page a.page-number { width: 35px; height: 35px; margin-left: 0; } .search-results-list .wrapper .search-empty { padding: 20px 20px 60px; margin-top: 0; } .search-results-list .wrapper .search-empty p { font-size: .9375rem; line-height: 1.8; } } @media screen and (max-width: 768px) { .search-results-list .wrapper #hsresults { display: unset; flex-wrap: unset; grid-column-gap: unset; } .search-results-list .wrapper #hsresults li { width: unset; } .search-results-list .wrapper #hsresults li:nth-child(2) .result-item { padding: 40px 0; border-top: 1px solid #ededed; } } .password-prompt { padding: 90px 0; background: #F8FBFF; } .password-prompt .wrapper { max-width: 640px; margin: 0 auto; padding: 0 20px; } .password-prompt .wrapper .text { font-size: 1.125rem; line-height: 1.5; margin-bottom: 20px; } .password-prompt .wrapper .error-message { font-size: .8125rem; line-height: 1.45; margin-bottom: 5px; color: var(--red); } .password-prompt .wrapper:has(.error-message) form input[type=password] { background: var(--light-red); } .password-prompt .wrapper form { width: 100%; height: 50px; display: flex; align-items: center; } .password-prompt .wrapper form input[type=password] { font-size: .875rem;; line-height: 1.5; width: 100%; height: 50px !important; background: var(--white); border: 1px solid #DDDDDD; border-right: 0; padding: 15px 10px 15px 28px; border-radius: 3px 0 0 3px; margin-top: 0 !important; margin-bottom: 0; } .password-prompt .wrapper form input[type=password]:focus { border: 1px solid var(--light-blue); outline: 0; } .password-prompt .wrapper form input[type=password]::placeholder { font-size: .875rem;; line-height: 1.5; color: #767676; } .password-prompt .wrapper form input[type=submit].hs-button { min-width: 50px; height: 50px; background: var(--light-blue); display: flex; align-items: center; justify-content: center; border-radius: 0 3px 3px 0; transition: opacity 0.3s; color: var(--white); padding: 0 50px; } .password-prompt .wrapper form input[type=submit].hs-button:hover { opacity: 0.6; } @media screen and (max-width: 1024px) { .password-prompt { padding: 60px 0; } .password-prompt .wrapper form input[type=password] { padding-left: 20px; } .password-prompt .wrapper form input[type=submit].hs-button { padding: 0 30px; } } #error-contents { padding-top: 160px; } #error-contents .content { display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(//template.leadplus.co.jp/hubfs/initial/common/bg-blue.webp); background-size: cover; text-align: center; padding: 100px 0; } #error-contents .content h1 { font-size: 2.375rem; font-weight: 700; line-height: 1.45; margin-bottom: 30px; } #error-contents .content .first-text { line-height: 2; margin-bottom: 40px; } #error-contents .content .second-text { line-height: 2; margin-bottom: 60px; } #error-contents .content a { max-width: 290px; width: 100%; height: 70px; display: flex; justify-content: center; align-items: center; background: var(--blue); border-radius: 5px; font-size: 1.25rem; line-height: 1.45; color: var(--white); cursor: pointer; transition: background-color .3s; } #error-contents .content a:hover { background-color: var(--light-blue); } @media screen and (max-width: 1024px) { #error-contents { padding-top: 72px; } #error-contents .content { background-image: url(//template.leadplus.co.jp/hubfs/initial/common/bg-blue.webp); padding: 60px 40px; } #error-contents .content h1 { font-size: 1.75rem; margin-bottom: 40px; } #error-contents .content .first-text { font-size: .9375rem; line-height: 1.8; margin-bottom: 25px; } #error-contents .content .second-text { font-size: .9375rem; line-height: 1.8; margin-bottom: 40px; } } #subscription-contents { padding-top: 160px; } #subscription-contents .content { align-items: center; background-image: url(//template.leadplus.co.jp/hubfs/initial/common/bg-blue.webp); background-size: cover; display: flex; flex-direction: column; justify-content: center; padding: 100px 0; } #subscription-contents .wrapper { margin: 0 auto; max-width: 1240px; padding: 0 20px; } #subscription-contents .page-header { line-height: 2.0; margin-bottom: 10px; } #subscription-contents .page-header h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.45; margin-bottom: 10px; } #subscription-contents .page-header h2 { font-size: 1.5rem; /* 28px */ font-weight: 700; line-height: 1.45; } #email-prefs-form dl, #email-prefs-form ol, #email-prefs-form p, #email-prefs-form ul, .success { font-size: 1.0rem; line-height: 1.45; margin-bottom: 20px; } #email-prefs-form .email-prefs .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; margin: 30px 0; cursor: pointer !important; } #email-prefs-form .email-prefs .item .item-inner { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 8px; transition-property: background; transition-duration: 0.15s; transition-timing-function: linear; overflow: hidden; margin-top: 0; padding: 20px; background: #F0F4F5; box-shadow: 0px 4px 30px 8px rgba(90, 90, 90, 0.07); } #email-prefs-form .email-prefs .item .item-inner:hover { background: #C9CED1; } #email-prefs-form .email-prefs .item .item-inner .checkbox-row { font-weight: 700; } #email-prefs-form .email-prefs .item .item-inner p { clear: both; margin: 5px 24px 0; } #email-prefs-form label { cursor: pointer; } #email-prefs-form .subscribe-options label span { font-weight: 700; } #email-prefs-form .hs-input { display: inline-block; width: 100%; height: 56px; margin-right: 0 !important; padding: 17px 14px !important; border: 1px solid #C9CED1; border-radius: 3px; color: var(--black); font-size: 1.0rem !important; line-height: 1.45; background-color: var(--white); box-sizing: border-box; } #email-prefs-form .hs-input:focus { outline: none; border: 1px solid var(--blue); } #email-prefs-form h3 { color: var(--black); font-weight: bold !important; display: block; margin-bottom: 4px; font-size: 1.25rem; /* 20px */ line-height: 1.4; } #email-prefs-form input[type=checkbox] { display: none; } #email-prefs-form input[type=checkbox] + span { display: grid; grid-gap: 3px; grid-template-columns: 1.125em 1fr; position: relative; min-height: 18px; font-size: 1.125rem !important; font-weight: 700; align-items: center; } #email-prefs-form input[type=checkbox] + span:before { content: ""; display: block; width: 18px; height: 18px; border: 1px solid #A6A6A6; background: #FFFFFF; border-radius: 3px; } #email-prefs-form input[type=checkbox] + span::after { content: ""; position: absolute; top: 10px; left: 6px; display: block; width: 6px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); display: none; } #email-prefs-form .subscribe-options input[type=checkbox] + span:after { top: 7px; } #email-prefs-form input[type=checkbox]:checked + span::before { background-color: var(--light-blue); } #email-prefs-form input[type=checkbox]:checked + span::after { display: block; } #email-prefs-form input[type="submit"] { align-items: center; background: var(--blue); border-radius: 5px; color: var(--white); cursor: pointer; display: flex; font-size: 1.25rem; height: 70px; justify-content: center; line-height: 1.45; max-width: 290px; transition: background .3s; width: 100%; } #email-prefs-form input[type="submit"]:hover { background: var(--light-blue); } @media screen and (max-width: 1024px) { #subscription-contents { padding-top: 72px; } #subscription-contents .content { background-image: url(//template.leadplus.co.jp/hubfs/initial/common/bg-blue.webp); padding: 60px 0; } #subscription-contents .page-header h1 { font-size: 1.5rem; /* 24px */ } #subscription-contents .page-header h2 { font-size: 1.25rem; /* 20px */ } #email-prefs-form input[type=checkbox]+span { font-size: 1.0rem !important; } #email-prefs-form .email-prefs .item .item-inner p { font-size: .9375rem; /* 15px */ margin: 5px 0px 0px 30px; } #email-prefs-form input[type=checkbox]+span:after { top: 8px; } #email-prefs-form .subscribe-options input[type=checkbox] + span:after { top: 5px; } } @media screen and (max-width: 768px) { #email-prefs-form input[type="submit"] { max-width: initial; margin-top: 20px !important; } } /* 不明なコンタクト配信設定ページ */ #hs_cos_wrapper_email_simple_subscription .page-header { margin-bottom: 30px; } #hs_cos_wrapper_email_simple_subscription #email-prefs-form h3 { font-size: 1.25rem; /* 20px */ margin-bottom: 10px; } #hs_cos_wrapper_email_simple_subscription #email-prefs-form input[type=submit] { margin-top: 30px; } @media screen and (max-width: 1024px) { #hs_cos_wrapper_email_simple_subscription #email-prefs-form h3 { font-size: 1.125rem; /* 18px */ margin-bottom: 5px; } #email-prefs-form .hs-input { width: 100% !important; } } /* ------------------------------------------------------------------------------------ Blog ------------------------------------------------------------------------------------ */ .Blog-Page { color: var(--primary-web); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: 0.1em; } @media (max-width: 768px) { .Blog-Page .post-body p { font-size: 15px; } } .blog-hero { padding: 60px 0; max-width: 1140px; margin: 0 auto; padding: 60px 0px; text-align: center; position: relative; } .blog-ev .blog-hero { padding: 50px 0 35px; } @media (max-width: 768px) { .blog-hero { padding: 40px 20px; } .blog-ev .blog-hero { padding: 45px 20px 40px; } } .blog-hero::after { content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAABkCAYAAAAffws8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFYSURBVHgB7d3BDQFRFEDRT4jt9GKqU4Dq6MVWLNgqQHBnzqnh5i1+8t7f3B6X5/hz037eDHizHRAkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZK0GyxCYZPlk0xckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCT5+G4hrKdDgHBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVpNxbkej//5PDb8XByPPDLTFyShEuScEkSLknCJUm4JAmXpEW9467ZtJ9X9ZZs4pIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuSS9tSxCD4vNLtQAAAABJRU5ErkJggg=="); position: absolute; width: 172px; height: 100px; right: 0; top: 50%; z-index: 0; transform: translate(0px, -50%); } @media (max-width: 768px) { .blog-hero:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAyNSAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMTMiIHk9IjExIiB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9IiNDREY5ODYiLz4KPHJlY3Qgd2lkdGg9IjE2LjgiIGhlaWdodD0iMTYuOCIgZmlsbD0iI0YwRkJDQyIvPgo8L3N2Zz4K"); background-repeat: no-repeat; left: 20px; top: 20px; height: 23px; transform: unset; } } .blog-hero h1 { position: relative; z-index: 1; font-size: 30px; line-height: 130%; } @media (max-width: 768px) { .blog-hero h1 { font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; text-align: left; letter-spacing: 1.4px; } } .blog-breadcrumb { width: 100vw; margin: 0 calc(50% - 50vw) 100px; border-top: solid 1px #cad0d4; padding-top: 10px; } @media (max-width: 1048px) { .blog-breadcrumb { margin: 0 auto 40px; } } @media (max-width: 768px) { .blog-breadcrumb { display: none; } } .blog-breadcrumb .breadcrumb { display: flex; justify-content: center; align-items: center; padding: 10px 0; font-size: 14px; color: var(--dark-gray); } .blog-breadcrumb .mod_topicpath { margin: 0; } .blog-breadcrumb .breadcumb ul { display: flex; gap: 10px; } .blog-breadcrumb .breadcumb ul li a { transition: 300ms ease; } .blog-breadcrumb .breadcumb ul li a, .blog-breadcrumb .breadcumb ul li:after { color: #7a7a7a; } .blog-breadcrumb .breadcumb ul li a:hover { color: var(--primary-web); text-decoration: none; } .blog-wrap { display: flex !important; gap: 48px; justify-content: space-between; flex-shrink: 0; } .mod_blog__content { flex: 1; position: relative; } @media (max-width: 1048px) { .blog-wrap { gap: 20px; } } @media (max-width: 768px) { .blog-wrap { flex-direction: column; } } /* tag */ .post-tags, .post-keyword { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } a.tag { font-size: 12px; letter-spacing: 0.05em; color: #fff; background-color: var(--primary-web-new); border: solid 1px var(--primary-web-new); padding: 5px 7px; font-weight: 400; transition: 300ms ease; color: var(--white); } .post-keyword li.cat { font-size: 0.875rem; } .tag-box { margin: 2.75em auto; } .tag-box .tag-wrap { padding: 40px; background-color: #f8f9fa; border-radius: 8px; align-items: center; gap: 32px; } .tag-wrap .title { font-size: 1.25rem; font-weight: 700; } .tag-wrap .post-tags > a { color: var(--primary); border: 1px solid var(--primary); background-color: var(--white); } .tag-wrap .post-tags > a:hover { color: var(--white); background-color: var(--primary); } @media screen and (max-width: 768px) { .tag-box .tag-wrap { padding: 20px; flex-direction: column; align-items: flex-start; gap: 10px; } } /* blog index */ .blog-list { gap: 32px; grid-template-columns: repeat(2, 1fr); } .blog-list .mod_set1 .textbox > .title { font-size: 18px; font-size: 1.8rem; } .blog-list .mod_date { margin-top: 10px; font-size: 15px; font-weight: 500; color: #595959; } @media screen and (max-width: 620px) { .blog-list { gap: 30px; grid-template-columns: repeat(1, 1fr); } } .l-twocolumn--main_left { width: 736px; } @media screen and (max-width: 1048px) { .l-twocolumn--main_left { width: 600px; } } @media screen and (max-width: 978px) { .l-twocolumn--main_left { width: 500px; } } @media screen and (max-width: 768px) { .l-twocolumn--main_left { width: 100%; } } /* aside */ aside.side-content { width: 352px; display: flex; flex-direction: column; gap: 30px; height: fit-content; align-self: flex-start; padding-bottom: 100px; } @media screen and (max-width: 1048px) { aside.side-content { width: calc(100% - 600px - 20px); } } @media screen and (max-width: 978px) { aside.side-content { width: calc(100% - 500px - 20px); } } @media screen and (max-width: 768px) { aside.side-content { width: 100%; } } aside.side-content > section h2 { font-size: 18px; background: var(--primary-web-new); padding: 10px 0px; color: #fff; text-align: center; font-weight: 700; display: flex; align-items: center; justify-content: center; height: 60px; } aside.side-content > section .post a { display: flex; padding: 20px; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0fbcc; border-left: 1px solid #f0fbcc; border-right: 1px solid #f0fbcc; font-size: 18px; } aside.side-content > section .post h3 { font-weight: 400; font-size: 18px; } aside.side-content .side_section { border: 1px solid var(--primary); border-radius: 6px; } aside.side-content .side_section h2 { padding: 24px; background-color: var(--black); color: var(--white); text-align: center; } /* side search */ .search-blog-form { width: 100%; height: 50px; position: relative; } .search-blog-form input.input-keyword { -webkit-appearance: none; appearance: none; background-color: var(--white); border: 1px solid #f4f6ec; border-radius: 3px; box-sizing: border-box; height: 40px; line-height: 1.5; outline: none; padding: 10px 40px 10px 10px; width: 100%; font-size: 15px; } .search-blog-form input.input-keyword::placeholder { color: #cacdc9; } .search-blog-form button.search-btn { cursor: pointer; margin: 0; padding: 0; align-items: center; border: none; display: flex; height: 40px; justify-content: center; max-width: 40px; width: 100%; background-color: #f4f6ec; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: opacity 0.3s; position: absolute; top: 0; right: 0; z-index: 1; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNTQ5NTYgMTcuMTAyNEM4LjU1MDM2IDE3LjEwMjQgOC41NTE5NiAxNy4xMDI0IDguNTUyNzYgMTcuMTAyNEMxMC41MzUgMTcuMTAyNCAxMi4zNTk0IDE2LjQyMjUgMTMuODA0NyAxNS4yODI3TDEzLjc4NjIgMTUuMjk2NEwxOC40ODkgMjBMMjAgMTguNDg3TDE1LjI5NzIgMTMuNzc3N0MxNi40MDgyIDEyLjM0ODIgMTcuMDc4MyAxMC41Mjc4IDE3LjA3ODMgOC41NTA3OUMxNy4wNzgzIDMuODI3OTEgMTMuMjU0OCAwIDguNTM5MTQgMEMzLjgyMzQ5IDAgMCAzLjgyODcxIDAgOC41NTA3OUMwIDEzLjI3MzcgMy44MjM0OSAxNy4xMDE2IDguNTM5MTQgMTcuMTAxNkM4LjU0MjM0IDE3LjEwMTYgOC41NDYzNSAxNy4xMDE2IDguNTQ5NTYgMTcuMTAxNkg4LjU0ODc2TDguNTQ5NTYgMTcuMTAyNFpNOC41NDk1NiAyLjExOTg0QzEyLjA5MDkgMi4xMTk4NCAxNC45NjIxIDQuOTk0OTggMTQuOTYyMSA4LjU0MTE1QzE0Ljk2MjEgMTIuMDg3MyAxMi4wOTA5IDE0Ljk2MjUgOC41NDk1NiAxNC45NjI1QzUuMDA4MjIgMTQuOTYyNSAyLjEzNjk5IDEyLjA4NzMgMi4xMzY5OSA4LjU0MTE1QzIuMTQxIDQuOTk2NTkgNS4wMDk4MiAyLjEyMzg1IDguNTQ5NTYgMi4xMTk4NFoiIGZpbGw9IiMxNzFFMTYiLz4KPC9zdmc+Cg=="); background-size: 20px 20px; background-repeat: no-repeat; background-position: center center; } .search-blog-form button.search-btn svg { display: none; } /* cta-list */ .cta-list { display: flex; flex-direction: column; gap: 15px; } /* post-ranking-list,recent-post-list */ .post-ranking-list .post { padding: 0 20px; } .post-ranking-list .post:last-child { padding-bottom: 20px; } .post-ranking-list .post a, .recent-post-list .post a { display: flex; padding: 20px 0; align-items: flex-start; gap: 10px; border-bottom: 1px solid #dcdcdc; } .recent-post-list .post a { padding: 20px; } .recent-post-list .post:last-child a { border-bottom: none; } .recent-post-list .post:last-child a.button--angle h3 { font-weight: 700; font-size: 16px; } .post-ranking-list .mod_eyecatch, .recent-post-list .mod_eyecatch { max-width: 120px; } .post-ranking-list .mod_eyecatch .ranking-nub { background-color: #0d6efd; color: white; width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 1; } .post-ranking-list .ranking-nub.rank1 { background-color: var(--primary-web); } .post-ranking-list .ranking-nub.rank2 { background-color: #87aa5c; } .post-ranking-list .ranking-nub.rank3 { background-color: #92d68f; } .post-ranking-list .ranking-nub.rank4 { background-color: #cdf986; } .post-ranking-list .ranking-nub.rank5 { background-color: #cacdc9; } .post-ranking-list .title, .recent-post-list .title { flex: 1; } .post-ranking-list .title h3, .recent-post-list .title h3 { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; } .recent-post-list .side-date { margin-bottom: 5px; font-size: 0.875rem; font-weight: 700; line-height: 1.5; } .recent-post-list h3.u-textcolor--primary { font-weight: 700; } .side-tag-list .tags li { border: 1px solid #dcdcdc; } .side-tag-list .tags li:not(:first-child) { border-top: none; } .side-tag-list .tags li a { padding: 16px 24px; display: flex; align-items: center; gap: 5px; } .side-tag-list .tags li a:hover { text-decoration: underline; } /* Blog-Post */ .Blog-Post .head { background-color: #f9fafb; } #Blog-Page { margin: 0 auto; } .content-header h1 { font-size: 1.625rem; margin-bottom: 24px; } .content-header { margin: 0 auto 100px; } @media (max-width: 1048px) { .content-header { margin: 0 auto 40px; } } .content-header .info { align-items: center; flex-wrap: wrap; gap: 10px; } .content-header .date { flex-wrap: wrap; font-size: 16px; gap: 24px; font-weight: 400; } @media screen and (max-width: 768px) { .content-header .date { margin-left: 0; } } .content-header .date time { display: flex; align-items: center; gap: 10px; } .blog-section .featured-img { margin: 0 auto 50px; } @media (max-width: 1048px) { .blog-section .featured-img { margin: 0 auto 40px; } } .blog-section .featured-img img { max-width: 100%; height: auto; } @media screen and (max-width: 768px) { .content-header .info { flex-direction: column-reverse; gap: 10px; align-items: flex-start; margin-bottom: 10px; } .content-header .date { order: 1; font-size: 14px; gap: 20px; } .content-header .post-tags { order: 2; } } @media screen and (max-width: 1024px) { .blog-section { padding: 0; border: none; } } /* post-body */ .post-body h2 { font-size: 22px; font-style: normal; font-weight: 700; line-height: 160%; } @media screen and (max-width: 768px) { .post-body h2 { font-size: 18px; } } .post-body h3 { font-size: 20px; font-style: normal; font-weight: 700; line-height: 160%; } @media screen and (max-width: 768px) { .post-body h3 { font-size: 16px; } } .post-body h4 { font-size: 18px; font-style: normal; font-weight: 700; line-height: 160%; } .post-body h5 { font-size: 16px; font-style: normal; font-weight: 700; line-height: 160%; } @media screen and (max-width: 768px) { .post-body h4 { font-size: 16px; } } .post-body img { max-width: 100%; height: auto; } .post-body p { margin: 50px 0; } @media screen and (max-width: 768px) { .post-body p { margin: 25px 0; } } .post-body ul, .post-body ol { margin-left: 20px; list-style-position: outside; line-height: 1.4; } .post-body ul li, .post-body ol li { margin-top: 5px; position: relative; } .post-body ul li::before { content: ""; width: 14px; height: 14px; background-color: #0d6efd; border-radius: 50%; position: absolute; top: 5px; left: -20px; } .post-body ul > li > ul > li::before { width: 10px; height: 10px; border: 2px solid #0d6efd; background-color: transparent; top: 6px; } .post-body div[data-hs-responsive-table] { margin: 30px auto; } .post-body table { display: block; height: auto !important; overflow-x: auto; table-layout: fixed; width: 100% !important; } .post-body table tbody { display: table; width: 100%; } .post-body table td { border: 1px solid #dee2e6; line-height: 1.5; font-size: 0.875rem; padding: 15px 12px !important; vertical-align: middle; } .post-body table td p, .post-body table td ul, .post-body table td ol { margin-top: 0; margin-bottom: 0; } .post-body table td ul li { list-style-type: disc; } .post-body table td ul li::before { content: none; } .post-body pre { margin: 30px 0; padding: 20px; position: relative; white-space: pre-wrap; word-wrap: break-word; overflow: auto; background-color: #2d2d2d; color: #fff; border-left: 2px #004c25 solid; } .post-body blockquote { margin: 30px 0; padding: 15px 30px; position: relative; box-sizing: border-box; background: #efefef; color: #555; } .post-body blockquote:before { display: inline-block; position: absolute; top: 20px; left: 30px; content: "\f10d"; font-family: FontAwesome; color: #cad0d4; font-size: 20px; line-height: 1; font-weight: 900; } blockquote:after { display: inline-block; position: absolute; bottom: 20px; right: 30px; content: "\f10e"; font-family: FontAwesome; color: #cad0d4; font-size: 20px; line-height: 1; font-weight: 900; } .post-body a:not([class]) { text-decoration: underline; color: var(--primary); } @media (hover: hover) { .post-body a:not([class]):hover { opacity: 0.7; } } @media screen and (max-width: 768px) { .post-body * { float: none !important; } .post-body img { margin: auto !important; } } .post-link { margin-bottom: 100px; } .post-link > a.button--angle, aside.side-content > section .post a { display: flex; align-items: center; justify-content: right; text-decoration: none; gap: 20px; color: #171e16; font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 160%; letter-spacing: 0.1em; transition: 0.3s ease; } aside.side-content > section .post a { justify-content: space-between; } .post-link > a i, aside.side-content > section .post a i { position: relative; } .post-link > a i:after, aside.side-content > section .post a i:after { content: ""; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMjEpIiBmaWxsPSIjRjBGQkNDIi8+CjxwYXRoIGQ9Ik02Ljg2NjA1IDUuMDlMNy45MjcwNSA0LjAzTDEzLjcwNiA5LjgwN0MxMy43OTkyIDkuODk5NTcgMTMuODczMSAxMC4wMDk2IDEzLjkyMzYgMTAuMTMwOUMxMy45NzQgMTAuMjUyMSAxNCAxMC4zODIyIDE0IDEwLjUxMzVDMTQgMTAuNjQ0OCAxMy45NzQgMTAuNzc0OSAxMy45MjM2IDEwLjg5NjFDMTMuODczMSAxMS4wMTc0IDEzLjc5OTIgMTEuMTI3NCAxMy43MDYgMTEuMjJMNy45MjcwNSAxN0w2Ljg2NzA1IDE1Ljk0TDEyLjI5MSAxMC41MTVMNi44NjYwNSA1LjA5WiIgZmlsbD0iIzE3MUUxNiIvPgo8L3N2Zz4K"); width: 21px; height: 21px; display: block; background-repeat: no-repeat; background-size: contain; transition: 0.3s ease; } .post-link > a.button--angle:hover, aside.side-content > section .post a:hover { opacity: 1; text-decoration: none; } .post-link > a:hover i:after, aside.side-content > section .post a:hover i:after { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwLjUiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMjEpIiBmaWxsPSIjODdBQTVDIi8+CjxwYXRoIGQ9Ik02Ljg2NjA1IDUuMDlMNy45MjcwNSA0LjAzTDEzLjcwNiA5LjgwN0MxMy43OTkyIDkuODk5NTcgMTMuODczMSAxMC4wMDk2IDEzLjkyMzYgMTAuMTMwOUMxMy45NzQgMTAuMjUyMSAxNCAxMC4zODIyIDE0IDEwLjUxMzVDMTQgMTAuNjQ0OCAxMy45NzQgMTAuNzc0OSAxMy45MjM2IDEwLjg5NjFDMTMuODczMSAxMS4wMTc0IDEzLjc5OTIgMTEuMTI3NCAxMy43MDYgMTEuMjJMNy45MjcwNSAxN0w2Ljg2NzA1IDE1Ljk0TDEyLjI5MSAxMC41MTVMNi44NjYwNSA1LjA5WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); } /* no posts message */ .no-posts-message { text-align: center; padding: 60px 20px; font-size: 18px; color: #666; } /* paging */ .blog-foot--meta .paging { grid-column-gap: 30px; display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; } .blog-foot--meta .paging a { padding: 1.25em 1em; grid-column-gap: 28px; align-items: center; border: 1px solid #ced4da; background: var(--light-gray); display: flex; height: 100%; } .blog-foot--meta .paging a.next-post { justify-content: end; } .blog-foot--meta .paging a .title-group .lbl { display: flex; align-items: center; column-gap: 10px; font-size: 0.75rem; line-height: 1; margin-bottom: 12px; } .blog-foot--meta .paging a.prev-post .title-group .lbl::before { content: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%3E%20%3Cmask%20id%3D%22mask0_212_9438%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%229%22%20height%3D%2214%22%3E%20%3Cpath%20d%3D%22M0%200H8.4V14H0V0Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%20%3C%2Fmask%3E%20%3Cg%20mask%3D%22url(%23mask0_212_9438)%22%3E%20%3Cpath%20d%3D%22M8.2208%201.24686L6.9669%200L0%206.97394L6.97394%2013.9479L8.2208%2012.701L2.49371%206.97394L8.2208%201.24686Z%22%20fill%3D%22%230070F2%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); } .blog-foot--meta .paging a.next-post .title-group .lbl { justify-content: end; } .blog-foot--meta .paging a.next-post .title-group .lbl::after { content: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%2215%22%20viewBox%3D%220%200%209%2015%22%20fill%3D%22none%22%3E%20%3Cmask%20id%3D%22mask0_212_9449%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%229%22%20height%3D%2215%22%3E%20%3Cpath%20d%3D%22M9%200.5H0.600002V14.5H9V0.5Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%20%3C%2Fmask%3E%20%3Cg%20mask%3D%22url(%23mask0_212_9449)%22%3E%20%3Cpath%20d%3D%22M0.779201%201.74686L2.0331%200.5L9%207.47394L2.02606%2014.4479L0.779201%2013.201L6.50629%207.47394L0.779201%201.74686Z%22%20fill%3D%22%230070F2%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); } .blog-foot--meta .paging a .title-group .title { color: var(--black); font-size: 0.95rem; line-height: 1.5; transition: opacity 0.3s; } .blog-foot--meta .paging a.next-post .title { opacity: 0.7; } @media (max-width: 768px) { .blog-foot--meta .paging { grid-template-columns: 1fr; gap: 10px 0; } .blog-foot--meta .paging a.prev-post, .blog-foot--meta .paging a.next-post { padding-top: 15px; padding-bottom: 15px; } } /* post-cta */ .post-cta .hs-cta-embed { width: auto !important; } /* author-section */ .author-section { background-color: var(--light-gray-sub); } .author-section .heading { padding: 20px 30px; border-bottom: 1px solid #e9ecef; } .author-section .author-wrap { padding: 20px 30px; gap: 40px; } .author-section .author-image { aspect-ratio: 1/1; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; } .author-section .author-image img { aspect-ratio: 1/1; width: auto; min-width: 100%; height: 100%; object-fit: cover; } .author-section .author-text { flex: 1; } .author-authorname { font-weight: 700; } .author-desc { margin: 20px 0; } .author-cta a { display: inline-block; padding: 15px 0; width: 130px; border: 1px solid var(--primary); background-color: var(--white); color: var(--primary); font-size: 0.9375rem; font-weight: 700; text-align: center; } @media screen and (max-width: 768px) { .author-section .author-wrap { flex-direction: column; padding: 20px; gap: 20px; } .author-section .author-image { margin: auto; } .author-desc { margin: 10px 0 20px; } } /* recent_post */ #recent_post { margin-top: 60px; } #recent_post .title-comment { font-size: 1.625rem; font-weight: 700; margin-bottom: 40px; } #recent_post .p-list-item__post { box-shadow: none; border: 1px solid #dee2e6; border-radius: 0; } #recent_post .p-list-item__post .p-eyecatch { border-radius: 0; } /* related_post */ #related_wrapper { margin-top: 60px; } #related_post .title-comment { font-size: 1.625rem; font-weight: 700; margin-bottom: 40px; } #related_post .related-list { gap: 16px; grid-template-columns: repeat(2, 1fr); } @media screen and (max-width: 768px) { #related_post .related-list { gap: 20px; grid-template-columns: repeat(1, 1fr); } } /* social-icons */ .social-icons { margin-bottom: 20px; display: flex; justify-content: end; column-gap: 5px; } .social-icons li a { width: 110px; height: 24px; display: flex; align-items: center; justify-content: center; column-gap: 7px; color: white; font-size: 0.75rem; line-height: 1; } .social-icons li:nth-child(1) a { background-color: #000; } .social-icons li:nth-child(2) a { background-color: #3b66ff; } .social-icons li:nth-child(3) a { background-color: #39b900; } .social-icons li:nth-child(4) a { background-color: #3177b5; } .social-icons li a:hover { opacity: 0.7; } .social-icons li a i { font-size: 1rem; line-height: 0; } .social-icons li:nth-child(1) svg { width: auto; height: 12px; } @media screen and (max-width: 768px) { .social-icons { gap: 2px; margin-bottom: 50px; } .social-icons li { width: calc(100% - 2%); } .social-icons li a i { font-size: 0.75rem; } .social-icons li a { width: 100%; font-size: 0.5rem; } } /* toc-box */ #toc-box { margin: 30px 0 40px; padding: 30px; position: relative; background-color: #f4f4f4; border: 1px solid #ddd; overflow: hidden; } #toc-box.viewless { margin-bottom: 0; } #toc-box #toc-title { margin-bottom: 20px; display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.8; } #toc-box #toc-title .fa { margin-right: 10px; font-size: 0.825rem; vertical-align: middle; } #toc-box li.visible { display: list-item; } #toc-box ol { margin-left: 0; counter-reset: cnt !important; list-style: none; color: #808080; } #toc-box ol li { list-style: none; } #toc-box ol li a { color: #808080; text-decoration: none; } #toc-box ol li:before { content: counters(cnt, "-") ". " !important; counter-increment: cnt !important; } #toc-box ol li ol li:before { top: 2px; left: -30px; width: 30px; font-weight: 400; } .viewless::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; opacity: 0.75; background: #fafbfc; } #view-more-btn { cursor: pointer; background-color: #f7f7f7; border: 1px solid #ddd; border-radius: 5em; color: #4a4a4a; display: block; font-size: 14px; line-height: 1.5; margin: 0.75em auto 40px; min-width: 6em; padding: 0.5em 1em; position: relative; transition: box-shadow 0.25s; z-index: 2; } #view-more-btn[data-type="view-more"]:before, #view-more-btn[data-type="view-more"]:after { border-top-color: inherit; border-top-style: dotted; border-top-width: 3px; content: ""; display: block; height: 1px; position: absolute; top: calc(50% - 1px); transition: border-color 0.25s; width: 22px; } #view-more-btn:before { right: calc(100% + 1em); } #view-more-btn:after { left: calc(100% + 1em); } #view-more-btn:hover { border-color: transparent; box-shadow: 0 0 0 2px currentcolor; } [data-type="view-less"]:after { content: unset; } #toc-box [data-omit="1"] { display: none; } .Blog-Detail #toc-box ol li ol { margin: 10px 0; padding-left: 15px; } @media only screen and (max-width: 768px) { .Blog-Detail #toc-index > li a { font-size: 0.875rem; } } @media screen and (min-width: 1025px) { .Blog-Post .bottom-cta { margin-top: 80px; } } /* blog list */ .blog-list-text { display: flex; flex-direction: column; } .blog-list-text > article { height: auto; border-top: 1px solid #cacdc9; } .blog-list-text > article:last-child { border-bottom: 1px solid #cacdc9; } .blog-list-text > article a { padding: 25px 10px; background: #fff; width: 100%; display: block; transition: 0.3s ease; } .blog-list-text > article a:hover { background: #f9fdeb; } .blog-list-text .textbox { display: flex; align-items: center; gap: 20px; } @media (max-width: 768px) { .blog-list-text .textbox { gap: 10px 0; } } .blog-list-text .textbox .mod_date { font-size: 18px; max-width: 90px; letter-spacing: normal; } .blog-list-text .textbox .tags { display: flex; flex-direction: column; gap: 8px; text-align: center; max-width: 80px; width: 100%; } .blog-list-text .textbox .tags span { font-size: 12px; letter-spacing: 0.05em; border: solid 1px var(--primary-web-new); padding: 0px 8px; color: var(--white); background-color: var(--primary-web-new); font-weight: 400; transition: 300ms ease; } .blog-list-text .textbox .title { font-family: "Noto Sans JP"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 180%; flex: 1; } @media screen and (max-width: 768px) { .blog-list-text .textbox { flex-wrap: wrap; align-items: flex-start; } .blog-list-text .textbox .mod_date { order: 1; max-width: none; flex: 0 0 auto; } .blog-list-text .textbox .tags { order: 2; max-width: none; flex: 0 0 auto; margin-left: 24px; width: auto; flex-direction: initial; } .blog-list-text .textbox .title { order: 3; width: 100%; flex: 1 1 100%; } } ul.side-keyword-list { display: flex; padding: 20px; flex-direction: column; align-items: flex-start; align-self: stretch; border-right: 1px solid #f0fbcc; border-bottom: 1px solid #f0fbcc; border-left: 1px solid #f0fbcc; } ul.side-keyword-list a { display: flex; padding: 4px 8px; align-items: center; gap: 8px; color: var(--primary-web); font-size: 12px; transition: 0.3s ease; text-decoration: none; } ul.side-keyword-list a:hover { opacity: 0.7; text-decoration: none; } .post-ranking-list .post_wrap { border-right: 1px solid #f0fbcc; border-bottom: 1px solid #f0fbcc; border-left: 1px solid #f0fbcc; display: flex; padding: 20px; flex-direction: column; align-items: flex-start; gap: 25px; align-self: stretch; } .post-ranking-list .post__item { width: 100%; padding-bottom: 15px; border-bottom: solid #f0fbcc 1px; } .post-ranking-list .post__item:last-child { border-bottom: none; padding-bottom: 0; } .post-ranking-list .post__item > a { display: flex; width: 100%; align-items: flex-start; gap: 15px; align-self: stretch; } .post-ranking-list .post__item > a .mod_eyecatch { max-width: 120px; width: 100%; overflow: hidden; } .post-ranking-list .post__item > a .mod_eyecatch img { transition: transform 0.3s ease; } .post-ranking-list .post__item > a:hover .mod_eyecatch img { transform: scale(1.08); } .post-ranking-list .post__item > a .title { flex: 1; font-size: 15px; letter-spacing: normal; line-height: 150%; } .blog-list-3 { background: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); transition: 0.3s ease-in-out; } .blog-list-3:hover { transform: translateY(-5px); } .blog-list-3 > a { height: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; } .blog-list-3 > a .thu img { transition: 0.3s ease; width: 100%; max-height: 200px; height: auto; object-fit: cover; aspect-ratio: 16 / 9; } .blog-list-3 > a h3 { color: var(--primary-web); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; padding: 20px 20px 0; } .blog-list-3 > a .textbox { padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .blog-list-3 > a .textbox .mod_date { margin-top: 0; color: #595959; font-family: "Noto Sans JP"; font-size: 15px; font-style: normal; font-weight: 400; margin-top: 0; line-height: 180%; position: relative; } .blog-list-3 > a .textbox .mod_date::before { content: ""; position: absolute; bottom: -4px; left: 0px; width: 30px; height: 3px; background-color: #91ad6e; } .blog-list-3 > a .flex { gap: 10px; padding: 0; margin-top: auto; } .blog-list-3 > a .flex .mod_icon_cat { padding: 4px 8px; border-radius: unset; border: var(--primary-web-new) 1px solid; background: var(--primary-web-new); color: var(--white); font-size: 12px; font-style: normal; font-weight: 400; line-height: 160%; } .blog-wrap.event-post { max-width: 928px; margin: 0 auto; } .event-imageTop p { color: var(--primary-web); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: 0.1em; margin-bottom: 50px; } @media (max-width: 768px) { .event-imageTop p { font-size: 15px; margin-bottom: 40px; } } .blog-list-3__event .blog-list-3__bottom { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 20px; } .blog-list-3__event > a { justify-content: unset; display: flex; } .blog-list-3__event > a .blog-list-3__bottom .textbox { padding: 0; } .blog-list-3__event > a .blog-list-3__bottom .textbox h3 { padding: 0; } .blog-list-3__event > a .mod_date { margin-top: auto; color: #595959; font-family: "Noto Sans JP"; font-size: 15px; font-style: normal; font-weight: 400; line-height: 180%; position: relative; } .blog-list-3__event > a .mod_date::before { content: ""; position: absolute; bottom: -4px; left: 0px; width: 30px; height: 3px; background-color: #91ad6e; } aside.side-content > section h2.lg { height: 60px; display: flex; align-items: center; justify-content: center; } .side-content-event .archive-event .title h3 { font-size: 15px; line-height: 140%; font-weight: 400; } .side-content-event .side-keyword-list--topic-box { } .side-content-event .side-keyword-list--topic-box ul { flex-direction: row; } .side-content-event .side-keyword-list--topic-box ul li { } .side-content-event .side-keyword-list--topic-box ul li a { border: solid var(--primary-web) 1px; padding: 3px 8px; font-size: 12px; font-style: normal; font-weight: 400; line-height: 160%; letter-spacing: 0.05em; } .side-content-event .archive-link a { border-top: #fff 1px solid !important; margin-top: -1px; border-bottom: 1px solid #f0fbcc !important; padding-top: 0 !important; } .side-content-event .archive-link h3 { text-align: right; font-weight: 700; } @media (max-width: 768px) { .Blog-Page .lp-eddit-text:first-child { font-size: 15px; } } .System-Basic .lp-header{ position:relative; } .System-Basic .LP__footer { border-top: #C9CED1 solid 1px; padding: 30px 20px; background: var(--primary); } .System-Basic .LP__footer .LP__footer__wrap{ display: flex; margin: 0 auto; max-width: 1200px; padding: 0 22px; flex-direction: column-reverse; align-items: center; gap: 20px; } .System-Basic .LP__footer .copy{ font-size: 1.1rem!important; color: #C9CED1; line-height: normal; display: inline-block; } .System-Basic .LP__footer .links{ display: flex; gap: 16px; } .System-Basic .LP__footer .links a{ transition: 300ms ease; font-size: 1.2rem; letter-spacing: .1em; color: var(--white); } @media ( max-width: 768px ) { .System-Basic .LP__footer .links{ margin-top: 10px; flex-direction: column; } .System-Basic .LP__footer .links a{ font-size: 1.2rem; } } .System-Basic .LP__footer .links a:hover{ text-decoration: underline; } .System-Basic .Hero{ background-color: var(--primary); color: #fff; padding: 50px 0; line-height: 2em; } .System-Basic .Hero h1{ max-width: 768px; margin: 0 auto; } @media ( max-width: 768px ){ .System-Basic .Hero{ line-height: 2.5em; font-size: 1.4rem; padding: 30px 20px; } } .System-Basic .Wrap{ padding: 70px 0px; max-width: 768px; margin: 0 auto; } @media ( max-width: 768px ){ .System-Basic .Wrap{ padding: 40px 20px; } } #email-prefs-form input[type=checkbox]+span{ grid-template-columns: 2.5em 1fr; } #email-prefs-form .subscribe-options input[type=checkbox]+span:after, #email-prefs-form input[type=checkbox]+span:after{ top: 2px; } #email-prefs-form input[type=submit]{ background:#e51373; font-weight: bold; border: none; padding: 15px 10px; height: max-content; font-size: 1.5rem; } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h1 { display: none } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 0px; margin-top: 0px; font-weight: bold } @media (max-width: 639px) { .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { font-size: 18px } } @media (max-width: 639px) { .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header h2 { line-height: 28px } } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions .page-header p:last-child { margin-top: 0px } .System-Basic-emailsubpre .hs_cos_wrapper_type_email_subscriptions p { font-size: 16px; font-weight: 400; line-height: 24px } .System-Basic-emailsubpre .widget-type-email_subscriptions .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation .cell-wrapper, .System-Basic-emailsubpre .widget-type-email_simple_subscription .cell-wrapper { margin-bottom: 0px } .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions h1, .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h1, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription p, .System-Basic-emailsubpre .widget-type-email_simple_subscription h1, .System-Basic-emailsubpre .widget-type-email_simple_subscription h2 { font-weight: normal; font-size: 20px; line-height: 25px; margin: 1px 0px 4px } .System-Basic-emailsubpre html body .page-header { margin: 0px; padding-bottom: 1em } .System-Basic-emailsubpre .widget-type-email_subscriptions p, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation p, .System-Basic-emailsubpre .widget-type-email_simple_subscription p { font-size: 14px } .System-Basic-emailsubpre .widget-type-email_subscriptions h2, .System-Basic-emailsubpre .widget-type-email_subscriptions_confirmation h2, .System-Basic-emailsubpre .widget-type-email_simple_subscription h2 { font-size: 14px } .System-Basic-emailsubpre .email-prefs .item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-bottom: 1px; position: relative; margin: 20px 0px; cursor: pointer !important } .System-Basic-emailsubpre label { cursor: pointer; cursor: hand } .System-Basic-emailsubpre .email-prefs .item.disabled { opacity: 0.6; cursor: not-allowed } .System-Basic-emailsubpre .email-prefs .item .item-inner * { color: #444 } .System-Basic-emailsubpre .email-prefs .item .item-inner { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 8px; transition-property: background; transition-duration: 0.15s; transition-timing-function: linear; border: 1px solid #E4E4E4; overflow: hidden; margin-top: 0; padding: 15px; background: #f7f7f7 } .System-Basic-emailsubpre .email-prefs .item .item-inner p { font-size: 15px; font-weight: 700; line-height: 18px; font-weight: 200 } .System-Basic-emailsubpre .email-prefs .item .item-inner.hovered { box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1) } .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription { background: #fff1ee } .System-Basic-emailsubpre .email-prefs .item .item-inner.highlighted-subscription.selected { background: #fff1ee } .System-Basic-emailsubpre .email-prefs .item .item-inner.selected { background: #f0f7fc; border: 1px solid #e0e7ec } .System-Basic-emailsubpre .email-prefs .item.disabled .item-inner.hovered { box-shadow: none } .System-Basic-emailsubpre .checkbox-row { margin-top: 0; overflow: hidden } .System-Basic-emailsubpre .checkbox-row span.fakelabel { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-transform: normal; vertical-align: middle } .System-Basic-emailsubpre .checkbox-row input { vertical-align: middle; margin: 0; padding: 0; float: left } @media screen and (-webkit-min-device-pixel-ratio: 0) { .System-Basic-emailsubpre .checkbox-row input { position: relative; top: 6px } } .System-Basic-emailsubpre p.header { margin-left: 0px } .System-Basic-emailsubpre .checkbox-row span.fakelabel span { float: left; font-weight: bold; margin-left: 7px; vertical-align: top } .System-Basic-emailsubpre .email-prefs .item p { clear: both; margin: 5px 20px 0px } .System-Basic-emailsubpre .email-prefs .thumbnail { bottom: 1px; position: absolute; right: 6px } .System-Basic-emailsubpre .email-prefs .thumbnail.float-top { top: 7px } .System-Basic-emailsubpre .subscribe-options { margin-bottom: 12px; overflow: hidden } .System-Basic-emailsubpre .subscribe-options label { font-size: 13px; margin-left: 0px; margin-right: 16px } .System-Basic-emailsubpre .subscribe-options label span { font-weight: normal; margin-left: 3px; font-size: 14px; font-weight: bold } .System-Basic-emailsubpre #submitbutton { margin-bottom: 0px } .System-Basic-emailsubpre #email-prefs-form { margin-bottom: 0px } .System-Basic-emailsubpre input.hs-input.email-edit { font-size: 20px; line-height: 25px; margin: 0px 0px 10px 0px; width: 450px } .System-Basic-emailsubpre a.email-edit { display: inline-block; background-color: #E51373; border: 2px solid #E51373; color: #FFFFFF; font-size: 18px; font-weight: bold; text-align: center; text-decoration: none; padding: 10px 20px; border-radius: 3px; cursor: pointer; transition: all .3s linear; margin-left: 10px; padding: 5px 15px } .System-Basic-emailsubpre a.email-edit:hover { opacity: 0.7 } .System-Basic-emailconfirm #MainContent, .System-Basic-emailbackup #MainContent{ min-height: calc(100svh - 310px); } .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h1 { display: none } .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h2 { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 0px; font-weight: bold } @media (max-width: 639px) { .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h2 { font-size: 18px } } @media (max-width: 639px) { .System-Basic-emailconfirm .hs_cos_wrapper_type_email_subscriptions_confirmation h2 { line-height: 28px } } .resources-container { color: var(--primary-web); font-family: "Noto Sans JP"; font-size: 16px; font-style: normal; font-weight: 700; line-height: 160%; letter-spacing: 0.1em; } .resources-container .title-border { font-size: 30px; margin: 0 auto 40px; color: var(--primary-web); font-family: Noto Sans JP; font-size: 30px; font-style: normal; font-weight: 700; letter-spacing: 0.1em; line-height: 130%; position: relative; text-align: center !important; } @media (max-width: 768px) { .resources-container .title-border { font-size: 22px; margin: 0 auto 40px; } } .resources-container .title-border:after { background-color: #91ad6e; bottom: -10px; content: ""; height: 3px; position: absolute; width: 40px; left: 50%; transform: translate(-50%); } .resources-container .resource-category-nav { margin-bottom: 100px; } @media (max-width: 768px) { .resources-container .resource-category-nav { margin-bottom: 40px; } } .resources-container .resource-category-nav ul { display: flex; align-items: center; justify-content: left; gap: 15px; flex-wrap: wrap; } @media (max-width: 768px) { .resources-container .resource-category-nav ul { gap: 15px 10px; } } .resources-container .resource-category-nav ul li .filter-btn { display: flex; width: fit-content; padding: 10px 15px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; appearance: none; background: #fff; border: 1px solid var(--primary-web); transition: all 300ms; min-width: 187px; border-radius: 50px; cursor: pointer; } @media (max-width: 768px) { .resources-container .resource-category-nav ul li .filter-btn { min-width: 170px; font-size: 14px; padding: 10px 15px; } } .resources-container .resource-category-nav ul li .filter-btn:hover { background: #f0fbcc; border: 1px solid transparent; } .resources-container .resource-category-nav ul li .filter-btn.active { background: #f0fbcc; border: 1px solid transparent; cursor: default; } .resources-container .resouce__list { margin-bottom: 50px; } .resources-container .resouce__list:last-child { margin-bottom: 100px; } .resources-container .resouce__list .resouce__list__title { text-align: center; font-size: 26px; font-style: normal; font-weight: 700; line-height: 160%; letter-spacing: 0.1em; margin-bottom: 30px; } @media (max-width: 768px) { .resources-container .resouce__list .resouce__list__title { font-size: 20px; margin-bottom: 20px; } } .resources-container .resouce__list .resouce__list__items { display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .resources-container .resouce__list .resouce__list__items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .resources-container .resouce__list .resouce__list__items { grid-template-columns: repeat(1, 1fr); } } .resources-container .resouce__list .resouce__list__items > article { background: #fff; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1); display: flex; padding-bottom: 30px; flex-direction: column; align-items: center; gap: 20px; } .resources-container .resouce__list .resouce__list__items > article .resouce__list__image { height: 200px; width: 100%; overflow: hidden; } .resources-container .resouce__list .resouce__list__items > article .resouce__list__image img { height: 100%; width: 100%; object-fit: cover; aspect-ratio: 16/9; } .resources-container .resouce__list .resouce__list__items > article p { padding: 0 20px; font-weight: 700; } .resources-container .resouce__list .resouce__list__items > article a { align-items: center; background: var(--primary-web-new); border: 1px solid var(--primary-web-new); border-radius: 20px; color: #fff; display: flex; font-size: 16px; font-weight: 700; gap: 30px; height: 40px; justify-content: center; letter-spacing: 0.1em; line-height: 160%; margin: auto auto 0; overflow: hidden; padding: 15px 30px 15px 55px; position: relative; text-decoration: none; width: fit-content; transition: color 300ms ease; } @media (max-width: 768px) { .resources-container .resouce__list .resouce__list__items > article a { width: 288px; height: 50px; padding: 15px 30px 15px 55px; border-radius: 100px; } } .resources-container .resouce__list .resouce__list__items > article a:hover { color: var(--primary-web); } .resources-container .resouce__list .resouce__list__items > article a i:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjcwMDQgOC4zMzA3NkwxMS4wNDg2IDkuOTgyNlYyLjcwNTczQzExLjA0ODYgMi4xMzA0NCAxMC41ODIzIDEuNjY0MDYgMTAuMDA2OSAxLjY2NDA2QzkuNDMxNjEgMS42NjQwNiA4Ljk2NTI4IDIuMTMwNDQgOC45NjUyOCAyLjcwNTczVjkuOTgyNkw3LjMxMzM5IDguMzMwNjhDNi45MDY2IDcuOTIzOTIgNi4yNDcwNSA3LjkyMzkyIDUuODQwMjUgOC4zMzA2OEM1LjQzMzQ2IDguNzM3NTEgNS40MzM0NiA5LjM5NzEgNS44NDAyNSA5LjgwMzg1TDkuMjcwMzYgMTMuMjM0QzkuNDY1NjkgMTMuNDI5MyA5LjczMDY5IDEzLjUzOTEgMTAuMDA2OSAxMy41MzkxQzEwLjI4MzIgMTMuNTM5MSAxMC41NDgyIDEzLjQyOTMgMTAuNzQzNSAxMy4yMzRMMTQuMTczNiA5LjgwMzkzQzE0LjU4MDQgOS4zOTcxIDE0LjU4MDQgOC43Mzc1MSAxNC4xNzM2IDguMzMwNzZDMTMuNzY2OCA3LjkyMzk1IDEzLjEwNzMgNy45MjM5NSAxMi43MDA0IDguMzMwNzZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMTYuNjczOCAxMS42NjQxQzE2LjA5ODUgMTEuNjY0MSAxNS42MzIyIDEyLjEzMDUgMTUuNjMyMiAxMi43MDU3VjE1LjYyMjRINC4zODIxNlYxMi43MDU3QzQuMzgyMTYgMTIuMTMwNSAzLjkxNTc5IDExLjY2NDEgMy4zNDA0OSAxMS42NjQxQzIuNzY1MTkgMTEuNjY0MSAyLjI5ODgzIDEyLjEzMDUgMi4yOTg4MyAxMi43MDU3VjE1LjgzMDdDMi4yOTg4MyAxNi44NjYzIDMuMTM4MjkgMTcuNzA1NyA0LjE3MzgzIDE3LjcwNTdIMTUuODQwNUMxNi44NzYgMTcuNzA1NyAxNy43MTU1IDE2Ljg2NjMgMTcuNzE1NSAxNS44MzA3VjEyLjcwNTdDMTcuNzE1NSAxMi4xMzA1IDE3LjI0OTEgMTEuNjY0MSAxNi42NzM4IDExLjY2NDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"); background-size: contain; content: ""; height: 20px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 20px; transition: 300ms ease; } .resources-container .resouce__list .resouce__list__items > article a:hover i:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjcwMDQgOC4zMzA3NkwxMS4wNDg2IDkuOTgyNlYyLjcwNTczQzExLjA0ODYgMi4xMzA0NCAxMC41ODIzIDEuNjY0MDYgMTAuMDA2OSAxLjY2NDA2QzkuNDMxNjEgMS42NjQwNiA4Ljk2NTI4IDIuMTMwNDQgOC45NjUyOCAyLjcwNTczVjkuOTgyNkw3LjMxMzM5IDguMzMwNjhDNi45MDY2IDcuOTIzOTIgNi4yNDcwNSA3LjkyMzkyIDUuODQwMjUgOC4zMzA2OEM1LjQzMzQ2IDguNzM3NTEgNS40MzM0NiA5LjM5NzEgNS44NDAyNSA5LjgwMzg1TDkuMjcwMzYgMTMuMjM0QzkuNDY1NjkgMTMuNDI5MyA5LjczMDY5IDEzLjUzOTEgMTAuMDA2OSAxMy41MzkxQzEwLjI4MzIgMTMuNTM5MSAxMC41NDgyIDEzLjQyOTMgMTAuNzQzNSAxMy4yMzRMMTQuMTczNiA5LjgwMzkzQzE0LjU4MDQgOS4zOTcxIDE0LjU4MDQgOC43Mzc1MSAxNC4xNzM2IDguMzMwNzZDMTMuNzY2OCA3LjkyMzk1IDEzLjEwNzMgNy45MjM5NSAxMi43MDA0IDguMzMwNzZaIiBmaWxsPSIjMTcxRTE2Ii8+CjxwYXRoIGQ9Ik0xNi42NzM4IDExLjY2NDFDMTYuMDk4NSAxMS42NjQxIDE1LjYzMjIgMTIuMTMwNSAxNS42MzIyIDEyLjcwNTdWMTUuNjIyNEg0LjM4MjE2VjEyLjcwNTdDNC4zODIxNiAxMi4xMzA1IDMuOTE1NzkgMTEuNjY0MSAzLjM0MDQ5IDExLjY2NDFDMi43NjUxOSAxMS42NjQxIDIuMjk4ODMgMTIuMTMwNSAyLjI5ODgzIDEyLjcwNTdWMTUuODMwN0MyLjI5ODgzIDE2Ljg2NjMgMy4xMzgyOSAxNy43MDU3IDQuMTczODMgMTcuNzA1N0gxNS44NDA1QzE2Ljg3NiAxNy43MDU3IDE3LjcxNTUgMTYuODY2MyAxNy43MTU1IDE1LjgzMDdWMTIuNzA1N0MxNy43MTU1IDEyLjEzMDUgMTcuMjQ5MSAxMS42NjQxIDE2LjY3MzggMTEuNjY0MVoiIGZpbGw9IiMxNzFFMTYiLz4KPC9zdmc+Cg=="); background-size: contain; background-repeat: no-repeat; } .resources-container .resouce__list .resouce__list__items > article a:before { background: #fff; border-radius: 50px; content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; transform: scaleX(0); transform-origin: right top; transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1); width: 100%; z-index: 0; } .resources-container .resouce__list .resouce__list__items > article a:hover:before { background: #fff; transform: scale(1.1); transform-origin: left top; left: -2px; top: -2px; } .resources-container .resouce__list .resouce__list__items > article a span, .resources-container .resouce__list .resouce__list__items > article a i { position: relative; z-index: 1; } /* Modules */ .home_mainvisual { position: relative; width: 100%; overflow: hidden; background: linear-gradient(to right, #1E311A, #516C3A); background-color: #000; } .home_mainvisual .slide { position: relative; } .home_mainvisual a > .container { display: flex; justify-content: space-between; } .home_mainvisual .product a > .container { align-items: center; } .home_mainvisual .case a > .container { padding-top: 50px; padding-bottom: 78px; } .home_mainvisual .product a > .container > * { width: calc(100% / 2); } .home_mainvisual .case a > .container > * { width: calc((100% - 50px) / 2); } @media screen and (max-width: 1119px) { .home_mainvisual a > .container { align-items: center; } .home_mainvisual a > .container > * { width: calc((100% - 40px) / 2); } } @media screen and (max-width: 899px) { .home_mainvisual a > .container { display: block; padding-top: 20px !important; } .home_mainvisual a > .container > * { width: 100% !important; } } .home_mainvisual .textbox > .infobox { display: flex; align-items: center; } .home_mainvisual .textbox > .infobox > .mod_iconbox1 { display: inline-block; } .home_mainvisual .textbox > .infobox > .corp { font-size: 16px; font-size: 1.6rem; line-height: 1.4; color: #F0FBCC; margin-left: 20px; } .home_mainvisual .textbox > .title { color: #FFF; } .home_mainvisual .product .textbox > .title { font-size: 60px; font-size: 6rem; line-height: 1.2; margin-top: 8px; } .home_mainvisual .case .textbox > .title { font-size: 35px; font-size: 3.5rem; line-height: 1.4; margin-top: 25px; } .home_mainvisual .case .textbox > .title > span { display: block; font-size: 20px; font-size: 2rem; margin-bottom: 10px; } .home_mainvisual .textbox > .text1, .home_mainvisual .textbox > .text2 { font-size: 20px; font-size: 2rem; line-height: 1.4; font-weight: bold; } .home_mainvisual .textbox > .text1 { color: #F0FBCC; } .home_mainvisual .textbox > .text2 { color: #FFF; margin-top: 10px; } .home_mainvisual .textbox > .btn { margin: 25px 0 0; max-width: 120px; padding: 9px 10px 10px; } @media screen and (max-width: 1119px) { .home_mainvisual .textbox > .infobox { display: block; } .home_mainvisual .textbox > .infobox > .corp { margin-left: 0px; margin-top: 8px; } .home_mainvisual .product .textbox > .title { font-size: 40px; font-size: 4rem; } .home_mainvisual .case .textbox > .title { font-size: 30px; font-size: 3rem; margin-top: 20px; } .home_mainvisual .textbox > .text1, .home_mainvisual .textbox > .text2, .home_mainvisual .case .textbox > .title > span { font-size: 18px; font-size: 1.8rem; } } @media screen and (min-width: 900px) { .home_mainvisual .product .textbox { padding-top: 40px; padding-bottom: 78px; } } .home_mainvisual .thu > img { width: 100%; } .home_mainvisual .case .thu > img { border-radius: 16px; } @media screen and (min-width: 1120px) { .home_mainvisual .product .thu > img { max-width: 592px; margin-left: auto; } } @media screen and (max-width: 899px) { .home_mainvisual .case .thu { margin-top: 40px; } .home_mainvisual .product .thu { margin-top: 10px; padding-bottom: 78px; } } /* コンテンツセット -------------------------------------*/ /* mod_set2 */ .mod_set2.solution { background-image: url("/solution/img/thu.jpg?version=241017"); } .mod_set2.product { background-image: url("/product/img/thu.png?version=241017"); } .lp-hero { background-position: 50%; overflow: hidden; position: relative; } .lp-hero .wrapper { position: relative; } .lp-hero.filter:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .lp-hero.filter .wrapper { z-index: 2; } .lp-hero picture { height: 100%; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } .lp-hero picture img { max-width: none; min-height: 100%; object-fit: cover; width:100%; } .lp-hero picture img.position-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .lp-hero picture img.position-top { position: absolute; left: 0; top: 0; } .lp-hero picture img.position-bottom { position: absolute; left: 0; bottom: 0; } .lp-hero .section-content .flex { gap: 40px 24px; justify-content: space-between; } .lp-hero .detail { width: 50%; min-width: 50%; } .lp-hero h1.title { font-weight: 700; line-height: 1.5; font-size: 46px; } .lp-hero h1.title.size-small { font-size: 32px; } .lp-hero h1.title.size-medium { font-size: 36px; } .lp-hero h1.title.size-large { font-size: 46px; } .lp-hero .layout-2column h1.title { color: #000000; } .lp-hero h1 + p.text { margin-top: 24px; } .lp-hero p.text { font-size: 20px; } .lp-hero .u-img-wrap.image-shadow { filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2)); } .lp-hero .hero-btn { display: flex; gap: 24px 48px; flex-wrap: wrap; } .lp-hero .hero-btn .section-cta { margin-top: 56px; } .lp-hero .hero-btn a.c-btn { margin-top: 0; } .lp-hero .hero-btn.pc { display: flex !important; } .lp-hero .hero-btn.sp { display: none !important; } .lp-hero .flex.layout-1column { display: block; } .lp-hero .flex.layout-1column .detail { width: 100%; text-align: center; } .lp-hero .flex.layout-1column .detail .hero-btn { justify-content: center; } @media screen and (max-width: 1024px) { .lp-hero .section-content .flex { flex-wrap: wrap; justify-content: center; } .lp-hero .detail { width: 100%; } .lp-hero .u-img-wrap { text-align: center; } .lp-hero .u-img-wrap img { width: 80%; } .lp-hero .layout-2column h1.title { width: fit-content; margin: 0 auto; } .lp-hero p.text { font-size: 20px; margin: 24px auto 0; width: fit-content; } .lp-hero .hero-btn .section-cta { margin-top: 30px; } .lp-hero .hero-btn.pc { display: none !important; } .lp-hero .hero-btn.sp { display: flex !important; justify-content: center; } } @media screen and (max-width: 639px) { .lp-hero h1.title, .lp-hero h1.title span { font-size: 28px !important; } .lp-hero p.text { font-size: 16px; } .lp-hero .hero-btn { gap: 0 24px; } .lp-hero .hero-btn .section-cta { margin-top: 20px; } } @media screen and (max-width: 440px) { .lp-hero .hero-btn.sp { margin: 0 auto; flex-wrap: wrap; } } @media screen and (max-width: 374px) { .lp-hero .hero-btn.sp { display: block !important; width: max-content; } } .mod_pagetitlearea2 { background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 400px; padding: 50px 0; } .mod_pagetitle2 { position: relative; max-width: 600px; width: 100%; height: 240px; background-color: var(--primary); opacity: 0.8; padding: 20px 20px 20px 60px; } .mod_pagetitle2 .textbox { line-height: 1.4; font-weight: bold; position: relative; top: 50%; transform: translateY(-50%); } .mod_pagetitle2 .textbox .en { font-size: 20px; font-size: 2rem; color: var(--light-green); } .mod_pagetitle2 .textbox .title { font-size: 35px; font-size: 3.5rem; color: var(--white); margin-top: 15px; } @media screen and (max-width: 899px) { .mod_pagetitle2 { padding: 15px 15px 15px 20px; } } @media screen and (max-width: 639px) { .mod_pagetitlearea2 { min-height: 350px; padding-bottom: 40px; } .mod_pagetitle2 { max-width: 300px; height: 220px; } .mod_pagetitle2 .textbox .en { font-size: 16px; font-size: 1.6rem; } .mod_pagetitle2 .textbox .title { font-size: 30px; font-size: 3rem; } } /*l_post*/ .l_post{ padding: 80px 0; border-bottom: solid #F4F4F4 1px; } @media ( max-width: 768px ) { .l_post{ padding: 65px 0 40px; border-bottom: unset; } } .l_post .l_post_inner{ display: flex; justify-content: space-between; max-width: 1120px; margin: 0 auto; } .l_post .l_post_inner h1{ color: var(--primary-web); font-size: 3.4rem; font-weight: 700; line-height: 130%; letter-spacing: 0.1em; position: relative; z-index: 2; } .l_post .l_post_inner h1 span{ font-size: 24px; } @media ( max-width: 768px ) { .l_post .l_post_inner h1{ font-size: 25px; line-height: 160%; text-align: center!important; } .l_post .l_post_inner h1 span{ font-size: 20px; } } .l_post .l_post_inner .textbox p{ color: #F4F4F4; font-family: Poppins; font-size: 6rem; font-style: normal; font-weight: 600; line-height: 130%; position: relative; z-index: 1; top: -30px; left: 9px; } @media ( max-width: 768px ) { .l_post .l_post_inner .textbox p{ font-size: 3rem; text-align: center; position: absolute; left: 50%; transform: translate(-50%, 0px); bottom: -20px; top: unset; white-space: nowrap; } } .l_post .l_post_inner .textbox{ position: relative; } @media ( max-width: 768px ) { .l_post .l_post_inner .textbox{ width: 100%; } .l_post .l_post_inner .textbox:before{ content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgB7ZQxCoAwEAT3RHsf4wP0c74rvfoNW8VGgmBMY5uQBEIgO3BwxcIUe5ycz2qQhuq7YXIFGmSAEkooKUQiqW/lxoH9XZwZdlKepLWjEIgte/x3bS5vXhDBpuegi2TxlUo+ySYWlAILyAAAAAAASUVORK5CYII="); width: 25px; height: 23px; display: block; position: absolute; top: -25px; left: 0px; } } .l_post .l_post_inner .image:has(img) { width: 160px; height: 160px; aspect-ratio: 1 / 1; position: relative; } .l_post .l_post_inner .image:not(:has(img)) { width: 174px; height: 100px; display: block; position: relative; } @media ( max-width: 768px ) { .l_post .l_post_inner .image:has(img), .l_post .l_post_inner .image:not(:has(img)){ display: none; } } .l_post .l_post_inner .image:has(img):before{ content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAABkCAYAAAAffws8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFYSURBVHgB7d3BDQFRFEDRT4jt9GKqU4Dq6MVWLNgqQHBnzqnh5i1+8t7f3B6X5/hz037eDHizHRAkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZK0GyxCYZPlk0xckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCT5+G4hrKdDgHBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVpNxbkej//5PDb8XByPPDLTFyShEuScEkSLknCJUm4JAmXpEW9467ZtJ9X9ZZs4pIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuSS9tSxCD4vNLtQAAAABJRU5ErkJggg=="); width: 174px; height: 100px; position: absolute; bottom: -35%; left: -95%; display: block; } .l_post .l_post_inner .image:not(:has(img)):before{ bottom: 0; left: 0; content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAABkCAYAAAAffws8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFYSURBVHgB7d3BDQFRFEDRT4jt9GKqU4Dq6MVWLNgqQHBnzqnh5i1+8t7f3B6X5/hz037eDHizHRAkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZK0GyxCYZPlk0xckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCT5+G4hrKdDgHBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVJuCQJlyThkiRckoRLknBJEi5JwiVpNxbkej//5PDb8XByPPDLTFyShEuScEkSLknCJUm4JAmXpEW9467ZtJ9X9ZZs4pIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuScIlSbgkCZck4ZIkXJKES5JwSRIuSS9tSxCD4vNLtQAAAABJRU5ErkJggg=="); width: 174px; height: 100px; position: absolute; display: block; } .l_post .l_post_inner .image img{ width: 100%; height: 100%; object-fit: cover; } .l-default{ padding: 100px 0; } @media ( max-width: 768px ) { .l-default{ padding: 40px 0 0; } } .l-default .container{ position: relative; min-height: 148px; display: flex; align-items: center; justify-content: center; } @media ( max-width: 768px ) { .l-default .container{ padding: 30px 0; min-height: unset; } } .l-default .container h1{ font-size: 34px; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: .1em; } @media ( max-width: 768px ) { .l-default .container h1{ font-size: 25px; } .l-default .container h1:before{ content: ""; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAXCAYAAAD+4+QTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABmSURBVHgB7ZQxCoAwEAT3RHsf4wP0c74rvfoNW8VGgmBMY5uQBEIgO3BwxcIUe5ycz2qQhuq7YXIFGmSAEkooKUQiqW/lxoH9XZwZdlKepLWjEIgte/x3bS5vXhDBpuegi2TxlUo+ySYWlAILyAAAAAAASUVORK5CYII=); width: 25px; height: 23px; display: block; position: absolute; top: 0px; left: 0; } } .l-default .container .left-top{ position: absolute; left: 0; top: 0; } @media ( max-width: 768px ) { .l-default .container .left-top{ display: none; } } .l-default .container .right-bottom{ position: absolute; right: 0; bottom: 0; } @media ( max-width: 768px ) { .l-default .container .right-bottom{ display: none; } } .lp-container{ margin: 0 auto; max-width: 1200px; width: 100%; } .mod_col2 { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } * + .mod_col2 { margin-top: 50px; } .mod_col2 > .mod_img-c, .mod_col2 > .mod_textarea1 { margin-top: 0; } @media screen and (max-width: 899px) { * + .mod_col2 { margin-top: 40px; } } .mod_col2.reverse { flex-direction: row-reverse; } .mod_col2 > * { width: calc((100% - 50px) / 2); } .mod_col2 > *:nth-child(n+3) { margin-top: 50px; } @media screen and (min-width: 1120px) { .mod_col2::after { width: calc((100% - 50px) / 2); } } @media screen and (max-width: 1119px) { .mod_col2 > * { width: calc((100% - 40px) / 2); } } @media screen and (min-width: 900px) { .mod_col2::after { content: ''; display: block; width: calc((100% - 40px) / 2); } } @media screen and (max-width: 899px) { .mod_col2 { display: block; } .mod_col2 > * { width: 100%; margin: 0 auto; } .mod_col2 > * + * { margin-top: 40px; } #home .mod_col2 > * + * { margin-top: 80px; } } .mod_set2 { margin-top: 45px; border-radius: 16px; text-align: center; background-position: center center; background-repeat: no-repeat; background-size: cover; } .mod_set2 > a { display: block; position: relative; width: 100%; height: 100%; padding: 60px 30px 50px; } .mod_set2 .textbox { color: var(--white); min-height: 115px; line-height: 1.4; font-weight: bold; } .mod_set2 .textbox > .title { font-size: 30px; font-size: 3rem; } .mod_set2 .textbox > .title > .en { font-size: 40px; font-size: 4rem; line-height: 1.2; } .mod_set2 .textbox > .text { margin-top: 20px; font-size: 15px; font-size: 1.5rem; } .mod_set2 .btn { margin-top: 35px; } @media screen and (max-width: 899px) { .mod_set2 { margin-top: 40px; } .mod_set2 > a { padding-left: 10px; padding-right: 10px; } } .mod_col3 { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } * + .mod_col3 { margin-top: 50px; } .mod_col3 > .mod_img-c, .mod_col3 > .mod_textarea1 { margin-top: 0; } @media screen and (max-width: 899px) { * + .mod_col3 { margin-top: 40px; } } .mod_col3 > * { width: calc((100% - (50px * 2)) / 3); } .mod_col3 > *:nth-child(n+4) { margin-top: 50px; } @media screen and (min-width: 1120px) { .mod_col3::after { content: ''; display: block; width: calc((100% - (50px * 2)) / 3); } } @media screen and (max-width: 1119px) { .mod_col3 > * { width: calc((100% - 40px) / 2); } .mod_col3 > *:nth-child(n+3) { margin-top: 40px; } } @media screen and (max-width: 1119px) and (min-width: 640px) { .mod_col3::after { content: ''; display: block; width: calc((100% - 40px) / 2); } } @media screen and (max-width: 639px) { .mod_col3 { display: block; } .mod_col3 > * { width: 100%; margin: 0 auto; } .mod_col3 > * + * { margin-top: 40px; } } .mod_col3.con1 { justify-content: center; } .mod_col3.con1::after { display: none; } @media screen and (min-width: 1120px) { .mod_col3.con2 { justify-content: center; } .mod_col3.con2::after { display: none; } .mod_col3.con2 > * + * { margin-left: 50px; } } .mod_set3 { position: relative; background-color: var(--default); } .mod_set3 > a { display: block; width: 100%; height: 100%; } .mod_set3 .thu { opacity: 0.5; } .mod_set3 .textbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; line-height: 1.4; color: var(--white); } .mod_set3 .textbox > p { font-size: 15px; font-size: 1.5rem; font-weight: bold; } .mod_set3 .title { font-size: 30px; font-size: 3rem; } .mod_set3 * + .title { margin-top: 10px; } .mod_set1 .textbox { font-size: 15px; font-size: 1.5rem; line-height: 1.4; } .mod_set1 .textbox > .title { font-size: 20px; font-size: 2rem; } .mod_set1 .textbox > .title > span { display: block; margin-bottom: 10px; font-size: 15px; font-size: 1.5rem; font-weight: normal; } .mod_set1 .textbox > * + .title { margin-top: 15px; } .mod_set1 .textbox > .text { font-size: 18px; font-size: 1.8rem; } .mod_set1 .textbox > * + .text { margin-top: 15px; } .mod_set1 .textbox > .link { margin-top: 20px; color: var(--primary); } .mod_set1 .textbox > .link > .icon_after { vertical-align: -1px; display: inline-block; } .mod_set1 > a { display: block; position: relative; width: 100%; height: 100%; } .mod_set1 .thu { overflow: hidden; } .mod_set1 .thu.border { border: #CCC 1px solid; } .mod_set1 .mod_iconbox1 { position: absolute; top: 10px; left: 10px; } .mod_set1 > a:hover > .textbox > .link { text-decoration: underline; } .mod_set1.style1 { position: relative; background-color: var(--white); box-shadow: 0 0 15px rgba(0,0,0,0.10); } .mod_set1.style1 .textbox { padding: 30px 30px 40px; font-weight: bold; } @media screen and (max-width: 899px) { .mod_set1.style1 .textbox { padding-left: 20px; padding-right: 20px; } } .mod_set1.style2 .textbox { padding-top: 30px; } .mod_set1.style2 .textbox > .link { font-weight: bold; } .mod_set1.style3 { position: relative; background-color: var(--beige); box-shadow: 0 0 15px rgba(0,0,0,0.10); } .mod_set1.style3 .textbox { padding: 30px 20px; font-weight: bold; } .mod_set1.style3 .textbox .flex { margin-top: 25px; gap: 10px; } .mod_set1.style3 .textbox .mod_icon_cat { padding: 4px 8px 5px; background-color: var(--white); border: 1px solid var(--primary); border-radius: 3px; font-size: 12px; font-size: 1.2rem; font-weight: 400; } .mod_set4 .textbox { margin-top: 25px; font-size: 20px; font-size: 2rem; line-height: 1.4; font-weight: bold; } .mod_set4 .textbox > .explanation { margin-top: 10px; font-size: 16px; font-size: 1.6rem; font-weight: normal; } .mod_set4.style1 { text-align: center; } .mod_set4.style1 .thu { margin: auto; width: 164px; } .mod_set4.style1 .thu > img { border-radius: 50%; } .mod_set4.style1 .textbox > .text2 { margin-top: 20px; font-size: 18px; font-size: 1.8rem; line-height: 1.8; font-weight: normal; } .mod_set4.style2 { background-color: var(--bg-subcolor); } .mod_set4.style2 > a { display: block; padding: 40px 25px; width: 100%; height: 100%; } .mod_set4.style2 .thu { margin: auto; width: 100%; max-width: 145px; } .mod_set4.style2 .btn { margin: 30px auto 0; font-size: 15px; font-size: 1.5rem; max-width: 219px; } .mod_set4.style2 .btn > span { padding: 15px; } .mod_set4.style3 .icon { text-align: center; align-items: center; display: flex; } .mod_set4.style3 .icon::before, .mod_set4.style3 .icon::after { content: ""; background-color: var(--light-green); flex-grow: 1; height: 1px; } .mod_set4.style3 .icon::before { margin-right: 20px; } .mod_set4.style3 .icon::after { margin-left: 20px; } .mod_set4.style3 .icon > img { width: 24px; } .mod_set4.style3 .icon + * { margin-top: 30px; } .mod_set4.style3 p { margin-top: 20px; font-size: 16px; font-size: 1.6rem; line-height: 1.6; } .mod_heading h2{ font-size: 48px; font-size: 4.8rem; } @media screen and (max-width: 639px) { .mod_heading h2{ font-size: 30px; font-size: 3rem; } } .mod_title2 h2, .mod_title2 h3{ font-size: 48px; font-size: 4.8rem; } @media screen and (max-width: 639px) { .mod_title2 h2, .mod_title2 h3 { font-size: 30px; font-size: 3rem; } } .mod_col4 { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; } * + .mod_col4 { margin-top: 50px; } @media screen and (max-width: 899px) { * + .mod_col4 { margin-top: 40px; } } .mod_col4 > * { width: calc((100% - (50px * 3)) / 4); } .mod_col4 > *:nth-child(n+5) { margin-top: 50px; } @media screen and (min-width: 1120px) { .mod_col4:before { content: ''; display: block; width: calc((100% - (50px * 3)) / 4); height: 0; order: 1; } .mod_col4:after { content: ''; display: block; width: calc((100% - (50px * 3)) / 4); height: 0; } } @media screen and (max-width: 1119px) and (min-width: 900px) { .mod_col4::after { content: ''; display: block; width: calc((100% - (40px * 2)) / 3); } .mod_col4 > * { width: calc((100% - (40px * 2)) / 3); } .mod_col4 > *:nth-child(n+4) { margin-top: 40px; } } @media screen and (max-width: 899px) { .mod_col4 > *:nth-child(n+3) { margin-top: 40px; } } @media screen and (max-width: 899px) and (min-width: 640px) { .mod_col4::after { content: ''; display: block; width: calc((100% - 40px) / 2); } .mod_col4 > * { width: calc((100% - 40px) / 2); } } @media screen and (max-width: 639px) { .mod_col4 { display: block; } .mod_col4 > * { width: 100%; margin: 0 auto; } .mod_col4 > * + * { margin-top: 40px; } } .mod_set4 .textbox { margin-top: 25px; font-size: 20px; font-size: 2rem; line-height: 1.4; font-weight: bold; } .mod_set4 .textbox > .explanation { margin-top: 10px; font-size: 16px; font-size: 1.6rem; font-weight: normal; } .mod_set4.style1 { text-align: center; } .mod_set4.style1 .thu { margin: auto; width: 164px; } .mod_set4.style1 .thu > img { border-radius: 50%; } .mod_set4.style1 .textbox > .text2 { margin-top: 20px; font-size: 18px; font-size: 1.8rem; line-height: 1.8; font-weight: normal; } .mod_set4.style2 { background-color: var(--bg-subcolor); } .mod_set4.style2 > a { display: block; padding: 40px 25px; width: 100%; height: 100%; } .mod_set4.style2 .thu { margin: auto; width: 100%; max-width: 145px; } .mod_set4.style2 .btn { margin: 30px auto 0; font-size: 15px; font-size: 1.5rem; max-width: 219px; } .mod_set4.style2 .btn > span { padding: 15px; } .mod_set4.style3 .icon { text-align: center; align-items: center; display: flex; } .mod_set4.style3 .icon::before, .mod_set4.style3 .icon::after { content: ""; background-color: var(--light-green); flex-grow: 1; height: 1px; } .mod_set4.style3 .icon::before { margin-right: 20px; } .mod_set4.style3 .icon::after { margin-left: 20px; } .mod_set4.style3 .icon > img { width: 24px; } .mod_set4.style3 .icon + * { margin-top: 30px; } .mod_set4.style3 p { margin-top: 20px; font-size: 16px; font-size: 1.6rem; line-height: 1.6; } .lp-flex .section-content .flex { flex-wrap: wrap; gap: 56px 24px; margin-top: 55px; } .lp-flex h3 { font-size: 20px; line-height: 30px; margin-bottom: 16px; } .lp-flex .flex-item.w-2column { width: calc(50% - 24px); } .lp-flex .flex-item.w-3column { width: calc(33% - 24px); } .lp-flex .flex-item.w-4column { width: calc(25% - 24px); } .lp-flex .detail .item { padding-top: 24px; } .lp-flex .detail .item div:first-child { margin-top: 0; } .lp-3column .detail .logo { width: 100%; height: 68px; display: flex; margin-bottom: 30px; } .lp-flex .detail > .icon { border-radius: 100%; width: 115px; height: 115px; background: #fff; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; } .lp-flex .detail .section-img img { height: auto; max-width: 100%; } .lp-flex .detail > .section-img.icon img { width: auto; height: auto; } .lp-flex .detail > .icon i, .lp-flex .detail > .section-img.icon img { max-width: 70px; max-height: 70px; } .lp-flex .detail > .icon i { position: absolute; bottom: 0; right: 0; top: 50%; left: calc(50%); transform: translate(-50%, -50%); text-align: center; } .lp-flex .detail>.icon i > span svg { width: 100%; height: 100%; display: inline-block; } .lp-flex .detail .icon i span svg path { fill: #1C2F19; } .lp-flex .detail .subtitle { font-size: 15px; margin-top: 16px; line-height: 22.5px; } .lp-flex .detail .text { font-size: 16px; margin-top: 16px; line-height: 1.6; } @media screen and (max-width: 1024px) { .lp-flex .flex-item.w-3column, .lp-flex .flex-item.w-4column { width: calc(50% - 24px); } } @media screen and (max-width: 639px) { .lp-flex .flex-item.w-2column, .lp-flex .flex-item.w-3column, .lp-flex .flex-item.w-4column { width: 100%; } } .lp-archive-section img { width: 100%; height: auto; } .lp-archive-section .section-content .flex { gap: 40px 24px; margin-top: 55px; } .lp-archive-section .flex-item { width: calc(33% - 12px); } .lp-archive-section .layout-type2 .flex-item { background: #fff; box-shadow: 0 0 35px rgba(0, 0, 0, .09); } .lp-archive-section:not(:has(.layout-type1)) h3 { font-size: 20px; line-height: 30px; margin-bottom: 5px; transition: .3s; } .lp-archive-section .layout-type1 h3 { margin-bottom: 50px; transition: .3s; } .lp-archive-section .layout-type3 h3 { font-size: 20px; line-height: 30px; } .lp-archive-section h3 span { position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color: #1C2F19; } .lp-archive-section .flex-item .detail { color: #202020; display: block; display: flex; -ms-flex-direction: column; flex-direction: column; overflow: hidden; transition: all .3s; width: 100%; background: #fff; box-shadow: 0 0 35px rgba(0, 0, 0, .09); } .lp-archive-section .layout-type2 .flex-item .detail { background: unset; box-shadow: unset; } .lp-archive-section .flex-item .detail .img { position: relative; -ms-flex-preferred-size: auto; flex-basis: auto; overflow: hidden; } .lp-archive-section .layout-type2 .flex-item .detail .img { height:230px; } .lp-archive-section .detail .img img { width: 100%; margin: 0; overflow: hidden; transition: all 0.3s ease; } .lp-archive-section .layout-type2 .flex-item .detail .img img{ height:100%; object-fit:cover; } .lp-archive-section a:hover .detail .img img { transform: scale(1.1); } .lp-archive-section .detail .text { font-size: 16px; } .lp-archive-section .detail .item { padding: 30px 20px 40px; } .lp-archive-section .detail .item > div:first-child { margin-top: 0; } .lp-archive-section .layout-type3 .detail .item { padding: 20px 0 0; } .lp-archive-section .detail .logo { width: 100%; height: 68px; display: flex; margin-bottom: 30px; } .lp-archive-section .detail .logo img { max-height: max-content; max-width: max-content; } .lp-archive-section .detail .subtitle { font-size: 16px; margin-top: 5px; line-height: 24px; color:#4B5563; } .lp-archive-section .detail .text { font-size: 16px; margin-top: 16px; line-height: 24px; } .lp-archive-section .layout-type2 .detail .text { display:none; } .lp-archive-section .detail .tag { margin-top: 20px; gap: 8px; display: flex; flex-wrap: wrap; } .lp-archive-section .detail .tag span { padding: 4px 8px; color: #fff; font-size: 12px; line-height: 18px; display: inline-block; background-color: #1C2F19; word-break: break-all; } .lp-archive-section .layout-type1 .detail .tag span { color: #1C2F19; border: 1px solid #1C2F19; background-color: #fff; border-radius: 50px; padding: 4px 12px; } .lp-archive-section .indus_number_output{ margin-top:16px; color:#4B5563; } .lp-archive-section .layout-type3 .flex-item .detail { box-shadow: none; background: none; } .lp-archive-section .layout-type2 .detail .logo { max-height: 28px; margin-bottom: 16px; } .lp-archive-section .layout-type2 .detail .logo img { max-height: 16px; } @media screen and (max-width: 936px) { .lp-archive-section .flex-item { width: 48%; } .lp-archive-section .section-content .flex { flex-wrap: wrap; } } @media screen and (max-width: 639px) { .lp-archive-section .flex-item { width: 100%; } } /*一覧ページ ボタン用*/ .section-cta.position-left{ display: flex; align-items: center; justify-content: left; } .section-cta.position-right{ display: flex; align-items: center; justify-content: right; } .section-cta.position-right:has(.arrow-right2){ padding-right:25px; } .section-cta.position-center{ display: flex; align-items: center; justify-content: center; } .lp-table-content .section-content table{ width: 100%; } .lp-table-content .section-content table.top tr th{ vertical-align:top; } .lp-table-content .section-content table.center tr th{ vertical-align:middle; } .lp-table-content .section-content table.bottom tr th{ vertical-align:bottom; } .lp-table-content .section-content table th{ width: 25%; box-sizing: border-box; padding:12px 30px; } .lp-table-content .section-content table td{ width: 75%; box-sizing: border-box; padding:12px 30px; } .lp-table-content .section-content table.normal tr:last-child th{ border-bottom:none; } .lp-table-content .section-content .normal, .lp-table-content .section-content .normal th, .lp-table-content .section-content .normal td{ border:solid 1px; } .lp-table-content .section-content .display_border_beside tr{ position:relative; } .lp-table-content .section-content .display_border_beside tr:after{ content: ""; display: block; width: 100%; height:2px; position: absolute; bottom: 0; left:0; background-image: linear-gradient( to right, #1C2F19 0%, #1C2F19 25%,#cdf986 25%, #cdf986 100%); } .lp-table-content .section-content .display_border_beside tr th, .lp-table-content .section-content .display_border_beside tr td{ padding: 30px 12px; } .lp-table-content .section-content .display_border_vertical tr{ margin-bottom:12px; display: flex; width: 100%; } .lp-table-content .section-content .display_border_vertical th{ border-right: solid 2px #1C2F19; } .lp-table-content .section-content .display_background_thin th{ background-color: #F8FBEA; } .lp-table-content .section-content .display_background_thin, .lp-table-content .section-content .display_background_thin th, .lp-table-content .section-content .display_background_thin td{ border: solid 1px #E9ECEF; } .lp-table-content .section-content .display_background_dark th{ background-color: #1C2F19; color:#fff; } .lp-table-content .section-content .display_background_dark, .lp-table-content .section-content .display_background_dark th, .lp-table-content .section-content .display_background_dark td{ border: solid 1px #999; } .lp-table-content .section-content .display_intersection_gray tr{ background-color: #F9FAFB; } .lp-table-content .section-content .display_intersection_gray tr:nth-child(even){ background-color: #E9ECEF; } .lp-table-content .text{ margin-bottom:50px; } @media screen and (max-width: 768px) { .lp-table-content .section-content table tr{ display: flex; flex-wrap: wrap; } .lp-table-content .section-content .display_border_beside tr:after{ content:unset; } .lp-table-content .section-content table tr th, .lp-table-content .section-content table tr td{ width:100%; } .lp-table-content .section-content .display_border_beside tr th{ border-bottom: #1C2F19 solid 2px; } .lp-table-content .section-content .display_border_beside tr td{ border-bottom: #F8FBEA solid 2px; margin-bottom:10px; } .lp-table-content .section-content .display_border_beside tr:last-child td{ margin-bottom:0; } .lp-table-content .section-content .display_border_vertical th{ border-right: unset; border-bottom: solid 2px #1C2F19; } .lp-table-content .section-content .display_intersection_gray tr th{ padding: 12px 30px 0px 30px; } .lp-table-content .section-content .display_intersection_gray tr td{ padding: 5px 30px 12px 30px; } } .lp-table-content-3column .section-content > h4 { color: #1C2F19; margin-bottom: 40px; line-height: 1.5; letter-spacing: 1.2px; } .lp-table-content-3column .section-content > p.text { font-size: 20px; font-weight: 700; margin-bottom: 40px; letter-spacing: 1px; } .lp-table-content-3column table { width: 100%; border-collapse: collapse; white-space: nowrap; min-width: 900px; border: 1px solid #D7D7D7; } .lp-table-content-3column table thead { border-bottom: 1px solid #D7D7D7; } .lp-table-content-3column table thead tr th:not(:first-child) { border-left: 1px solid #D7D7D7; } .lp-table-content-3column thead tr th { padding: 15px; color: #fff; font-size: 22px; letter-spacing: 2.2px; } .lp-table-content-3column tbody tr { border-bottom: 1px solid #D7D7D7; } .lp-table-content-3column tbody tr:last-child { border-bottom: none; } .lp-table-content-3column tbody th { padding: 18px; font-size: 15px; font-weight: 400; letter-spacing: 1.5px; width: 22%; position: relative; } .lp-table-content-3column tbody th:has(.auxiliary) { padding-right: 35px; } .lp-table-content-3column tbody td { font-size: 22px; font-weight: 400; letter-spacing: 1.1px; padding: 18px; border-left: 1px solid #D7D7D7; width: 39%; } .lp-table-content-3column tbody td span.small { font-size: 18px; letter-spacing: 0.9px; } .lp-table-content-3column .auxiliary { position: absolute; display: inline-block; width: 18px; height: 18px; vertical-align: middle; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4IiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfOTc4Xzg4MDYpIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkgMTYuODc1QzExLjA4ODYgMTYuODc1IDEzLjA5MTYgMTYuMDQ1MyAxNC41Njg1IDE0LjU2ODVDMTYuMDQ1MyAxMy4wOTE2IDE2Ljg3NSAxMS4wODg2IDE2Ljg3NSA5QzE2Ljg3NSA2LjkxMTQyIDE2LjA0NTMgNC45MDgzOCAxNC41Njg1IDMuNDMxNTNDMTMuMDkxNiAxLjk1NDY4IDExLjA4ODYgMS4xMjUgOSAxLjEyNUM2LjkxMTQyIDEuMTI1IDQuOTA4MzggMS45NTQ2OCAzLjQzMTUzIDMuNDMxNTNDMS45NTQ2OCA0LjkwODM4IDEuMTI1IDYuOTExNDIgMS4xMjUgOUMxLjEyNSAxMS4wODg2IDEuOTU0NjggMTMuMDkxNiAzLjQzMTUzIDE0LjU2ODVDNC45MDgzOCAxNi4wNDUzIDYuOTExNDIgMTYuODc1IDkgMTYuODc1Wk05IDE4QzExLjM4NjkgMTggMTMuNjc2MSAxNy4wNTE4IDE1LjM2NCAxNS4zNjRDMTcuMDUxOCAxMy42NzYxIDE4IDExLjM4NjkgMTggOUMxOCA2LjYxMzA1IDE3LjA1MTggNC4zMjM4NyAxNS4zNjQgMi42MzYwNEMxMy42NzYxIDAuOTQ4MjEyIDExLjM4NjkgMCA5IDBDNi42MTMwNSAwIDQuMzIzODcgMC45NDgyMTIgMi42MzYwNCAyLjYzNjA0QzAuOTQ4MjEyIDQuMzIzODcgMCA2LjYxMzA1IDAgOUMwIDExLjM4NjkgMC45NDgyMTIgMTMuNjc2MSAyLjYzNjA0IDE1LjM2NEM0LjMyMzg3IDE3LjA1MTggNi42MTMwNSAxOCA5IDE4WiIgZmlsbD0iIzdBN0E3QSIvPjxwYXRoIGQ9Ik01LjkxMDQgNi41MDkyNUM1LjkwODg2IDYuNTQ1NTggNS45MTQ3NiA2LjU4MTg0IDUuOTI3NzYgNi42MTU4MUM1Ljk0MDc1IDYuNjQ5NzcgNS45NjA1NSA2LjY4MDcyIDUuOTg1OTUgNi43MDY3NEM2LjAxMTM0IDYuNzMyNzcgNi4wNDE3OSA2Ljc1MzMzIDYuMDc1NDIgNi43NjcxNUM2LjEwOTA2IDYuNzgwOTcgNi4xNDUxNiA2Ljc4Nzc3IDYuMTgxNTIgNi43ODcxM0g3LjEwOTY1QzcuMjY0OSA2Ljc4NzEzIDcuMzg4NjUgNi42NiA3LjQwODkgNi41MDU4OEM3LjUxMDE1IDUuNzY3ODggOC4wMTY0IDUuMjMwMTMgOC45MTg2NSA1LjIzMDEzQzkuNjkwNCA1LjIzMDEzIDEwLjM5NjkgNS42MTYgMTAuMzk2OSA2LjU0NDEzQzEwLjM5NjkgNy4yNTg1IDkuOTc2MTUgNy41ODcgOS4zMTEyNyA4LjA4NjVDOC41NTQxNSA4LjYzNjYzIDcuOTU0NTIgOS4yNzkgNy45OTcyNyAxMC4zMjE5TDguMDAwNjUgMTAuNTY2QzguMDAxODMgMTAuNjM5OCA4LjAzMTk4IDEwLjcxMDIgOC4wODQ2IDEwLjc2MkM4LjEzNzIxIDEwLjgxMzcgOC4yMDgwOCAxMC44NDI4IDguMjgxOSAxMC44NDI4SDkuMTk0MjdDOS4yNjg4NiAxMC44NDI4IDkuMzQwNCAxMC44MTMxIDkuMzkzMTQgMTAuNzYwNEM5LjQ0NTg5IDEwLjcwNzYgOS40NzU1MiAxMC42MzYxIDkuNDc1NTIgMTAuNTYxNVYxMC40NDM0QzkuNDc1NTIgOS42MzU2MyA5Ljc4MjY1IDkuNDAwNSAxMC42MTE4IDguNzcxNjNDMTEuMjk2OSA4LjI1MDc1IDEyLjAxMTMgNy42NzI1IDEyLjAxMTMgNi40NTg2M0MxMi4wMTEzIDQuNzU4NzUgMTAuNTc1OCAzLjkzNzUgOS4wMDQxNSAzLjkzNzVDNy41Nzg3NyAzLjkzNzUgNi4wMTcyNyA0LjYwMTI1IDUuOTEwNCA2LjUwOTI1Wk03LjY2MjAyIDEyLjk5MjZDNy42NjIwMiAxMy41OTIzIDguMTQwMTUgMTQuMDM1NSA4Ljc5ODI3IDE0LjAzNTVDOS40ODM0IDE0LjAzNTUgOS45NTQ3NyAxMy41OTIzIDkuOTU0NzcgMTIuOTkyNkM5Ljk1NDc3IDEyLjM3MTYgOS40ODIyNyAxMS45MzUxIDguNzk3MTUgMTEuOTM1MUM4LjE0MDE1IDExLjkzNTEgNy42NjIwMiAxMi4zNzE2IDcuNjYyMDIgMTIuOTkyNloiIGZpbGw9IiM3QTdBN0EiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMF85NzhfODgwNiI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==) no-repeat 50% / contain; border-radius: 100%; right: 15px; top: calc(50% - 8px); cursor: pointer; } .lp-table-content-3column .vertical-top .auxiliary { top: 22px; } .lp-table-content-3column .auxiliary-text { opacity: 0; display: inline-block; font-size: 12px; background: #8c8c8c; color: white; padding: 5px; position: absolute; text-align: center; transform: translateX(-45%) translateY(-5px); transition: all 0.4s ease; visibility: hidden; width: 15em; max-width: 15em; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; white-space: normal; bottom: 100%; } .lp-table-content-3column .auxiliary:hover .auxiliary-text { visibility: visible; opacity: 1.0; bottom: calc(100% + 5px); } .lp-table-content-3column .auxiliary-text:after { width: 0; height: 0; border-top: 6px solid #8c8c8c; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); } .lp-table-content-3column .frame_beside, .lp-table-content-3column .frame_beside th, .lp-table-content-3column .frame_beside td { border-left: none !important; border-right: none !important; } @media screen and (max-width: 936px) { .lp-table-content-3column .section-table { overflow-x: scroll; } .lp-3column .flex-item { width: 48%; } .lp-3column .section-content .flex { flex-wrap: wrap; } } @media screen and (max-width: 639px) { .lp-3column .flex-item { width: 100%; } } .lp-flow-list .section-item { display: flex; position: relative; } .lp-flow-list .section-item:not(:first-child) { padding-top: 30px; } .lp-flow-list .section-item:has(+.section-item ):before, .lp-flow-list .section-item:has(+.section-item):after { width: 8px; height: 8px; content: ""; left: 68px; position: absolute; bottom: -18px; transform: translateY(-50%); background: #8FC9F6; border-radius: 100%; } .lp-flow-list .section-item:has(+.section-item):after { bottom: -30px; } .lp-flow-list .subtext { padding: 14px; font-size: 42px; font-weight: 700; line-height: 1.50; color: #fff; letter-spacing: 2.1px; padding: 5px 14px; width: 150px; min-width: 150px; position: relative; display: flex; justify-content: center; align-items: center; } .lp-flow-list .subtext:after { border-top: 12px solid transparent; border-bottom: 12px solid transparent; content: ""; height: 0; right: -10px; position: absolute; top: 50%; transform: translateY(-50%); width: 0; border-left: 12px solid #cdf986; } .lp-flow-list .subtext.u-bgcolor--primary:after { border-left: 12px solid #1C2F19; } .lp-flow-list .detail { display: flex; padding: 14px 30px 14px 50px; background-color: #fff; align-items: center; gap: 5px 30px; width: 100%; } .lp-flow-list .detail .title { font-size: 20px; font-weight: 700; letter-spacing: 1px; width: 215px; min-width: 200px; } .lp-flow-list .detail .text { font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 1.6px; flex-grow: 1; } .lp-flow-list .section-content > p.text { color: #1C2F19; margin-bottom: 40px; line-height: 1.5; letter-spacing: 1.2px; } @media screen and (max-width: 819px) { .lp-flow-list .detail { flex-wrap: wrap; } } @media screen and (max-width: 639px) { .lp-flow-list .subtext { width: 90px; min-width: 90px; font-size: 32px; } .lp-flow-list .detail { padding-left: 30px; } .lp-flow-list .section-item:has(+.section-item):after, .lp-flow-list .section-item:has(+.section-item):before { left: 41px; } .lp-flow-list .detail .title { font-size: 18px; min-width: auto; width: 100%; } } .lp-faq .section-content p { margin: 0; } .section-faq-item:not(:first-child) { margin-top: 60px; } .lp-faq h4 { margin-bottom: 20px; line-height: 1.6; letter-spacing: 2.4px; } .lp-faq .section-content .pattern1 .qa_color ul .faq-item .faq-title:before { color: #1C2F19; } .lp-faq .pattern1 .qa_color .faq-content:before { color: #cdf986; } .lp-faq .section-content .pattern1 ul .faq-item .faq-title { display: block; font-weight: 700; line-height: 1.2; padding: 0 30px 10px 50px; position: relative; font-size: 16px; font-style: normal; font-weight: 700; letter-spacing: 0.8px; border-bottom: 1px solid #D7D7D7; } .lp-faq .section-content .pattern1 ul .faq-item .faq-title:before{ content: "Q."; left: 0; position: absolute; } .lp-faq .pattern1 .faq-content:before { content: "A."; font-weight: 700; position: absolute; left: 0; top: 15px; } .lp-faq .pattern1 .faq-button { content: ""; display: block; width: 25px; height: 20px; right: 0; top: 6px; background: #1C2F19; mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTMuMjcxOTcgNi4xMzMzQzMuNjM0NiA1Ljc3MDY3IDQuMjIyNTQgNS43NzA2NyA0LjU4NTE3IDYuMTMzM0w5LjUgMTEuMDQ4MUwxNC40MTQ4IDYuMTMzM0MxNC43Nzc1IDUuNzcwNjcgMTUuMzY1NCA1Ljc3MDY3IDE1LjcyOCA2LjEzMzNDMTYuMDkwNyA2LjQ5NTkzIDE2LjA5MDcgNy4wODM4NyAxNS43MjggNy40NDY1TDEwLjE1NjYgMTMuMDE3OUM5Ljc5Mzk3IDEzLjM4MDYgOS4yMDYwMyAxMy4zODA2IDguODQzNCAxMy4wMTc5TDMuMjcxOTcgNy40NDY1QzIuOTA5MzQgNy4wODM4NyAyLjkwOTM0IDYuNDk1OTMgMy4yNzE5NyA2LjEzMzNaIiBmaWxsPSIjMDA0NzlDIi8+PC9zdmc+); mask-position: center; mask-repeat: no-repeat; position: absolute; } .lp-faq .section-content .pattern1 ul .faq-item.content-visible .faq-button { transform: translateX(-12px) translateY(-10px) rotate(-180deg); } .lp-faq .faq-content { position: relative; padding: 15px 5px 15px 50px; font-size: 16px; letter-spacing: 0.8px; } .lp-faq .section-content .btn, .lp-faq .section-content .changed { color: #1C2F19; text-decoration: none; display: block; text-align: end; } .lp-faq .section-content .btn { margin-top: 30px; } .lp-faq .section-faq { position: relative; } .lp-faq .section-content .changed { margin-top: 0; top: 77%; cursor: pointer; left: 46%; padding: 30px; position: absolute; } .lp-faq .section-content .changed:after { content: "\f106"; float: right; font: normal normal normal 36px FontAwesome; position: absolute; right: 40%; top: 58px; transform: rotate(180deg); } @media screen and (max-width: 768px) { .lp-faq ul.readmore { margin-bottom: 20px; } } .lp-faq li.faq-item.item-3.changed-op { display: block !important; opacity: .3; } .lp-faq li.faq-item.item-4.selected.changed-op { display: block !important; margin-top: 30px; opacity: .1; } .lp-faq .section-content .btn { cursor: pointer; margin-top: 70px; padding: 30px; text-align: center; position: relative; } .lp-faq .section-content .btn:after { top: 8%; content: "\f106"; float: right; font: normal normal normal 36px FontAwesome; left: 50%; position: absolute; transform: translate(-50%, -50%); } .lp-faq .section-content .btn.changed { position: absolute; bottom: -180px; left: 50%; transform: translate(-50%, -50%); } .lp-faq .section-content .btn.changed:after { top: 58px; transform: rotate(180deg); } .lp-faq .section-content .pattern2 ul .faq-item .faq-title { background-color: #1C2F19; display: block; color: #fff; font-weight: 700; position: relative; padding: 20px 60px 20px 20px; } .lp-faq .section-content .pattern2 li.faq-item { margin-top: -10px; } .lp-faq .pattern2 .faq-button { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); border: 16px solid #fff; border-radius: 5px; } .lp-faq:not(:has(.pattern1)) .faq-button:after,.lp-faq .faq-button:before { content: ""; height: 1px; left: calc(50% - 7.5px); position: absolute; top: calc(50% - 1.5px); transition: .3s; width: 15px; } .lp-faq:not(:has(.pattern1)) .faq-item.content-visible .faq-button:after { transform: rotate(0deg); } .lp-faq:not(:has(.pattern1)) .faq-button:after { transform: rotate(90deg); } .lp-faq .pattern2 .faq-content { padding: 20px; background-color: #F8FBEA; } .lp-faq .pattern2 .faq-button:after, .lp-faq .pattern2 .faq-button:before { background-color: #1C2F19; left: calc(50% - 11px); top: calc(50% + -1px); height: 3px; width: 23px; } .lp-faq .section-content .pattern2 ul .faq-item .faq-title:before, .lp-faq .pattern2 .faq-content:before{ content: none; } .lp-faq .pattern2.i-bg-none .faq-button { border: 16px solid #1C2F19; } .lp-faq .pattern2.i-bg-none .faq-button:after, .lp-faq .pattern2.i-bg-none .faq-button:before { background-color: #ffffff; } .lp-box-content .box-content:not(:first-child) { margin-top: 56px; } .lp-box-content .box-content { border: 1px solid; } .lp-box-content .box-content > h4 { font-size: 24px; margin-bottom: 0; color: #fff; line-height: 1.5; letter-spacing: 1.2px; padding: 16px 32px; } .lp-box-content .box-content:has(.u-bgcolor--primary) { border-color: #1C2F19; } .lp-box-content .box-content:has(.u-bgcolor--subcolor) { border-color: #cdf986; } .lp-box-content .section-content .detail { padding: 8px 32px; background: #fff; } .lp-box-content .section-content .item { margin: 24px 0; } .lp-box-content .section-content .title { font-size: 20px; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; } .lp-box-content .title.design-under, .lp-box-content .title.design-under2 { position: relative; padding-bottom: 5px; margin-bottom: 15px; } .lp-box-content .title.design-under { width: fit-content; } .lp-box-content .title.design-under:after { position: absolute; content: ''; width: 100%; left: 0; bottom: -3px; padding-bottom: 5px; border-bottom: 3px solid #1C2F19; } .lp-box-content:has(h4.u-bgcolor--subcolor) .title.design-under:after { border-bottom: 3px solid #cdf986; } .lp-box-content .title.design-under2:before { position: absolute; content: ''; width: 100%; left: 0; bottom: -3px; padding-bottom: 5px; opacity: 0.3; border-bottom: 3px solid #cdf986; } .lp-box-content .title.design-under2:after { position: absolute; content: ''; width: 7.5%; left: 0; bottom: -3px; border-bottom: 3px solid #1C2F19; } .lp-box-content:has(h4.u-bgcolor--subcolor) .title.design-under2:after { border-bottom: 3px solid #cdf986; } .lp-step-flow .wrapper { margin: 0 auto; } .lp-step-flow img { width: 100%; height: auto; } .lp-step-flow header { margin-bottom: 60px; } .lp-step-flow h2 { font-size: 2.125rem; line-height: 1.45; position: relative; z-index: 1; } .lp-step-flow h3 { font-size: 1.25rem; line-height: 1.45; position: relative; z-index: 1; } .lp-step-flow .section-content { max-width: 790px; margin: 0 auto; display: flex; gap: 60px; flex-flow: column; } .lp-step-flow .img { text-align: center; } .lp-step-flow .title { position: relative; } .lp-step-flow .en-text.en-text-h2 { text-align: center; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); z-index: 0; font-family: Oswald; font-size: 130px; } .lp-step-flow .en-text.en-text-h3 { text-align: center; position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); z-index: 0; font-family: Oswald; font-size: 65px; } .lp-step-flow .en-text.en-text-h2 .border { background-color: #f3c729; bottom: 80px; content: ""; height: 3px; left: 50%; position: absolute; transform: translateX(-50%); width: 60px; } .lp-step-flow .en-text.en-text-h3 .border { background-color: #f3c729; bottom: 38px; content: ""; height: 3px; left: 50%; position: absolute; transform: translateX(-50%); width: 30px; } .lp-step-flow .tag-title, .small-title { font-size: 1.25rem; text-align: center; line-break: anywhere; font-weight: 700; } .lp-step-flow .tag-title { background-color: #22B4D6; border-radius: 30px; padding: 0 20px; color: #fff; display: inline-block; } .lp-step-flow .small-title { margin: 10px auto; } .lp-step-flow .step-item { position: relative; background-color: #F5F4EF; text-align: center; padding: 20px 30px; box-shadow: 7px 7px #1E3071; } .lp-step-flow .step-item:after, .lp-step-flow.u-width-default .step-item:after { content: ""; position: absolute; bottom: -50px; left: 50%; transform: translate(-50%, 0%); border-left: 87px solid transparent; border-right: 87px solid transparent; border-top: 33px solid #C6BE98; } .lp-step-flow .step-item:last-child::after { border: none; } .lp-step-flow .step-item .step-bg { background-color: #F5F4EF; border-radius: 50%; height: 220px; margin: 0 auto; position: relative; width: 220px; } .lp-step-flow .step-item .text { text-align: justify; } @media screen and (max-width: 639px) { .lp-step-flow h2 { font-size: 1.625rem; } .lp-step-flow h3 { font-size: 1.125rem; } .lp-step-flow .en-text.en-text-h2 { font-size: 65px; } .lp-step-flow .border { display: none; } .lp-step-flow .en-text.en-text-h3 { font-size: 65px; } } .mod_form_section .mod_form_twocolumn { gap: 80px; } .mod_form_section .mod_form_twocolumn .mod_left_column { max-width: 550px; width: 50%; font-size: 18px; line-height: 1.8; } .mod_form_section .mod_form_twocolumn .mod_left_column h1 { margin-bottom: 30px; font-size: 35px; font-weight: 700; } .mod_form_section .mod_form_twocolumn .mod_left_column .mod_image_wrap { margin-bottom: 50px; } .mod_form_section .mod_form_twocolumn .mod_left_column h2 { margin-top: 40px; margin-bottom: 30px; font-size: 30px; font-weight: 700; } .mod_form_section .mod_form_twocolumn .mod_left_column h2 + * { margin-top: 0; } .mod_form_section .mod_form_twocolumn .mod_left_column ul li, .mod_form_section .mod_form_twocolumn .mod_left_column ol li { margin: 5px 0 0 25px; position: relative; } .mod_form_section .mod_form_twocolumn .mod_left_column ul li::before { content: ""; width: 15px; height: 15px; background-color: var(--primary); border-radius: 50%; position: absolute; top: calc(50% - 7px); left: -25px; } .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text div { padding: 20px; border: 1px solid var(--primary); } .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text div li::before { top: 7px; } .mod_form_section .mod_form_twocolumn .mod_right_column { flex: 1; line-height: 1.8; } .form-wrap { padding: 70px 40px; background-color: var(--beige); border-radius: 16px; } @media screen and (max-width: 1024px) { .mod_form_section .mod_form_twocolumn { flex-direction: column; gap: 20px; } .mod_form_section .mod_form_twocolumn .mod_right_column { width: 100%; } } @media screen and (max-width: 767px) { .form-wrap { padding: 40px 20px; } } /*ウェビナーフォーム*/ .seminar-lp { font-family: Noto Sans JP, sans-serif; } .seminar-lp.bg-F1F5F2 { background: #f1f5f2; } .seminar-lp .mod_form_section .mod_form_twocolumn { justify-content: space-between; gap: 0; margin: 0 auto; max-width: 1200px; align-items: flex-start; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column { width: calc(100% - 565px); max-width: unset; } @media (max-width: 1024px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column { width: 100%; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_right_column { width: 485px; background: var(--white); flex: unset; } @media (max-width: 1024px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_right_column { width: 100%; margin-top: 40px; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_right_column .form-wrap { background: var(--white); padding: 25px 55px 40px; } @media (max-width: 1024px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_right_column .form-wrap { padding: 15px 30px 40px; } } .seminar-lp form.hs-form fieldset.form-columns-2 .hs-form-field:last-child { margin-left: 0px; } .seminar-lp form.hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; box-sizing: border-box; gap: 25px; } .seminar-lp .hs_recaptcha { margin: 10px 0 20px; } .seminar-lp form.hs-form fieldset .hs-form-booleancheckbox label:has(.hs-form-required) { padding-right: 0; margin: 0 auto 0 40px; width: fit-content; } @media (max-width: 768px) { .seminar-lp form.hs-form fieldset .hs-form-booleancheckbox label:has(.hs-form-required) { margin: 0 auto 0 0px; } } .seminar-lp form.hs-form .form-privacy { font-size: 1.2rem; font-weight: 400; line-height: 150%; color: #333; margin-bottom: -20px; margin-top: 30px; } @media (max-width: 768px) { .seminar-lp form.hs-form .form-privacy { font-size: 1.1rem; } } .seminar-lp form.hs-form .form-privacy a:nth-child(1) { display: block; float: left; margin-right: 10px; width: 60px; height: 60px; text-decoration: none; } .seminar-lp form.hs-form .form-privacy a { color: #333; border: unset; text-decoration: underline; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column h1 { color: #5e8e3e; font-size: 2.8rem; font-weight: 700; line-height: 150%; margin-bottom: 16px; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column h1 { font-size: 2.4rem; margin-bottom: 8px; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .data { color: #5e8e3e; font-size: 2rem; font-weight: 700; line-height: 150%; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .data { font-size: 1.6rem; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .mod_image_wrap { margin: 40px 0; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .mod_image_wrap { margin: 24px 0; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text { display: flex; flex-direction: column; gap: 40px; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text { gap: 24px; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article h2 { color: #5e8e3e; font-size: 2.4rem; font-weight: 700; line-height: 150%; margin-bottom: 16px; margin-top: 0; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article h2 { font-size: 2.2rem; margin-bottom: 8px; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article p { color: #000; font-size: 1.6rem; line-height: 150%; font-weight: 400; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article dl { display: flex; align-items: center; gap: 16px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article dl:nth-child(3) { margin: 4px 0; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article dl dt { color: #5e8e3e; font-size: 16px; font-weight: 400; line-height: 160%; letter-spacing: 0.8px; position: relative; min-width: 67px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article dl dt:after { content: ""; position: absolute; top: 50%; width: 1px; height: 1lh; background-color: #adb5bd; transform: translateY(-50%); right: -8px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article dl dd { color: #000; font-size: 16px; font-weight: 400; line-height: 160%; letter-spacing: 0.8px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__image { width: 130px; height: 130px; aspect-ratio: 1/1; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__image img { width: 100%; height: 100%; object-fit: cover; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__text { display: flex; width: calc(100% - 130px); flex-direction: column; gap: 8px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__text p { color: #000; font-size: 1.8rem; font-weight: 400; line-height: 150%; } @media (max-width: 768px) { .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__text p { font-size: 1.6rem; } } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article .d-flex .d-flex__text p strong { font-size: 2rem; font-weight: 700; line-height: 150%; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text div { border: none; padding: 0; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article ul li, .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text ul li { margin-left: 0; line-height: 200%; font-size: 16px; } .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text article ul li:before, .seminar-lp .mod_form_section .mod_form_twocolumn .mod_left_column .inner-text ul li:before { content: unset; } .seminar-lp form.hs-form fieldset label:not(.hs-form-radio-display):not(.hs-error-msg):not( .hs-form-booleancheckbox-display ):not(.hs-form-checkbox-display) { color: #333; font-size: 16px; font-weight: 400; line-height: 150%; margin-bottom: 10px; display: inline-block; } .seminar-lp form.hs-form fieldset label .hs-form-required:after { top: 4px; border-radius: 3px; border: #e11717; background: #e11717; font-size: 12px; font-weight: 400; line-height: 150%; display: inline-flex; padding: 0px 6px 0px 5px; justify-content: center; align-items: center; } .seminar-lp form.hs-form fieldset label.not-required::after { content: "任意"; align-items: center; background: #5e8e3e; border: #5e8e3e; border-radius: 3px; display: inline-flex; font-size: 12px; font-weight: 400; justify-content: center; line-height: 150%; padding: 0 6px 0 5px; position: relative; top: -1px; margin-left: 3px; color: #fff; } .seminar-lp form.hs-form fieldset .hs-form-checkbox label.not-required::after { content: unset; } .seminar-lp form.hs-form .hs-button.primary { background: #5e8e3e; border: unset; color: #fff; font-family: Helvetica; font-size: 1.5rem; font-weight: 700; line-height: 140%; width: auto; height: auto; padding: 22px 67px; transition: 300ms ease; } @media (max-width: 1048px) { .seminar-lp form.hs-form .hs-button.primary { padding: 15px 40px; } } .seminar-lp form.hs-form fieldset .hs-form-field .input input:not([type="radio"]):not([type="file"]) { border-radius: 4px; border: 1px solid #b7b7b7; background: #fff; } .seminar-lp form.hs-form fieldset .hs-fieldtype-select .input select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 4px; border: 1px solid #b7b7b7; background: #fff; color: #000; font-size: 1.6rem; } .seminar-lp form.hs-form fieldset .hs-fieldtype-select .input:after { right: 10px; } .seminar-lp form.hs-form fieldset label .hs-form-required { position: absolute; } .seminar-lp form.hs-form fieldset .hs-form-booleancheckbox label .hs-form-required { position: unset; } .seminar-lp-tx h2 { font-size: 3.2rem; } .mod_thanks .mod_heading { margin-bottom: 30px; } .mod_thanks .mod_content_body { font-size: 18px; } .mod_thanks .flex { flex-direction: column; gap: 40px; } .mod_thanks .flex > * { margin: auto; } .mod_thanks .mod_button02{ max-width: 320px; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .lp-banner{ margin: 0 auto; } .lp-banner .container{ transition: filter 300ms ease; filter: brightness(1); } .lp-banner .container:hover{ filter: brightness(1.2); } .lp-banner .lp-banner-image{ display: block; box-shadow: 0px 0px 45px 0px rgba(28, 47, 25, 0.4); border-radius: 10px; } .lp-banner .lp-banner-text{ display: block; padding: 10px 0; color: #1A0DAB; font-size: 15px; font-weight: 400; line-height: 180%; text-decoration-line: underline; } .lp-module-footer .LP__footer.LP__footer--type1{ padding: 50px 0px; } .lp-module-footer .LP__footer.LP__footer--type1 .LP__footer__wrap{ display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; } @media ( max-width: 768px ){ .lp-module-footer .LP__footer.LP__footer--type1 .LP__footer__wrap{ max-width: 1200px; padding: 0 22px; flex-direction: column-reverse; align-items: center; gap: 20px; justify-content: unset; } } .lp-module-footer .LP__footer.LP__footer--type2{ padding: 36px 0px; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap{ display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; align-items: center; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left figure figcaption{ color: #333; font-size: 1.5rem; font-weight: 700; line-height: 180%; } .lp-module-footer .LP__footer.LP__footer--type2.LP__footer--type2--bk .LP__footer__wrap .LP__footer--left figure figcaption{ color: #fff; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left figure img{ display: block; width: 164px; height: auto; margin: 8px 0; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left .copy{ letter-spacing: 1.1px; } @media ( max-width: 768px ){ .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap{ flex-direction: column-reverse; padding: 0 20px; gap: 20px; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left figure figcaption{ text-align: center; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left figure img{ margin: 15px auto; } } .lp-module-footer .LP__footer .copy{ font-size: 1.1rem!important; color: #C9CED1; line-height: normal; display: inline-block; } .lp-module-footer .LP__footer .links{ display: flex; gap: 16px; } .lp-module-footer .LP__footer .links a{ transition: 300ms ease; font-size: 1.2rem; letter-spacing: .1em; } .lp-module-footer .LP__footer.LP__footer--type2 .links.pc{ display: flex; } @media ( max-width: 768px ) { .lp-module-footer .LP__footer.LP__footer--type2 .links.pc{ display: none; } } .lp-module-footer .LP__footer.LP__footer--type2 .links.sp{ display: none; } @media ( max-width: 768px ) { .lp-module-footer .LP__footer.LP__footer--type2 .links.sp{ display: flex; } } .lp-module-footer .LP__footer.LP__footer--type1 .links a{ color:#15141B; text-decoration: underline; } .lp-module-footer .LP__footer.LP__footer--type2 .links a{ color:#15141B; } .lp-module-footer .LP__footer.LP__footer--type2.LP__footer--type2--bk .links a{ color: #fff; } @media ( max-width: 768px ) { .lp-module-footer .LP__footer .links{ margin-top: 10px; flex-direction: column; gap: 0; } .lp-module-footer .LP__footer .links a{ font-size: 1.2rem; } } .lp-module-footer .LP__footer .links a:hover{ text-decoration: underline; } @media ( max-width: 768px ) { .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left{ display: flex; flex-direction: column; align-items: center; } .lp-module-footer .LP__footer.LP__footer--type2 .LP__footer__wrap .LP__footer--left .copy{ margin-top: 10px; } } /* Utilities */ /* ------------------------------------------------------------------------------------ Variables ------------------------------------------------------------------------------------ */ :root { /* colors */ --white: #FFFFFF; --gray: #5c615b; --black: #333333; --white-gray: #e2e2e2; --dark-green: #171E16; --normal-green: #a9db57; --light-green: #F0FBCC; --emerald-green: #00998D; --beige: #FFFFF6; --red: #CE2500; --gradation-green: linear-gradient(to right, #1E311A, #516C3A); --primary: #1C2F19; --sub: #cdf986; --default: #000000; --bgcolor: #FFFFFF; --bg-subcolor: #F8FBEA; --light-blue: #0075FF; --primary-web: #171E16; --primary-web-new : #516C3A; } /* ------------------------------------------------------------------------------------ Display ------------------------------------------------------------------------------------ */ .block { display: block; } .flex { display: flex; } .none { display: none; } .pcOnly, .tab1Only, .tab2Only, .spOnly { display: none; } @media screen and (min-width: 1120px) { .pcOnly { display: block; } } @media screen and (max-width: 1119px) and (min-width: 900px) { .tab1Only { display: block; } } @media screen and (max-width: 899px) and (min-width: 640px) { .tab2Only { display: block; } } @media screen and (max-width: 639px) { .spOnly { display: block; } } @media screen and (min-width: 1120px) { .pcNone { display: none; } } @media screen and (max-width: 1119px) and (min-width: 900px) { .tab1None { display: none; } } @media screen and (max-width: 899px) and (min-width: 640px) { .tab2None { display: none; } } @media screen and (max-width: 639px) { .spNone { display: none; } } /* ------------------------------------------------------------------------------------ Overflow ------------------------------------------------------------------------------------ */ .overflow-hidden { overflow: hidden; } /* ------------------------------------------------------------------------------------ Flex ------------------------------------------------------------------------------------ */ .items-center { align-items: center; } .justify-start { justify-content: start; } .justify-center { justify-content: center; } .justify-end { justify-content: end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .align-start { align-items: start; } .align-center { align-items: center; } .align-end { align-items: end; } .vertical-top { vertical-align: top; } .vertical-middle { vertical-align: middle; } .vertical-bottom { vertical-align: bottom; } /* ------------------------------------------------------------------------------------ Width/Height ------------------------------------------------------------------------------------ */ .w-auto { width: auto; } .w-full { width: 100%; } .w-fit { width: fit-content; } .h-auto { height: auto; } .h-full { height: 100%; } /* ------------------------------------------------------------------------------------ Margin ------------------------------------------------------------------------------------ */ .mx-auto { margin-left: auto; margin-right: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .mt-0 { margin-top: 0px !important; } .mb-0 { margin-bottom: 0px !important; } .ml-0 { margin-left: 0px !important; } .mt-5 { margin-top: 5px !important; } .mb-5 { margin-bottom: 5px !important; } .ml-5 { margin-left: 5px !important; } .mt-10 { margin-top: 10px !important; } .mb-10 { margin-bottom: 10px !important; } .ml-10 { margin-left: 10px !important; } .mt-15 { margin-top: 15px !important; } .mb-15 { margin-bottom: 15px !important; } .ml-15 { margin-left: 15px !important; } .mt-20 { margin-top: 20px !important; } .mb-20 { margin-bottom: 20px !important; } .ml-20 { margin-left: 20px !important; } .mt-25 { margin-top: 25px !important; } .mb-25 { margin-bottom: 25px !important; } .ml-25 { margin-left: 25px !important; } .mt-30 { margin-top: 30px !important; } .mb-30 { margin-bottom: 30px !important; } .ml-30 { margin-left: 30px !important; } .mt-35 { margin-top: 35px !important; } .mb-35 { margin-bottom: 35px !important; } .ml-35 { margin-left: 35px !important; } .mt-40 { margin-top: 40px !important; } .mb-40 { margin-bottom: 40px !important; } .ml-40 { margin-left: 40px !important; } .mt-45 { margin-top: 45px !important; } .mb-45 { margin-bottom: 45px !important; } .ml-45 { margin-left: 45px !important; } .mt-50 { margin-top: 50px !important; } .mb-50 { margin-bottom: 50px !important; } .ml-50 { margin-left: 50px !important; } .mt-55 { margin-top: 55px !important; } .mb-55 { margin-bottom: 55px !important; } .ml-55 { margin-left: 55px !important; } .mt-60 { margin-top: 60px !important; } .mb-60 { margin-bottom: 60px !important; } .ml-60 { margin-left: 60px !important; } .mt-65 { margin-top: 65px !important; } .mb-65 { margin-bottom: 65px !important; } .ml-65 { margin-left: 65px !important; } .mt-70 { margin-top: 70px !important; } .mb-70 { margin-bottom: 70px !important; } .ml-70 { margin-left: 70px !important; } .mt-75 { margin-top: 75px !important; } .mb-75 { margin-bottom: 75px !important; } .ml-75 { margin-left: 75px !important; } .mt-80 { margin-top: 80px !important; } .mb-80 { margin-bottom: 80px !important; } .ml-80 { margin-left: 80px !important; } .mt-85 { margin-top: 85px !important; } .mb-85 { margin-bottom: 85px !important; } .ml-85 { margin-left: 85px !important; } .mt-90 { margin-top: 90px !important; } .mb-90 { margin-bottom: 90px !important; } .ml-90 { margin-left: 90px !important; } .mt-95 { margin-top: 95px !important; } .mb-95 { margin-bottom: 95px !important; } .ml-95 { margin-left: 95px !important; } .mt-100 { margin-top: 100px !important; } .mb-100 { margin-bottom: 100px !important; } .ml-100 { margin-left: 100px !important; } .sp-mb-40{ margin-bottom: 40px !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; } .mt50 { margin-top: 50px !important; } .mt70 { margin-top: 70px !important; } .mb0 { margin-bottom: 0 !important; } /* ------------------------------------------------------------------------------------ Padding ------------------------------------------------------------------------------------ */ .pt-0 { padding-top: 0px !important; } .pb-0 { padding-bottom: 0px !important; } .pt-5 { padding-top: 5px !important; } .pb-5 { padding-bottom: 5px !important; } .pt-10 { padding-top: 10px !important; } .pb-10 { padding-bottom: 10px !important; } .pt-15 { padding-top: 15px !important; } .pb-15 { padding-bottom: 15px !important; } .pt-20 { padding-top: 20px !important; } .pb-20 { padding-bottom: 20px !important; } .pt-25 { padding-top: 25px !important; } .pb-25 { padding-bottom: 25px !important; } .pt-30 { padding-top: 30px !important; } .pb-30 { padding-bottom: 30px !important; } .pt-35 { padding-top: 35px !important; } .pb-35 { padding-bottom: 35px !important; } .pt-40 { padding-top: 40px !important; } .pb-40 { padding-bottom: 40px !important; } .pt-45 { padding-top: 45px !important; } .pb-45 { padding-bottom: 45px !important; } .pt-50 { padding-top: 50px !important; } .pb-50 { padding-bottom: 50px !important; } .pt-55 { padding-top: 55px !important; } .pb-55 { padding-bottom: 55px !important; } .pt-60 { padding-top: 60px !important; } .pb-60 { padding-bottom: 60px !important; } .pt-65 { padding-top: 65px !important; } .pb-65 { padding-bottom: 65px !important; } .pt-70 { padding-top: 70px !important; } .pb-70 { padding-bottom: 70px !important; } .pt-75 { padding-top: 75px !important; } .pb-75 { padding-bottom: 75px !important; } .pt-80 { padding-top: 80px !important; } .pb-80 { padding-bottom: 80px !important; } .pt-85 { padding-top: 85px !important; } .pb-85 { padding-bottom: 85px !important; } .pt-90 { padding-top: 90px !important; } .pb-90 { padding-bottom: 90px !important; } .pt-95 { padding-top: 95px !important; } .pb-95 { padding-bottom: 95px !important; } .pt-100 { padding-top: 100px !important; } .pb-100 { padding-bottom: 100px !important; } .pt-105 { padding-top: 105px !important; } .pb-105 { padding-bottom: 105px !important; } .pt-110 { padding-top: 110px !important; } .pb-110 { padding-bottom: 110px !important; } .pt-115 { padding-top: 115px !important; } .pb-115 { padding-bottom: 115px !important; } .pt-120 { padding-top: 120px !important; } .pb-120 { padding-bottom: 120px !important; } .pt-125 { padding-top: 125px !important; } .pb-125 { padding-bottom: 125px !important; } .pt-130 { padding-top: 130px !important; } .pb-130 { padding-bottom: 130px !important; } .pt-135 { padding-top: 135px !important; } .pb-135 { padding-bottom: 135px !important; } .pt-140 { padding-top: 140px !important; } .pb-140 { padding-bottom: 140px !important; } .pt-145 { padding-top: 145px !important; } .pb-145 { padding-bottom: 145px !important; } .pt-150 { padding-top: 150px !important; } .pb-150 { padding-bottom: 150px !important; } .pt-155 { padding-top: 155px !important; } .pb-155 { padding-bottom: 155px !important; } .pt-160 { padding-top: 160px !important; } .pb-160 { padding-bottom: 160px !important; } .pt-165 { padding-top: 165px !important; } .pb-165 { padding-bottom: 165px !important; } .pt-170 { padding-top: 170px !important; } .pb-170 { padding-bottom: 170px !important; } .pt-175 { padding-top: 175px !important; } .pb-175 { padding-bottom: 175px !important; } .pt-180 { padding-top: 180px !important; } .pb-180 { padding-bottom: 180px !important; } .pt-185 { padding-top: 185px !important; } .pb-185 { padding-bottom: 185px !important; } .pt-190 { padding-top: 190px !important; } .pb-190 { padding-bottom: 190px !important; } .pt-195 { padding-top: 195px !important; } .pb-195 { padding-bottom: 195px !important; } .pt-200 { padding-top: 200px !important; } .pb-200 { padding-bottom: 200px !important; } /* sp */ @media screen and (max-width: 899px) { .sp-pt-0 { padding-top: 0px !important; } .sp-pb-0 { padding-bottom: 0px !important; } } @media screen and (max-width: 899px) { .sp-pt-5 { padding-top: 5px !important; } .sp-pb-5 { padding-bottom: 5px !important; } } @media screen and (max-width: 899px) { .sp-pt-10 { padding-top: 10px !important; } .sp-pb-10 { padding-bottom: 10px !important; } } @media screen and (max-width: 899px) { .sp-pt-15 { padding-top: 15px !important; } .sp-pb-15 { padding-bottom: 15px !important; } } @media screen and (max-width: 899px) { .sp-pt-20 { padding-top: 20px !important; } .sp-pb-20 { padding-bottom: 20px !important; } } @media screen and (max-width: 899px) { .sp-pt-25 { padding-top: 25px !important; } .sp-pb-25 { padding-bottom: 25px !important; } } @media screen and (max-width: 899px) { .sp-pt-30 { padding-top: 30px !important; } .sp-pb-30 { padding-bottom: 30px !important; } } @media screen and (max-width: 899px) { .sp-pt-35 { padding-top: 35px !important; } .sp-pb-35 { padding-bottom: 35px !important; } } @media screen and (max-width: 899px) { .sp-pt-40 { padding-top: 40px !important; } .sp-pb-40 { padding-bottom: 40px !important; } } @media screen and (max-width: 899px) { .sp-pt-45 { padding-top: 45px !important; } .sp-pb-45 { padding-bottom: 45px !important; } } @media screen and (max-width: 899px) { .sp-pt-50 { padding-top: 50px !important; } .sp-pb-50 { padding-bottom: 50px !important; } } @media screen and (max-width: 899px) { .sp-pt-55 { padding-top: 55px !important; } .sp-pb-55 { padding-bottom: 55px !important; } } @media screen and (max-width: 899px) { .sp-pt-60 { padding-top: 60px !important; } .sp-pb-60 { padding-bottom: 60px !important; } } @media screen and (max-width: 899px) { .sp-pt-65 { padding-top: 65px !important; } .sp-pb-65 { padding-bottom: 65px !important; } } @media screen and (max-width: 899px) { .sp-pt-70 { padding-top: 70px !important; } .sp-pb-70 { padding-bottom: 70px !important; } } @media screen and (max-width: 899px) { .sp-pt-75 { padding-top: 75px !important; } .sp-pb-75 { padding-bottom: 75px !important; } } @media screen and (max-width: 899px) { .sp-pt-80 { padding-top: 80px !important; } .sp-pb-80 { padding-bottom: 80px !important; } } @media screen and (max-width: 899px) { .sp-pt-85 { padding-top: 85px !important; } .sp-pb-85 { padding-bottom: 85px !important; } } @media screen and (max-width: 899px) { .sp-pt-90 { padding-top: 90px !important; } .sp-pb-90 { padding-bottom: 90px !important; } } @media screen and (max-width: 899px) { .sp-pt-95 { padding-top: 95px !important; } .sp-pb-95 { padding-bottom: 95px !important; } } @media screen and (max-width: 899px) { .sp-pt-100 { padding-top: 100px !important; } .sp-pb-100 { padding-bottom: 100px !important; } } .pt0 { padding-top: 0 !important; } .pt30 { padding-top: 30px !important; } .pt40 { padding-top: 40px !important; } .pt50 { padding-top: 50px !important; } .py30 { padding-top: 30px !important; padding-bottom: 30px !important; } .pb0 { padding-bottom: 0 !important; } /* ------------------------------------------------------------------------------------ text-align ------------------------------------------------------------------------------------ */ .tac { text-align: center!important; } .text-center { text-align: center; } .tal { text-align: left!important; } .tar { text-align: right!important; } /* ------------------------------------------------------------------------------------ br ------------------------------------------------------------------------------------ */ @media screen and (max-width: 1024px) { br.responsive { display: none; } } /* ------------------------------------------------------------------------------------ background-color ------------------------------------------------------------------------------------ */ .u-bgcolor--primary { background-color: var(--primary); } .u-bgcolor--subcolor { background-color: var(--sub); } .u-bgcolor--default { background-color: var(--bgcolor); } .u-bgcolor--bg_subcolor { background-color: var(--bg-subcolor); } .u-bgcolor--white { background-color: var(--white); } .u-bgcolor--image { background-size: cover; background-repeat: no-repeat; } .bg-c1 { background-color: var(--bg-subcolor); } .bg-c2 { background-color: var(--dark-green); color: #FFF; } /* ------------------------------------------------------------------------------------ text-color ------------------------------------------------------------------------------------ */ .u-textcolor--primary { color: var(--primary); } .u-textcolor--subcolor { color: var(--sub); } .u-textcolor--default { color: var(--default); } .u-textcolor--white { color: var(--white); } .u-textcolor--black { color: var(--black); } .u-textcolor--darkgray { color: var(--dark-gray); } .fc-yg1{ color: var(--sub); } /* ------------------------------------------------------------------------------------ font-weight .c-bold { font-weight: bold; } /* ------------------------------------------------------------------------------------ icon ------------------------------------------------------------------------------------ */ .icon_before { margin-right: 6px; } .icon_after { margin-left: 6px; } /* ------------------------------------------------------------------------------------ font-size ------------------------------------------------------------------------------------ */ .fs-20 { font-size: 20px !important; font-size: 2rem !important; } /* ------------------------------------------------------------------------------------ title settings ------------------------------------------------------------------------------------ */ .mod_categorytitle1 { position: relative; width: 100%; height: 257px; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .mod_categorytitle1 .textbox { position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); line-height: 1.4; } .mod_categorytitle1 .textbox .title { font-size: 35px; font-size: 3.5rem; } .mod_categorytitle1 .textbox .text { color: var(--primary); font-size: 20px; font-size: 2rem; font-weight: bold; margin-top: 20px; } .mod_pagetitle1 > .textbox { font-weight: bold; line-height: 1.4; } .mod_pagetitle1 > .textbox > .corpbox { background-color: var(--primary); padding: 15px; display: flex; align-items: center; } .mod_pagetitle1 > .textbox > .corpbox > .corp { font-size: 16px; font-size: 1.6rem; color: var(--white); } .mod_pagetitle1 > .textbox > .corpbox > * + .corp { margin-left: 20px; } .mod_pagetitle1 > .textbox > .title { font-size: 35px; font-size: 3.5rem; margin-top: 30px; } .mod_pagetitle1 > .textbox > .title > span { display: block; font-size: 20px; font-size: 2rem; margin-bottom: 15px; } .mod_pagetitle1 > .thu { position: relative; width: 100%; margin-top: 30px; } @media screen and (max-width: 639px) { .mod_pagetitle1 > .textbox > .corpbox { display: block; } .mod_pagetitle1 > .textbox > .corpbox > * + .corp { margin-left: 0; margin-top: 12px; } .mod_pagetitle1 > .textbox > .title { font-size: 30px; font-size: 3rem; } .mod_pagetitle1 > .textbox > .title > span { font-size: 18px; font-size: 1.8rem; } } .mod_pagetitle3 { background-color: var(--primary); } .mod_pagetitle3 > .container { position: relative; } .mod_pagetitle3 .textbox { padding: 50px 0 105px; position: relative; z-index: 2; } .mod_pagetitle3 .textbox > .text { font-size: 20px; font-size: 2rem; color: var(--light-green); line-height: 1.4; font-weight: bold; } .mod_pagetitle3 .textbox > .title { font-size: 60px; font-size: 6rem; color: var(--white); line-height: 1; margin-top: 20px; } .mod_pagetitle3 .thu { width: 535px; } .mod_pagetitle3 .thu > img { max-width: 535px; } @media screen and (max-width: 1119px) { .mod_pagetitle3 .thu { top: 35px; width: calc(100% - 480px); } } @media screen and (min-width: 900px) { .mod_pagetitle3 .thu { position: absolute; z-index: 1; top: 5px; right: 0; text-align: right; } } @media screen and (max-width: 899px) { .mod_pagetitle3 .textbox { padding-bottom: 0; } .mod_pagetitle3 .thu { width: 100%; text-align: center; padding: 40px 0; } } .mod_title1 { font-size: 35px; font-size: 3.5rem; font-weight: bold; line-height: 1.4; } .mod_title2 { font-size: 48px; font-size: 4.8rem; font-weight: bold; line-height: 1.4; } * + .mod_title2 { margin-top: 70px; } @media screen and (max-width: 899px) { * + .mod_title2 { margin-top: 50px; } } @media screen and (max-width: 639px) { .mod_title2 { font-size: 30px; font-size: 3rem; } } .mod_title3 { font-size: 30px; font-size: 3rem; font-weight: bold; line-height: 1.4; } * + .mod_title3 { margin-top: 35px; } .mod_textbox1 > .mod_title3 { text-align: center; } @media screen and (max-width: 639px) { .mod_textarea1 > .mod_title3 { font-size: 20px; font-size: 2rem; } } .mod_title4 { font-size: 20px; font-size: 2rem; font-weight: bold; line-height: 1.4; } .mod_pointbox + .mod_h31 { margin-top: 80px; } .mod_h31:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background-color: var(--emerald-green); } .mod_h31.border-white { border-color: var(--white); } .mod_h41 { color: var(--emerald-green); font-size: 18px; font-size: 1.8rem; font-weight: bold; line-height: 1.4; border-left: 2px solid var(--emerald-green); padding: 3px 0 3px 15px; } * + .mod_h41 { margin-top: 50px; } .mod_h51 { font-size: 16px; font-size: 1.6rem; font-weight: bold; line-height: 1.4; } * + .mod_h51 { margin-top: 30px; } /* ------------------------------------------------------------------------------------ text settings ------------------------------------------------------------------------------------ */ * + .mod_textarea1 { margin-top: 80px; } .mod_textarea1 > p, .mod_textbox1 > p { font-size: 18px; font-size: 1.8rem; line-height: 1.8; } .mod_textarea1 > * + p { margin-top: 20px; } .mod_textarea1 > p > a { color: var(--primary); text-decoration: underline; } .mod_textarea1 > p > a:hover { text-decoration: none; } .mod_textarea1 .small1 { font-size: 13px !important; font-size: 1.3rem !important; line-height: 1.4 !important; } @media screen and (max-width: 899px) { * + .mod_textarea1 { margin-top: 60px; } } @media screen and (max-width: 639px) { .mod_textarea1 > .mod_title3 + p { margin-top: 15px; } .mod_textarea1 > * + p { margin-top: 10px; } .mod_textarea1 > p { font-size: 16px; font-size: 1.6rem; } } * + .mod_textbox1 { margin-top: 80px; } .mod_textbox1 { background-color: var(--bg-subcolor); border-radius: 16px; width: 100%; padding: 60px 50px; } .mod_textbox1 > * + p { margin-top: 30px; } .mod_textbox1 > p + p { margin-top: 20px; } @media screen and (max-width: 899px) { * + .mod_textbox1 { margin-top: 60px; } .mod_textbox1 { padding: 50px 20px; } } /* ------------------------------------------------------------------------------------ list settings ------------------------------------------------------------------------------------ */ .mod_list1 { margin-top: 30px; } .mod_list1 > li { counter-increment: count; position: relative; display: flex; align-items: center; min-height: 64px; } .mod_list1 > li::before, .mod_list1 > li::after { content: ""; position: absolute; background-color: var(--primary); border-radius: 50%; } .mod_list1 > li::before { top: 0; left: 0; width: 64px; height: 64px; opacity: 0.2; } .mod_list1 > li::after { top: 12px; left: 12px; width: 40px; height: 40px; background-image: url(/common/img/icon_check_1.svg); background-repeat: no-repeat; background-size: 17px 17px; background-position: center; text-align: center; } .mod_list1 > li + li { margin-top: 30px; } .mod_list1 > li > p { font-size: 20px; font-size: 2rem; line-height: 1.4; font-weight: bold; padding-left: 89px; display: table-cell; vertical-align: middle; } @media screen and (max-width: 639px) { .mod_list1 > li > p { font-size: 18px; font-size: 1.8rem; padding-left: 84px; } } /* ------------------------------------------------------------------------------------ img settings ------------------------------------------------------------------------------------ */ .mod_eyecatch { aspect-ratio: 16 / 9; position: relative; z-index: 0; } .mod_eyecatch img { aspect-ratio: 16 / 9; object-fit: cover; } .mod_img-c { position: relative; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; } * + .mod_img-c { margin-top: 30px; } .mod_img-c2, .mod_img-c3 { width: 100%; display: flex; margin: auto; } @media screen and (max-width: 989px) { .mod_img-c2 { display: block; } } @media screen and (max-width: 767px) { .mod_img-c3 { display: block; } } .mod_img-c2 dd, .mod_img-c3 dd { margin-top: 20px; margin-left: 40px; max-width: 419px; } @media screen and (max-width: 989px) { .mod_img-c2 dd { max-width: 674px; margin: 20px auto 0; } } @media screen and (min-width: 990px) { .mod_img-c2 dd:first-child { margin-left: 0; } } @media screen and (max-width: 767px) { .mod_img-c3 dd { margin: 20px auto 0; } } @media screen and (min-width: 768px) { .mod_img-c3 dd:first-child { margin-left: 0; } } .mod_img-l { float: left; } .mod_img-r { float: right; } @media screen and (max-width: 767px) { .mod_img-l, .mod_img-r { float: none; } } * + .mod_img-l, * + .mod_img-r { margin-top: 20px; } .mod_img-l dd { width: 100%; max-width: 368px; margin: 0 40px 40px 0; } .mod_img-r dd { width: 100%; max-width: 368px; margin: 0 0 20px 40px; } @media screen and (max-width: 767px) { .mod_img-l dd, .mod_img-r dd { margin: 0 auto !important; } } .mod_img-c dd.border img, .mod_img-c2 dd.border img, .mod_img-c3 dd.border img, .mod_img-r dd.border img, .mod_img-l dd.border img { border: var(--white-gray) 1px solid; } .mod_img-c dd p, .mod_img-c2 dd p, .mod_img-c3 dd p, .mod_img-r dd p, .mod_img-l dd p { font-size: 14px; font-size: 1.4rem; line-height: 1.4; } .mod_img-c dd p.title, .mod_img-c2 dd p.title, .mod_img-c3 dd p.title, .mod_img-r dd p.title, .mod_img-l dd p.title { font-size: 16px; font-size: 1.6rem; line-height: 1.4; font-weight: bold; } .mod_img-c dd * + p, .mod_img-c2 dd * + p, .mod_img-c3 dd * + p, .mod_img-r dd * + p, .mod_img-l dd * + p { margin-top: 10px; } /* Vendor */ /*! * jquery-drawer v3.2.2 * Flexible drawer menu using jQuery, iScroll and CSS. * http://git.blivesta.com/drawer * License : MIT * Author : blivesta (http://blivesta.com/) */ .drawer-open{overflow:hidden!important}.drawer-nav{position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;color:#222;background-color:#fff}.drawer-brand{font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222}.drawer-menu{margin:0;padding:0;list-style:none}.drawer-menu-item{font-size:1rem;display:block;padding:.75rem;text-decoration:none;color:#222}.drawer-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}.drawer-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}.drawer-open .drawer-overlay{display:block}.drawer--top .drawer-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}.drawer--top.drawer-open .drawer-nav{top:0}.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{right:0}.drawer--left .drawer-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{left:0}.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{right:0}.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}.drawer-hamburger{position:fixed;z-index:4;top:0;display:block;box-sizing:content-box;width:2rem;padding:0;padding:18px .75rem 30px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:0;outline:0;background-color:transparent}.drawer-hamburger:hover{cursor:pointer;background-color:transparent}.drawer-hamburger-icon{position:relative;display:block;margin-top:10px}.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{width:100%;height:2px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222}.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{position:absolute;top:-10px;left:0;content:" "}.drawer-hamburger-icon:after{top:10px}.drawer-open .drawer-hamburger-icon{background-color:transparent}.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{top:0}.drawer-open .drawer-hamburger-icon:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.drawer-open .drawer-hamburger-icon:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0}.drawer--sidebar,.drawer--sidebar .drawer-contents{background-color:#fff}@media (min-width:64em){.drawer--sidebar .drawer-hamburger{display:none;visibility:hidden}.drawer--sidebar .drawer-nav{display:block;-webkit-transform:none;transform:none;position:fixed;width:12.5rem;height:100%}.drawer--sidebar.drawer--left .drawer-nav{left:0;border-right:1px solid #ddd}.drawer--sidebar.drawer--left .drawer-contents{margin-left:12.5rem}.drawer--sidebar.drawer--right .drawer-nav{right:0;border-left:1px solid #ddd}.drawer--sidebar.drawer--right .drawer-contents{margin-right:12.5rem}.drawer--sidebar .drawer-container{max-width:48rem}}@media (min-width:75em){.drawer--sidebar .drawer-nav{width:16.25rem}.drawer--sidebar.drawer--left .drawer-contents{margin-left:16.25rem}.drawer--sidebar.drawer--right .drawer-contents{margin-right:16.25rem}.drawer--sidebar .drawer-container{max-width:60rem}}.drawer--navbarTopGutter{padding-top:3.75rem}.drawer-navbar .drawer-navbar-header{border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar{z-index:3;top:0;width:100%}.drawer-navbar--fixed{position:fixed}.drawer-navbar-header{position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center}.drawer-navbar .drawer-brand{line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none}.drawer-navbar .drawer-brand:hover{background-color:transparent}.drawer-navbar .drawer-nav{padding-top:3.75rem}.drawer-navbar .drawer-menu{padding-bottom:7.5rem}@media (min-width:64em){.drawer-navbar{height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff}.drawer-navbar .drawer-navbar-header{position:relative;display:block;float:left;width:auto;padding:0;border:0}.drawer-navbar .drawer-menu--right{float:right}.drawer-navbar .drawer-menu li{float:left}.drawer-navbar .drawer-menu-item{line-height:3.75rem;padding-top:0;padding-bottom:0}.drawer-navbar .drawer-hamburger{display:none}.drawer-navbar .drawer-nav{position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.drawer-navbar .drawer-menu{padding:0}.drawer-navbar .drawer-dropdown-menu{position:absolute;width:16.25rem;border:1px solid #ddd}.drawer-navbar .drawer-dropdown-menu-item{padding-left:.75rem}}.drawer-dropdown-menu{display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff}.drawer-dropdown-menu>li{width:100%;list-style:none}.drawer-dropdown-menu-item{line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222}.drawer-dropdown-menu-item:hover{text-decoration:underline;color:#555;background-color:transparent}.drawer-dropdown.open>.drawer-dropdown-menu{display:block}.drawer-dropdown .drawer-caret{display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,-webkit-transform .2s ease;transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;-webkit-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent}.drawer-dropdown.open .drawer-caret{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.drawer-container{margin-right:auto;margin-left:auto}@media (min-width:64em){.drawer-container{max-width:60rem}}@media (min-width:75em){.drawer-container{max-width:70rem}} /* drawer-hamburger */ .drawer--top .drawer-hamburger { position: fixed; top: 12px; right: 2px; width: 48px; height: 48px; padding: 0; z-index: 200; transition: none; } @media only screen and (min-width: 1120px) { .drawer--top .drawer-hamburger { display: none; } } @media only screen and (min-width: 900px) { .drawer--top .drawer-hamburger { right: 36px; } } @media only screen and (max-width: 899px) and (min-width: 640px) { .drawer--top .drawer-hamburger { right: 16px; } } .drawer--top.drawer-open .drawer-hamburger { right: 2px; } @media only screen and (min-width: 900px) { .drawer--top.drawer-open .drawer-hamburger { right: 36px; } } @media only screen and (max-width: 899px) and (min-width: 640px) { .drawer--top.drawer-open .drawer-hamburger { right: 16px; } } .drawer-hamburger-icon { margin: 0 auto 0; } .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { background-color: #FFFFFF; width: 18px; } .drawer-hamburger-icon:before { top: -6px; } .drawer-hamburger-icon:after { top: 6px; } .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { height: 2px; width: 21px; left: -1px; } /* drawer-nav */ .drawer-nav a { outline: none; } .drawer--top .drawer-nav { max-height: none; z-index: 20; background-color: #000; } .drawer--top.drawer-open .drawer-nav { position: fixed; top: 72px; left: 0; width: 100%; } /* drawer-overlay */ .drawer-overlay { background-color: rgba(0, 0, 0, .5); z-index: 10; } /* drawer-menu */ .drawer .drawer-nav ul.active-branch { padding: 0 16px; border-top: #3D3F40 1px solid; } @media only screen and (min-width: 900px) { .drawer .drawer-nav ul.active-branch { padding: 0 50px; } } @media only screen and (max-width: 899px) and (min-width: 640px) { .drawer .drawer-nav ul.active-branch { padding: 0 30px; } } .drawer .drawer-nav ul.active-branch li { font-size: 20px; font-size: 2rem; font-weight: bold; margin-top: 30px; } .drawer .drawer-nav ul.active-branch li a { display: block; overflow: hidden; color: #FFFFFF; text-decoration: none; font-size: 20px; font-size: 2rem; line-height: 1.4; padding: 8px 0; } .drawer .drawer-nav ul.active-branch li.disabled a { color: rgba(255, 255, 255, .5); cursor: default; } .drawer .drawer-nav ul.active-branch li.dropdown-submenu { border-color: #444; } .drawer .drawer-nav ul.active-branch li.dropdown-submenu a { padding-left: 30px; } .drawer .drawer-nav ul.active-branch li.dropdown-submenu ul li a { padding-left: 40px; } .drawer .drawer-nav ul.active-branch li.dropdown-submenu .drawer-dropdown-menu { background: rgba(0, 0, 0, 0); } .drawer .drawer-nav ul.active-branch li.dropdown-submenu, .drawer .drawer-nav ul.active-branch li .drawer-dropdown-menu { background: rgba(0, 0, 0, .2); } .drawer .drawer-nav ul.active-branch li .drawer-dropdown-menu a { color: #fff; font-size: 1.5rem; line-height: 57px; padding: 0 20px; } @media only screen and (max-width: 959px) { .drawer .drawer-nav ul.active-branch .external:after { position: absolute; right: 20px; padding: 0; width: 14px; height: 12px; } } .drawer .drawer-nav .btn { max-width: 220px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 50px; } /* for scroll problem on ios */ .drawer--top .drawer-nav { height: calc(100% - 72px); } .drawer--top.drawer-open .drawer-nav { overflow: auto; -webkit-overflow-scrolling: touch; height: calc(100% - 72px); } .drawer--left.drawer-open .drawer-nav, .drawer--left .drawer-hamburger, .drawer--left.drawer-open .drawer-navbar .drawer-hamburger { left: 0; overflow: auto; } .drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0; overflow: auto; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [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; } @charset 'UTF-8'; /* Slider */ .slick-loading .slick-list { background: #fff url('ajax-loader.gif') center center no-repeat; } /* Icons */ /* @font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url('fonts/slick.eot'); src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg'); } */ /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } /* Dots */ .slick-dotted.slick-slider { } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 8px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } /** * slick-add.css */ /* Dots */ .slick-dotted.slick-slider { } .slick-dots { bottom: 30px; width: auto; left: 50%; transform: translateX(-50%); } .slick-dots li, .slick-dots li button { width: 13px; height: 13px; } .slick-dots li button:before { width: 100%; height: 100%; opacity: 1 !important; color: transparent !important; background-color: #F0FBCC; border-radius: 50%; } .slick-dots li.slick-active button:before { background-color: #cdf986; } /* Arrows */