@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { interpolate-size: allow-keywords; } *:focus { outline: 4px solid #0099B3; outline-offset: 10pxpx; } *:focus:not(:focus-visible) { outline: 0; } html { scroll-behavior: smooth; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } html ::-moz-selection { color: #fff; background: #0099B3; } html ::selection { color: #fff; background: #0099B3; } img { max-width: 100%; width: 100%; height: auto; } body { position: relative; background: #fff; color: #1c1c1c; font-family: "Noto Sans JP", sans-serif; font-size: clamp(0.875rem, 0.5rem + 0.78vw, 1rem); font-weight: 400; line-height: 1.75; letter-spacing: -0.04em; } body.is-fixed { overflow: hidden; position: fixed; width: 100%; } section { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); width: 1200px; max-width: 100%; margin-inline: auto; } .section { padding-block: clamp(2.5rem, -5rem + 15.63vw, 5rem); padding-inline: clamp(1rem, -3.5rem + 9.38vw, 2.5rem); } .u-hide-pc { display: none; } @media (max-width: 1024px) { .u-hide-pc { display: block; } } @media (max-width: 1024px) { .u-hide-tablet { display: none; } } @media (max-width: 768px) { .u-hide-tablet { display: block; } } @media (max-width: 768px) { .u-hide-sp { display: none; } } @media (max-width: 1024px) { .u-show-pc { display: none; } } .u-show-tablet { display: none; } @media (max-width: 1024px) { .u-show-tablet { display: block; } } @media (max-width: 768px) { .u-show-tablet { display: none; } } .u-show-sp { display: none; } @media (max-width: 768px) { .u-show-sp { display: block; } } .u-font-size-lg { font-size: clamp(1rem, 0.625rem + 0.78vw, 1.125rem); } .u-font-size-h4 { font-size: clamp(1rem, 0.971rem + 0.13vw, 1.125rem); } .u-font-size-h3 { font-size: clamp(1.25rem, 0.5rem + 1.56vw, 1.5rem); } .u-font-size-h2 { font-size: clamp(1.5rem, 3.13vw, 2rem); } .c-btn, .c-btn-cta { position: relative; cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(0.875rem, -0.25rem + 2.34vw, 1.25rem); padding-inline: 1em; border: 1px solid transparent; border-radius: 0.5rem; font-weight: 500; line-height: 3; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background: #C67100; color: #fff; } .c-btn svg, .c-btn-cta svg { width: 1em; } .c-btn svg path, .c-btn-cta svg path { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .c-btn button, .c-btn-cta button { cursor: pointer; } .c-btn:focus-visible, .c-btn-cta:focus-visible { outline: 4px solid #0099B3; outline-offset: 10pxpx; } @media (max-width: 768px) { .c-btn, .c-btn-cta { width: 100%; } } @media (any-hover: hover) { .c-btn:hover, .c-btn-cta:hover { color: #C67100; background: #fff; border-color: #C67100; } .c-btn:hover svg path, .c-btn-cta:hover svg path { fill: #C67100; } } .c-btn-cta { width: 500px; max-width: 100%; line-height: 2.25; } .c-btn-cta svg { position: absolute; top: 50%; right: 1em; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-btn-ghost { position: relative; cursor: pointer; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(0.875rem, -0.25rem + 2.34vw, 1.25rem); padding-inline: 1em; border: 1px solid transparent; border-radius: 0.5rem; font-weight: 500; line-height: 3; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background: transparent; color: #0099B3; border-color: #0099B3; } .c-btn-ghost svg { width: 1em; } .c-btn-ghost svg path { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .c-btn-ghost button { cursor: pointer; } .c-btn-ghost:focus-visible { outline: 4px solid #0099B3; outline-offset: 10pxpx; } @media (max-width: 768px) { .c-btn-ghost { width: 100%; } } @media (any-hover: hover) { .c-btn-ghost:hover { color: #fff; background: #0099B3; } } .c-link { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } @media (any-hover: hover) { .c-link:hover { opacity: 0.6; } } .c-link-strong { color: #0099B3; font-weight: 700; text-decoration: underline; text-underline-position: from-font; } @media (any-hover: hover) { .c-link-strong:hover { text-decoration: none; } } .c-heading, .c-heading_green { display: -ms-grid; display: grid; gap: 0.25rem; text-align: center; } .c-heading_green { color: #0099B3; } .c-heading-en { font-family: "Noto Sans JP", sans-serif; font-size: clamp(2.5rem, 1rem + 3.13vw, 3rem); font-weight: 500; line-height: 1.5; } .c-heading-ja { font-size: clamp(0.875rem, 0.5rem + 0.78vw, 1rem); font-weight: 700; line-height: 1.5; } .c-heading-sub { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: clamp(0.5rem, -0.25rem + 1.56vw, 0.75rem); font-size: clamp(1.5rem, 3.13vw, 2rem); font-weight: 500; line-height: 1.5; } .c-heading-sub::after { content: ""; width: 60px; height: 0.25rem; background: #0099B3; border-radius: calc(infinity * 1px); } .l-header { width: calc(100% - clamp(0rem, -15rem + 31.25vw, 5rem) * 2); position: absolute; top: 0; left: 0; right: 0; z-index: 100; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); padding: clamp(0.5rem, -1rem + 3.13vw, 1rem) clamp(1rem, -0.5rem + 3.13vw, 1.5rem); margin-inline: auto; background: #fff; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); border-radius: 0 0 clamp(0rem, -3rem + 6.25vw, 1rem) clamp(0rem, -3rem + 6.25vw, 1rem); } .l-header-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-header-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); font-size: clamp(1rem, 0.625rem + 0.78vw, 1.125rem); font-weight: 700; text-transform: uppercase; } .l-header-nav-sp { display: none; } @media (max-width: 1024px) { .l-header { -webkit-padding-after: 0.25rem; padding-block-end: 0.25rem; } .l-header > a { width: 170px; } .l-header-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: #fff; z-index: 99; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 120px; gap: clamp(2rem, -1rem + 6.25vw, 3rem); overflow-y: auto; } .l-header-nav.is-open { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-header-nav ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(1.5rem, 3.13vw, 2rem); } .l-header-nav ul li { text-align: center; } .l-header-nav-sp { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0.5rem; } .l-header-nav-sp-wrap, .l-header-nav-sp-wrap_menu, .l-header-nav-sp-wrap_entry { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.25rem; text-align: center; } .l-header-nav-sp-wrap p, .l-header-nav-sp-wrap_menu p, .l-header-nav-sp-wrap_entry p { text-align: center; font-size: 10px; } .l-header-nav-sp-wrap_entry button { cursor: pointer; width: 72px; height: 40px; border-radius: 4px; background: #C67100; color: #fff; } .l-header-nav-sp-wrap_menu { position: relative; z-index: 101; } .l-header-nav-sp-wrap_menu button { cursor: pointer; position: relative; width: 40px; height: 40px; border-radius: 4px; background: #0099B3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .l-header-nav-sp-wrap_menu button span { display: block; width: 30px; height: 2px; background: #fff; border-radius: 2px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: center; transform-origin: center; } .l-header-nav-sp-wrap_menu button:focus-visible { outline: 4px solid #0099B3; outline-offset: 10pxpx; } .l-header-nav-sp-wrap_menu button[aria-expanded=true] span:nth-child(1) { -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg); } .l-header-nav-sp-wrap_menu button[aria-expanded=true] span:nth-child(2) { opacity: 0; -webkit-transform: scaleX(0); transform: scaleX(0); } .l-header-nav-sp-wrap_menu button[aria-expanded=true] span:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg); } } @media (max-width: 768px) { .l-header-nav .c-btn { max-width: calc(100% - 2rem); } } .l-footer { border-top: 1px solid #b7b7b7; padding: clamp(1.5rem, 3.13vw, 2rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); } .l-footer-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(0.5rem, -1rem + 3.13vw, 1rem) clamp(3rem, 6.25vw, 4rem); } .l-footer-left img { max-width: 100%; width: 250px; } .l-footer-left ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } @media (max-width: 1024px) { .l-footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .l-footer-left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .l-top-hero { height: 50rem; position: relative; padding: 3rem; background: #f5fbfc; } .l-top-hero-content { overflow: hidden; position: relative; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; justify-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 1.5rem; background: url(/-/media/tb/business/blind/startup-survey/2026/img/top/top-02.png); background-repeat: no-repeat; background-size: cover; background-position: center center; padding: clamp(6.25rem, -8.792rem + 16.7vw, 11.25rem); } .l-top-hero-content-texts { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(1.5rem, 3.13vw, 2rem); } .l-top-hero-content-texts hgroup { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; } .l-top-hero-content-texts hgroup h1 { max-width: 100%; width: clamp(34.063rem, 19.961rem + 15.66vw, 38.75rem); } .l-top-hero-content-texts hgroup p { color: #006680; font-weight: 700; line-height: 1.5; font-size: clamp(1.813rem, 1.06rem + 0.84vw, 2.063rem); } .l-top-hero-content-texts-bottom { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; } .l-top-hero-content-texts-bottom > span { display: block; font-size: clamp(0.75rem, 0.375rem + 0.78vw, 0.875rem); font-weight: 700; line-height: 1.5; } .l-top-hero-content > picture { position: absolute; bottom: -10px; right: 0; width: 48vw; } @media (max-width: 1600px) { .l-top-hero-content > picture { bottom: initial; top: 0; } } @media (max-width: 1440px) { .l-top-hero { height: clamp(40rem, 15.301rem + 38.55vw, 50rem); } .l-top-hero-content { padding: clamp(2.5rem, -6.762rem + 14.46vw, 6.25rem); } .l-top-hero-content-texts { gap: clamp(1.5rem, -3.44rem + 7.71vw, 3.5rem); } .l-top-hero-content-texts hgroup { gap: 1rem; } .l-top-hero-content-texts hgroup h1 { width: clamp(25rem, 2.617rem + 34.94vw, 34.063rem); } .l-top-hero-content-texts hgroup p { font-size: clamp(1.5rem, 0.728rem + 1.2vw, 1.813rem); } .l-top-hero-content-texts-bottom > span { font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); } } @media (max-width: 1024px) { .l-top-hero { padding: clamp(1rem, -3.94rem + 7.71vw, 3rem); } .l-top-hero-content { padding: clamp(1rem, -2rem + 6.25vw, 2rem); } .l-top-hero-content > picture { bottom: initial; top: 5%; right: -15%; width: 58vw; } } @media (max-width: 768px) { .l-top-hero { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 1rem; } .l-top-hero-content { height: 85vh; min-height: 570px; max-height: 700px; border-radius: 0.5rem; background-position: center left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-padding-before: 80px; padding-block-start: 80px; } .l-top-hero-content-texts { height: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .l-top-hero-content-texts hgroup { gap: 0.5rem; } .l-top-hero-content-texts hgroup h1 { width: 98%; } .l-top-hero-content-texts hgroup img { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-top-hero-content-texts hgroup p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-inline: 0.5rem; background: #fff; font-size: clamp(1.063rem, 0.353rem + 2.91vw, 1.75rem); } .l-top-hero-content-texts-bottom { width: 100%; gap: 0.5rem; } .l-top-hero-content-texts-bottom .c-btn { margin-inline: auto; max-width: 84%; } .l-top-hero-content-texts-bottom > span { width: 100%; padding: 0.5rem; background: #fff; font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); } .l-top-hero-content > picture { bottom: initial; top: 15%; right: -40%; width: 100vw; } } @media (max-width: 480px) { .l-top-hero-content > picture { top: 20%; width: 580px; } } .l-top-about-bg { background: #f5fbfc; } .l-top-about-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(2.5rem, -5rem + 15.63vw, 5rem); } .l-top-about-intro { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(0.5rem, -1rem + 3.13vw, 1rem); text-align: center; } .l-top-about-intro small { font-size: 0.875rem; } @media (max-width: 768px) { .l-top-about-intro { text-align: left; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .l-top-about-problem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-about-problem-detail { position: relative; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); padding-block: 56px 40px; padding-inline: 1rem; text-align: center; background: #fff; border-radius: 8px; } .l-top-about-problem-detail h3 { position: absolute; top: -1.85rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff; font-size: clamp(1.125rem, 2.34vw, 1.5rem); font-weight: 500; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; white-space: nowrap; padding: 0.5rem clamp(1.5rem, 3.13vw, 2rem); border-radius: 4px; } .l-top-about-problem-detail > img { max-width: 344px; } .l-top-about-problem-detail:first-child { border: 1px solid #727272; } .l-top-about-problem-detail:first-child h3 { background: #5a5a5a; } .l-top-about-problem-detail:last-child { border: 3px solid #006680; } .l-top-about-problem-detail:last-child h3 { background: #006680; } .l-top-about-problem-detail:last-child p { font-weight: 700; color: #0099B3; } .l-top-about-problem > svg { min-width: 30px; max-width: 30px; } @media (max-width: 1024px) { .l-top-about-problem { -webkit-margin-before: 1rem; margin-block-start: 1rem; } } @media (max-width: 768px) { .l-top-about-problem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-top-about-problem-detail { padding-block: 32px; } .l-top-about-problem > svg { min-width: 20px; max-width: 20px; -webkit-transform: rotate(90deg) translateX(-0.75rem); transform: rotate(90deg) translateX(-0.75rem); margin-inline: auto; } } .l-top-about-feature { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-about-feature-list { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr clamp(1rem, -0.313rem + 2.73vw, 1.438rem) 1fr; grid-template-columns: repeat(2, 1fr); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: clamp(1rem, -0.313rem + 2.73vw, 1.438rem); } .l-top-about-feature-item { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp(0.5rem, -1rem + 3.13vw, 1rem); padding: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); background: #fff; border-radius: 8px; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); } .l-top-about-feature-item-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); } .l-top-about-feature-item-head > img { max-width: 47px; } .l-top-about-feature-item-head > p { font-size: clamp(1rem, 0.971rem + 0.13vw, 1.125rem); font-weight: 500; line-height: 1.5; } .l-top-about-feature-item-desc { font-size: clamp(0.875rem, 0.5rem + 0.78vw, 1rem); line-height: 1.8; } @media (max-width: 768px) { .l-top-about-feature-list { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); } .l-top-about-feature-item-head > img { max-width: 32px; } } .l-top-about-work { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-about-work-list { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-about-work-item { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp(0.5rem, -1rem + 3.13vw, 1rem); padding: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); background: #fff; border-radius: 8px; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); } .l-top-about-work-item-body { display: -ms-grid; display: grid; gap: 0.5rem; } .l-top-about-work-item-title { font-size: clamp(1.25rem, 0.5rem + 1.56vw, 1.5rem); font-weight: 500; color: #0099B3; line-height: 1.5; } .l-top-about-work-note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; text-align: center; } .l-top-about-work-note h3 { font-size: clamp(1.25rem, 0.5rem + 1.56vw, 1.5rem); font-weight: 500; } @media (max-width: 768px) { .l-top-about-work-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .l-top-about-outline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-about-outline-table { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: clamp(1rem, -3.5rem + 9.38vw, 2.5rem) clamp(1rem, -11rem + 25vw, 5rem); margin-inline: auto; border-radius: 8px; background: #fff; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); } .l-top-about-outline-table table { max-width: 100%; width: 920px; } .l-top-about-outline-table table th, .l-top-about-outline-table table td { padding: 1rem 0.5rem; border-bottom: 1px dashed #b7b7b7; } .l-top-about-outline-table table th span, .l-top-about-outline-table table td span { display: -webkit-box; display: -ms-flexbox; display: flex; } .l-top-about-outline-table table th span::before, .l-top-about-outline-table table td span::before { content: "※"; } .l-top-about-outline-table table th { min-width: 8em; } @media (max-width: 1024px) { .l-top-about-outline-table table { width: initial; } } .l-top-benefit-bg { background: url(/-/media/tb/business/blind/startup-survey/2026/img/top/top-10.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .l-top-benefit-text { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; } .l-top-benefit-text h3 { font-size: clamp(1.25rem, 0.5rem + 1.56vw, 1.5rem); font-weight: 500; line-height: 1.5; } .l-top-benefit-text-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .l-top-benefit-text-icon figure { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 0.5rem; } .l-top-benefit-text-icon figure figcaption { line-height: 1.15; white-space: nowrap; font-size: 0.875rem; font-weight: 700; color: #0099B3; } .l-top-benefit-text-icon figure img { max-width: 27px; } .l-top-benefit-text-icon-tag { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.5rem; } .l-top-benefit-text-icon-tag li { font-size: 0.875rem; border-radius: calc(infinity * 1px); padding: 0.25rem 1rem; } .l-top-benefit-text-icon-tag li.tag-01 { border: 1px solid #9c0; } .l-top-benefit-text-icon-tag li.tag-02 { border: 1px solid #e80; } .l-top-benefit ol { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(2rem, -1rem + 6.25vw, 3rem); } .l-top-benefit ol > li { width: 100%; max-width: 1080px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp(1.5rem, 3.13vw, 2rem); padding: clamp(1.5rem, 3.13vw, 2rem); background: #fff; border-radius: 8px; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); } .l-top-benefit ol > li > img { max-width: 286px; } .l-top-benefit ol > li:nth-child(2) { margin-inline: auto 0; } @media (max-width: 768px) { .l-top-benefit-text-icon-tag li { font-size: 12px; } .l-top-benefit ol > li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 1rem; } .l-top-benefit ol > li > img { max-width: initial; } } .l-top-schedule { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .l-top-schedule-contents { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2.5rem, -5rem + 15.63vw, 5rem); } .l-top-faq-bg { background: #7fccd9; } .l-top-faq .faq-wrapper { width: 100%; display: -ms-grid; display: grid; gap: clamp(1.5rem, 3.13vw, 2rem); } .l-top-faq .accordion { min-height: 76px; padding: clamp(1rem, -0.5rem + 3.13vw, 1.5rem) clamp(1.5rem, 3.13vw, 2rem); background: #fff; border-radius: 8px; -webkit-box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); box-shadow: 1px 4px 24px 0 rgba(0, 0, 0, 0.07); cursor: pointer; will-change: height; -webkit-transform: translateZ(0); transform: translateZ(0); } .l-top-faq .accordion__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: clamp(0.5rem, -1rem + 3.13vw, 1rem); } .l-top-faq .accordion__title-main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); } .l-top-faq .accordion__title-main svg { min-width: 23px; max-width: 23px; } .l-top-faq .accordion__icon { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 24px; height: 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } .l-top-faq .accordion__icon-plus, .l-top-faq .accordion__icon-minus { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, -webkit-transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease; transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease; will-change: opacity, transform; } .l-top-faq .accordion__icon-minus { opacity: 0; -webkit-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } .l-top-faq .accordion__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); -webkit-padding-before: clamp(1.5rem, 3.13vw, 2rem); padding-block-start: clamp(1.5rem, 3.13vw, 2rem); } .l-top-faq .accordion__content svg { min-width: 23px; max-width: 23px; } .l-top-faq .accordion.is-opened .accordion__icon-plus { opacity: 0; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .l-top-faq .accordion.is-opened .accordion__icon-minus { opacity: 1; -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } @media (max-width: 768px) { .l-top-faq .accordion { padding: 10px; min-height: 47px; } .l-top-faq .accordion__title-main svg { min-width: 16px; max-width: 16px; } .l-top-faq .accordion__content svg { min-width: 16px; max-width: 16px; } } .l-top-policy-contents { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp(2.5rem, -5rem + 15.63vw, 5rem); } .l-top-policy-contents-text { text-align: left; display: -ms-grid; display: grid; gap: clamp(1rem, -0.5rem + 3.13vw, 1.5rem); } .l-top-gotop { opacity: 0; position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 58px; height: 58px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #0099B3; border-radius: calc(infinity * 1px); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .l-top-gotop span { display: none; } .l-top-gotop svg { width: 1.5rem; } .l-top-gotop.is-visible { opacity: 1; } @media (any-hover: hover) { .l-top-gotop:hover { opacity: 0.6; } } .modal { display: none; } .modal[aria-hidden=false] { display: block; } .modal__overlay { position: relative; z-index: 101; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); } .modal__container { overflow: hidden; max-width: 90%; width: 500px; max-height: 100vh; padding-block: 0 1rem; padding-inline: 1rem; background: #fff; border-radius: 8px; position: inherit; } .modal__title { opacity: 0; } .modal-close { background: #0099B3; cursor: pointer; width: 50px; height: 50px; position: absolute; top: 0; right: 0; } .modal-close::before, .modal-close::after { content: ""; display: block; background-color: #fff; left: 50%; position: absolute; top: 50%; width: 2px; height: 30px; } .modal-close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .modal-close:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .modal-close span { display: none; } .modal__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; padding-block: 0 0.5rem; padding-inline: 1rem; } .modal__content .c-btn-cta { max-width: 80% !important; width: 400px; height: 50px; font-size: clamp(1rem, 0.625rem + 0.78vw, 1.125rem); } @-webkit-keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes mmslideIn { from { -webkit-transform: translateY(10%); transform: translateY(10%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes mmslideIn { from { -webkit-transform: translateY(10%); transform: translateY(10%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } } @keyframes mmslideOut { from { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-10%); transform: translateY(-10%); } }