@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@700&display=swap"); /*** The new CSS reset - version 1.11.2 (last updated 15.11.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 { -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; } /* 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; -moz-user-select: auto; -ms-user-select: auto; 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; line-break: after-white-space; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; 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; } /*オートコンプリートの背景色無効化*/ @-webkit-keyframes onAutoFillStart {} @keyframes onAutoFillStart {} input:-webkit-autofill { -webkit-animation-name: onAutoFillStart; animation-name: onAutoFillStart; -webkit-transition: background-color 50000s ease-in-out 0s; transition: background-color 50000s ease-in-out 0s; } html { overflow: auto; scroll-behavior: smooth; font-size: 10px; } body { line-height: 1.5; font-size: 1.6rem; font-family: "Noto Sans JP", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; color: #000; } @media screen and (max-width: 768px) { body { font-size: 1.4rem; } } img { vertical-align: middle; } a, button { cursor: pointer; } table { border-collapse: collapse; } *::before, *::after { line-height: 0; } p:not(:first-child) { margin-top: 1em; } /* * rclamp(最小値px[px], 最大値px[px], 最小viewport[px],最大viewport[px]) * htmlは、font-size: 10px; にしています。 */ /* * image-url('画像パス') */ /* * Z-index */ /* * Transition */ /* * Animation */ sup { padding-left: 0.25em; vertical-align: top; font-size: 1.2rem; } .sup { display: block; margin-top: 1em; font-size: 1.2rem; } .supOl { margin-top: 1em; counter-reset: number; font-size: 1.2rem; } .supOl__item { padding-left: 1.5em; position: relative; } .supOl__item::before { counter-increment: number; content: "*" counter(number) " "; position: absolute; top: 0.75em; left: 0; } .supUl { font-size: 1.2rem; } .supUl__item { padding-left: 1.25em; position: relative; } .supUl__item::before { content: "※"; position: absolute; top: 0.75em; left: 0; } a:not([class^=btn]):hover { text-decoration: underline; } a[target=_blank]:not([class^=btn]) { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } a[target=_blank]:not([class^=btn])::after { content: url(assets/image/icon/open-new.svg); width: 0.6em; height: 0.6em; margin-left: 0.5em; } .moreInline { padding: 0.4rem calc(1.6rem + 1em) 0.4rem 1.6rem; display: inline-block; position: relative; background: #DBEAFE; border-radius: 10rem; font-size: 1.4rem; font-weight: 600; color: #3B82F6; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } @media screen and (max-width: 640px) { .moreInline { display: block; margin-top: 1em; } } .moreInline::before, .moreInline::after { content: ""; width: 1em; height: 3px; display: inline-block; position: absolute; top: 50%; right: 0.7em; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); background-color: #3B82F6; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .moreInline::after { -webkit-transform: rotate(90deg) translate(-10%, -10%); transform: rotate(90deg) translate(-10%, -10%); } .moreInline:hover { background-color: #c4dafc; } .moreInline.is-active::after { -webkit-transform: rotate(0deg) translate(0, -50%); transform: rotate(0deg) translate(0, -50%); } .moreBody { display: none; margin-top: 1.6rem; font-size: 1.4rem; } .moreBody.is-active { display: block; } .mv { margin-top: 8rem; background-color: #1D4ED8; color: #FFF; } @media screen and (max-width: 768px) { .mv { margin-top: 5.6rem; } } .mv__inner { padding: 4rem 0; } .mv__top { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; gap: 2.4rem; } @media screen and (max-width: 640px) { .mv__top { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .mv__topBody { max-width: 480px; } @media screen and (max-width: 640px) { .mv__topBody { max-width: unset; } } .mv__topImage { margin-top: 5.6rem; } @media screen and (max-width: 640px) { .mv__topImage { max-width: 32rem; margin: 0 auto; } } .mv__action { margin-top: 1.6rem; } @media screen and (max-width: 640px) { .mv__action { text-align: center; } } .mv__bottom { margin-top: 2.4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 2.4rem; } @media screen and (max-width: 1024px) { .mv__bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .mv__bottom > * { width: 100%; } } .mv__points { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 1.6rem 3.2rem; } @media screen and (max-width: 768px) { .mv__points { width: 32rem; margin: 0 auto; gap: 2.4rem; } } @media screen and (max-width: 640px) { .mv__points { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } .mv__card { margin-top: 5.6rem; } @media screen and (max-width: 1024px) { .mv__card { margin-top: 0; } } @media screen and (max-width: 640px) { .mv__card { max-width: 32rem; margin: 0 auto; } } .mvTitle { font-family: "M PLUS 1 Code", sans-serif; font-size: clamp(3.2rem, 2.1392265193rem + 2.8287292818vw, 4.8rem); font-weight: 700; } @media screen and (max-width: 768px) { .mvTitle { max-width: 40rem; } } .mvText { margin-top: 1.6rem; font-size: 1.6rem; } .mvImage { width: clamp(20rem, 6.7403314917rem + 35.3591160221vw, 40rem); } .mvPoint { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } @media screen and (max-width: 768px) { .mvPoint { gap: 1.6rem; } } .mvPoint__item { word-break: keep-all; } .mvPoint__title { padding-left: 1.25em; position: relative; font-size: clamp(1.8rem, 1.4022099448rem + 1.0607734807vw, 2.4rem); font-weight: 700; } .mvPoint__title::before { content: ""; width: 1em; height: 1em; display: inline-block; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%) rotate(50deg); transform: translate(0, -50%) rotate(50deg); background-image: url(assets/image/icon/arrow-yellow.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .mvPoint__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } @media screen and (max-width: 768px) { .mvPoint__body { gap: 1.6rem; } } .mvPoint__desc { width: 100%; } .mvPoint__label { padding: 0.4rem 1.6rem; display: inline-block; background-color: #FFF; border-radius: 2em; text-align: center; font-size: clamp(1.2rem, 1.0674033149rem + 0.3535911602vw, 1.4rem); font-weight: 600; color: #2563EB; } .mvPoint__text { word-break: keep-all; font-size: clamp(2.4rem, 1.3392265193rem + 2.8287292818vw, 4rem); font-weight: 700; } .mvPoint__numUnit { margin-left: 0.25em; font-size: clamp(1.8rem, 1.4022099448rem + 1.0607734807vw, 2.4rem); } @media screen and (max-width: 768px) { .mvPoint._point01 .mvPoint__body { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } .mvPoint._point02 .mvPoint__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 2.4rem; } .mvCard { padding: 2.4rem 1.6rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; background-color: #FFF; border-radius: 8px; color: #000; } .mvCard__title { text-align: center; font-size: 1.6rem; font-weight: 600; } .mvCard__sup { text-align: center; font-size: 1.2rem; } .introduction__lead { text-align: center; word-break: keep-all; overflow-wrap: anywhere; font-size: 2rem; font-weight: 600; color: #2563EB; } @media screen and (max-width: 768px) { .introduction__lead { font-size: 1.6rem; } } .introduction__list { max-width: 74.6rem; margin: 4rem auto 0; } .introduction__cta { margin-top: 6.4rem; } .list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 1em; } .list__item { padding-left: 1.5em; position: relative; } .list__item::before { content: ""; width: 1em; height: 1em; position: absolute; top: 0.25em; left: 0; background-color: #3B82F6; border-radius: 50%; } .cardList01 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 3.2rem; } @media screen and (max-width: 768px) { .cardList01 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0.8rem; } } .cardList01__item { width: 33.33333%; padding: 1.6rem 2.4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; background-color: #DBEAFE; border-radius: 8px; font-weight: 500; color: #3B82F6; } @media screen and (max-width: 768px) { .cardList01__item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; } } .cardList01__label { width: 116px; padding: 0.4rem 3.2rem; background-color: #FFF; border-radius: 2em; text-align: center; font-size: 1.8rem; font-weight: 600; } @media screen and (max-width: 768px) { .cardList01__label { width: 8rem; padding-left: 1em; padding-right: 1em; font-size: 1.6rem; } } .cardList02 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 3.2rem; } .cardList02__item { margin-top: 5rem; padding: 4rem 2.4rem 2.4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 1.6rem; position: relative; background-color: #DBEAFE; border-radius: 8px; color: #3B82F6; } @media screen and (max-width: 768px) { .cardList02__item { width: 100%; padding-right: 5.6rem; padding-left: 5.6rem; gap: 0.8rem; } } .cardList02__label { max-width: 5.6rem; position: absolute; top: -5rem; } .cardList02__body { font-weight: 500; } .datalist__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-radius: 6px; -webkit-box-shadow: 0px 3px 6px rgba(59, 130, 246, 0.1607843137); box-shadow: 0px 3px 6px rgba(59, 130, 246, 0.1607843137); } .datalist__row:not(:first-child) { margin-top: 0.8rem; } @media screen and (max-width: 768px) { .datalist__row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .datalist__title { width: 12.8rem; padding: 2rem 1.6rem; background-color: #1D4ED8; text-align: center; font-size: 1.6rem; font-weight: 500; color: #FFF; border-radius: 6px 0 0 6px; } @media screen and (max-width: 768px) { .datalist__title { width: 100%; padding-top: 1rem; padding-bottom: 1rem; border-radius: 6px 6px 0 0; } } .datalist__body { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 2rem 4rem; background-color: #FFF; border-radius: 0 6px 6px 0; font-size: 1.6rem; } @media screen and (max-width: 768px) { .datalist__body { font-size: 1.4rem; } } .datalist__sup { margin-top: 1.6rem; } .dataType { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: clamp(0.8rem, 0.2696132597rem + 1.4143646409vw, 1.6rem); } .dataType__item { width: clamp(6.4rem, 5.8696132597rem + 1.4143646409vw, 7.2rem); height: clamp(6.4rem, 5.8696132597rem + 1.4143646409vw, 7.2rem); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #FEFBCE; border-radius: 50%; border: 1px dashed #000; font-weight: 500; } .pureOl > li { margin-top: 1em; } .btnCta, .btnCta--outline, .btnCta--nav { padding: 1.7rem 6rem; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; position: relative; background-color: #FDF66A; letter-spacing: 0.05em; font-size: 1.6rem; font-weight: 600; color: #000; border-radius: 10rem; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } @media screen and (max-width: 768px) { .btnCta, .btnCta--outline, .btnCta--nav { padding-left: 2.2rem; padding-right: 2.2rem; } } .btnCta::before, .btnCta--outline::before, .btnCta--nav::before { content: ""; width: 100%; height: 100%; display: block; position: absolute; bottom: -0.6rem; left: 0; z-index: -1; background-color: #F5EA39; border-radius: 10rem; } .btnCta::after, .btnCta--outline::after, .btnCta--nav::after { content: url(assets/image/icon/arrow-black.svg); width: 1em; height: 1em; margin-left: 1em; position: relative; } .btnCta:hover, .btnCta--outline:hover, .btnCta--nav:hover { background-color: #FFFA81; } .btnCta:hover::after, .btnCta--outline:hover::after, .btnCta--nav:hover::after { -webkit-animation: rotate 0.5s ease-out forwards; animation: rotate 0.5s ease-out forwards; } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(330deg); transform: rotate(330deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(330deg); transform: rotate(330deg); } } .btnCta__free { padding: 0.1rem 0.9rem; display: inline-block; background: #fff; border: 2px solid currentColor; border-radius: 10rem; font-size: 1.4rem; color: #FFA500; } .btnCta--nav { padding: 1rem 2rem; font-size: 1.4rem; } .btnCta--nav::before { content: none; } @media screen and (max-width: 1024px) { .btnCta--nav { width: 100%; height: 64px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 768px) { .btnCta--nav { font-size: 1.6rem; } } .btnCta--outline { background-color: #FFC864; } .btnCta--outline::before { background-color: #FFA500; } .btnCta--outline:hover { background-color: #FFDA98; } .ctaWrap { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 4rem; text-align: center; } @media screen and (max-width: 768px) { .ctaWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .cta { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; } .cta__footer { margin-top: 1.6rem; font-size: 1.3rem; } .ctaLead { margin-bottom: 0.8rem; position: relative; display: inline-block; letter-spacing: 0.05em; font-weight: 500; font-size: 1.3rem; } .ctaLead > span { padding: 0 0.05em; color: #FFA500; font-size: 1.8rem; } .ctaLead::before, .ctaLead::after { content: ""; width: 2px; height: 1em; display: inline-block; position: absolute; top: 40%; background-color: #000; } .ctaLead::before { left: -1em; -webkit-transform: rotate(-40deg); transform: rotate(-40deg); } .ctaLead::after { right: -1em; -webkit-transform: rotate(40deg); transform: rotate(40deg); } .ctaTop__title { max-width: 47.8rem; margin: 0 auto; text-align: center; } .ctaTop__body { margin-top: 2.4rem; } @media screen and (max-width: 768px) { .ctaTop__body { margin-top: 1.6rem; } } .ctaTop__action { margin-top: 4rem; } /* * 共通 */ .container { max-width: 1024px; margin: 0 auto; padding: 0 1.6rem; margin-top: 8rem; } @media screen and (max-width: 768px) { .container { padding: 0 3.2rem; } } .container._mvSection { margin-top: 0; padding: 0 1.6rem; } @media screen and (max-width: 768px) { .container._introductionSection { margin-top: 4rem; } } .container._ctaSection { margin-top: 8rem; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .container._ctaSection { margin-top: 4rem; } } .cmSection { margin-top: 14rem; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .cmSection { margin-top: 8rem; } } .cmSection__title { margin-bottom: 2.4rem; position: relative; text-align: center; font-weight: 600; font-size: clamp(2.4rem, 1.8696132597rem + 1.4143646409vw, 3.2rem); } .cmSection__title::after { content: url(assets/image/parts/heading-bar.svg); display: block; position: absolute; left: 50%; bottom: -1.6rem; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .cmSection__container { margin-top: 8rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 16rem; } @media screen and (max-width: 768px) { .cmSection__container { row-gap: 10rem; } } .cmSection._details { margin-top: 20rem; } @media screen and (max-width: 768px) { .cmSection._details { margin-top: 8rem; } } .cmSection._details .cmSection__container { margin-top: 4rem; row-gap: 8rem; } @media screen and (max-width: 768px) { .cmSection._details .cmSection__container { row-gap: 4rem; } } .cmContent { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; gap: 4rem; } @media screen and (max-width: 768px) { .cmContent { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 1.6rem; } } @media screen and (max-width: 768px) { .cmContent:not(:nth-child(2n)) .cmContent__sup::before { top: -32px; left: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } .cmContent:not(:nth-child(2n)) .cmContent__figure { margin-right: 3.2rem; } @media screen and (max-width: 768px) { .cmContent:not(:nth-child(2n)) .cmContent__figure { margin: 0 auto; } } .cmContent:nth-child(2n) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media screen and (max-width: 768px) { .cmContent:nth-child(2n) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 768px) { .cmContent:nth-child(2n) .cmContent__sup::before { top: -32px; left: 20px; -webkit-transform: rotate(-32deg) translate(-22px, -10px); transform: rotate(-32deg) translate(-22px, -10px); } } .cmContent:nth-child(2n) .cmContent__figure { margin-left: 3.2rem; } @media screen and (max-width: 768px) { .cmContent:nth-child(2n) .cmContent__figure { margin: 0 auto; } } .cmContent__body { width: 442px; } @media screen and (max-width: 768px) { .cmContent__body { width: 100%; } } .cmContent__sup { padding-left: 3.2rem; position: relative; z-index: 1; font-size: clamp(1.4rem, 1.2674033149rem + 0.3535911602vw, 1.6rem); font-weight: 500; } .cmContent__supText { position: relative; z-index: 10; } .cmContent__title { margin-top: 2.4rem; font-size: clamp(2.8rem, 2.5348066298rem + 0.7071823204vw, 3.2rem); font-weight: 500; } .cmContent__text { margin-top: 2.4rem; } .cmContent__text > p:not(:first-child) { margin-top: 1.6rem; } .cmContent__figure { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 40rem; } @media screen and (max-width: 768px) { .cmContent__figure { max-width: 80vw; } } .cmContent02 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; row-gap: 3.2rem; } @media screen and (max-width: 768px) { .cmContent02 { row-gap: 2.4rem; } } .cmContent02__title { padding-left: 1.25em; position: relative; font-size: 2.4rem; font-weight: 600; } .cmContent02__title::before { content: ""; width: 1em; height: 1em; display: inline-block; position: absolute; top: 50%; left: 0; -webkit-transform: translate(0, -50%) rotate(50deg); transform: translate(0, -50%) rotate(50deg); background-image: url(assets/image/icon/arrow-yellow.svg); background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 768px) { .cmContent02__title { font-size: 1.8rem; } } .cmContent02__row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 5.4rem; } @media screen and (max-width: 768px) { .cmContent02__row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 2.4rem; } } /* * 個別 */ .js_slideInElement { opacity: 0; } .js_slideInElement.slideIn { -webkit-animation: slideIn 1s ease-out forwards; animation: slideIn 1s ease-out forwards; } @-webkit-keyframes slideIn { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slideIn { 0% { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } /* * カーソル追従 */ .js_followsCursorElement::before { content: ""; width: 50px; height: 80px; display: block; position: absolute; z-index: 5; top: 8px; left: 20px; -webkit-transform: translate(-50%, -50%) rotate(var(--rotation-angle, 0deg)); transform: translate(-50%, -50%) rotate(var(--rotation-angle, 0deg)); -webkit-transform-origin: center; transform-origin: center; background-image: url(assets/image/icon/arrow-yellow.svg); background-size: contain; background-repeat: no-repeat; } .header { width: 100%; padding: 1.6rem 2.4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 3.2rem; position: fixed; top: 0; left: 0; z-index: 100000; z-index: 3; background-color: #FFF; } @media screen and (max-width: 1024px) { .header { height: 5.6rem; padding: 1.6rem; } } @media screen and (max-width: 768px) { .header { padding: 0.8rem 1.6rem; } } .logo { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; max-width: 32rem; margin-right: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1rem; -moz-column-gap: 1rem; column-gap: 1rem; z-index: 4; } .logo__img { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 1024px) { .logo__img { margin-right: unset; max-width: 21rem; } } .logo__text { height: 1.8rem; margin-top: 0.5em; padding: 0 0.5em; background-color: #DBEAFE; border-radius: 4px; line-height: 1.8rem; font-size: 1.1rem; font-weight: 600; color: #3B82F6; } .nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 3.2rem; -moz-column-gap: 3.2rem; column-gap: 3.2rem; } @media screen and (max-width: 1024px) { .nav { width: 100%; -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; position: fixed; left: 0; bottom: 0; background-color: #FFF; } } .menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 2rem; } @media screen and (max-width: 1024px) { .menu { gap: 0; } } .menu__item > a { display: block; font-size: 1.4rem; font-weight: 600; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .menu__item > a:hover { color: #2563EB; text-decoration: none !important; } @media screen and (max-width: 1024px) { .menu__item > a { padding: 2rem; font-size: 1.8rem; } } @media screen and (max-width: 1024px) { .menu { display: none; width: 100%; height: 100dvh; z-index: 5; position: absolute; bottom: 0; left: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background-color: #FFF; } .menu.is-active { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .menuTgl { display: none; width: 64px; height: 64px; position: relative; z-index: 6; background-color: #FFF; font-size: 0; } .menuTgl > span { width: 26px; height: 3px; display: block; position: absolute; left: 50%; background-color: #000; } .menuTgl > span:first-child { top: 35%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .menuTgl > span:nth-child(2) { top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .menuTgl > span:last-child { top: 65%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 1024px) { .menuTgl { display: block; position: relative; } .menuTgl.is-active > span:first-child { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .menuTgl.is-active > span:nth-child(2) { display: none; } .menuTgl.is-active > span:last-child { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } } @media screen and (max-width: 1024px) { .navCta { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; z-index: 6; background-color: #FDF66A; } } .footer { margin: 10rem 0 0; padding: 4rem 0 2.4rem; background-color: #1E293B; color: #FFF; } @media screen and (max-width: 1024px) { .footer { margin: 4rem 0 6.4rem; } } .footer__inner { max-width: 1024px; margin: 0 auto; padding: 0 1.6rem; } .footer__logo { max-width: 24rem; } .footer__companies { margin-top: 3.2rem; padding-left: 4.4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: 2.4rem; -moz-column-gap: 2.4rem; column-gap: 2.4rem; } @media screen and (max-width: 768px) { .footer__companies { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 6.4rem; } } .footer__copy { margin-top: 6.4rem; text-align: center; font-size: 1.2rem; } .company { width: 100%; } .company__name { font-size: 1.8rem; } .company__address { margin-top: 1em; } @media screen and (max-width: 768px) { .company__address { font-size: 1.4rem; } } .company__url { margin-top: 1em; text-decoration: underline; } @media screen and (max-width: 768px) { .company__url { font-size: 1.4rem; } } .swiper-wrapper { gap: 0; } .swiper { width: 100%; margin-top: -2rem; } .swiper .swiper-slide { height: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .swiper .swiper-slide-item { height: 100%; } .swiper .swiper-button-next, .swiper .swiper-button-prev { width: 1.6rem; height: 2.4rem; margin-top: unset; -webkit-transform: translate(0, 70%); transform: translate(0, 70%); } .swiper .swiper-button-next::after, .swiper .swiper-button-prev::after { background-repeat: no-repeat; background-size: contain; content: ""; height: 50px; margin: auto; width: 50px; } .swiper .swiper-button-prev::after { content: ""; background-image: url(assets/image/icon/chevron-left.svg); } .swiper .swiper-button-next::after { content: ""; background-image: url(assets/image/icon/chevron-right.svg); } .swiper:not(.swiper-initialized) .swiper-button-prev, .swiper:not(.swiper-initialized) .swiper-button-next { display: none; } .swiper:not(.swiper-initialized) .swiper-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 3.2rem; } .swiper:not(.swiper-initialized) .swiper-slide { -webkit-flex-shrink: unset; -ms-flex-negative: unset; flex-shrink: unset; width: calc(33.33333% - 1.6rem); } .bg01 { position: relative; } .bg01__img { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; background-image: url(assets/image/parts/bg01.svg); background-size: cover; background-repeat: no-repeat; }/*# sourceMappingURL=style.css.map */