@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); :root { --accent: 124, 58, 237; --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%); } html { -webkit-text-size-adjust: none; font-family: system-ui, sans-serif; background-color: #fff; } code { font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } body { position: relative; color: #333333; background: #ffffff; font-family: "PT Sans", sans-serif; font-weight: 500; line-height: 1.5; zoom: 1; word-wrap: break-word; overflow-wrap: break-word; overflow-x: hidden; min-height: 100vh; } .wrapper { max-width: 1270px; width: 100%; margin: auto; min-width: 1200px; } @media only screen and (max-width: 1279px) { .wrapper { min-width: auto; max-width: 100%; padding-left: 40px; padding-right: 40px; } } h1 { font-size: 3rem; font-weight: 800; margin: 0; } img { vertical-align: top; } figcaption { margin-block-start: 0.5rem; } /*** 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; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* 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 */ /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::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; } /* 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; } /*.l-header { width: 100%; background-color: #222; color: #ffffff; padding: 10px 50px; } @media only screen and (max-width: 767px) { .l-header { padding: 33px 10px; } } .l-header__inner { display: flex; justify-content: space-between; align-items: center; } .l-header__logo { width: 6.25rem; } .l-header__right { display: flex; align-items: center; } @media only screen and (max-width: 991px) { .l-header__right { display: none; } }*/ header{ width: 100%; position: static; } .nav{ width: 100%; height: 122px; } .nav-inner { display: flex; align-items: center; width: 100%; height: 100%; padding: 0 40px; min-height: 0; border-right: none; } .logo{ margin: 0; align-self: center; } @media screen and (max-width: 768px) { .nav { height: 80px; } } /*.l-footer { display: none; width: 100%; position: absolute; bottom: 0; } .l-footer__top { display: flex; align-items: center; justify-content: space-between; background-color: #707070; padding: 30px 20px; } .l-footer__logo { width: 7rem; } .l-footer__right ul { display: flex; } .l-footer__right ul li { font-family: "Titillium Web", sans-serif; font-size: 1.5rem; margin-right: 5rem; } .l-footer__right ul li:last-child { margin-right: 0; } .l-footer__bottom { font-size: 0.875rem; color: #ffffff; text-align: center; background-color: #333333; padding: 10px 0; }*/ .footer{ height: 80px; } .footer small{ font-size: 80%; } @media screen and (max-width: 768px) { .footer { height: auto; } } .link-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); gap: 1rem; padding: 0; } .card-01 { background-color: #9dd8f7; border-radius: 30px; padding-block: 5.25rem 5rem; padding-inline: 2.5rem; position: relative; } @media only screen and (max-width: 991px) { .card-01 { padding-block-start: 5.75rem; padding-inline: 1.25rem; } } .card-01::before { position: absolute; top: -70px; left: -20px; content: ""; width: 135px; height: 120px; background-image: url("../images/example-icon-voice.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } .card-01__subtitle { margin-block-start: 0.625rem; } .card-01__subtitle p { font-size: clamp(18px, 3.5vw, 26px); font-weight: 600; } .card-01__text { margin-block-start: 1.875rem; } .card-01__text p { font-size: clamp(18px, 3.5vw, 26px); font-weight: 400; } .nav-overlay { display: none; } .nav__inner { display: flex; } .nav__inner li { margin-right: 70px; } @media only screen and (max-width: 767px) { .nav__inner li { margin-right: 35px; } } .nav__inner li span { display: block; } .nav__text--main { font-family: "Titillium Web", sans-serif; font-size: 1.5rem; } @media only screen and (max-width: 767px) { .nav__text--main { font-size: 0.75rem; } } .nav__text--sub { font-size: 0.75rem; } @media only screen and (max-width: 767px) { .nav__text--sub { font-size: 1rem; } } .NavMenu-sp { position: fixed; z-index: 12; top: 0; left: 0; background: #222; text-align: center; width: 100vw; height: 100%; display: none; } .NavMenu-sp ul { width: 100%; margin: 0 auto; padding: 0; position: absolute; top: 30%; left: 50%; transform: translateY(-50%) translateX(-50%); display: grid; gap: 50px; } .NavMenu-sp ul li { font-size: 24px; list-style-type: none; width: 100%; padding-bottom: 0px; transition: all 0.3s; } .NavMenu-sp ul li:last-child { padding-bottom: 0; } .NavMenu-sp ul li:hover { color: #222; background-color: #fff; } .NavMenu-sp ul li a { display: block; color: #fff; padding: 15px 0; font-weight: bold; font-size: 18px; } .Toggle { position: fixed; right: 18px; top: 31px; width: 45px; height: 45px; cursor: pointer; z-index: 13; display: none; } @media only screen and (max-width: 991px) { .Toggle { display: block; } } .Toggle span { display: block; position: absolute; width: 35px; border-bottom: solid 4px #c1c1c1; -webkit-transition: 0.35s ease-in-out; -moz-transition: 0.35s ease-in-out; transition: 0.35s ease-in-out; left: 6px; } .Toggle span:nth-child(1) { top: 0px; } .Toggle span:nth-child(2) { top: 11px; } .Toggle span:nth-child(3) { top: 22px; } .Toggle.active span:nth-child(1) { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); border-bottom: solid 3px #c1c1c1; } .Toggle.active span:nth-child(2) { top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); border-bottom: solid 3px #c1c1c1; } .Toggle.active span:nth-child(3) { top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); border-bottom: solid 3px #c1c1c1; } .sns__inner { display: flex; align-items: center; } .sns__twitter { margin-left: 30px; } .sns img { max-width: 35px; } .section-01 { padding: 50px 0; } .section-01:first-child { padding: 100px 0 50px; } .section-01:last-child { padding: 50px 0 285px; } .section-01__title { margin-bottom: 5rem; } .section-02 { padding: 100px 0 285px; } .section-02__title { margin-bottom: 5rem; } .container-01, .container-01--reverse { display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 767px) { .container-01, .container-01--reverse { display: contents; } } .container-01__title { margin-bottom: 1rem; } .container-01 > *, .container-01--reverse > * { width: 50%; } @media only screen and (max-width: 767px) { .container-01 > *, .container-01--reverse > * { width: 100%; } } .container-01__right { width: calc(50% - 50px); } .container-01--reverse { flex-direction: row-reverse; } .p-example { background-color: #eaf3f5; margin-block-start: 10.625rem; padding-block-end: 9.375rem; } .p-example-intro { translate: 0 -15%; } .p-example-intro__mv { position: relative; } .p-example-intro__container { width: 100%; padding-block: 1.875rem 3.125rem; padding-inline: 6.25rem; background-color: rgba(0, 0, 0, 0.27); position: absolute; bottom: 0; } @media only screen and (max-width: 1279px) { .p-example-intro__container { padding-block: 0.625rem 1.875rem; padding-inline: 0.625rem; } } .p-example-intro__titleWrap { display: flex; justify-content: space-between; row-gap: 1.875rem; } @media only screen and (max-width: 767px) { .p-example-intro__titleWrap { flex-direction: column; text-align: center; } } .p-example-intro__subTitle { display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .p-example-intro__subTitle span { display: block; } .p-example-intro__subTitle span:first-of-type { font-size: clamp(18px, 3.5vw, 28px); line-height: 1; letter-spacing: 10px; padding: 0.3125rem 5.625rem; background-color: #ffeb0a; width: 100%; text-align: center; } .p-example-intro__subTitle span:last-of-type { font-family: "Noto Sans", sans-serif; font-weight: 600; font-size: clamp(18px, 3.5vw, 28px); color: #ffffff; } .p-example-intro__text { margin-block-start: 3.125rem; } .p-example-intro__text p { font-size: clamp(18px, 3.5vw, 28px); line-height: 2; margin-block: calc((1em - 1lh) / 2); } .p-example-desc { padding-block: 5rem; border-block-start: solid 1px #707070; } @media only screen and (max-width: 767px) { .p-example-desc { padding-block: 3.75rem 4.375rem; } } .p-example-desc__img { display: flex; justify-content: center; column-gap: 2.5rem; row-gap: 0.625rem; margin-block-start: 50px; } @media only screen and (max-width: 767px) { .p-example-desc__img { flex-direction: column; } } .p-example-desc__img:last-of-type { width: 50%; margin-inline: auto; } @media only screen and (max-width: 767px) { .p-example-desc__img:last-of-type { width: 100%; } } .p-example-common { padding-block: 5rem; border-block-start: solid 1px #707070; } .p-example-common__text { margin-block-start: 2.5rem; } .p-example-common__text p { font-size: clamp(18px, 3.5vw, 26px); } .p-example-common__content { margin-block-start: 5rem; } /* @media only screen and (max-width: 767px) { .p-example-common__content { margin-block-start: 5rem; } } */ .p-example-common__container { display: flex; align-items: flex-start; } @media only screen and (max-width: 767px) { .p-example-common__container { flex-direction: column; } } .p-example-common__voiceArea { width: 50%; display: grid; row-gap: 8rem; } @media only screen and (max-width: 767px) { .p-example-common__voiceArea { width: 100%; } } .p-example-common__imgArea { flex: 1; margin-inline-start: 8.75rem; display: grid; row-gap: 7.5rem; } @media only screen and (max-width: 1279px) { .p-example-common__imgArea { margin-inline-start: 3.125rem; } } @media only screen and (max-width: 767px) { .p-example-common__imgArea { margin-block-start: 3.125rem; margin-inline-start: 0; row-gap: 1.875rem; } } .p-example-overview__table { margin-block-start: 1.875rem; } .p-example-overview__table table { width: 100%; font-size: clamp(16px, 3.5vw, 26px); font-weight: 600; background-color: #ffffff; border: solid 2px #005dab; } .p-example-overview__table table tr { border: solid 2px #005dab; } .p-example-overview__table table tr:nth-of-type(2n + 1) { background-color: #9dd8f7; } .p-example-overview__table table tr th { width: 25%; letter-spacing: 1rem; border: solid 2px #005dab; text-align: center; vertical-align: middle; } .p-example-overview__table table tr td { padding: 1.25rem 2.5rem; } @media only screen and (max-width: 767px) { .p-example-overview__table table tr td { padding: 0.625rem 0.625rem; } } .p-example-overview__table table tr td ul { list-style-type: disc; padding-inline-start: 2.5rem; } .text-gradient { background-image: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 400%; background-position: 0%; } .instructions { line-height: 1.6; margin: 1rem 0; border: 1px solid rgba(var(--accent), 25%); background-color: white; padding: 1rem; border-radius: 0.4rem; } .instructions code { font-size: 0.875em; font-weight: bold; background: rgba(var(--accent), 12%); color: rgb(var(--accent)); border-radius: 4px; padding: 0.3em 0.45em; } .instructions strong { color: rgb(var(--accent)); } .headline-01 { font-family: "Noto Sans", sans-serif; font-weight: 400; font-size: clamp(30px, 3.5vw, 44px); color: #ffffff; line-height: 1.5; margin-block: calc((1em - 1lh) / 2); } .headline-02 { display: inline-block; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; line-height: 1.5; margin-block: calc((1em - 1lh) / 2); padding: 0.625rem 3.125rem; background-color: #faf5bd; border: solid 1px #707070; text-align: center; } .headline-03 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 600; line-height: 1.25; margin-block: calc((1em - 1lh) / 2); border-block-end: solid 2px #ffeb0a; padding-block-end: 0.625rem; text-align: center; } .headline-04 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 600; } .mb--0 { margin-block-end: 0 !important; } .mb--10 { margin-block-end: 0.625rem !important; } .mb--20 { margin-block-end: 1.25rem !important; } .mb--30 { margin-block-end: 1.875rem !important; } .mb--40 { margin-block-end: 2.5rem !important; } .mb--50 { margin-block-end: 3.125rem !important; } .mt--0 { margin-block-start: 0 !important; } .mt--10 { margin-block-start: 0.625rem !important; } .mt--20 { margin-block-start: 1.25rem !important; } .mt--30 { margin-block-start: 1.875rem !important; } .mt--40 { margin-block-start: 2.5rem !important; } .mt--50 { margin-block-start: 3.125rem !important; } .pb--0 { padding-block-end: 0 !important; } .pb--10 { padding-block-end: 0.625rem !important; } .pb--20 { padding-block-end: 1.25rem !important; } .pb--30 { padding-block-end: 1.875rem !important; } .pb--40 { padding-block-end: 2.5rem !important; } .pb--50 { padding-block-end: 3.125rem !important; } .pt--0 { padding-block-start: 0 !important; } .pt--10 { padding-block-start: 0.625rem !important; } .pt--20 { padding-block-start: 1.25rem !important; } .pt--30 { padding-block-start: 1.875rem !important; } .pt--40 { padding-block-start: 2.5rem !important; } .pt--50 { padding-block-start: 3.125rem !important; }