@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) 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 */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* 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-width: 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; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } * { --inner-padding: 6.4vw; --header-height: 50px; --hover-opacity: 0.75; --color-background: --color-mirai-text: #1c2e2f; --color-mirai-main: #169198; --color-mirai-accent: #df5e47; --color-wsdb-text: #333; --color-wsdb-main: #016fbb; --color-wsdb-bg: #ebebeb; margin: 0; padding: 0; } *::before, *::after { pointer-events: none; } html { overflow: auto; font-size: 62.5%; } body { position: relative; overflow: hidden; min-width: 320px; line-height: 1.8; background-color: var(--base-background, #fcfcfc); font-weight: 500; font-family: "Zen Kaku Gothic New", sans-serif; color: #000; -webkit-text-size-adjust: 100%; letter-spacing: 0.05em; color: var(--base-text-color, #000); } body { font-size: clamp(1.4rem, 1.0666666667rem + 0.6944444444vw, 1.6rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0666666667rem + 0.6944444444vw, 16 * 0.1rem)) { body { font-size: 1.4rem; } } body h1:has(wbr), body h2:has(wbr), body h3:has(wbr), body h4:has(wbr), body h5:has(wbr), body h6:has(wbr), body p:has(wbr), body li:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } @media (min-width: 768px) { body { font-size: 1.6rem; } } body#mirai { --base-text-color: var(--color-mirai-text); --base-background: #d4e3e4; } body#wsdb { --base-text-color: var(--color-wsdb-text); } .l-main { background-color: #FAF3E1; padding-bottom: var(--main-padding-bottom, 26.66vw); } @media (min-width: 768px) { .l-main { --main-padding-bottom: 200px; } } a { color: inherit; text-decoration: none; transition: all 0.3s ease-in; } @media (min-width: 768px) { a:not([class]) { text-decoration: underline; } @media not all and (pointer: coarse) { a:not([class]):hover { text-decoration: none; } } } span { font-weight: inherit; } img { display: block; width: 100%; max-width: fit-content; height: auto; } input, textarea, button { border: none; appearance: none; caret-color: #ffbe00; } input:focus-visible, textarea:focus-visible, button:focus-visible { outline-color: #ffbe00; } @media (max-width: 767.98px) { input, textarea, button { font-size: 1.6rem; } } .js-toggle { position: relative; cursor: pointer; background-color: #ffbe00; } .js-toggle::before, .js-toggle::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 1px; background-color: #fff; pointer-events: none; transition: all 0.3s ease-in; } .js-toggle::after { transform: translateY(-50%) rotate(90deg); } .js-toggle.is-open::after { transform: translateY(-50%) rotate(0deg); } @media not all and (pointer: coarse) { .js-toggle:hover { opacity: var(--hover-opacity); } } .js-toggle-content { display: none; } .js-modal { cursor: pointer; } .js-modal-content { display: none; box-sizing: border-box; position: fixed; z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100vh; background-color: #000; } .js-modal-content__inner { position: fixed; inset: 0; width: fit-content; height: fit-content; margin: auto; } .js-modal-close { position: absolute; z-index: 1000; top: 10px; right: 10px; display: inline-block; width: 45px; height: 20px; cursor: pointer; } .js-modal-close::before, .js-modal-close::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; margin-top: -1px; width: 100%; height: 2px; background-color: #fff; transform-origin: center; transition: all 0.3s ease-in; } .js-modal-close::before { transform: rotate(45deg); } .js-modal-close::after { transform: rotate(-45deg); } @media not all and (pointer: coarse) { .js-modal-close:hover::before, .js-modal-close:hover::after { opacity: var(--hover-opacity); } } .js-switch-tab-list { display: flex; } .js-switch-tab { --background: #72baa7; background-color: var(--background); cursor: pointer; } .js-switch-tab.is-active { --background: #f69896; } .js-switch-content { display: none; } .js-switch-content.is-active { display: block; } /* Main ================================================ */ .l-header-button { position: absolute; top: 0; right: 0; width: 50px; height: 50px; } .l-header-nav-list { display: none; } /* WSDB ================================================ */ .l-wsdb-header { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 24px; background-color: #fcfcfc; color: var(--color-wsdb-main); } .l-wsdb-header__logo img { width: 50px; } @media (min-width: 768px) { .l-wsdb-header { height: 88px; padding: 0 80px; } .l-wsdb-header__logo { display: flex; align-items: center; gap: 16px; } .l-wsdb-header__logo img { width: 88px; } .l-wsdb-header__logo-text { font-weight: 900; font-size: 2rem; } } /* miraiシステム ================================================ */ .l-mirai-header { box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; padding: 3.2vw 6.4vw; } .l-mirai-header__logo { color: var(--color-mirai-main); } @media (min-width: 768px) { .l-mirai-header { padding: 40px 64px 24px; } .l-mirai-header__logo svg { width: 120px; height: 33px; } } /* WSDB ================================================ */ .l-wsdb-footer { background-color: var(--color-wsdb-main); color: #fff; } .l-wsdb-footer__inner { padding-top: 10.6vw; } .l-wsdb-footer__inner { padding-bottom: 4.2vw; } .l-wsdb-footer__logo { display: flex; align-items: center; } .l-wsdb-footer__logo { gap: 2.1vw; } .l-wsdb-footer__logo { margin-bottom: 10.6vw; } .l-wsdb-footer__logo img { width: 18.1vw; } .l-wsdb-footer__logo img { height: 13.3vw; } .l-wsdb-footer__logo-text { font-weight: 900; } .l-wsdb-footer__logo-text { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .l-wsdb-footer__logo-text { font-size: 1.6rem; } } .l-wsdb-footer__credit { text-align: center; } .l-wsdb-footer__credit { font-size: clamp(1rem, 0.88rem + 0.25vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.88rem + 0.25vw, 12 * 0.1rem)) { .l-wsdb-footer__credit { font-size: 1rem; } } @media (min-width: 768px) { .l-wsdb-footer__inner { padding-top: 40px; padding-bottom: 24px; } .l-wsdb-footer__logo { gap: 16px; margin-bottom: 48px; } .l-wsdb-footer__logo img { width: 88px; height: 64px; } } /* miraiシステム ================================================ */ .l-mirai-footer { background-color: var(--color-mirai-main); color: #fff; } .l-mirai-footer__inner { padding-top: 10.6vw; } .l-mirai-footer__inner { padding-bottom: 6.4vw; } .l-mirai-footer__logo { margin-bottom: 8.5vw; } .l-mirai-footer__logo svg { width: 32vw; } .l-mirai-footer__logo svg { height: 11.7vw; } .l-mirai-footer__credit { text-align: center; } .l-mirai-footer__credit { font-size: clamp(1rem, 0.88rem + 0.25vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.88rem + 0.25vw, 12 * 0.1rem)) { .l-mirai-footer__credit { font-size: 1rem; } } @media (min-width: 768px) { .l-mirai-footer__inner { padding-top: 48px; padding-bottom: 24px; } .l-mirai-footer__logo { margin-bottom: 32px; } .l-mirai-footer__logo svg { width: 260px; height: 72px; } } /* .l-breadcrumb ================================================ */ .l-breadcrumb { padding: var(--breadcrumb-padding, 12px); } @media (min-width: 768px) { .l-breadcrumb { --breadcrumb-padding: 24px; } } .l-breadcrumb__list { display: flex; white-space: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overflow: auto; } .l-breadcrumb__list::-webkit-scrollbar { display: none; } .l-breadcrumb__item { display: inline-flex; align-items: center; } .l-breadcrumb__item { font-size: clamp(1.2rem, 0.96rem + 0.5vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.96rem + 0.5vw, 16 * 0.1rem)) { .l-breadcrumb__item { font-size: 1.2rem; } } .l-breadcrumb__item + .l-breadcrumb__item { margin-left: var(--breadcrumb-item-margin, 16px); } .l-breadcrumb__item + .l-breadcrumb__item:before { content: "＞"; margin-right: var(--breadcrumb-item-margin, 16px); font-size: 1.2rem; } @media not all and (pointer: coarse) { .l-breadcrumb__link:hover { text-decoration: underline; } } @media (max-width: 767.98px) { .l-breadcrumb__item { font-weight: 700; } } @media (min-width: 768px) { .l-breadcrumb { --breadcrumb-item-margin: 8px; } } /* l-subvisual ================================================ */ .l-subvisual__inner { padding-bottom: 10.6vw; } .l-subvisual__head { line-height: 1.5; font-weight: 700; } .l-subvisual__head { margin-bottom: 6.4vw; } .l-subvisual__head { font-size: clamp(3.6rem, 2.88rem + 1.5vw, 4.8rem); } @supports not (font-size: clamp(36 * 0.1rem, 2.88rem + 1.5vw, 48 * 0.1rem)) { .l-subvisual__head { font-size: 3.6rem; } } .l-subvisual__en { display: block; line-height: 1.8; } .l-subvisual__en { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .l-subvisual__en { font-size: 1.6rem; } } .l-subvisual__line { position: relative; display: block; width: 100vw; height: 27px; background-color: #ffbe00; } .l-subvisual__line::after { content: ""; display: inline-block; position: absolute; top: 9px; left: 0; width: 100%; height: 9px; background-color: #fcfcfc; } @media (min-width: 768px) { .l-subvisual__inner { padding-bottom: 72px; } .l-subvisual__head { margin-bottom: 36px; } } /* WSDB ================================================ */ .l-wsdb-visual { background: url(../img/wsdb/bg_mv01_sp.jpg) no-repeat center/cover; } @media (min-width: 768px) { .l-wsdb-visual { background-image: url(../img/wsdb/bg_mv01_pc.jpg); } } /* miraiシステム ================================================ */ .l-mirai-visual { background: url(../img/mirai/bg_mv01_sp.png) no-repeat bottom center/cover; color: var(--color-mirai-main); } .l-mirai-visual__inner { padding-top: 16.8vw; } .l-mirai-visual__copy { font-weight: 700; line-height: 1.5; text-align: center; } .l-mirai-visual__copy-sub, .l-mirai-visual__copy-main { display: block; } .l-mirai-visual__copy-sub { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .l-mirai-visual__copy-sub { font-size: 1.6rem; } } .l-mirai-visual__copy-main { font-size: clamp(4.4rem, 1.76rem + 5.5vw, 8.8rem); } @supports not (font-size: clamp(44 * 0.1rem, 1.76rem + 5.5vw, 88 * 0.1rem)) { .l-mirai-visual__copy-main { font-size: 4.4rem; } } .l-mirai-visual__lead { font-weight: 700; line-height: 1.5; text-align: center; } .l-mirai-visual__lead { margin-bottom: 3.6vw; } .l-mirai-visual__lead { font-size: clamp(1.2rem, 0.72rem + 1vw, 2rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.72rem + 1vw, 20 * 0.1rem)) { .l-mirai-visual__lead { font-size: 1.2rem; } } .l-mirai-visual__image { pointer-events: none; } .l-mirai-visual__image { margin-left: 13.6vw; } .l-mirai-visual__image img { width: 81.3vw; } .l-mirai-visual__list { display: grid; grid-template-columns: repeat(3, 28.8vw); justify-content: center; margin-bottom: -14.4vw; } .l-mirai-visual__list { grid-gap: 2.1vw; } @media (min-width: 768px) { .l-mirai-visual { background-image: url(../img/mirai/bg_mv01_pc.png); } .l-mirai-visual__copy { margin-bottom: 33px; } .l-mirai-visual__lead { margin-bottom: 24px; } .l-mirai-visual__image { margin-left: 22.2vw; } .l-mirai-visual__image img { width: 64.7vw; } .l-mirai-visual__list { grid-template-columns: repeat(3, 192px); margin-bottom: -106px; } } @media (min-width: 1280px) { .l-mirai-visual { height: 628px; } .l-mirai-visual__inner { display: grid; grid-template-columns: 644px 1fr; grid-auto-rows: 360px 192px; max-width: 1280px; margin-left: auto; margin-right: auto; margin-bottom: -166px; padding-top: 148px; grid-column-gap: clamp(50px, 50px + 92 * (100vw - 768px) / 512, 142px); } .l-mirai-visual__copy { margin-bottom: 53px; } .l-mirai-visual__lead { margin-bottom: 32px; text-align: left; } .l-mirai-visual__image { grid-column: 2; grid-row: 1/3; margin-left: 0; margin-right: -128px; } .l-mirai-visual__image img { width: 622px; min-width: 622px; transform: translateY(-40px); } .l-mirai-visual__list { grid-column: 1; grid-row: 2; grid-gap: 24px; margin-bottom: 0; } } @media (min-width: 768px) and (max-width: 1280px) and (orientation: portrait) { .l-mirai-visual { background-image: url(../img/mirai/bg_mv01_tb.png); } } .c-mirai-button { --mirai-button-width: 262px; --mirai-button-height: 56px; } .c-mirai-button--white { --mirai-button-background: #fff; --mirai-button-border-color: var(--color-mirai-accent); --mirai-button-font-color: var(--color-mirai-accent); --mirai-button-hover-background: #fff; --mirai-button-hover-font-color: var(--color-mirai-main); } .c-mirai-button__link { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: var(--mirai-button-width); height: var(--mirai-button-height); border: 2px solid var(--mirai-button-border-color, var(--color-mirai-accent)); background-color: var(--mirai-button-background, var(--color-mirai-accent)); border-radius: 60px; font-weight: 700; font-size: 2rem; color: var(--mirai-button-font-color, #fff); } @media not all and (pointer: coarse) { .c-mirai-button__link:hover { background-color: var(--mirai-button-hover-background, var(--color-mirai-main)); border-color: var(--mirai-button-hover-border-color, var(--color-mirai-main)); color: var(--mirai-button-hover-font-color, #fff); } } .c-wsdb-button { --wsdb-button-width: 280px; --wsdb-button-height: 59px; --wsdb-button-background: #fcfcfc; --wsdb-button-hover-background: #5fc5ee; } .c-wsdb-button__link { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; width: var(--wsdb-button-width); height: var(--wsdb-button-height); line-height: 1.5; padding: 10px 0; background-color: var(--wsdb-button-background); border-radius: 42px; font-weight: 700; font-size: var(--wsdb-button-font-size, 1.6rem); color: var(--color-wsdb-main); } .c-wsdb-button__link small { display: block; margin-top: 0.25em; line-height: 1.1; font-size: var(--wsdb-button-font-small, 1.2rem); color: var(--color-wsdb-text); } .c-wsdb-button__link::after { content: ""; position: absolute; top: 50%; right: var(--wsdb-button-arrow-right, 24px); transform: translateY(-50%); width: 13px; height: 13px; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2212%22%20height%3D%2217%22%20viewBox%3D%220%200%2012%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.92871%2015.571L8.99978%208.49998L1.92871%201.42891%22%20stroke%3D%22%23016FBB%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E"); } @media not all and (pointer: coarse) { .c-wsdb-button__link:hover { background-color: var(--wsdb-button-hover-background); } } @media (min-width: 768px) { .c-wsdb-button { --wsdb-button-width: 362px; --wsdb-button-height: 64px; --wsdb-button-font-size: 2.4rem; --wsdb-button-font-small: 1.4rem; --wsdb-button-arrow-right: 34px; } } .c-mirai-cv { background-color: #faf3e1; } .c-mirai-cv__inner { color: var(--color-mirai-accent); } .c-mirai-cv__inner { padding-top: 13.8vw; } .c-mirai-cv__inner { padding-bottom: 13.8vw; } .c-mirai-cv__head { font-weight: 700; text-align: center; } .c-mirai-cv__head { margin-bottom: 6.4vw; } .c-mirai-cv__head { font-size: clamp(2.4rem, 1.2rem + 2.5vw, 4.4rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.2rem + 2.5vw, 44 * 0.1rem)) { .c-mirai-cv__head { font-size: 2.4rem; } } .c-mirai-cv__head span { display: inline-block; } .c-mirai-cv__lead { margin-bottom: 14.9vw; } .c-mirai-cv__lead { font-size: clamp(1.4rem, 1.04rem + 0.75vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.04rem + 0.75vw, 20 * 0.1rem)) { .c-mirai-cv__lead { font-size: 1.4rem; } } .c-mirai-cv__button-area { display: flex; flex-wrap: wrap; justify-content: center; } .c-mirai-cv__button-area { gap: 5.3vw; } @media (min-width: 768px) { .c-mirai-cv__inner { --inner-max-width: 1096px; padding-top: 88px; padding-bottom: 88px; } .c-mirai-cv__head { margin-bottom: 64px; } .c-mirai-cv__lead { margin-bottom: 64px; } .c-mirai-cv__button-area { gap: 16px; } } @media (min-width: 1280px) { .c-mirai-cv__inner { display: grid; grid-template-columns: 520px 540px; grid-column-gap: 36px; place-items: center; } .c-mirai-cv__head { grid-column: 1/3; } .c-mirai-cv__lead { margin-bottom: 0; } } .c-mirai-cv--below-mv { display: flex; flex-wrap: wrap; justify-content: center; background-color: transparent; } .c-mirai-cv--below-mv { gap: 5.3vw; } .c-mirai-cv--below-mv { padding-bottom: 19.2vw; } @media (min-width: 768px) { .c-mirai-cv--below-mv { padding-bottom: 124px; } } @media (min-width: 1280px) { .c-mirai-cv--below-mv { justify-content: flex-end; flex-direction: row-reverse; gap: 16px; max-width: 1196px; margin-left: auto; margin-right: auto; } } .c-wsdb-cv { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; gap: 24px; padding: 48px 0; background-color: var(--color-wsdb-main); } .c-wsdb-cv--has-text .c-wsdb-cv__text { font-weight: 900; color: #fcfcfc; text-align: center; } .c-wsdb-cv--has-text .c-wsdb-cv__text { font-size: clamp(2.4rem, 1.68rem + 1.5vw, 3.6rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.68rem + 1.5vw, 36 * 0.1rem)) { .c-wsdb-cv--has-text .c-wsdb-cv__text { font-size: 2.4rem; } } .c-wsdb-cv--has-text .c-wsdb-cv__text small { display: block; } .c-wsdb-cv--has-text .c-wsdb-cv__text small { font-size: clamp(1.4rem, 1.28rem + 0.25vw, 1.6rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.28rem + 0.25vw, 16 * 0.1rem)) { .c-wsdb-cv--has-text .c-wsdb-cv__text small { font-size: 1.4rem; } } @media (min-width: 768px) { .c-wsdb-cv { flex-direction: row; gap: 48px; padding: 55px 0; } .c-wsdb-cv--has-text { display: grid; place-items: center; grid-template-columns: 100%; grid-column-gap: 48px; } } @media (min-width: 1280px) { .c-wsdb-cv--has-text { display: grid; grid-template-columns: auto repeat(2, 362px); grid-column-gap: 48px; } } .c-form { font-size: 1.6rem; } .c-form input:not([type=checkbox]):not([type=submit]), .c-form textarea { box-sizing: border-box; width: 100%; padding: 0.75em; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; } .c-form input[type=checkbox] { all: revert; width: 1em; height: 1em; font-size: 1.6rem; cursor: pointer; } .c-form input[type=submit] { box-sizing: border-box; display: block; width: min(100%, 300px); margin: 5em auto 0; padding: 0.75em; border-radius: 40px; border: 1px solid var(--form-head-color, var(--color-wsdb-main)); background-color: var(--form-head-color, var(--color-wsdb-main)); font-size: 1.8rem; color: #fcfcfc; text-align: center; cursor: pointer; transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-form input[type=submit]:hover { background-color: #fcfcfc; color: var(--form-head-color, var(--color-wsdb-main)); } } .c-form ::placeholder { color: #999; } .c-form__inner { padding-top: 10.6vw; } .c-form__inner { padding-bottom: 10.6vw; } .c-form__head { font-weight: 700; text-align: center; color: var(--form-head-color, var(--color-wsdb-main)); } .c-form__head { margin-bottom: 6.4vw; } .c-form__head { font-size: clamp(2.4rem, 1.2rem + 2.5vw, 4.4rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.2rem + 2.5vw, 44 * 0.1rem)) { .c-form__head { font-size: 2.4rem; } } .c-form__item { width: min(100%, 600px); margin: 0 auto 2em; } .c-form__item legend { margin-bottom: 0.5em; } @media (min-width: 768px) { .c-form__inner { padding-top: 80px; padding-bottom: 80px; } .c-form__head { margin-bottom: 64px; } } /* override */ .c-form .wpcf7-form-control-wrap { display: block; margin-top: 0.5em; } .c-form .wpcf7-checkbox { display: flex; flex-direction: column; gap: 1em; } .c-form .wpcf7-checkbox .wpcf7-list-item { display: flex; align-items: center; gap: 0.5em; } .c-form .wpcf7-checkbox .wpcf7-list-item-label { cursor: pointer; } .c-form .wpcf7-response-output { width: min(100%, 600px); margin: 2em auto 0; padding: 0.75em 1em; border-top-left-radius: 16px; border-bottom-right-radius: 16px; text-align: center; } .c-form .wpcf7-mail-sent-ok { display: block; background-color: #e6f8ea; border: 1px solid #66bb6a; color: #2e7d32; } .c-form .wpcf7-validation-errors, .c-form .wpcf7-mail-sent-ng { display: block; background-color: #fdecea; border: 1px solid #f44336; color: #b71c1c; } .c-head { position: relative; display: inline-flex; align-items: center; gap: var(--head-icon-gap, 6.4vw); margin-bottom: var(--head-margin-bottom, 6.4vw); font-weight: 700; } .c-head { font-size: clamp(3.2rem, 2.24rem + 2vw, 4.8rem); } @supports not (font-size: clamp(32 * 0.1rem, 2.24rem + 2vw, 48 * 0.1rem)) { .c-head { font-size: 3.2rem; } } .c-head::before { content: ""; display: inline-block; width: var(--head-icon-width); height: var(--head-icon-width); background-color: #ffbe00; } @media (min-width: 768px) { .c-head { --head-icon-width: 40px; --head-icon-gap: 56px; --head-margin-bottom: 52px; } } .c-mirai-head { color: #fff; } .c-mirai-head { margin-bottom: 12.8vw; } .c-mirai-head__en, .c-mirai-head__ja { display: block; } .c-mirai-head__en { line-height: 1.1; } .c-mirai-head__en { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .c-mirai-head__en { font-size: 1.6rem; } } .c-mirai-head__ja { line-height: 1.4; font-weight: 700; } .c-mirai-head__ja { font-size: clamp(3.2rem, 1.28rem + 4vw, 6.4rem); } @supports not (font-size: clamp(32 * 0.1rem, 1.28rem + 4vw, 64 * 0.1rem)) { .c-mirai-head__ja { font-size: 3.2rem; } } @media (min-width: 768px) { .c-mirai-head { margin-bottom: var(--mirai-head-margin-bottom, 48px); } } @media (min-width: 1280px) { .c-mirai-head__en { margin-bottom: -0.25em; } } .c-wsdb-head { margin-bottom: var(--wsdb-head-margin-bottom, 10.66vw); } .c-wsdb-head--white { color: #fcfcfc; text-align: center; } .c-wsdb-head--white .c-wsdb-head__ja { font-size: clamp(1.6rem, 1.36rem + 0.5vw, 2rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.36rem + 0.5vw, 20 * 0.1rem)) { .c-wsdb-head--white .c-wsdb-head__ja { font-size: 1.6rem; } } .c-wsdb-head--white .c-wsdb-head__en { font-size: clamp(3.6rem, 1.92rem + 3.5vw, 6.4rem); } @supports not (font-size: clamp(36 * 0.1rem, 1.92rem + 3.5vw, 64 * 0.1rem)) { .c-wsdb-head--white .c-wsdb-head__en { font-size: 3.6rem; } } .c-wsdb-head--center { text-align: center; } .c-wsdb-head__en, .c-wsdb-head__ja { display: block; } .c-wsdb-head__ja { line-height: 1.1; font-weight: 900; } .c-wsdb-head__ja { font-size: clamp(1.6rem, 0.64rem + 2vw, 3.2rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.64rem + 2vw, 32 * 0.1rem)) { .c-wsdb-head__ja { font-size: 1.6rem; } } .c-wsdb-head__en { --outfit-font-weight: 700; margin-top: -0.25em; font-weight: 700; } .c-wsdb-head__en { font-size: clamp(4.4rem, -0.64rem + 10.5vw, 12.8rem); } @supports not (font-size: clamp(44 * 0.1rem, -0.64rem + 10.5vw, 128 * 0.1rem)) { .c-wsdb-head__en { font-size: 4.4rem; } } @media (max-width: 374.98px) { .c-wsdb-head__en { font-size: clamp(3.6rem, -1.0545454545rem + 14.5454545455vw, 4.4rem); } @supports not (font-size: clamp(36 * 0.1rem, -1.0545454545rem + 14.5454545455vw, 44 * 0.1rem)) { .c-wsdb-head__en { font-size: 3.6rem; } } } @media (min-width: 768px) { .c-wsdb-head { --wsdb-head-margin-bottom: 40px; } } .c-dot-list__item { position: relative; padding-left: var(--dot-list-padding-left, 1.5em); } .c-dot-list__item::before { content: ""; display: inline-block; position: absolute; top: 0.5em; left: 0; width: var(--dot-list-icon-width, 10px); height: var(--dot-list-icon-width, 10px); background-color: var(--dot-list-icon-color, #016FBB); border-radius: 50%; } .c-dot-list__item:not(:last-of-type) { margin-bottom: var(--dot-list-item-margin, 1.14em); } .c-section + .c-section { margin-top: var(--section-margin-top, 18.66vw); } .c-section__inner { padding-top: var(--section-padding-top, 16vw); } @media (min-width: 768px) { .c-section { --section-padding-top: 120px; --section-margin-top: 140px; } } .c-table table tr { border-top: 1px solid #BDBDBD; } .c-table table tr:last-child { border-bottom: 1px solid #BDBDBD; } .c-table table th, .c-table table td th { padding-top: 24px; padding-bottom: 12px; font-weight: 700; } .c-table table td { padding-top: 12px; padding-bottom: 24px; } .c-table table td ul li { position: relative; padding-left: 1em; text-indent: -1em; } .c-table table td ul li::before { content: "・"; width: 1em; height: 1em; } .c-table table td dl { display: grid; grid-template-columns: auto 1fr; } .c-table table td dl dt { position: relative; } .c-table table td dl dt::after { content: ":"; display: inline-block; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin: 0 1em; } @media (min-width: 1024px) { .c-table table { display: table; table-layout: fixed; } .c-table table th, .c-table table td { display: table-cell; padding: 24px 0; } .c-table table th { vertical-align: middle; width: 200px; padding-right: 56px; } } /* ------------------------------ Device-only Break Classes 主にbrで使用することを想定その場合、ソースコードはbrの後ろで改行しないこと（改行すると不要なスペースが入る）使用例：

吾輩は
猫である

------------------------------ */ @media (max-width: 767.98px) { .u-only-sp { display: block; } } @media (min-width: 768px) { .u-only-sp { display: none !important; } } @media (max-width: 767.98px) { .u-only-pc { display: none !important; } } @media (min-width: 768px) { .u-only-pc { display: block; } } /* ------------------------------ Link ------------------------------ */ .u-link { display: block; } @media not all and (pointer: coarse) { .u-link:hover { opacity: var(--hover-opacity); } } .u-zoom { transition: transform 0.3s ease-in; } @media not all and (pointer: coarse) { .u-zoom:hover { transform: scale(1.1) rotateZ(0.03deg); } } a:has(> .u-zoom) { display: block; overflow: hidden; } /* ------------------------------ Layout ------------------------------ */ .u-inner { box-sizing: border-box; width: 100%; padding-left: var(--inner-padding); padding-right: var(--inner-padding); } @media (min-width: 768px) { .u-inner { max-width: var(--inner-max-width, 1280px); margin: auto; } } @media (min-width: 1380px) { .u-inner { padding-left: 0; padding-right: 0; } } /* ------------------------------ Font ------------------------------ */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-font-outfit { font-family: "Outfit", sans-serif; font-optical-sizing: auto; font-weight: var(--outfit-font-weight, 500); font-style: normal; } /* MV下のグラデ用ラッパー */ .p-mirai-wrapper { background: linear-gradient(322deg, #fff5e0 0%, #169198 100%); } .p-mirai-wrapper { padding-top: 24.2vw; } @media (min-width: 768px) { .p-mirai-wrapper { padding-top: 200px; } } @media (min-width: 1280px) { .p-mirai-wrapper { padding-top: 240px; } } /* 左上と右下が角丸＋背景が白 */ .p-mirai-section { margin: auto; } .p-mirai-section { width: 87.2vw; } .p-mirai-section + .p-mirai-section { margin-top: 10.1vw; } .p-mirai-section__inner { background-color: #fff; border-top-left-radius: 30px; border-bottom-right-radius: 30px; } .p-mirai-section__heading { color: var(--color-mirai-accent); } .p-mirai-section__heading { margin-bottom: 4.2vw; } .p-mirai-section__heading-en { display: block; border-bottom: 1px solid #ababab; color: var(--color-mirai-main); } .p-mirai-section__heading-en { margin-bottom: 6.4vw; } .p-mirai-section__heading-en { font-size: clamp(2rem, 1.76rem + 0.5vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.76rem + 0.5vw, 24 * 0.1rem)) { .p-mirai-section__heading-en { font-size: 2rem; } } .p-mirai-section__heading-sub { display: block; line-height: 1.1; font-weight: 700; } .p-mirai-section__heading-sub { font-size: clamp(1.4rem, 1.04rem + 0.75vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.04rem + 0.75vw, 20 * 0.1rem)) { .p-mirai-section__heading-sub { font-size: 1.4rem; } } .p-mirai-section__heading-main { font-weight: 700; word-break: keep-all; overflow-wrap: anywhere; } .p-mirai-section__heading-main { font-size: clamp(2.4rem, 1.2rem + 2.5vw, 4.4rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.2rem + 2.5vw, 44 * 0.1rem)) { .p-mirai-section__heading-main { font-size: 2.4rem; } } .p-mirai-section__lead { margin-bottom: 10.6vw; } @media (max-width: 374.98px) { .p-mirai-section__heading-main { font-size: clamp(1.8rem, -1.6909090909rem + 10.9090909091vw, 2.4rem); } @supports not (font-size: clamp(18 * 0.1rem, -1.6909090909rem + 10.9090909091vw, 24 * 0.1rem)) { .p-mirai-section__heading-main { font-size: 1.8rem; } } } @media (max-width: 767.98px) { .p-mirai-section--full-width { width: 100%; } .p-mirai-section--full-width .p-mirai-section__inner { padding-top: 13.8vw; } .p-mirai-section--full-width .p-mirai-section__inner { padding-bottom: 21.3vw; } } @media (min-width: 768px) { .p-mirai-section { width: min(91.66vw, 1280px); } .p-mirai-section + .p-mirai-section { margin-top: clamp(120px, 120px + 48 * (100vw - 768px) / 512, 168px); } .p-mirai-section--full-width .p-mirai-section__inner { padding: 136px clamp(60px, 60px + 36 * (100vw - 768px) / 512, 96px) 180px; } .p-mirai-section__inner { border-top-left-radius: 60px; border-bottom-right-radius: 60px; } .p-mirai-section__heading { margin-bottom: clamp(50px, 50px + 30 * (100vw - 768px) / 512, 80px); } .p-mirai-section__heading-en { margin-bottom: 32px; } .p-mirai-section__lead { margin-bottom: clamp(50px, 50px + 30 * (100vw - 768px) / 512, 80px); } } /*　.mirai-intro　*/ .mirai-intro__inner { padding: 13.86vw 5.33vw; } .mirai-intro__head { font-weight: 700; text-align: center; } .mirai-intro__head { margin-bottom: 6.4vw; } .mirai-intro__head { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .mirai-intro__head { font-size: 2rem; } } .mirai-intro__head em { color: var(--color-mirai-accent); } .mirai-intro-list { margin-bottom: 6.4vw; } .mirai-intro-list::after { content: ""; display: block; margin-left: auto; margin-right: auto; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2238%22%20height%3D%2218%22%20viewBox%3D%220%200%2038%2018%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M19%2018L0.813463%203.88901e-07L37.1865%203.56874e-06L19%2018Z%22%20fill%3D%22%23169198%22%2F%3E%3C%2Fsvg%3E"); } .mirai-intro-list::after { width: 5.6vw; } .mirai-intro-list::after { height: 3.2vw; } .mirai-intro-list::after { margin-top: 6.4vw; } .mirai-intro-list__item { position: relative; } .mirai-intro-list__item { padding-left: 8.5vw; } .mirai-intro-list__item { font-size: clamp(1.4rem, 0.8705882353rem + 1.1029411765vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.8705882353rem + 1.1029411765vw, 20 * 0.1rem)) { .mirai-intro-list__item { font-size: 1.4rem; } } .mirai-intro-list__item::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 28px; height: 28px; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2020.4412L17.2222%2027.5L30%2012.5%22%20stroke%3D%22%23169198%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } .mirai-intro-list:not(:last-of-type) { margin-bottom: 5.3vw; } .mirai-intro__conclusion { font-weight: 700; text-align: center; color: var(--color-mirai-main); } .mirai-intro__conclusion { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .mirai-intro__conclusion { font-size: 2rem; } } @media (min-width: 768px) { .mirai-intro__inner { padding: 52px 60px; } .mirai-intro__head { margin-bottom: 40px; } .mirai-intro-list { width: fit-content; margin: 0 auto 40px; } .mirai-intro-list::after { width: 42px; height: 24px; margin-top: 40px; } .mirai-intro-list__item { padding-left: 76px; } .mirai-intro-list__item::before { width: 40px; height: 40px; } .mirai-intro-list__item:not(:last-of-type) { margin-bottom: 40px; } } /* アイコン付きリスト */ .p-mirai-icon-list--has-bg .p-mirai-icon-list__item { box-sizing: border-box; background-color: #faf3e1; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .p-mirai-icon-list--has-bg .p-mirai-icon-list__item { padding: 5.3vw; } .p-mirai-icon-list__item:not(:last-of-type) { margin-bottom: 17vw; } .p-mirai-icon-list__item img { margin-left: auto; margin-right: auto; } .p-mirai-icon-list__item img { width: 21.3vw; } .p-mirai-icon-list__item img { margin-bottom: 2.6vw; } .p-mirai-icon-list__item h4 { font-weight: 700; color: var(--color-mirai-main); text-align: center; } .p-mirai-icon-list__item h4 { margin-bottom: 4.2vw; } .p-mirai-icon-list__item h4 { font-size: clamp(2rem, 1.3333333333rem + 1.3888888889vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.3333333333rem + 1.3888888889vw, 24 * 0.1rem)) { .p-mirai-icon-list__item h4 { font-size: 2rem; } } .p-mirai-icon-list__item h4 small { display: block; color: var(--color-mirai-accent); } .p-mirai-icon-list__item h4 small { font-size: clamp(1.2rem, 0.5333333333rem + 1.3888888889vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.5333333333rem + 1.3888888889vw, 16 * 0.1rem)) { .p-mirai-icon-list__item h4 small { font-size: 1.2rem; } } @media (max-width: 374.98px) { .p-mirai-icon-list__item h4 { font-size: clamp(1.6rem, -0.7272727273rem + 7.2727272727vw, 2rem); } @supports not (font-size: clamp(16 * 0.1rem, -0.7272727273rem + 7.2727272727vw, 20 * 0.1rem)) { .p-mirai-icon-list__item h4 { font-size: 1.6rem; } } } @media (min-width: 768px) { .p-mirai-icon-list { max-width: 848px; margin-left: auto; margin-right: auto; this: .p-mirai-icon-list; } .p-mirai-icon-list--has-bg { max-width: 880px; } .p-mirai-icon-list--has-bg .p-mirai-icon-list__item { padding: 32px; border-top-left-radius: 16px; border-bottom-right-radius: 16px; } .p-mirai-icon-list__item { display: grid; grid-template-columns: 92px 1fr; grid-column-gap: 32px; } .p-mirai-icon-list__item:not(:last-of-type) { margin-bottom: 48px; } .p-mirai-icon-list__item img { grid-column: 1; grid-row: 1/3; width: 92px; margin: 0; } .p-mirai-icon-list__item h4, .p-mirai-icon-list__item p { grid-column: 2; } .p-mirai-icon-list__item h4 { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 24px; margin-bottom: 16px; text-align: left; } .p-mirai-icon-list__item h4 small { display: inline-block; } } /*　.mirai-solutions　*/ .mirai-solutions__inner { padding-top: 26.6vw; } .mirai-solutions__inner { padding-bottom: 12.8vw; } .mirai-solutions__lead { font-weight: 700; text-align: center; } .mirai-solutions__lead { margin-bottom: 8.5vw; } .mirai-solutions__lead { font-size: clamp(2rem, 0.56rem + 3vw, 4.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 0.56rem + 3vw, 44 * 0.1rem)) { .mirai-solutions__lead { font-size: 2rem; } } .mirai-solutions__text { text-align: center; } .mirai-solutions__text { font-size: clamp(1.4rem, 1.04rem + 0.75vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.04rem + 0.75vw, 20 * 0.1rem)) { .mirai-solutions__text { font-size: 1.4rem; } } @media (min-width: 768px) { .mirai-solutions { --mirai-head-margin-bottom: 136px; } .mirai-solutions__inner { padding-top: 200px; padding-bottom: 136px; } .mirai-solutions__lead { margin-bottom: 40px; } } /*　.mirai-values　*/ .mirai-values { text-align: center; } .mirai-values { padding-bottom: 42.6vw; } .mirai-values__inner { padding: 13.86vw 12.26vw; } .mirai-values__head { color: var(--color-mirai-main); } .mirai-values__head { margin-bottom: 12.8vw; } .mirai-values__head { font-size: clamp(1.2rem, -0.8rem + 4.1666666667vw, 2.4rem); } @supports not (font-size: clamp(12 * 0.1rem, -0.8rem + 4.1666666667vw, 24 * 0.1rem)) { .mirai-values__head { font-size: 1.2rem; } } .mirai-values__list { font-size: clamp(1.4rem, 1.04rem + 0.75vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.04rem + 0.75vw, 20 * 0.1rem)) { .mirai-values__list { font-size: 1.4rem; } } .mirai-values__item { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1/1; } .mirai-values__item:not(:last-of-type) { margin-bottom: 5.3vw; } .mirai-values__item::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../img/mirai/bg_circle.png) no-repeat center/contain; mix-blend-mode: multiply; } .mirai-values__item::before { width: 73.3vw; } .mirai-values__item::before { height: 73.3vw; } .mirai-values__item h3, .mirai-values__item p { position: relative; z-index: 2; } .mirai-values__item h3 { font-weight: 700; color: var(--color-mirai-main); } .mirai-values__item h3 { margin-bottom: 4.2vw; } .mirai-values__item h3 { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .mirai-values__item h3 { font-size: 2rem; } } .mirai-values__item p { font-size: clamp(1.2rem, 0.5333333333rem + 1.3888888889vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.5333333333rem + 1.3888888889vw, 16 * 0.1rem)) { .mirai-values__item p { font-size: 1.2rem; } } @media (max-width: 374.98px) { .mirai-values__item h3 { font-size: clamp(1.6rem, -0.7272727273rem + 7.2727272727vw, 2rem); } @supports not (font-size: clamp(16 * 0.1rem, -0.7272727273rem + 7.2727272727vw, 20 * 0.1rem)) { .mirai-values__item h3 { font-size: 1.6rem; } } } @media (min-width: 768px) { .mirai-values { padding-bottom: 235px; } .mirai-values__inner { padding-top: 100px; padding-bottom: 100px; } .mirai-values__head { margin-bottom: 48px; } .mirai-values__list { display: flex; flex-direction: column; justify-content: center; align-items: center; } .mirai-values__item { width: 402px; height: 402px; } .mirai-values__item:not(:last-of-type) { margin-bottom: -20px; } .mirai-values__item::before { width: 402px; height: 402px; } .mirai-values__item h3 { margin-bottom: 24px; } .mirai-values__item p { max-width: 290px; } } @media (min-width: 1280px) { .mirai-values__list { display: grid; grid-template-columns: repeat(3, 1fr); } .mirai-values__item:nth-of-type(2) { margin-left: -45px; margin-right: -45px; } } /*　.mirai-anchor　*/ .mirai-anchor { position: relative; background-color: var(--color-mirai-main); } .mirai-anchor__head { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; mix-blend-mode: multiply; } .mirai-anchor__head { top: -36.3vw; } .mirai-anchor__inner { padding-top: 21.33vw; padding-bottom: 14.93vw; } .mirai-anchor-list { display: grid; grid-template-columns: 100%; } .mirai-anchor-list { grid-gap: 6.4vw; } .mirai-anchor-list__link { box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; min-height: 112px; padding: 2.13vw 4.26vw; border-top-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #fff; } @media not all and (pointer: coarse) { .mirai-anchor-list__link:hover .mirai-anchor-list__num { color: #4f9498; } .mirai-anchor-list__link:hover .mirai-anchor-list__text { color: #df8a7b; } .mirai-anchor-list__link:hover .mirai-anchor-list__icon { color: #eaeaea; } } .mirai-anchor-list__num, .mirai-anchor-list__text, .mirai-anchor-list__icon { transition: all 0.3s ease-in; } .mirai-anchor-list__num { color: var(--color-mirai-main); } .mirai-anchor-list__num { font-size: clamp(4rem, 2.68rem + 2.75vw, 6.2rem); } @supports not (font-size: clamp(40 * 0.1rem, 2.68rem + 2.75vw, 62 * 0.1rem)) { .mirai-anchor-list__num { font-size: 4rem; } } .mirai-anchor-list__text { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 700; color: var(--color-mirai-accent); } .mirai-anchor-list__text { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .mirai-anchor-list__text { font-size: 2rem; } } .mirai-anchor-list__text span { font-size: clamp(1.2rem, 0.72rem + 1vw, 2rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.72rem + 1vw, 20 * 0.1rem)) { .mirai-anchor-list__text span { font-size: 1.2rem; } } .mirai-anchor-list__text small { font-weight: 400; color: var(--color-mirai-main); text-align: center; } .mirai-anchor-list__text small { font-size: clamp(1rem, 0.88rem + 0.25vw, 1.2rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.88rem + 0.25vw, 12 * 0.1rem)) { .mirai-anchor-list__text small { font-size: 1rem; } } .mirai-anchor-list__icon { display: flex; justify-content: center; align-items: center; width: 34px; height: 90px; color: #ababab; } .mirai-anchor-list__icon svg { width: 12px; } @media (min-width: 768px) { .mirai-anchor__head { top: -212px; width: 381px; } .mirai-anchor__inner { padding: 96px 64px 110px; } .mirai-anchor-list { grid-gap: 28px; } .mirai-anchor-list__link { width: 534px; min-height: 164px; margin-left: auto; margin-right: auto; padding: 16px 56px; border-top-left-radius: 16px; border-bottom-right-radius: 16px; } .mirai-anchor-list__text { line-height: 1.5; } .mirai-anchor-list__text small { margin: 0 -5em; transform: translateY(1em); } .mirai-anchor-list__icon { width: 20px; height: 132px; } .mirai-anchor-list__icon svg { width: 20px; } } @media (min-width: 1280px) { .mirai-anchor__inner { padding: 96px 64px 120px; } .mirai-anchor-list { grid-template-columns: 1fr 1fr; } } /*　.mirai-points　*/ .mirai-points { background-color: #d4e3e4; } .mirai-points { padding-bottom: 26.6vw; } @media (max-width: 767.98px) { .mirai-points { padding-top: 14.9vw; } } @media (min-width: 768px) { .mirai-points { position: relative; padding-bottom: 200px; } .mirai-points::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100vw; height: 310px; background-color: var(--color-mirai-main); } .mirai-points > section { position: relative; z-index: 2; } } /* point1 */ .point1__image { margin-bottom: 13.8vw; } .point1__image img { margin: auto; } .point1__image img { width: 75.4vw; } .point1-detail-list { display: grid; grid-template-columns: 100%; } .point1-detail-list { grid-gap: 6.4vw; } .point1-detail-list { margin-bottom: 26.6vw; } .point1-detail-list__item { box-sizing: border-box; min-height: 174px; background: #f0f4f6 no-repeat top 24px right 28px/140px; border-top-left-radius: 10px; border-bottom-right-radius: 10px; } .point1-detail-list__item { padding-bottom: 4.2vw; } .point1-detail-list__item:nth-of-type(1) { background-image: url(../img/mirai/point1/bg_card01.png); } .point1-detail-list__item:nth-of-type(2) { background-image: url(../img/mirai/point1/bg_card02.png); } .point1-detail-list__item:nth-of-type(3) { background-image: url(../img/mirai/point1/bg_card03.png); } .point1-detail-list__item:nth-of-type(4) { background-image: url(../img/mirai/point1/bg_card04.png); } .point1-detail-list__item:nth-of-type(5) { background-image: url(../img/mirai/point1/bg_card05.png); } .point1-detail-list__item:nth-of-type(6) { background-image: url(../img/mirai/point1/bg_card06.png); } .point1-detail-list__item:nth-of-type(7) { background-image: url(../img/mirai/point1/bg_card07.png); } .point1-detail-list__item:nth-of-type(-n + 2) .point1-detail-list__label { background-color: #007a9e; } .point1-detail-list__item:nth-of-type(n + 3):nth-of-type(-n + 5) .point1-detail-list__label { background-color: #11c2dd; } .point1-detail-list__item:nth-of-type(n + 6) .point1-detail-list__label { background-color: #00acae; } .point1-detail-list__item > ul { padding-left: 5.3vw; } .point1-detail-list__item > ul li { position: relative; padding-left: 1em; } .point1-detail-list__item > ul li::before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0; } .point1-detail-list__item > ul li small { display: block; font-size: 1rem; } .point1-detail-list__label { box-sizing: border-box; display: flex; justify-content: center; align-items: center; padding: 4px 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; color: #fcfcfc; } .point1-detail-list__label { width: 58.1vw; } .point1-detail-list__label { margin-bottom: 4.2vw; } .point1-detail-list__note { margin-top: 8px; font-weight: 700; font-size: 1.2rem; color: var(--color-mirai-accent); text-align: right; } .point1-detail-list__note { padding-right: 6.4vw; } @media (min-width: 768px) { .point1__image { margin-bottom: 80px; } .point1__image img { width: 544px; } .point1-detail-list { grid-template-columns: 1fr 1fr; grid-gap: 20px; margin-bottom: 148px; } .point1-detail-list__item { min-height: 262px; padding-bottom: 20px; background-position: top 48px right 20px; background-size: 167px; } .point1-detail-list__item--enrolled-students { grid-column: 1/3; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 96px auto; } .point1-detail-list__item--enrolled-students .point1-detail-list__label { grid-column: 1/3; width: 348px; } .point1-detail-list__item > ul { padding-left: 20px; } .point1-detail-list__label { width: 218px; height: 48px; margin-bottom: 28px; padding: 9px 0; } .point1-detail-list__note { padding-right: 24px; } } @media (min-width: 1280px) { .point1-detail-list { grid-template-columns: repeat(4, 1fr); } .point1-detail-list__item--enrolled-students { grid-column: 3/5; } } .point1-functions { padding-bottom: 26.6vw; } .point1-functions__head { font-weight: 700; color: var(--color-mirai-main); text-align: center; } .point1-functions__head { margin-bottom: 13.8vw; } .point1-functions__head { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .point1-functions__head { font-size: 2rem; } } @media (min-width: 768px) { .point1-functions { padding-bottom: 148px; } .point1-functions__head { margin-bottom: 52px; } } .point1-international { margin-bottom: 14.9vw; } .point1-international__head { font-weight: 700; color: var(--color-mirai-main); text-align: center; } .point1-international__head { margin-bottom: 6.4vw; } .point1-international__head { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .point1-international__head { font-size: 2rem; } } .point1-international__lead { margin-bottom: 10.6vw; } .point1-international-card__item { color: var(--color-mirai-main); } .point1-international-card__item:first-of-type h4 { background-image: url(../img/mirai/point1/bg_international01_sp.jpg); } .point1-international-card__item:nth-of-type(2) h4 { background-image: url(../img/mirai/point1/bg_international02_sp.jpg); } .point1-international-card__item h4 { display: flex; justify-content: center; align-items: center; background: no-repeat center/cover; font-weight: 700; text-align: center; } .point1-international-card__item h4 { aspect-ratio: 3.27; } @supports not (aspect-ratio: 3.27) { .point1-international-card__item h4 { position: relative; padding-top: 30.5810397554%; } .point1-international-card__item h4 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .point1-international-card__item h4 { font-size: clamp(2rem, 1.76rem + 0.5vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.76rem + 0.5vw, 24 * 0.1rem)) { .point1-international-card__item h4 { font-size: 2rem; } } .point1-international-card__item p { box-sizing: border-box; display: flex; justify-content: center; align-items: center; background-color: #dde8eb; } .point1-international-card__item p { padding: 5.3vw; } @media (max-width: 767.98px) { .point1-international-card__item:not(:last-of-type) { margin-bottom: 6.4vw; } } @media (min-width: 768px) { .point1-international { margin-bottom: 48px; } .point1-international__head { margin-bottom: 24px; } .point1-international__lead { margin-bottom: 52px; } .point1-international-card { display: grid; grid-gap: 20px; } .point1-international-card__item:first-of-type h4 { background-image: url(../img/mirai/point1/bg_international01_pc.jpg); } .point1-international-card__item:nth-of-type(2) h4 { background-image: url(../img/mirai/point1/bg_international02_pc.jpg); } .point1-international-card__item h4 { aspect-ratio: 3.8985507246; } @supports not (aspect-ratio: 3.8985507246) { .point1-international-card__item h4 { position: relative; padding-top: 25.6505576208%; } .point1-international-card__item h4 > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .point1-international-card__item p { padding: 48px clamp(25px, 25px + 15 * (100vw - 1280px) / 320, 40px); } } @media (min-width: 1280px) { .point1-international__lead { text-align: center; } .point1-international-card { grid-template-columns: 1fr 1fr; } .point1-international-card__item p { font-size: clamp(1.5rem, 0.0454545455rem + 1.1363636364vw, 1.6rem); } @supports not (font-size: clamp(15 * 0.1rem, 0.0454545455rem + 1.1363636364vw, 16 * 0.1rem)) { .point1-international-card__item p { font-size: 1.5rem; } } } .point1-wsdb { box-sizing: border-box; padding: 8.53vw 5.33vw; background: #f7f7f7; color: #0071bd; } .point1-wsdb__head-sub { font-weight: 700; font-size: 1.2rem; } .point1-wsdb__head-main { line-height: 1.4; } .point1-wsdb__head-main { font-size: clamp(3.6rem, 3.12rem + 1vw, 4.4rem); } @supports not (font-size: clamp(36 * 0.1rem, 3.12rem + 1vw, 44 * 0.1rem)) { .point1-wsdb__head-main { font-size: 3.6rem; } } .point1-wsdb__text-area h4 { font-size: clamp(2rem, 1.76rem + 0.5vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.76rem + 0.5vw, 24 * 0.1rem)) { .point1-wsdb__text-area h4 { font-size: 2rem; } } .point1-wsdb__text-area p { color: var(--color-mirai-text); } .point1-wsdb__button { box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 8px; width: 237px; height: 34px; margin-left: auto; margin-right: auto; border: 1px solid #0071bd; border-radius: 24px; font-weight: 700; font-size: 1.2rem; color: #0071bd; } .point1-wsdb__button { margin-top: 6.4vw; } .point1-wsdb__button-icon { width: 16px; height: 16px; } .point1-wsdb__button-icon svg { width: 100%; height: 100%; } @media not all and (pointer: coarse) { .point1-wsdb__button:hover { background-color: #0071bd; color: #fff; } } @media (max-width: 767.98px) { .point1-wsdb__head { position: relative; padding-left: 138px; border-bottom: 2px solid #eaeaea; } .point1-wsdb__head { margin-bottom: 4.2vw; } .point1-wsdb__head { padding-bottom: 2.1vw; } .point1-wsdb__head::before { content: ""; display: inline-block; position: absolute; top: 0; left: 22px; width: 100px; height: 73px; background: url(../img/wsdb/logo_wsdb.png) no-repeat center/contain; } .point1-wsdb__text-area h4 { text-align: center; } } @media (min-width: 480px) and (max-width: 767.98px) { .point1-wsdb { max-width: 500px; margin-left: auto; margin-right: auto; } .point1-wsdb__head::before { top: -10px; } } @media (min-width: 768px) { .point1-wsdb { display: grid; grid-template-columns: 184px 1fr; grid-gap: 40px 24px; padding: 32px min(2.5vw, 40px); } .point1-wsdb__head { align-self: center; padding-right: 16px; border-right: 2px solid #eaeaea; text-align: center; } .point1-wsdb__text-area h4 { margin-bottom: 16px; } .point1-wsdb__button-area { grid-column: 1/3; position: relative; padding-top: 99px; } .point1-wsdb__button-area::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 124px; height: 91px; background: url(../img/wsdb/logo_wsdb.png) no-repeat center/contain; } .point1-wsdb__button { margin-top: auto; } } @media (min-width: 1280px) { .point1-wsdb { grid-template-columns: 184px 1fr 237px; grid-gap: 24px; } .point1-wsdb__button-area { grid-column: 3; } } /* .point3 */ .point3__image { margin-bottom: 14.9vw; } .point3-diagnosis { box-sizing: border-box; padding: 13.86vw 5.33vw; background-color: #f7f7f7; } .point3-diagnosis__item { position: relative; box-sizing: border-box; padding: 4.29vw 0; } .point3-diagnosis__item::before { content: ""; position: absolute; top: 0; left: 0; width: 160px; height: 160px; background: url(../img/mirai/bg_circle.png) no-repeat center/contain; mix-blend-mode: multiply; } .point3-diagnosis__item > * { position: relative; z-index: 2; } .point3-diagnosis__item:not(:last-of-type) { margin-bottom: 10.6vw; } .point3-diagnosis__head { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: 1.1em auto; grid-column-gap: 16px; font-weight: 700; color: var(--color-mirai-main); } .point3-diagnosis__head-icon { grid-column: 1; grid-row: 1/3; width: 64px; transform: translateY(-5px); } .point3-diagnosis__head-sub { line-height: 1.1; } .point3-diagnosis__head-sub { font-size: clamp(1.2rem, 0.8470588235rem + 0.7352941176vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8470588235rem + 0.7352941176vw, 16 * 0.1rem)) { .point3-diagnosis__head-sub { font-size: 1.2rem; } } .point3-diagnosis__head-sub small { display: inline-block; margin-left: 1em; color: var(--color-mirai-accent); } .point3-diagnosis__head-main { font-size: clamp(1.6rem, 0.8941176471rem + 1.4705882353vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.8941176471rem + 1.4705882353vw, 24 * 0.1rem)) { .point3-diagnosis__head-main { font-size: 1.6rem; } } .point3-diagnosis__note { font-weight: 400; text-align: right; } .point3-diagnosis__note { margin-top: 10.6vw; } .point3-diagnosis__note { font-size: clamp(1rem, 0.64rem + 0.75vw, 1.6rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.64rem + 0.75vw, 16 * 0.1rem)) { .point3-diagnosis__note { font-size: 1rem; } } @media (max-width: 767.98px) { .point3-diagnosis__item:first-of-type .point3-diagnosis__head { margin-bottom: 6px; } .point3-diagnosis__item:nth-of-type(2)::before { left: inherit; right: 0; } .point3-diagnosis__item:nth-of-type(2) .point3-diagnosis__head { width: fit-content; margin-left: auto; } } @media (min-width: 768px) { .point3__image { margin-bottom: 40px; } .point3-diagnosis { padding: 104px 32px; } .point3-diagnosis__item { padding: 32px 0 32px 32px; } .point3-diagnosis__item::before { width: 210px; height: 210px; } .point3-diagnosis__item:not(:last-of-type) { margin-bottom: 48px; } .point3-diagnosis__head { grid-template-columns: 92px 1fr; grid-column-gap: 16px; } .point3-diagnosis__head-icon { width: 92px; transform: translateY(-10px); } .point3-diagnosis__note { margin-top: 52px; } } @media (min-width: 1280px) { .point3-diagnosis__item:nth-of-type(2) { width: calc(100% - 152px); margin-left: auto; } } /*　.point4　*/ .point4-list { display: flex; flex-wrap: wrap; flex-direction: column; } .point4-list { gap: 6.4vw; } .point4-list__item { overflow: hidden; border-top-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #dde8eb; } .point4-list__image-area { position: relative; } .point4-list__image-area { aspect-ratio: 2.04375; } @supports not (aspect-ratio: 2.04375) { .point4-list__image-area { position: relative; padding-top: 48.9296636086%; } .point4-list__image-area > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .point4-list__image-area img { object-fit: cover; object-position: center; width: 100%; max-width: unset; height: 100%; } .point4-list__head { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; padding: 2px; background-color: rgba(22, 145, 152, 0.8); color: #fff; } .point4-list__head { font-size: clamp(1.6rem, 1.36rem + 0.5vw, 2rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.36rem + 0.5vw, 20 * 0.1rem)) { .point4-list__head { font-size: 1.6rem; } } .point4-list__text-area { box-sizing: border-box; padding: 5.33vw 6.4vw; } .point4-list__text-area p + p { margin-top: 1.8em; } .point4-list__text-area small { font-size: 1.2rem; } @media (min-width: 768px) { .point4-list { gap: 20px; } .point4-list__item { border-top-left-radius: 16px; border-bottom-right-radius: 16px; } .point4-list__image-area { aspect-ratio: 1.4666666667; } @supports not (aspect-ratio: 1.4666666667) { .point4-list__image-area { position: relative; padding-top: 68.1818181818%; } .point4-list__image-area > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .point4-list__head { padding: 6px; } .point4-list__text-area { padding: 16px 20px 24px; } } @media (min-width: 900px) { .point4-list { flex-direction: row; justify-content: center; width: fit-content; margin: auto; } .point4-list__item { width: min((100% - 20px) / 2, 352px); } } @media (min-width: 1280px) { .point4-list__item { width: min((100% - 40px) / 3, 352px); } } /*　.mirai-flow　*/ .mirai-flow { padding-bottom: 26.6vw; } .mirai-flow__inner { padding: 13.86vw 5.33vw; } .mirai-flow-list + .mirai-flow-list { position: relative; } .mirai-flow-list + .mirai-flow-list { margin-top: 12.5vw; } .mirai-flow-list + .mirai-flow-list::after { content: ""; display: inline-block; position: absolute; bottom: calc(100% + 4.26vw); left: 16px; width: 24px; height: 15px; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2212%22%20viewBox%3D%220%200%2022%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11%2011.375L0.607694%200.125L21.3923%200.125002L11%2011.375Z%22%20fill%3D%22%23DF5E47%22%2F%3E%3C%2Fsvg%3E"); } .mirai-flow-list__item { box-sizing: border-box; position: relative; padding: 4.1vw 8vw 4.1vw 14.93vw; border-radius: 36px; background: #dde8eb; color: var(--color-mirai-main); text-align: center; } .mirai-flow-list__item img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .mirai-flow-list__item img { width: 14.9vw; } .mirai-flow-list__item:not(:last-of-type) { margin-bottom: 12.5vw; } .mirai-flow-list__item:not(:last-of-type)::after { content: ""; display: inline-block; position: absolute; top: calc(100% + 4.26vw); left: 16px; width: 24px; height: 15px; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2212%22%20viewBox%3D%220%200%2022%2012%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M11%2011.375L0.607694%200.125L21.3923%200.125002L11%2011.375Z%22%20fill%3D%22%23DF5E47%22%2F%3E%3C%2Fsvg%3E"); } @media (min-width: 768px) { .mirai-flow { padding-bottom: 160px; } .mirai-flow__inner { padding-top: 110px; padding-bottom: 110px; } .mirai-flow-list { width: 442px; margin: auto; } .mirai-flow-list + .mirai-flow-list { margin-top: 84px; } .mirai-flow-list + .mirai-flow-list::after { bottom: calc(100% + 32px); left: 20px; width: 32px; height: 20px; } .mirai-flow-list__item { padding: 14px 48px 14px 72px; font-size: 2.4rem; } .mirai-flow-list__item img { width: 72px; } .mirai-flow-list__item:not(:last-of-type) { margin-bottom: 84px; } .mirai-flow-list__item:not(:last-of-type)::after { top: calc(100% + 32px); left: 20px; width: 32px; height: 20px; } } @media (min-width: 1280px) { .mirai-flow__inner { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 211px; } .mirai-flow-list + .mirai-flow-list { margin-top: 0; } .mirai-flow-list + .mirai-flow-list::after { top: 50%; right: 100%; left: inherit; bottom: inherit; transform: translateY(-50%); width: 211px; height: 486px; background-image: url(../img/mirai/ico_arrow.png); } } /*　.mirai-case　*/ .mirai-case { padding-bottom: 26.6vw; } .mirai-case__inner { padding: 13.86vw 5.33vw; } .mirai-case__meta { font-weight: 700; text-align: center; color: var(--color-mirai-accent); } .mirai-case__meta { margin-bottom: 6.4vw; } .mirai-case__meta-uni { font-size: clamp(3.2rem, 2.48rem + 1.5vw, 4.4rem); } @supports not (font-size: clamp(32 * 0.1rem, 2.48rem + 1.5vw, 44 * 0.1rem)) { .mirai-case__meta-uni { font-size: 3.2rem; } } .mirai-case__meta-name { margin-bottom: 6.4vw; } .mirai-case__meta-name { font-size: clamp(1.2rem, 0.72rem + 1vw, 2rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.72rem + 1vw, 20 * 0.1rem)) { .mirai-case__meta-name { font-size: 1.2rem; } } .mirai-case__meta-head { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .mirai-case__meta-head { font-size: 1.6rem; } } .mirai-case__portrait { margin-bottom: 10.6vw; } .mirai-case__portrait img { margin: auto; } .mirai-case__portrait img { width: 48vw; } .mirai-case__text-area p + p { margin-top: 1.8em; } .mirai-case__text-area ol { margin-bottom: 1.8em; counter-reset: num; } .mirai-case__text-area ol li { position: relative; padding-left: 1em; } .mirai-case__text-area ol li::before { content: counter(num) "."; counter-increment: num; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } @media (min-width: 768px) { .mirai-case { padding-bottom: 200px; } .mirai-case__inner { padding-top: 110px; padding-bottom: 136px; } .mirai-case__meta { margin-bottom: 38px; } .mirai-case__meta-name { margin-bottom: 38px; } .mirai-case__portrait { margin-bottom: 60px; } .mirai-case__portrait img { width: 240px; } } @media (min-width: 1280px) { .mirai-case__inner { display: grid; grid-template-columns: 1fr 240px; grid-gap: 80px 146px; padding-left: 216px; padding-right: 216px; } .mirai-case__meta { margin-bottom: 0; text-align: left; } .mirai-case__portrait { margin-bottom: 0; } .mirai-case__text-area { grid-column: 1/3; } } /* .p-wsdb-section */ .p-wsdb-section { background-color: var(--wsdb-section-bg, #ebebeb); } .p-wsdb-section__inner { padding-top: var(--wsdb-section-padding-top, 21.3vw); padding-bottom: var(--wsdb-section-padding-bottom, 26.6vw); } .p-wsdb-section__note { font-size: 1.2rem; color: var(--wsdb-section-note-color, #fcfcfc); text-align: right; } .p-wsdb-section__note { margin-top: 2.1vw; } @media (min-width: 768px) { .p-wsdb-section { --wsdb-section-padding-top: 140px; --wsdb-section-padding-bottom: 180px; } .p-wsdb-section__note { width: fit-content; margin-top: 16px; margin-left: auto; } } /* .p-wsdb-card */ .p-wsdb-card { display: grid; grid-template-columns: 100%; } .p-wsdb-card { grid-gap: 6.4vw; } .p-wsdb-card--text-only .p-wsdb-card__item { padding: 4.26vw 4.26vw 8.53vw; background-color: var(--color-wsdb-main); color: #fcfcfc; } .p-wsdb-card--text-only .p-wsdb-card__item h3 { color: #fcfcfc; } .p-wsdb-card--text-only .p-wsdb-card__item h3 { margin-bottom: 4.2vw; } .p-wsdb-card--text-only .p-wsdb-card__item ul li { position: relative; padding-left: 1em; } .p-wsdb-card--text-only .p-wsdb-card__item ul li::before { content: "・"; display: inline-block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; } .p-wsdb-card__item { box-sizing: border-box; padding: 4.26vw 5.33vw 8.53vw; border-top-left-radius: 16px; border-bottom-right-radius: 16px; background-color: #fcfcfc; } .p-wsdb-card__item img { margin-left: auto; margin-right: auto; } .p-wsdb-card__item img { width: 26.6vw; } .p-wsdb-card__item h3 { font-weight: 700; color: var(--color-wsdb-main); text-align: center; } .p-wsdb-card__item h3 { margin-bottom: 2.1vw; } .p-wsdb-card__item h3 { font-size: clamp(2rem, 1.76rem + 0.5vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.76rem + 0.5vw, 24 * 0.1rem)) { .p-wsdb-card__item h3 { font-size: 2rem; } } .p-wsdb-card__item h3 small { font-size: clamp(1.2rem, 0.96rem + 0.5vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.96rem + 0.5vw, 16 * 0.1rem)) { .p-wsdb-card__item h3 small { font-size: 1.2rem; } } @media (min-width: 768px) { .p-wsdb-card { grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } .p-wsdb-card--centered { display: flex; justify-content: center; width: fit-content; margin: auto; } .p-wsdb-card--centered .p-wsdb-card__item { max-width: 304px; } .p-wsdb-card--text-only { grid-template-columns: repeat(2, minmax(calc((100% - 20px) / 2), 538px)); width: fit-content; margin: auto; } .p-wsdb-card--text-only .p-wsdb-card__item { padding: 16px 24px 24px; } .p-wsdb-card--text-only .p-wsdb-card__item h3 { margin-bottom: 16px; } .p-wsdb-card__item { padding: 20px 20px 53px; } .p-wsdb-card__item img { width: 150px; } .p-wsdb-card__item h3 { margin-bottom: 8px; } .p-wsdb-card__item h3 small { display: block; } } @media (min-width: 1024px) { .p-wsdb-card:not(.p-wsdb-card--text-only) { grid-template-columns: repeat(3, minmax(calc((100% - 40px) / 3), 304px)); width: fit-content; margin: auto; } } @media (min-width: 1400px) { .p-wsdb-card:not(.p-wsdb-card--text-only) { grid-template-columns: repeat(4, 1fr); } .p-wsdb-card--text-only .p-wsdb-card__item { min-height: 230px; } } /* .wsdb-intro */ .wsdb-intro { padding-bottom: 21.3vw; } .wsdb-intro__inner { padding-top: 16vw; } .wsdb-intro__inner { padding-bottom: 14.4vw; } .wsdb-intro__head { font-weight: 700; text-align: center; color: var(--color-wsdb-main); } .wsdb-intro__head { margin-bottom: 6.4vw; } .wsdb-intro__head { font-size: clamp(2.4rem, 0rem + 5vw, 6.4rem); } @supports not (font-size: clamp(24 * 0.1rem, 0rem + 5vw, 64 * 0.1rem)) { .wsdb-intro__head { font-size: 2.4rem; } } .wsdb-intro__lead { margin-bottom: 6.4vw; } .wsdb-intro__note { box-sizing: border-box; padding: 2.13vw 6.4vw; background: rgba(0, 84, 144, 0.1); } .wsdb-intro__image { position: relative; } .wsdb-intro__image + .wsdb-intro__image { margin-top: 8.5vw; } .wsdb-intro__image::before { content: ""; display: inline-block; position: absolute; width: 93.6vw; background-color: var(--color-wsdb-main); } .wsdb-intro__image::before { bottom: -2.3vw; } .wsdb-intro__image::before { height: 38.5vw; } .wsdb-intro__image > * { position: relative; z-index: 2; } .wsdb-intro__image:nth-of-type(1)::before { left: 0; border-top-right-radius: 20vw; border-bottom-right-radius: 20vw; } .wsdb-intro__image:nth-of-type(1) figcaption { padding-left: 10.1vw; } .wsdb-intro__image:nth-of-type(2) { margin-left: auto; } .wsdb-intro__image:nth-of-type(2)::before { right: 0; border-top-left-radius: 20vw; border-bottom-left-radius: 20vw; } .wsdb-intro__image:nth-of-type(2) figcaption { text-align: center; } .wsdb-intro__image figure { box-sizing: border-box; } .wsdb-intro__image figure { width: 93.6vw; } .wsdb-intro__image figcaption { font-size: 1.2rem; color: #fcfcfc; } .wsdb-intro__image figcaption i { display: inline-block; width: 15px; height: 12px; margin-right: 6px; } .wsdb-intro__image figcaption i svg { width: 100%; height: 100%; } @media (min-width: 768px) { .wsdb-intro { padding-bottom: 120px; } .wsdb-intro__inner { --inner-max-width: 1198px; padding-top: 80px; padding-bottom: 16px; } .wsdb-intro__head { margin-bottom: 40px; } .wsdb-intro__lead { width: min(80%, 800px); margin: 0 auto 40px; } .wsdb-intro__note { width: 521px; margin-left: auto; padding: 16px 24px; } .wsdb-intro__image figure { width: min(90%, 1046px); } .wsdb-intro__image img { width: 702px; } .wsdb-intro__image::before { width: 95vw; height: 290px; } .wsdb-intro__image:nth-of-type(1)::before { border-top-right-radius: 150px; border-bottom-right-radius: 150px; } .wsdb-intro__image:nth-of-type(1) img { margin-left: auto; } .wsdb-intro__image:nth-of-type(1) figcaption { padding-left: 0; padding-right: clamp(42px, 125px - 83 * (100vw - 768px) / 256, 125px); text-align: right; } .wsdb-intro__image:nth-of-type(2)::before { border-top-left-radius: 150px; border-bottom-left-radius: 150px; } .wsdb-intro__image:nth-of-type(2) figcaption { padding-left: 244px; padding-right: 0; text-align: left; } } @media (min-width: 1280px) { .wsdb-intro__image-wrap { max-width: 1920px; margin: auto; } .wsdb-intro__image + .wsdb-intro__image { margin-top: clamp(0px, 80px - 80 * (100vw - 1600px) / 320, 80px); } .wsdb-intro__image::before { width: 1046px; } .wsdb-intro__image:nth-of-type(1) figure { padding-right: 64px; } .wsdb-intro__image:nth-of-type(2) figure { margin-left: auto; } } /* .wsdb-case */ .wsdb-case__lead { position: relative; width: fit-content; margin-left: auto; margin-right: auto; font-weight: 900; color: var(--color-wsdb-main); text-align: center; } .wsdb-case__lead { margin-bottom: 13.8vw; } .wsdb-case__lead { font-size: clamp(1.6rem, 0.4rem + 2.5vw, 3.6rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.4rem + 2.5vw, 36 * 0.1rem)) { .wsdb-case__lead { font-size: 1.6rem; } } .wsdb-case__lead::before, .wsdb-case__lead::after { content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 65px; background: url(../img/wsdb/img_leaf.png) no-repeat center/contain; } .wsdb-case__lead::before { right: calc(100% + 1em); } .wsdb-case__lead::after { left: calc(100% + 1em); transform: translateY(-50%) scaleX(-1); } @media (min-width: 768px) { .wsdb-case__lead { margin-bottom: 80px; } } .wsdb-case-list__item { box-sizing: border-box; overflow: hidden; padding: 6.4vw 0; background-color: #fff; border-top-left-radius: 16px; border-bottom-right-radius: 16px; } .wsdb-case-list__item:not(:last-of-type) { margin-bottom: 8.5vw; } .wsdb-case-list__item h3 { position: relative; font-weight: 900; color: var(--color-wsdb-main); } .wsdb-case-list__item h3 { margin-bottom: 6.1vw; } .wsdb-case-list__item h3 { font-size: clamp(1.6rem, 1.12rem + 1vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 1.12rem + 1vw, 24 * 0.1rem)) { .wsdb-case-list__item h3 { font-size: 1.6rem; } } .wsdb-case-list__item h3::before { content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: calc(100% + 0.5em); width: 100%; height: 3px; background-color: var(--color-wsdb-main); } .wsdb-case-list__logos { display: grid; grid-template-columns: 1fr 1fr; margin: auto; } .wsdb-case-list__logos { grid-gap: 6.4vw; } .wsdb-case-list__logos { max-width: 86.4vw; } @media (max-width: 767.98px) { .wsdb-case-list__item { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } } @media (min-width: 768px) { .wsdb-case-list__item { padding: 36px 68px; } .wsdb-case-list__item:not(:last-of-type) { margin-bottom: 40px; } .wsdb-case-list__item h3 { margin-bottom: 24px; } .wsdb-case-list__logos { grid-template-columns: repeat(3, 1fr); grid-gap: 48px 40px; max-width: 816px; } } /* .wsdb-why */ .wsdb-why-list { display: grid; grid-template-columns: 100%; } .wsdb-why-list { grid-gap: 6.4vw; } .wsdb-why-list__item { box-sizing: border-box; padding: 4.26vw 7.896vw 10.66vw; border-top-left-radius: 16px; border-bottom-right-radius: 16px; background-color: #fcfcfc; font-weight: 700; } .wsdb-why-list__item img { margin-left: auto; margin-right: auto; } .wsdb-why-list__item img { width: 39.4vw; } .wsdb-why-list__item h3 { font-weight: 900; color: var(--color-wsdb-main); text-align: center; } .wsdb-why-list__item h3 { margin-bottom: 2.6vw; } .wsdb-why-list__item h3 { font-size: clamp(2rem, 1.28rem + 1.5vw, 3.2rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.28rem + 1.5vw, 32 * 0.1rem)) { .wsdb-why-list__item h3 { font-size: 2rem; } } @media (min-width: 768px) { .wsdb-why-list { grid-template-columns: 1fr 1fr; place-content: center; width: fit-content; margin: auto; grid-gap: clamp(25px, 25px + 39 * (100vw - 768px) / 512, 64px); } .wsdb-why-list__item { --dot-list-item-margin: 16px; max-width: 516px; padding: 32px clamp(25px, 25px + 15 * (100vw - 768px) / 512, 40px) 48px; border-top-left-radius: 24px; border-bottom-right-radius: 24px; } .wsdb-why-list__item img { width: clamp(148px, 148px + 92 * (100vw - 768px) / 512, 240px); } .wsdb-why-list__item h3 { margin-bottom: 16px; } .wsdb-why-list__item:nth-of-type(2), .wsdb-why-list__item:nth-of-type(4) { --dot-list-item-margin: 26px; } } @media (min-width: 1280px) { .wsdb-why-list__item { min-height: 625px; } } /* .wsdb-feature */ .wsdb-feature { background-color: var(--color-wsdb-main); border-top-left-radius: 40px; border-top-right-radius: 40px; } .wsdb-feature { margin-top: -10.7vw; } @media (min-width: 768px) { .wsdb-feature { margin-top: -100px; border-top-left-radius: 80px; border-top-right-radius: 80px; } } /* .wsdb-new */ .wsdb-new { --wsdb-section-padding-bottom: 41.6vw; background-color: var(--color-wsdb-main); } @media (min-width: 768px) { .wsdb-new { --wsdb-section-padding-bottom: 280px; } } /* .wsdb-security */ .wsdb-security { position: relative; background: linear-gradient(to bottom, #016fbb 0 50%, #ebebeb 50% 100%); } .wsdb-security { margin-top: -15vw; } .wsdb-security::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fcfcfc; border-radius: 40px; } .wsdb-security > * { position: relative; z-index: 2; } @media (min-width: 768px) { .wsdb-security { --wsdb-section-padding-bottom: 108px; margin-top: -100px; } .wsdb-security::before { border-radius: 80px; } } /* .wsdb-flow */ .wsdb-flow { --wsdb-section-padding-top: 36.26vw; --wsdb-section-note-color: var(--color-wsdb-text); } .wsdb-flow { margin-top: -15vw; } @media (min-width: 768px) { .wsdb-flow { --wsdb-section-padding-top: 280px; margin-top: -100px; } } .wsdb-flow-list__item { box-sizing: border-box; display: grid; grid-template-columns: 24vw 1fr; place-items: center; color: var(--color-wsdb-main); } .wsdb-flow-list__item:not(:last-of-type) { position: relative; } .wsdb-flow-list__item:not(:last-of-type)::after { content: ""; position: absolute; width: 3px; height: 24px; background-color: var(--color-wsdb-main); } .wsdb-flow-list__icon { text-align: center; } .wsdb-flow-list__icon figcaption { --outfit-font-weight: 700; margin-bottom: -8px; line-height: 1.1; } .wsdb-flow-list__icon figcaption { font-size: clamp(2rem, 1.76rem + 0.5vw, 2.4rem); } @supports not (font-size: clamp(20 * 0.1rem, 1.76rem + 0.5vw, 24 * 0.1rem)) { .wsdb-flow-list__icon figcaption { font-size: 2rem; } } .wsdb-flow-list__icon img { width: 24vw; } .wsdb-flow-list__text { font-weight: 700; font-size: 1.6rem; text-align: center; } .wsdb-flow-list__text span { display: block; font-weight: 900; white-space: nowrap; } .wsdb-flow-list__text span { font-size: clamp(1.2rem, 0.96rem + 0.5vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.96rem + 0.5vw, 16 * 0.1rem)) { .wsdb-flow-list__text span { font-size: 1.2rem; } } @media (max-width: 767.98px) { .wsdb-flow-list__item { padding-top: 4.2vw; } .wsdb-flow-list__item { padding-bottom: 10.6vw; } .wsdb-flow-list__item:not(:last-of-type) { position: relative; } .wsdb-flow-list__item:not(:last-of-type)::after { bottom: 0; } .wsdb-flow-list__item:not(:last-of-type)::after { left: 11.7vw; } } @media (min-width: 768px) { .wsdb-flow-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: clamp(50px, 50px + 27 * (100vw - 768px) / 512, 77px) clamp(50px, 50px + 60 * (100vw - 768px) / 512, 110px); max-width: 870px; margin: 0 auto 40px; } .wsdb-flow-list__item { grid-template-columns: 100%; } .wsdb-flow-list__item:not(:last-of-type)::after { left: 100%; top: 50%; transform: translateY(-50%); height: 3px; width: clamp(50px, 50px + 60 * (100vw - 768px) / 512, 110px); } .wsdb-flow-list__item:nth-of-type(3)::after { display: none; } .wsdb-flow-list__icon img { width: 110px; } } .wsdb-support { box-sizing: border-box; padding: 6.4vw 5.33vw 8.53vw; background-color: #fcfcfc; border-top-left-radius: 16px; border-bottom-right-radius: 16px; color: var(--color-wsdb-main); } .wsdb-support { margin-top: 10.6vw; } .wsdb-support__head { font-weight: 900; text-align: center; } .wsdb-support__head { margin-bottom: 6.4vw; } .wsdb-support__head { font-size: clamp(2.4rem, 1.92rem + 1vw, 3.2rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.92rem + 1vw, 32 * 0.1rem)) { .wsdb-support__head { font-size: 2.4rem; } } .wsdb-support__icons { display: flex; justify-content: center; } .wsdb-support__icons { gap: 4.2vw; } .wsdb-support__icons { margin-bottom: 6.4vw; } .wsdb-support__icons img { width: 21.3vw; } .wsdb-support__icons img { height: 21.3vw; } .wsdb-support__item { display: grid; grid-template-columns: 5.8vw 1fr; font-weight: 700; } .wsdb-support__item { grid-gap: 2.6vw; } .wsdb-support__item { font-size: clamp(1.4rem, 0.8rem + 1.25vw, 2.4rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.8rem + 1.25vw, 24 * 0.1rem)) { .wsdb-support__item { font-size: 1.4rem; } } .wsdb-support__item + .wsdb-support__item { margin-top: 2.1vw; } .wsdb-support__check svg { width: 2.6vw; } .wsdb-support__check svg { height: 2vw; } @media (min-width: 768px) { .wsdb-support { margin-top: 80px; padding: 32px 24px 40px; } .wsdb-support__head { margin-bottom: 24px; } .wsdb-support__icons { margin-bottom: 36px; } .wsdb-support__icons img { width: 110px; height: 110px; } .wsdb-support__list { width: 598px; margin: 0 auto 36px; } .wsdb-support__item { grid-template-columns: 20px 1fr; grid-gap: 24px; } .wsdb-support__item + .wsdb-support__item { margin-top: 0; } .wsdb-support__check svg { width: 20px; height: 15px; } }