@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) 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 { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } b, strong { font-weight: bold; } u{ text-decoration: underline; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* 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; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } .opening { width: 100vw; height: 100vh; position: fixed; z-index: 999; background: #FFFFFF; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; } .opening--logo { opacity: 0; visibility: hidden; width: 200px; } @media screen and (min-width: 768px) { .opening--logo { width: 400px; } } @media screen and (min-width: 1024px) { .opening--logo { width: auto; } } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; color: #1E2933; } input:focus, textarea:focus, button:focus { border: 1px solid #007BC3; } .menu--bg { height: 100%; overflow: hidden; } .sp-only { display: block; } @media screen and (min-width: 1024px) { .sp-only { display: none; } } .pc-only { display: none; } @media screen and (min-width: 1024px) { .pc-only { display: block; } } .parts--performance { display: inline-block; padding: 8px 34px; background: url("../../assets/img/about/performance-bg.svg"); background-size: contain; background-position: bottom; background-repeat: no-repeat; text-align: center; height: 76px; } @media screen and (min-width: 1024px) { .parts--performance { padding: 18px 70px; height: 155px; } } .parts--performance span { display: block; } .parts--performance-text { font-size: 18px; font-weight: 700; } .parts--performance-text span { background: var(--unnamed, linear-gradient(320deg, #0f6190 0%, #126fa6 46.46%, #007bc3 58.24%, #34a0df 75.17%, #6ec9fe 88.99%, #88d3ff 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .parts--performance-text span:nth-of-type(1) { font-size: 10px; line-height: 1.2; } @media screen and (min-width: 1024px) { .parts--performance-text span:nth-of-type(1) { font-size: 18px; } } .parts--performance-text span:nth-of-type(2) { font-size: 28px; line-height: 1; font-family: "Montserrat", sans-serif; } @media screen and (min-width: 1024px) { .parts--performance-text span:nth-of-type(2) { font-size: 56px; } } .parts--performance-text span:nth-of-type(3) { font-size: 10px; margin-top: -3px; } @media screen and (min-width: 1024px) { .parts--performance-text span:nth-of-type(3) { font-size: 18px; margin-top: -7px; } } .download { background: #003993; width: -moz-fit-content; width: fit-content; min-width: 328px; max-width: 1180px; border-radius: 16px; padding: 16px 16px 32px; margin: -77px auto 0; color: #FFFFFF; width: 90%; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; overflow: hidden; transition: all 0.3s; } .download::before { position: absolute; content: ""; width: 386px; height: 386px; background: #FFFFFF; border-radius: 100%; opacity: 0.1; top: -23%; left: -5%; display: none; } @media screen and (min-width: 1024px) { .download::before { display: block; } } @media screen and (min-width: 1024px) { .download { gap: 40px; flex-direction: row; justify-content: space-between; padding: 65px 76px; } } .download--image { height: auto; position: relative; z-index: 1; width: 100%; } .download--image img { width: 100%; height: auto; } @media screen and (min-width: 1024px) { .download--image { width: 50%; max-width: 460px; } } .download--inner { width: 100%; display: grid; grid-template-areas: "title title" "text arrow"; align-items: center; row-gap: 14px; } @media screen and (min-width: 1024px) { .download--inner { width: 50%; } } @media screen and (min-width: 1280px) { .download--inner { grid-template-areas: "title arrow" "text arrow"; align-content: center; -moz-column-gap: 50px; column-gap: 50px; } } .download--title { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 54px; line-height: 1; grid-area: title; } @media screen and (min-width: 1024px) { .download--title { font-size: 72px; } } .download--text { grid-area: text; font-size: 14px; line-height: 2; } @media screen and (min-width: 1024px) { .download--text { font-size: 18px; } } .download--arrow { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin-left: auto; grid-area: arrow; position: relative; transition: all 0.3s; } .download--arrow::after { position: absolute; content: ""; width: 100%; height: 100%; background: #FFFFFF; border-radius: 100%; z-index: -1; } @media screen and (min-width: 1024px) { .download--arrow { width: 120px; height: 120px; } } @media (any-hover: hover) { .download:hover { transform: scale(0.98); } .download:hover .download--arrow { transform: scale(0.9); } } .tag { display: inline-block; font-weight: 700; font-size: 10px; line-height: 1.6; font-size: 0.75rem; margin-right: 0.2em; text-align: center; } @media screen and (min-width: 768px) { .tag { font-size: 12px; } } .tag__required { vertical-align: super; color: #ED5D5D; } .header { position: fixed; z-index: 777; top: 17px; left: 0; right: 0; margin: 0 auto; padding: 0.5rem 1rem 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-radius: 1000px; background: var(--primary-white, #fff); width: 88vw; } @media screen and (min-width: 1024px) { .header { width: 80vw; max-width: 1440px; padding: 0.5rem 1rem 0.5rem 2.5rem; box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.04); } } .header--logo { width: 120px; } @media screen and (min-width: 1024px) { .header--logo { width: 175px; height: 32px; } } .header--logo svg { width: 120px; } @media screen and (min-width: 1024px) { .header--logo svg { width: 175px; height: 32px; } } .header--logo-link { display: inline-block; height: 100%; } .header--list { display: none; } .header--list-item { font-weight: 600; color: #1E2933; border-radius: 50px; transition: color 0.3s; } @media (any-hover: hover) { .header--list-item:hover { color: #007BC3; } } .header--list-item a { padding: 10px 20px; display: inline-block; } .header--list-item__download { color: #FFFFFF; background: #007BC3; transition: 0.3s; } @media (any-hover: hover) { .header--list-item__download:hover { color: #FFFFFF; background: #003993; } } @media screen and (min-width: 768px) { .header--list { display: flex; gap: 1rem; } } @media screen and (min-width: 1024px) { .header--list a { padding: 10px 24px; } } @media screen and (min-width: 768px) { .menu { display: none; } } .menu--btn-open { background: #003993; padding: 0 12px; width: 40px; height: 40px; border-radius: 100%; display: flex; align-items: center; cursor: pointer; transition: background-color 0.3s; } @media (any-hover: hover) { .menu--btn-open:hover { background-color: #007BC3; } } @media screen and (min-width: 768px) { .menu--btn-open { display: none; } } .menu--btn-open span, .menu--btn-open span::before, .menu--btn-open span::after { display: inline-block; background: #FFFFFF; width: 100%; height: 2px; border-radius: 10px; } .menu--btn-open span { position: relative; top: 0; } .menu--btn-open span::before { position: absolute; content: ""; top: 6px; } .menu--btn-open span::after { position: absolute; content: ""; top: -6px; } .menu--btn-close { position: absolute; content: ""; top: 17px; right: 23px; background-color: #003993; padding: 0 15px; width: 64px; height: 64px; border-radius: 100%; display: flex; align-items: center; cursor: pointer; transition: background-color 0.3s; } @media (any-hover: hover) { .menu--btn-close:hover { background-color: #007BC3; } } .menu--btn-close span, .menu--btn-close span::before { display: inline-block; background: #FFFFFF; width: 100%; height: 2px; border-radius: 10px; } .menu--btn-close span { position: relative; top: 0; transform: rotate(45deg); } .menu--btn-close span::before { position: absolute; content: ""; top: 0; transform: rotate(90deg); } .menu--wrapper { position: fixed; top: 0; right: -100%; z-index: 888; } .menu--mask { background: rgba(0, 0, 0, 0.32); position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; } .menu--inner { position: relative; top: 0; right: 0; background: #FFFFFF; height: 100vh; width: 78vw; padding: 7.5rem 1.5rem 2.5rem; border-radius: 24px 0 0 24px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .menu--list { display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.25rem; font-weight: 600; margin-left: 0.75rem; } .menu--list-item { transition: color 0.3s; } @media (any-hover: hover) { .menu--list-item:hover { color: #007BC3; } } .menu--contact { width: 100%; max-width: 350px; background-color: #007BC3; border-radius: 45px; padding: 1rem 47px; text-align: center; color: #FFFFFF; font-size: 1.25rem; font-weight: 600; margin-top: 40px; display: inline-block; position: relative; z-index: 1; transition: background-color 0.3s; } @media (any-hover: hover) { .menu--contact:hover { background-color: #003993; } } .menu--link { text-align: right; font-size: 0.875rem; font-weight: 400; } .menu--link-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } @media screen and (min-width: 1024px) { .menu--link-list { margin-top: 1rem; flex-direction: row; justify-content: flex-end; gap: 1rem; } } .menu--link-list__item { position: relative; padding-right: 20px; } .menu--link-list__item::after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 0.75rem; height: 0.5rem; background: url("../../assets/img/parts/blank-icon-black.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 1024px) { .menu--link-list__item { padding-right: 1rem; } .menu--link-list__item::after { top: 3px; transform: translateY(0); } } .menu--link-list__item a { position: relative; } .menu--link-list__item a::after { position: absolute; content: ""; height: 1px; width: 100%; background: #1E2933; bottom: 0; left: 0; opacity: 0; transition: opacity 0.3s; } @media (any-hover: hover) { .menu--link-list__item a:hover::after { opacity: 1; } } .menu--icon01, .menu--icon02, .menu--icon03, .menu--icon04 { position: absolute; content: ""; } .menu--icon01 { top: 10%; right: -60px; } .menu--icon02 { top: 40%; left: -40px; } .menu--icon03 { top: 55%; right: -90px; } .menu--icon04 { top: 80%; left: -50px; } .footer { background: #007BC3; color: #FFFFFF; margin-top: -1rem; padding: 4rem 1.5rem 2.5rem; display: grid; grid-template-areas: "logo logo" "link link" "copy copy"; row-gap: 24px; } @media screen and (min-width: 768px) { .footer { grid-template-areas: ". logo" "copy link"; row-gap: 52px; } } .footer--logo { grid-area: logo; text-align: left; } .footer--logo svg { width: 126px; height: 23px; } @media screen and (min-width: 768px) { .footer--logo { text-align: right; } .footer--logo svg { width: 320px; height: 56px; } } .footer--link { grid-area: link; text-align: right; display: flex; flex-direction: column; gap: 1rem; } .footer--link-item { position: relative; padding-right: 1rem; font-size: 0.875rem; } .footer--link-item::after { position: absolute; content: ""; width: 12px; height: 8px; top: 50%; right: 0; transform: translateY(-50%); background: url("../../assets/img/parts/blank-icon.svg"); background-size: cover; } .footer--link-item a { position: relative; padding-bottom: 1px; } .footer--link-item a::after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 1px; background: #FFFFFF; transition: all 0.3s; } @media screen and (min-width: 768px) { .footer--link-item { padding-right: 1.25rem; font-size: 1rem; } } @media (any-hover: hover) { .footer--link-item:hover a::after { opacity: 0; } } @media screen and (min-width: 1024px) { .footer--link { flex-direction: row; justify-content: right; gap: 1.5rem; } } .footer--copy { grid-area: copy; font-size: 0.875rem; font-family: "Jost", sans-serif; margin-top: 1.5rem; } @media screen and (min-width: 1024px) { .footer--copy { margin-top: 0; } } .single-page { text-align: left; background: #F8F8F8; background-image: url("../../assets/img/thanks/bg-sp.svg"); background-position: center; background-size: cover; box-sizing: content-box; overflow: hidden; } .single-page--inner { padding: 20px; margin: 100px 1.5rem; position: relative; background-color: white; border-radius: 20px; } .single-page--inner a{ color: #007BC3; display: inline; text-decoration: underline; } .single-page--inner a:hover{ text-decoration: none; } @media screen and (min-width: 1024px) { .single-page--inner { margin: 150px auto 150px; padding: 28px; width: 80vw; max-width: 1440px; } } .single-page--title { color: #007BC3; font-size: 2rem; font-weight: 700; line-height: 1.6; text-align: center; } .single-page--text { margin-top: 1.5rem; line-height: 1.5; margin-bottom: 40px; } .single-page--text-inner { padding-left: 24px; } .single-page h2 { background: #f8f8f8; margin-bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; padding: 14px 16px 12px 16px; } .single-page h3 { font-weight: 700; word-break: break-all; margin-top: 0; margin-bottom: 8px; font-size: 14px; } .single-page p { font-size: 11px; margin-bottom: 8px; line-height: 2; } .single-page p.date { text-align: right; } .single-page ul { font-size: 11px; } .single-page ul li { list-style-type: disc; margin-left: 1em; margin-bottom: 8px; line-height: 2; } table.tbl1 { margin: 10px auto 30px; width: 100%; font-size: 14px; } .tbl1 th { background: #f2f2f2; border: solid 1px #666; color: #333; padding: 10px; } .tbl1 td { border: solid 1px #666; padding: 10px; } @media screen and (min-width: 1024px) { .single-page--title { font-size: 2.5rem; } .single-page--text-inner { padding-left: 0; } .single-page h2 { margin-bottom: 24px; padding: 15px 24px 13px 24px; border-radius: 10px; font-size: 20px; } .single-page h3 { margin-top: 30px; margin-bottom: 16px; font-size: 20px; } .single-page p { font-size: 16px; /* margin-bottom: 24px; */ } .single-page ul { font-size: 16px; } } .single-page--button { width: 100%; border-radius: 100px; color: #FFFFFF; font-weight: 700; font-size: 1.25rem; height: 64px; padding: 10px 45px; text-align: center; background: #ED5D5D; display: block; margin: 2.5rem auto 0; position: relative; display: flex; align-items: center; max-width: 320px; } @media screen and (min-width: 768px) { .single-page--button { font-size: 1.5rem; height: 98px; max-width: 236px; margin: 5rem auto 0; } } .single-page--button__arrow { position: absolute; content: ""; top: 50%; right: 2rem; transform: translateY(-50%); background: #FFFFFF; width: 32px; height: 32px; border-radius: 100%; display: flex; justify-content: center; align-items: center; } @media screen and (min-width: 768px) { .single-page--button__arrow { width: 48px; height: 48px; } }/*# sourceMappingURL=style-single-page.css.map */