/* !_common.scss */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100..700&display=swap"); /* !_breakpoint.scss */ :root { --bp-pcCnt: 960px; --bp-pcMax: 1440px; --bp-spMax: 743px; } /* !_reset.scss */ .pp1 { min-height: 100svh; overflow-wrap: anywhere; word-break: normal; line-break: strict; line-height: 1.5; text-rendering: optimizeSpeed; } .pp1 *, .pp1 *::before, .pp1 *::after { box-sizing: border-box; } .pp1 h1, .pp1 h2, .pp1 h3, .pp1 h4, .pp1 h5, .pp1 h6, .pp1 p, .pp1 figure, .pp1 blockquote, .pp1 dl, .pp1 dd { margin: 0; } .pp1 h1, .pp1 h2, .pp1 h3, .pp1 h4, .pp1 h5, .pp1 h6, .pp1 button, .pp1 input, .pp1 label { line-height: 1.2; } .pp1 h1, .pp1 h2, .pp1 h3, .pp1 h4, .pp1 h5, .pp1 h6 { font-weight: normal; } .pp1 :where(a) { color: inherit; } .pp1 :where(a[class]) { text-decoration: none; } .pp1 :where(a:not([class])) { text-decoration-skip-ink: auto; } .pp1 a:not([href]) { text-decoration: none; cursor: default; } .pp1 a[href^="tel:"] { text-decoration: none; } @media (min-width: 744px) { .pp1 a[href^="tel:"] { pointer-events: none; } } .pp1 :where(ul, ol) { list-style: none; margin: 0; padding: 0; } .pp1 img, .pp1 picture, .pp1 figure, .pp1 video { display: block; width: 100%; max-width: fit-content; height: auto; } .pp1 textarea, .pp1 :where(input[type=text]) { display: block; width: 100%; max-width: 100%; } .pp1 video[controls] { cursor: pointer; } .pp1 video:focus { outline: none; } .pp1 iframe[src*=youtube] { display: block; aspect-ratio: 16/9; } .pp1 table { border: none; border-collapse: collapse; border-spacing: 0; } .pp1 address { font-style: normal; } .pp1 button, .pp1 input, .pp1 select, .pp1 textarea, .pp1 optgroup { margin: 0; font: inherit; } @media (min-width: 390px) and (max-width: 743px), not all and (min-width: 744px) { .pp1 input, .pp1 select, .pp1 textarea { font-size: 16px; } } .pp1 :where(input[type=number]) { appearance: textfield; -moz-appearance: textfield; } .pp1 :where(input[type=number])::-webkit-inner-spin-button, .pp1 :where(input[type=number])::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } .pp1 button, .pp1 input { overflow: visible; } .pp1 button, .pp1 select { text-transform: none; } .pp1 button, .pp1 [type=button], .pp1 [type=reset], .pp1 [type=submit] { cursor: pointer; appearance: button; -webkit-appearance: button; } .pp1 textarea { resize: vertical; field-sizing: content; } .pp1 :where(textarea:not([rows])) { min-height: 10em; } .pp1 summary { display: block; cursor: pointer; } .pp1 summary::-webkit-details-marker { display: none; } @media (prefers-reduced-motion: reduce) { .pp1 *, .pp1 *::before, .pp1 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .pp1 html:focus-within { scroll-behavior: auto; } } :root { --1vw: 1vw; --50vw: 50vw; --100vw: 100vw; } html { padding-block-end: env(safe-area-inset-bottom); scroll-behavior: smooth; } .pp1 { font-family: "Noto Sans JP", sans-serif; container-name: pp1; container-type: inline-size; } @container pp1 (min-width: 0px) { .pp1 > * { font-size: calc(16 / 390 * 100cqw); color: #404040; line-height: 2; } @media (min-width: 744px) { .pp1 > * { font-size: clamp(10px, 1.6129032258cqw, 16px); } } } @media (any-hover: hover) { .pp1 :where(a[href]) { transition: 0.3s ease-in-out; } .pp1 :where(a[href]) img { transition: 0.3s ease-in-out; } .pp1 :where(a[href]):hover { transition: 0.3s ease-in-out; } .pp1 :where(a[href]):hover img { transition: 0.3s ease-in-out; } } .pp1 .dsp_ib { display: inline-block; font: inherit; } @media (min-width: 390px) and (max-width: 743px), not all and (min-width: 744px) { .pp1 .dsp_pc { display: none !important; } } @media (min-width: 744px) { .pp1 .dsp_sp { display: none !important; } } .pp1 .leading-trim::before, .pp1 .leading-trim::after { content: ""; display: block; inline-size: 0; block-size: 1px; } .pp1 .leading-trim::before { margin-block-start: calc((1em - 1lh) / 2); } .pp1 .leading-trim::after { margin-block-end: calc((1em - 1lh) / 2); } .pp1 a:hover, .pp1 a:focus { opacity: 1; } /* !_styleSP.scss */ .slick-slider { position: relative; } .slider-wrapper { width: calc(240 / 390 * 100cqw); margin-inline: auto; overflow: hidden; } .slick-prev:not(:root), .slick-next:not(:root) { display: block; width: calc(20 / 390 * 100cqw); height: calc(20 / 390 * 100cqw); aspect-ratio: 1; position: absolute; top: calc(140 / 390 * 100cqw); transform: translate(0, -50%); padding: 0; border: none; background: none; color: transparent; font-size: 0; line-height: 0; outline: none; cursor: pointer; } .slick-prev:not(:root)::before, .slick-next:not(:root)::before { content: ""; width: calc(20 / 390 * 100cqw); height: calc(20 / 390 * 100cqw); opacity: 0.75; clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); margin-block-start: 0; border: none; background-color: #0060e0; } .slick-prev { left: calc(-4 / 390 * 100cqw); } .slick-prev::before { transform: rotate(45deg); } .slick-next { right: calc(-4 / 390 * 100cqw); } .slick-next::before { transform: rotate(225deg); } .pp1 .section-body { padding-inline: calc(20 / 390 * 100cqw); padding-block: calc(40 / 390 * 100cqw); } .pp1 .section-heading { position: relative; margin-block-start: calc(60 / 390 * 100cqw); margin-block-end: calc(40 / 390 * 100cqw); color: #fff; font-weight: 600; font-size: calc(32 / 390 * 100cqw); line-height: 1.5; text-align: center; } .pp1 .section-heading::before { content: ""; width: calc(100 / 390 * 100cqw); aspect-ratio: 2/1; position: absolute; top: calc(-35 / 390 * 100cqw); left: 50%; transform: translate(-50%, -50%); background-color: #f0b800; mask-image: url(../img/section-heading-befer-bg.svg); mask-size: cover; } .pp1 .section-title { color: #fff; font-weight: 600; font-size: calc(32 / 390 * 100cqw); line-height: 1.5; text-align: center; } .pp1 .section-link { display: grid; width: calc(200 / 390 * 100cqw); height: calc(40 / 390 * 100cqw); place-content: center; margin-inline: auto; border: max(1px, 0.2564102564cqw) solid currentColor; border-radius: calc(30 / 390 * 100cqw); color: #0060e0; } .pp1 .section-link .section-link__text { position: relative; padding-inline-end: calc(15 / 390 * 100cqw); } .pp1 .section-link .section-link__text::after { content: ""; display: block; width: calc(10 / 390 * 100cqw); aspect-ratio: 1; clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); position: absolute; top: 50%; right: 0; transform: translateY(-40%) rotate(225deg); background-color: currentColor; } .pp1 .section-link-box { display: grid; grid-template-columns: repeat(2, 1fr); overflow: clip; border-radius: calc(10 / 390 * 100cqw); box-shadow: 0 calc(4 / 390 * 100cqw) calc(8 / 390 * 100cqw) rgba(0, 0, 0, 0.2); } .pp1 .section-link-box .section-link-box__text-box { display: grid; align-items: center; padding-inline-start: calc(10 / 390 * 100cqw); padding-inline-end: calc(20 / 390 * 100cqw); background-color: rgba(0, 96, 224, 0.1); } .pp1 .section-link-box .section-link-box__text-box .section-link-box__text { position: relative; color: #0060e0; font-weight: 500; font-size: calc(12 / 390 * 100cqw); line-height: 2; letter-spacing: 0.1em; } .pp1 .section-link-box .section-link-box__text-box .section-link-box__text::after { content: ""; display: block; width: calc(10 / 390 * 100cqw); aspect-ratio: 1; clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(225deg); background-color: currentColor; } .pp1 .mv { height: calc(180 / 390 * 100cqw); padding-inline: calc(40 / 390 * 100cqw); padding-block: calc(30 / 390 * 100cqw); background-image: url(/-/media/cojp/product/hsm/special/pp1-special/img/mv-pc.webp); background-size: cover; background-repeat: no-repeat; color: #fff; } .pp1 .mv .mv__heading { font-weight: 700; font-size: calc(12 / 390 * 100cqw); letter-spacing: 0.1em; } .pp1 .mv .mv__text { width: calc(130 / 390 * 100cqw); margin-block-start: calc(10 / 390 * 100cqw); } .pp1 .mv .mv__lede { margin-block-start: calc(5 / 390 * 100cqw); font-weight: 500; font-size: calc(12 / 390 * 100cqw); letter-spacing: 0.1em; } .pp1 .nav { z-index: 1; padding-inline: calc(20 / 390 * 100cqw); } .pp1 .nav .nav__list { display: grid; width: 100%; grid-template-columns: 1fr 1fr; grid-template-areas: "feature howto" "example scene" "product product"; gap: calc(4 / 390 * 100cqw); } .pp1 .nav .nav__item { position: relative; overflow: clip; box-shadow: 0 calc(5 / 390 * 100cqw) calc(10 / 390 * 100cqw) rgba(0, 0, 0, 0.2); } .pp1 .nav .nav__item .nav__item-link { display: grid; width: 100%; padding-block-start: calc(10 / 390 * 100cqw); padding-block-end: calc(30 / 390 * 100cqw); background-color: #fff; color: #0060e0; font-weight: 500; line-height: 1.25; text-align: center; } .pp1 .nav .nav__item:has([href="#feature"]) { grid-area: feature; border-top-left-radius: calc(10 / 390 * 100cqw); } .pp1 .nav .nav__item:has([href="#howto"]) { grid-area: howto; border-top-right-radius: calc(10 / 390 * 100cqw); } .pp1 .nav .nav__item:has([href="#example"]) { grid-area: example; } .pp1 .nav .nav__item:has([href="#scene"]) { grid-area: scene; } .pp1 .nav .nav__item:has([href="#product"]) { grid-area: product; border-bottom-right-radius: calc(10 / 390 * 100cqw); border-bottom-left-radius: calc(10 / 390 * 100cqw); } .pp1 .nav .nav__item::after { content: ""; display: block; width: calc(10 / 390 * 100cqw); aspect-ratio: 1; clip-path: polygon(75% 80%, 75% 100%, 0 100%, 0 25%, 20% 25%, 20% 80%); position: absolute; bottom: calc(8 / 390 * 100cqw); left: 50%; transform: translate(-50%, -50%) rotate(315deg); background-color: #0060e0; } .pp1 .intro { padding-block-start: calc(20 / 390 * 100cqw); background-color: #f0b800; } .pp1 .intro .intro__text { text-align: center; } .pp1 .intro .intro__video { margin-block-start: calc(40 / 390 * 100cqw); } .pp1 .feature { background-color: #0060e0; } .pp1 .feature .feature__list { display: grid; row-gap: calc(40 / 390 * 100cqw); } .pp1 .feature .feature__item { display: grid; grid-template-areas: "image" "title" "text"; row-gap: calc(20 / 390 * 100cqw); } .pp1 .feature .feature__item .feature__item-img { grid-area: image; overflow: clip; border: max(1px, 0.2564102564cqw) solid #707070; border-radius: calc(10 / 390 * 100cqw); box-shadow: 0 calc(5 / 390 * 100cqw) calc(10 / 390 * 100cqw) rgba(0, 0, 0, 0.2); } .pp1 .feature .feature__item .feature__item-title { grid-area: title; color: #f0b800; font-weight: 500; font-size: calc(24 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; } .pp1 .feature .feature__item .feature__item-text { grid-area: text; color: #fff; } .pp1 .howto { background-color: #f09060; } .pp1 .howto .howto__list { display: grid; row-gap: calc(40 / 390 * 100cqw); counter-reset: number; } .pp1 .howto .howto__item { display: grid; row-gap: calc(20 / 390 * 100cqw); } .pp1 .howto .howto__item:nth-of-type(1) .howto__item-img::before { left: calc(10 / 390 * 100cqw); } .pp1 .howto .howto__item .howto__item-img { width: calc(280 / 390 * 100cqw); position: relative; margin-inline: auto; } .pp1 .howto .howto__item .howto__item-img::before { content: counter(number); position: absolute; top: calc(-20 / 390 * 100cqw); left: calc(-20 / 390 * 100cqw); color: #fff; font-family: "Josefin Sans", sans-serif; font-weight: 500; font-size: calc(80 / 390 * 100cqw); line-height: 1; counter-increment: number; } .pp1 .howto .howto__item .howto__item-img img { overflow: clip; border-radius: calc(10 / 390 * 100cqw); } .pp1 .howto .howto__item .howto__item-title { color: #fff; font-weight: 700; font-size: calc(24 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; text-align: center; } .pp1 .howto .howto__item .howto__item-text { color: #fff; } .pp1 .howto .howto-app { margin-block-start: calc(40 / 390 * 100cqw); padding: calc(20 / 390 * 100cqw); border-radius: calc(10 / 390 * 100cqw); box-shadow: 0 0 calc(8 / 390 * 100cqw) rgba(0, 0, 0, 0.2); background-color: #fff; } .pp1 .howto .howto-app .howto-app__block { display: grid; grid-template-areas: "image" "heading" "text"; } .pp1 .howto .howto-app .howto-app__block .howto-app__img { width: calc(240 / 390 * 100cqw); grid-area: image; margin-inline: auto; } .pp1 .howto .howto-app .howto-app__block .howto-app__heading { grid-area: heading; margin-block-start: calc(20 / 390 * 100cqw); color: #0060e0; font-weight: 700; font-size: calc(20 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; } .pp1 .howto .howto-app .howto-app__block .howto-app__heading .howto-app__heading-deco { font-weight: 400; font-size: calc(16 / 390 * 100cqw); letter-spacing: 0em; } .pp1 .howto .howto-app .howto-app__block .howto-app__text { grid-area: text; margin-block-start: calc(10 / 390 * 100cqw); } .pp1 .howto .howto-app .howto-app__title { margin-block-start: calc(20 / 390 * 100cqw); padding-block: calc(10 / 390 * 100cqw); border-radius: calc(30 / 390 * 100cqw); background-color: #0060e0; color: #fff; font-weight: 500; font-size: calc(20 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; text-align: center; } .pp1 .howto .howto-app .howto-app__title .howto-app__title-deco { font-size: calc(12 / 390 * 100cqw); } .pp1 .howto .howto-app .howto-app__list { display: flex; column-gap: calc(70 / 390 * 100cqw); margin-inline: auto; margin-block-start: calc(20 / 390 * 100cqw); transition: transform 0.5s ease; will-change: transform; } .pp1 .howto .howto-app .howto-app__item { flex: 0 0 100%; } .pp1 .howto .howto-app .howto-app__item .howto-app__item-title { color: #0060e0; font-weight: 500; font-size: calc(20 / 390 * 100cqw); letter-spacing: 0.05em; text-align: center; } .pp1 .howto .howto-app .howto-app__item .howto-app__item-text { margin-block-start: calc(10 / 390 * 100cqw); } .pp1 .howto .howto-app .section-link-box { margin-block-start: calc(60 / 390 * 100cqw); } .pp1 .usecase .usecase__list { display: grid; row-gap: calc(40 / 390 * 100cqw); } .pp1 .usecase .usecase__item .usecase__item-img { overflow: clip; border-radius: calc(10 / 390 * 100cqw); } .pp1 .usecase .usecase__item .usecase__item-title { position: relative; margin-block-start: calc(20 / 390 * 100cqw); padding-block: calc(15 / 390 * 100cqw); border-radius: calc(30 / 390 * 100cqw); font-weight: 500; font-size: calc(20 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; text-align: center; } .pp1 .usecase .usecase__item .usecase__item-title::after { content: ""; width: calc(50 / 390 * 100cqw); height: calc(25 / 390 * 100cqw); position: absolute; bottom: calc(-15 / 390 * 100cqw); left: 50%; transform: translateX(-50%); background-size: cover; mask-image: url(../img/usecase__item-title-after-bg.svg); } .pp1 .usecase .usecase__item .usecase__item-text { margin-block-start: calc(25 / 390 * 100cqw); color: #fff; } .pp1 .example { background-color: #0060e0; } .pp1 .example .usecase .usecase__item .usecase__item-title { background-color: #f0b800; color: #0060e0; } .pp1 .example .usecase .usecase__item .usecase__item-title::after { background-color: #f0b800; } .pp1 .scene { background-color: #f0b800; } .pp1 .scene .section-heading { color: #0060e0; } .pp1 .scene .section-heading::before { background-color: #f09060; } .pp1 .scene .usecase .usecase__item .usecase__item-title { background-color: #0060e0; color: #fff; } .pp1 .scene .usecase .usecase__item .usecase__item-title::after { background-color: #0060e0; } .pp1 .scene .usecase .usecase__item .usecase__item-text { margin-block-start: calc(25 / 390 * 100cqw); color: #404040; } .pp1 .product { background-color: #0060e0; } .pp1 .product .section-body { padding-block-end: calc(20 / 390 * 100cqw); } .pp1 .product .product-info { display: grid; row-gap: calc(20 / 390 * 100cqw); padding: calc(20 / 390 * 100cqw); border-radius: calc(10 / 390 * 100cqw); background-color: #fff; } .pp1 .product .product-info .product-info__block { display: grid; grid-template-areas: "title" "image" "list"; row-gap: calc(20 / 390 * 100cqw); } .pp1 .product .product-info .product-info__title { grid-area: title; font-weight: 500; font-size: calc(20 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0.1em; text-align: center; } .pp1 .product .product-info .product-info__title .product-info__title-deco { font-weight: 600; font-size: calc(32 / 390 * 100cqw); line-height: 1.5; letter-spacing: 0em; } .pp1 .product .product-info .product-info__img { grid-area: image; } .pp1 .product .product-info .product-info__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(5 / 390 * 100cqw); } .pp1 .product .product-info .product-info__item { display: grid; height: calc(60 / 390 * 100cqw); place-content: center; border: max(1px, 0.2564102564cqw) solid currentColor; color: #0060e0; font-size: calc(14 / 390 * 100cqw); line-height: 1.5; text-align: center; } .pp1 .product .product-flowchart { margin-block-start: calc(40 / 390 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__block { display: grid; grid-template-columns: 24fr 6fr 5fr; grid-template-areas: "q1 q1 q1" "q2 q2 ." "a1 . ." "a2 a2 ." "a3 a3 a3"; row-gap: calc(8 / 390 * 100cqw); margin-block-start: calc(20 / 390 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__question { position: relative; z-index: 1; margin-block-end: calc(32 / 390 * 100cqw); padding-block: calc(12 / 390 * 100cqw); border: max(2px, 0.5128205128cqw) solid #fff; border-radius: calc(10 / 390 * 100cqw); background-color: #3481e6; color: #fff; font-weight: 500; letter-spacing: 0.05em; text-align: center; } .pp1 .product .product-flowchart .product-flowchart__question::before { content: "YES"; display: grid; width: calc(40 / 390 * 100cqw); height: calc(32 / 390 * 100cqw); justify-content: end; align-items: center; position: absolute; bottom: calc(-32 / 390 * 100cqw); left: calc(120 / 390 * 100cqw); border-left: max(2px, 0.5128205128cqw) solid #fff; font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: calc(12 / 390 * 100cqw); letter-spacing: 0.05em; } .pp1 .product .product-flowchart .product-flowchart__question::after { content: ""; display: block; width: calc(16 / 390 * 100cqw); aspect-ratio: 1; clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); position: absolute; bottom: calc(-38 / 390 * 100cqw); left: calc(121 / 390 * 100cqw); transform: translateX(-50%) rotate(315deg); background-color: currentColor; } .pp1 .product .product-flowchart .product-flowchart__question:nth-of-type(1) { grid-area: q1; } .pp1 .product .product-flowchart .product-flowchart__question:nth-of-type(2) { grid-area: q2; } .pp1 .product .product-flowchart .product-flowchart__answer-box { position: relative; padding-block: calc(12 / 390 * 100cqw); border: max(2px, 0.5128205128cqw) solid #fff; border-radius: calc(10 / 390 * 100cqw); color: #0060e0; line-height: 1.5; text-align: center; } .pp1 .product .product-flowchart .product-flowchart__answer-box::before { display: grid; width: calc(30 / 390 * 100cqw); justify-content: end; align-items: center; position: absolute; right: 0; transform: translateY(-100%); border-left: max(2px, 0.5128205128cqw) dashed #fff; color: #fff; font-family: "Josefin Sans", sans-serif; font-size: calc(12 / 390 * 100cqw); letter-spacing: 0.05em; } .pp1 .product .product-flowchart .product-flowchart__answer-box::after { display: block; width: calc(16 / 390 * 100cqw); aspect-ratio: 1; clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); position: absolute; top: calc(-6 / 390 * 100cqw); right: calc(13 / 390 * 100cqw); transform: translate(-50%, -100%) rotate(315deg); background-color: #fff; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(1) { grid-area: a1; background-color: #f0b800; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(1) .product-flowchart__answer { font-weight: 600; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(2) { grid-area: a2; background-color: #fff; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(2)::before { content: "NO"; height: calc(140 / 390 * 100cqw); top: calc(-10 / 390 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(2)::after { content: ""; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(3) { grid-area: a3; background-color: #fff; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(3)::before { content: "NO"; height: calc(398 / 390 * 100cqw); top: calc(-10 / 390 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(3)::after { content: ""; } .pp1 .product .product-flowchart .product-flowchart__answer-box .product-flowchart__answer { font-weight: 500; } .pp1 .product .product-flowchart .product-flowchart__answer-box .section-link { width: calc(160 / 390 * 100cqw); height: calc(32 / 390 * 100cqw); margin-block-start: calc(10 / 390 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__answer-box .section-link .section-link__text { font-size: calc(14 / 390 * 100cqw); } .pp1 .product .product-faq { margin-block-start: calc(40 / 390 * 100cqw); } .pp1 .product .product-faq .accordion-group { display: grid; row-gap: calc(20 / 390 * 100cqw); margin-block-start: calc(40 / 390 * 100cqw); } .pp1 .product .product-faq .accordion .accordion__summary { display: flex; min-height: calc(50 / 390 * 100cqw); column-gap: calc(10 / 390 * 100cqw); align-items: center; position: relative; padding-inline-start: calc(10 / 390 * 100cqw); border-radius: calc(10 / 390 * 100cqw); } .pp1 .product .product-faq .accordion .accordion__summary::before { content: "Q"; margin-block-start: 0.25em; color: #0060e0; font-family: "Josefin Sans", sans-serif; font-weight: 500; font-size: calc(24 / 390 * 100cqw); line-height: 1; } .pp1 .product .product-faq .accordion:nth-of-type(odd) .accordion__summary { background-color: #f0b800; } .pp1 .product .product-faq .accordion:nth-of-type(even) .accordion__summary { background-color: #f09060; } .pp1 .product .product-faq .accordion .accordion__header { display: flex; width: 100%; justify-content: space-between; align-items: center; padding-inline-end: calc(20 / 390 * 100cqw); padding-block: calc(8 / 390 * 100cqw); line-height: 1.5; } .pp1 .product .product-faq .accordion .accordion__icon { width: calc(23 / 390 * 100cqw); height: calc(10 / 390 * 100cqw); flex-shrink: 0; position: relative; transition: transform 0.3s; } .pp1 .product .product-faq .accordion .accordion__icon::before, .pp1 .product .product-faq .accordion .accordion__icon::after { content: ""; width: calc(12 / 390 * 100cqw); height: calc(2 / 390 * 100cqw); position: absolute; bottom: 0; background-color: #0060e0; transition: transform 0.3s; } .pp1 .product .product-faq .accordion .accordion__icon::before { left: 0; transform: rotate(45deg); transform-origin: right center; } .pp1 .product .product-faq .accordion .accordion__icon::after { right: 0; transform: rotate(-45deg); transform-origin: left center; } .pp1 .product .product-faq .accordion .accordion__content { overflow: hidden; } .pp1 .product .product-faq .accordion .accordion__body { display: flex; column-gap: calc(10 / 390 * 100cqw); margin-block-start: calc(10 / 390 * 100cqw); padding-inline-start: calc(10 / 390 * 100cqw); color: #fff; } .pp1 .product .product-faq .accordion .accordion__body::before { content: "A"; margin-block-start: 0.25em; color: #f0b800; font-family: "Josefin Sans", sans-serif; font-weight: 500; font-size: calc(24 / 390 * 100cqw); line-height: 1; } .pp1 .product .product-faq .accordion.is-opened .accordion__icon { transform: translateY(calc(-10 / 390 * 100cqw)); } .pp1 .product .product-faq .accordion.is-opened .accordion__icon::before { transform: rotate(-45deg); transition: transform 0.3s; } .pp1 .product .product-faq .accordion.is-opened .accordion__icon::after { transform: rotate(45deg); transition: transform 0.3s; } .pp1 .product .product-faq > .section-link { width: calc(280 / 390 * 100cqw); margin-block-start: calc(40 / 390 * 100cqw); color: #fff; } .pp1 .product .product-copy { display: grid; width: fit-content; grid-template-columns: repeat(3, auto); column-gap: 0.5em; margin-inline: auto; margin-block-start: calc(40 / 390 * 100cqw); color: #fff; font-size: calc(12 / 390 * 100cqw); } /* !_stylePC.scss */ @media (min-width: 744px) { .slider-wrapper { width: auto; } .pp1 .section-body { width: min(100%, 960px + 32px); margin-inline: auto; padding-inline: 16px; padding-block: min(80 / 960 * 100cqw, 80px); } .pp1 .section-body::before, .pp1 .section-body::after { content: ""; width: 480px; position: absolute; top: 0; background-size: cover; background-repeat: no-repeat; } .pp1 .section-body::before { left: -480px; } .pp1 .section-body::after { right: -480px; } .pp1 .section-heading { margin-block-start: min(60 / 960 * 100cqw, 60px); margin-block-end: min(80 / 960 * 100cqw, 80px); font-size: clamp(10px, 4.0322580645cqw, 40px); } .pp1 .section-heading::before { width: min(100 / 960 * 100cqw, 100px); top: max(-25px, -25 / 960 * 100cqw); } .pp1 .section-title { font-size: clamp(10px, 3.2258064516cqw, 32px); letter-spacing: 0.1em; } .pp1 .section-link { width: min(260 / 960 * 100cqw, 260px); height: min(60 / 960 * 100cqw, 60px); border-width: 1px; border-radius: min(30 / 960 * 100cqw, 30px); background-color: transparent; } } @media (min-width: 744px) and (any-hover: hover) { .pp1 .section-link:hover { background-color: #f0f0f0; } } @media (min-width: 744px) { .pp1 .section-link .section-link__text { padding-inline-end: min(28 / 960 * 100cqw, 28px); font-size: min(20 / 960 * 100cqw, 20px); letter-spacing: 0.1em; } .pp1 .section-link .section-link__text::after { width: min(16 / 960 * 100cqw, 16px); } .pp1 .section-link-box { position: relative; border-radius: min(10 / 960 * 100cqw, 10px); box-shadow: 0 min(4 / 960 * 100cqw, 4px) min(8 / 960 * 100cqw, 8px) rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; } .pp1 .section-link-box::after { content: ""; width: 100%; height: 100%; opacity: 0; position: absolute; background-color: transparent; background-color: #0060e0; transition: opacity 0.3s ease-in-out; } } @media (min-width: 744px) and (any-hover: hover) { .pp1 .section-link-box:hover { box-shadow: 0 0 calc(4 / 390 * 100cqw) rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; } .pp1 .section-link-box:hover::after { opacity: 0.2; transition: opacity 0.3s ease-in-out; } } @media (min-width: 744px) { .pp1 .section-link-box .section-link-box__text-box { padding-inline: min(40 / 960 * 100cqw, 40px); } .pp1 .section-link-box .section-link-box__text-box .section-link-box__text { font-size: clamp(10px, 2.4193548387cqw, 24px); } .pp1 .section-link-box .section-link-box__text-box .section-link-box__text::after { width: min(20 / 960 * 100cqw, 20px); } .pp1 .mv { height: auto; aspect-ratio: 8/3; padding: 0; background-image: url(../img/mv-pc.webp); } .pp1 .mv .mv-box { width: calc(960 / 1440 * var(--100vw)); margin-inline: auto; padding-block-start: calc(140 / 1440 * var(--100vw)); } .pp1 .mv .mv__heading { font-size: calc(20 / 1440 * var(--100vw)); } .pp1 .mv .mv__text { width: calc(304 / 1440 * var(--100vw)); max-width: none; margin-block-start: calc(20 / 1440 * var(--100vw)); } .pp1 .mv .mv__lede { margin-block-start: calc(20 / 1440 * var(--100vw)); font-size: calc(20 / 1440 * var(--100vw)); } .pp1 .nav { width: min(100%, 1232px); position: absolute; top: max(-40px, -3.2467532468cqw); left: 50%; transform: translateX(-50%); padding-inline: 16px; } .pp1 .nav .nav__list { grid-template-columns: repeat(5, 1fr); grid-template-areas: "feature howto example scene product product"; column-gap: min(0.4058441558cqw, 5px); } .pp1 .nav .nav__item { box-shadow: 0 min(0.4058441558cqw, 5px) min(0.8116883117cqw, 10px) rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; } .pp1 .nav .nav__item .nav__item-link { height: min(9.7402597403cqw, 120px); place-content: center; padding-block-start: 0; padding-block-end: min(1.6233766234cqw, 20px); font-size: clamp(10px, 1.6233766234cqw, 20px); line-height: 1.5; letter-spacing: 0.1em; } .pp1 .nav .nav__item:has([href="#feature"]) { border-top-left-radius: min(0.8116883117cqw, 10px); border-bottom-left-radius: min(0.8116883117cqw, 10px); } .pp1 .nav .nav__item:has([href="#howto"]) { border-top-right-radius: 0; } .pp1 .nav .nav__item:has([href="#product"]) { border-top-right-radius: min(0.8116883117cqw, 10px); border-bottom-right-radius: min(0.8116883117cqw, 10px); border-bottom-left-radius: 0; } .pp1 .nav .nav__item::after { width: min(1.2987012987cqw, 16px); clip-path: polygon(100% 60%, 100% 75%, 25% 75%, 25% 0, 40% 0, 40% 60%); bottom: min(0.6493506494cqw, 8px); transition: bottom 0.3s; } } @media (min-width: 744px) and (any-hover: hover) { .pp1 .nav .nav__item:hover { box-shadow: 0 0 min(0.4058441558cqw, 5px) rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s ease-in-out; } .pp1 .nav .nav__item:hover .nav__item-link { background-color: #f0f0f0; } .pp1 .nav .nav__item:hover::after { bottom: min(0.3246753247cqw, 4px); transition: bottom 0.3s; } } @media (min-width: 744px) { .pp1 .intro { position: relative; padding-block-start: min(20 / 960 * 100cqw, 20px); } .pp1 .intro .section-body { position: relative; padding-block-start: min(12.987012987cqw, 160px); } .pp1 .intro .section-body::before, .pp1 .intro .section-body::after { height: min(800 / 960 * 100cqw, 800px); } .pp1 .intro .section-body::before { background-image: url(../img/intro-bg-left.webp); } .pp1 .intro .section-body::after { background-image: url(../img/intro-bg-right.webp); } .pp1 .intro .intro__video { margin-block-start: min(40 / 960 * 100cqw, 40px); } .pp1 .feature .section-body { position: relative; } .pp1 .feature .section-body::before, .pp1 .feature .section-body::after { height: min(1280 / 960 * 100cqw, 1280px); } .pp1 .feature .section-body::before { background-image: url(../img/feature-bg-left.webp); } .pp1 .feature .section-body::after { background-image: url(../img/feature-bg-right.webp); } .pp1 .feature .feature__list { row-gap: min(80 / 960 * 100cqw, 80px); } .pp1 .feature .feature__item { grid-template-rows: auto 1fr; grid-template-areas: "title image" "text image"; column-gap: min(40 / 960 * 100cqw, 40px); row-gap: min(20 / 960 * 100cqw, 20px); } .pp1 .feature .feature__item:nth-of-type(even) { grid-template-areas: "image title" "image text"; } .pp1 .feature .feature__item .feature__item-img { border-width: 1px; border-radius: min(10 / 960 * 100cqw, 10px); box-shadow: 0 min(5 / 960 * 100cqw, 5px) min(10 / 960 * 100cqw, 10px) rgba(0, 0, 0, 0.2); } .pp1 .feature .feature__item .feature__item-title { font-size: clamp(10px, 2.4193548387cqw, 24px); } .pp1 .howto .section-body { position: relative; } .pp1 .howto .section-body::before, .pp1 .howto .section-body::after { height: min(2040 / 960 * 100cqw, 2040px); } .pp1 .howto .section-body::before { background-image: url(../img/howto-bg-left.webp); } .pp1 .howto .section-body::after { background-image: url(../img/howto-bg-right.webp); } .pp1 .howto .howto__list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: min(60 / 960 * 100cqw, 60px); row-gap: min(40 / 960 * 100cqw, 40px); } .pp1 .howto .howto__item { grid-template-rows: subgrid; grid-row: span 3; row-gap: min(20 / 960 * 100cqw, 20px); } .pp1 .howto .howto__item:nth-of-type(1) .howto__item-img::before { left: min(10 / 960 * 100cqw, 10px); } .pp1 .howto .howto__item .howto__item-img { width: auto; } .pp1 .howto .howto__item .howto__item-img::before { content: counter(number); top: max(-20px, -20 / 960 * 100cqw); left: max(-20px, -20 / 960 * 100cqw); font-size: clamp(10px, 8.064516129cqw, 80px); } .pp1 .howto .howto__item .howto__item-img img { border-radius: min(10 / 960 * 100cqw, 10px); } .pp1 .howto .howto__item .howto__item-title { font-size: clamp(10px, 2.4193548387cqw, 24px); letter-spacing: 0.05em; text-align: left; } .pp1 .howto .howto-app { margin-block-start: min(80 / 960 * 100cqw, 80px); padding-inline: min(80 / 960 * 100cqw, 80px); padding-block-start: min(56 / 960 * 100cqw, 56px); padding-block-end: min(80 / 960 * 100cqw, 80px); border-radius: min(10 / 960 * 100cqw, 10px); box-shadow: 0 0 min(8 / 960 * 100cqw, 8px) rgba(0, 0, 0, 0.2); } .pp1 .howto .howto-app .howto-app__block { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: "image heading" "image text"; column-gap: min(40 / 960 * 100cqw, 40px); row-gap: min(40 / 960 * 100cqw, 40px); align-items: start; } .pp1 .howto .howto-app .howto-app__block .image { width: min(280 / 960 * 100cqw, 280px); } .pp1 .howto .howto-app .howto-app__block .howto-app__img { width: min(240 / 960 * 100cqw, 240px); } .pp1 .howto .howto-app .howto-app__block .howto-app__heading { margin-block-start: 0; font-size: clamp(10px, 3.2258064516cqw, 32px); line-height: 1; letter-spacing: 0; } .pp1 .howto .howto-app .howto-app__block .howto-app__heading .howto-app__heading-deco { display: block; margin-block-start: min(20 / 960 * 100cqw, 20px); font-size: clamp(10px, 2.4193548387cqw, 24px); letter-spacing: 0.1em; } .pp1 .howto .howto-app .howto-app__block .howto-app__text { margin-block-start: 0; } .pp1 .howto .howto-app .howto-app__title { margin-block-start: min(56 / 960 * 100cqw, 56px); padding-block: min(10 / 960 * 100cqw, 10px); border-radius: min(30 / 960 * 100cqw, 30px); font-size: clamp(10px, 2.0161290323cqw, 20px); } .pp1 .howto .howto-app .howto-app__title .howto-app__title-deco { font-size: clamp(10px, 1.2096774194cqw, 12px); } .pp1 .howto .howto-app .howto-app__list { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); column-gap: 40px; margin-block-start: min(20 / 960 * 100cqw, 20px); } .pp1 .howto .howto-app .howto-app__item:nth-of-type(n+4) { display: none; } .pp1 .howto .howto-app .howto-app__item .howto-app__item-title { font-size: clamp(10px, 2.0161290323cqw, 20px); } .pp1 .howto .howto-app .howto-app__item .howto-app__item-text { margin-block-start: min(10 / 960 * 100cqw, 10px); } .pp1 .howto .howto-app .section-link-box { margin-block-start: min(40 / 960 * 100cqw, 40px); } .pp1 .usecase .usecase__list { grid-template-columns: repeat(2, 1fr); column-gap: min(40 / 960 * 100cqw, 40px); row-gap: min(40 / 960 * 100cqw, 40px); } .pp1 .usecase .usecase__item .usecase__item-img { border-radius: min(10 / 960 * 100cqw, 10px); } .pp1 .usecase .usecase__item .usecase__item-title { margin-block-start: min(24 / 960 * 100cqw, 24px); padding-block: min(15 / 960 * 100cqw, 15px); border-radius: min(30 / 960 * 100cqw, 30px); font-size: clamp(10px, 2.0161290323cqw, 20px); } .pp1 .usecase .usecase__item .usecase__item-title::after { width: min(50 / 960 * 100cqw, 50px); height: min(25 / 960 * 100cqw, 25px); bottom: max(-15px, -15 / 960 * 100cqw); } .pp1 .usecase .usecase__item .usecase__item-text { margin-block-start: min(25 / 960 * 100cqw, 25px); } .pp1 .example .section-body { position: relative; } .pp1 .example .section-body::before, .pp1 .example .section-body::after { height: min(1296 / 960 * 100cqw, 1296px); } .pp1 .example .section-body::before { background-image: url(../img/example-bg-left.webp); } .pp1 .example .section-body::after { background-image: url(../img/example-bg-right.webp); } .pp1 .scene .section-body { position: relative; } .pp1 .scene .section-body::before, .pp1 .scene .section-body::after { height: min(1280 / 960 * 100cqw, 1280px); } .pp1 .scene .section-body::before { background-image: url(../img/scene-bg-left.webp); } .pp1 .scene .section-body::after { background-image: url(../img/scene-bg-right.webp); } .pp1 .scene .usecase .usecase__item .usecase__item-text { margin-block-start: min(25 / 960 * 100cqw, 25px); } .pp1 .product .section-body { position: relative; padding-block-end: min(20 / 960 * 100cqw, 20px); } .pp1 .product .section-body::before, .pp1 .product .section-body::after { height: min(2280 / 960 * 100cqw, 2280px); } .pp1 .product .section-body::before { background-image: url(../img/product-bg-left.webp); } .pp1 .product .section-body::after { background-image: url(../img/product-bg-right.webp); } .pp1 .product .product-info { row-gap: min(40 / 960 * 100cqw, 40px); padding: min(80 / 960 * 100cqw, 80px); border-radius: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-info .product-info__block { grid-template-columns: auto min(400 / 960 * 100cqw, 400px); grid-template-areas: "title image" "list image"; column-gap: min(45 / 960 * 100cqw, 45px); row-gap: min(25 / 960 * 100cqw, 25px); align-items: start; } .pp1 .product .product-info .product-info__title { font-size: clamp(10px, 2.0161290323cqw, 20px); text-align: left; } .pp1 .product .product-info .product-info__title .product-info__title-deco { margin-inline-start: min(10 / 960 * 100cqw, 10px); font-size: clamp(10px, 3.2258064516cqw, 32px); } .pp1 .product .product-info .product-info__list { gap: min(5 / 960 * 100cqw, 5px); } .pp1 .product .product-info .product-info__item { height: min(60 / 960 * 100cqw, 60px); border-width: 1px; font-size: clamp(10px, 1.6129032258cqw, 16px); line-height: 1.5; } .pp1 .product .product-flowchart { margin-block-start: min(80 / 960 * 100cqw, 80px); } .pp1 .product .product-flowchart .product-flowchart__block { grid-template-columns: repeat(3, 1fr); grid-template-areas: "q1 q1 q1" "q2 q2 ." "a1 a2 a3"; column-gap: min(18 / 960 * 100cqw, 18px); row-gap: min(8 / 960 * 100cqw, 8px); margin-block-start: min(40 / 960 * 100cqw, 40px); } .pp1 .product .product-flowchart .product-flowchart__question { margin-block-end: min(32 / 960 * 100cqw, 32px); padding-block: min(12 / 960 * 100cqw, 12px); border-width: 2px; border-radius: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-flowchart .product-flowchart__question::before { width: min(40 / 960 * 100cqw, 40px); height: min(32 / 960 * 100cqw, 32px); bottom: max(-32px, -32 / 960 * 100cqw); left: min(120 / 960 * 100cqw, 120px); border-left-width: 2px; font-size: clamp(10px, 1.2096774194cqw, 12px); } .pp1 .product .product-flowchart .product-flowchart__question::after { width: min(16 / 960 * 100cqw, 16px); bottom: max(-38px, -38 / 960 * 100cqw); left: min(121 / 960 * 100cqw, 121px); } .pp1 .product .product-flowchart .product-flowchart__answer-box { padding-block: min(12 / 960 * 100cqw, 12px); border-width: 2px; border-radius: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-flowchart .product-flowchart__answer-box::before { width: min(34 / 960 * 100cqw, 34px); right: 50%; transform: translate(50%, -100%); border-left-width: 2px; font-size: clamp(10px, 1.2096774194cqw, 12px); } .pp1 .product .product-flowchart .product-flowchart__answer-box::after { width: min(16 / 960 * 100cqw, 16px); top: max(-4px, -4 / 960 * 100cqw); right: 50%; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(1) { display: grid; place-content: center; } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(2)::before { height: min(30 / 960 * 100cqw, 30px); top: max(-10px, -10 / 960 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__answer-box:nth-of-type(3)::before { height: min(130 / 960 * 100cqw, 130px); top: max(-10px, -10 / 960 * 100cqw); } .pp1 .product .product-flowchart .product-flowchart__answer-box .product-flowchart__answer .flowchart__answer-deco { font-size: clamp(10px, 2.0161290323cqw, 20px); } .pp1 .product .product-flowchart .product-flowchart__answer-box .section-link { width: min(160 / 960 * 100cqw, 160px); height: min(32 / 960 * 100cqw, 32px); margin-block-start: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-flowchart .product-flowchart__answer-box .section-link .section-link__text { padding-inline-end: min(15 / 960 * 100cqw, 15px); font-size: clamp(10px, 1.4112903226cqw, 14px); letter-spacing: 0em; } .pp1 .product .product-flowchart .product-flowchart__answer-box .section-link .section-link__text::after { width: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-faq { margin-block-start: min(80 / 960 * 100cqw, 80px); } .pp1 .product .product-faq .accordion-group { row-gap: min(20 / 960 * 100cqw, 20px); margin-block-start: min(40 / 960 * 100cqw, 40px); } .pp1 .product .product-faq .accordion .accordion__summary { min-height: min(60 / 960 * 100cqw, 60px); column-gap: min(20 / 960 * 100cqw, 20px); padding-inline-start: min(20 / 960 * 100cqw, 20px); border-radius: min(10 / 960 * 100cqw, 10px); font-size: clamp(10px, 2.0161290323cqw, 20px); letter-spacing: 0.1em; } .pp1 .product .product-faq .accordion .accordion__summary::before { font-size: clamp(10px, 3.6290322581cqw, 36px); } .pp1 .product .product-faq .accordion .accordion__header { padding-inline-end: min(20 / 960 * 100cqw, 20px); } .pp1 .product .product-faq .accordion .accordion__icon { width: min(23 / 960 * 100cqw, 23px); height: min(10 / 960 * 100cqw, 10px); } .pp1 .product .product-faq .accordion .accordion__icon::before, .pp1 .product .product-faq .accordion .accordion__icon::after { width: min(12 / 960 * 100cqw, 12px); height: min(3 / 960 * 100cqw, 3px); } .pp1 .product .product-faq .accordion .accordion__body { min-height: min(60 / 960 * 100cqw, 60px); column-gap: min(28 / 960 * 100cqw, 28px); margin-block-start: min(15 / 960 * 100cqw, 15px); padding-inline-start: min(20 / 960 * 100cqw, 20px); } .pp1 .product .product-faq .accordion .accordion__body::before { margin-block-start: 0; font-size: clamp(10px, 3.6290322581cqw, 36px); } .pp1 .product .product-faq .accordion.is-opened .accordion__icon { transform: translateY(max(-10px, -10 / 960 * 100cqw)); } .pp1 .product .product-faq > .section-link { width: min(370 / 960 * 100cqw, 370px); margin-block-start: min(40 / 960 * 100cqw, 40px); } } @media (min-width: 744px) and (any-hover: hover) { .pp1 .product .product-faq > .section-link:hover { background-color: #0040c0; } } @media (min-width: 744px) { .pp1 .product .product-copy { grid-template-columns: repeat(3, auto); column-gap: 0.5em; margin-block-start: min(40 / 960 * 100cqw, 40px); font-size: min(12 / 960 * 100cqw, 12px); } }/*# sourceMappingURL=style.css.map */