@charset "UTF-8"; /*** The new CSS reset - version 1.11.1 (last updated 24.10.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; } /* 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; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* noto-sans-jp-regular - japanese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; src: url("../fonts/noto-sans-jp-v54-japanese-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* noto-sans-jp-500 - japanese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans JP"; font-style: normal; font-weight: 500; src: url("../fonts/noto-sans-jp-v54-japanese-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* noto-sans-jp-700 - japanese */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; src: url("../fonts/noto-sans-jp-v54-japanese-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Montserrat"; font-style: normal; font-weight: 400; src: url("../fonts/montserrat-v30-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Montserrat"; font-style: normal; font-weight: 500; src: url("../fonts/montserrat-v30-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* montserrat-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Montserrat"; font-style: normal; font-weight: 700; src: url("../fonts/montserrat-v30-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* Base */ /* ============================================ */ body { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; background: #fff; color: #000; font-size: 1rem; line-height: 1; letter-spacing: 0.075em; overflow-wrap: anywhere; word-break: normal; line-break: strict; } @media (max-width: 767px) { body { font-size: 0.875rem; } } button:focus-visible, input:focus-visible, optgroup:focus-visible, select:focus-visible, textarea:focus-visible { outline: auto; } picture { display: block; font-size: 0; } img { width: 100%; height: auto; } a[href^="tel:"] { pointer-events: none; } @media (max-width: 767px) { a[href^="tel:"] { pointer-events: auto; } } /* =============================================== Layout =============================================== */ /* l-header */ /* ============================================ */ .l-header { background: rgba(51, 126, 237, 0.9); position: fixed; z-index: 5000; width: 100%; top: 0; left: 0; padding: 12px 40px; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } @media (max-width: 767px) { .l-header { padding: 6px 20px; } } .l-header.-active { -webkit-transform: translateY(0); transform: translateY(0); } .l-header__inner { 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: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 40px 0 0; } @media (max-width: 767px) { .l-header__inner { margin: 0; } } .l-header-logo { position: relative; z-index: 1000; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin: 0 1em 0 0; } .l-header-logo a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 1em; } @media (max-width: 767px) { .l-header-logo a { gap: 0.5em; } } .l-header-logo__img { width: auto; height: 60px; display: block; position: relative; } @media (max-width: 767px) { .l-header-logo__img { height: 40px; } } .l-header-logo__img img { height: 100%; } .l-header-logo__text { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; color: #fff; line-height: 1.6; font-size: 0.875rem; white-space: nowrap; } @media (max-width: 767px) { .l-header-logo__text { font-size: 0.75rem; } } .l-header-logo__text span { font-size: 1.25rem; } @media (max-width: 767px) { .l-header-logo__text span { font-size: 1.125rem; } } .l-header-en { color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-size: max(0.75rem, 1vw); line-height: 1.3; margin: 0 auto 0 0; position: relative; z-index: 1000; } .l-header-hamburger { position: absolute; top: 0; right: 0; z-index: 100; cursor: pointer; width: 84px; height: 100%; } @media (max-width: 767px) { .l-header-hamburger { width: 60px; } } .l-header-hamburger.-active { font-size: 0; } .l-header-hamburger__line { display: inline-block; height: 2px; position: absolute; top: 50%; right: 22px; will-change: transform; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .l-header-hamburger__line--upper { -webkit-transform: translateY(-12px); transform: translateY(-12px); width: 40px; } @media (max-width: 767px) { .l-header-hamburger__line--upper { -webkit-transform: translateY(-8px); transform: translateY(-8px); width: 24px; } } .l-header-hamburger__line--middle { -webkit-transition: opacity 0s; transition: opacity 0s; width: 30px; opacity: 1; } @media (max-width: 767px) { .l-header-hamburger__line--middle { width: 18px; } } .l-header-hamburger__line--lower { -webkit-transform: translateY(12px); transform: translateY(12px); width: 40px; } @media (max-width: 767px) { .l-header-hamburger__line--lower { -webkit-transform: translateY(8px); transform: translateY(8px); width: 24px; } } .l-header-hamburger.-active .l-header-hamburger__line { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .l-header-hamburger.-active .l-header-hamburger__line { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } } .l-header-hamburger.-active .l-header-hamburger__line--middle { -webkit-transition: opacity 0s; transition: opacity 0s; } .l-header-hamburger__line::before { content: ""; display: block; background: #fff; width: 100%; height: 100%; } .l-header-hamburger.-active .l-header-hamburger__line--upper { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .l-header-hamburger.-active .l-header-hamburger__line--middle { opacity: 0; } .l-header-hamburger.-active .l-header-hamburger__line--lower { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .l-header-menu { position: fixed; z-index: 10; width: 100%; top: 0; left: 0; bottom: 0; overflow: auto; height: 100svh; background: -webkit-linear-gradient(315deg, #337eed 65%, #00c0fa 100%); background: linear-gradient(135deg, #337eed 65%, #00c0fa 100%); visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); padding: 105px 0 40px; } @media (max-width: 767px) { .l-header-menu { padding: 64px 0 40px; } } .l-header-menu.-active { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), visibility 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .l-header-menu__item a { display: block; color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: 0.1em; font-size: 1.625rem; padding: 1em 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: opacity 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .l-header-menu__item a { font-size: 1rem; width: 100%; } } @media (max-width: 767px) { .l-header-menu__item:not(.l-header-menu__child__item) a { border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); } } .l-header-menu__item a:hover { opacity: 0.75; } .l-header-menu__child__item a { font-size: 1.375rem; } @media (max-width: 767px) { .l-header-menu__child__item a { font-size: 0.875rem; } } .l-header-menu__child__item a::before { content: ""; padding: 0 0.5em; } /* l-main */ /* ============================================ */ .l-main { background: #f8f8ff; } /* l-mv */ /* ============================================ */ .l-mv { margin: 84px 0 0; padding: 120px 0; position: relative; z-index: 10; background-image: url(../img/common/lower_mv.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } @supports (background-image: url(../img/common/lower_mv.webp)) { .l-mv { background-image: url(../img/common/lower_mv.webp); } } @media (max-width: 767px) { .l-mv { margin: 59px 0 0; padding: 80px 0; background-image: url(../img/common/lower_mv_sp.jpg); } @supports (background-image: url(../img/common/lower_mv_sp.webp)) { .l-mv { background-image: url(../img/common/lower_mv_sp.webp); } } } .l-mv__inner { 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; } .l-mv__head { color: #337eed; } .l-mv__head--white { color: #fff; } .l-mv__head__ja, .l-mv__head__en { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff; } .l-mv__head__ja.-active, .l-mv__head__en.-active { opacity: 1; -webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9), -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); -webkit-transform: translateZ(0); transform: translateZ(0); } .l-mv__head__ja { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.125rem; line-height: 1.6; letter-spacing: 0.075em; } @media (max-width: 767px) { .l-mv__head__ja { font-size: 0.875rem; } } .l-mv__head__en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 5.625rem; line-height: 1.4; letter-spacing: 0.075em; } @media (max-width: 767px) { .l-mv__head__en { font-size: 2.5rem; } } /* l-inner */ /* ============================================ */ .l-inner { max-width: 1280px; padding: 0 40px; width: 100%; margin: 0 auto; } @media (max-width: 767px) { .l-inner { padding: 0 20px; } } .l-inner--narrow { max-width: 880px; } /* l-intro */ /* ============================================ */ .l-intro { margin: 0 0 60px; } @media (max-width: 767px) { .l-intro { margin: 0 0 48px; } } .l-intro__desc { line-height: 1.8; } /* l-contact */ /* ============================================ */ .l-contact { overflow: hidden; position: relative; } .l-contact::before { content: ""; display: block; width: 100%; height: 100%; background: #337eed; position: absolute; top: 0; left: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; z-index: 0; } .l-contact.-active::before { -webkit-transform: translateY(0); transform: translateY(0); } .l-contact__head { margin: 0 0 32px; } .l-contact__container { opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); } .l-contact__container.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .l-contact__desc { color: #fff; line-height: 2; margin: 0 0 32px; } /* l-footer */ /* ============================================ */ .l-footer__content { background: -webkit-linear-gradient(315deg, #337eed 65%, #00c0fa 100%); background: linear-gradient(135deg, #337eed 65%, #00c0fa 100%); padding: 60px 0; overflow: hidden; } .l-footer__container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; gap: 64px; } @media (max-width: 1024px) { .l-footer__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 48px; } } .l-footer__logo { margin: 0 0 32px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 1em; } @media (max-width: 1024px) { .l-footer__logo { margin: 0 0 18px; } } @media (max-width: 767px) { .l-footer__logo { gap: 12px; } } .l-footer__logo__mark { width: auto; height: 60px; display: block; position: relative; } @media (max-width: 767px) { .l-footer__logo__mark { height: 50px; } } .l-footer__logo__mark img { height: 100%; } .l-footer__logo__type { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.125rem; color: #fff; line-height: 1.4; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .l-footer__logo__type { font-size: 0.875rem; } } .l-footer__logo__type .-large { font-size: 1.5rem; } @media (max-width: 767px) { .l-footer__logo__type .-large { font-size: 1.25rem; } } .l-footer__contact, .l-footer__contact-en { color: #fff; line-height: 1.8; } .l-footer__contact { margin: 0 0 18px; } .l-footer__contact-en { font-size: 0.875rem; } @media (max-width: 767px) { .l-footer__contact-en { font-size: 0.75rem; } } .l-footer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3em; } @media (max-width: 1024px) { .l-footer__menu { gap: 3em 2em; } } @media (max-width: 767px) { .l-footer__menu { grid-template-columns: minmax(0, 1fr); } } .l-footer__menu__section:last-of-type { grid-area: 2/1/3/3; } @media (max-width: 1024px) { .l-footer__menu__section:last-of-type { grid-area: unset; } } .l-footer__menu__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 700; text-transform: uppercase; color: #aaa; font-size: 1.125rem; margin: 0 0 1em; } .l-footer__menu__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75em; } @media (max-width: 1024px) { .l-footer__menu__section:first-of-type .l-footer__menu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .l-footer__menu__list a { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: block; color: #fff; line-height: 1.4; white-space: nowrap; -webkit-transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1); transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1); } .l-footer__menu__list a:hover { opacity: 0.75; } @media (max-width: 767px) { .l-footer__menu__list a { font-size: 1rem; } } .l-footer__menu__section:last-of-type .l-footer__menu__item a::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url(../img/common/external-link_white.svg) no-repeat center/contain; margin: 0 0 0 0.5em; vertical-align: -0.1em; } .l-footer__copyright { font-size: 0.875rem; line-height: 1.4; text-align: center; color: #fff; background: #12426a; padding: 2em 0; } @media (max-width: 767px) { .l-footer__copyright { font-size: 0.75rem; } } .l-footer__copyright__inner { padding: 0 40px; } @media (max-width: 767px) { .l-footer__copyright__inner { padding: 0 20px; } } /* l-section */ /* ============================================ */ .l-section { padding: 200px 0; } @media (max-width: 767px) { .l-section { padding: 120px 0; } } .c-breadcrumb + .l-section { padding-top: 80px; } @media (max-width: 767px) { .c-breadcrumb + .l-section { padding-top: 40px; } } /* l-map */ /* ============================================ */ .l-map { font-size: 0; } @media (max-width: 767px) { .l-map { padding: 50% 0 0; height: 0; position: relative; } } .l-map iframe { width: 100%; } @media (max-width: 767px) { .l-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } /* =============================================== Component =============================================== */ /* c-button */ /* ============================================ */ .c-button { position: relative; 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-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 260px; max-width: 100%; padding: 24px 36px; overflow: hidden; background: #fff; border: 2px solid #337eed; border-radius: 48px; -webkit-transition: background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } @media (max-width: 767px) { .c-button { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 240px; padding: 20px 24px; } } .c-button:hover { background: #337eed; color: #000; } .c-button--white { border: 2px solid #fff; } .c-button--white:hover { background: #12426a; color: #fff; } .c-button__text { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1rem; color: #337eed; -webkit-transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } .c-button:hover .c-button__text { color: #fff; } .c-button__arrow { width: 16px; transition: -webkit-filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-button--white .c-button__arrow { color: #337eed; -webkit-filter: unset; filter: unset; } .c-button:hover .c-button__arrow { -webkit-transform: translateX(0.25em); transform: translateX(0.25em); -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* c-breadcrumb */ /* ============================================ */ .c-breadcrumb { line-height: 1.4; margin: 2em 0; } .c-breadcrumb a { color: #337eed; text-decoration: underline; } .c-breadcrumb a:hover { text-decoration: none; } /* c-card */ /* ============================================ */ .c-card__link { display: block; background: #fff; overflow: hidden; height: 100%; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .c-card__img { overflow: hidden; } .c-card__img img { aspect-ratio: 2/1; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-card__link:hover .c-card__img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .c-card__content { padding: 1em; } .c-card__time { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 700; margin: 0 0 12px; } .c-card__title { font-size: 1.125rem; letter-spacing: 0.075em; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; line-height: 1.6; position: relative; display: inline; padding-bottom: 1px; background-image: -webkit-gradient(linear, left top, right top, from(#000), to(#000)); background-image: -webkit-linear-gradient(left, #000, #000); background-image: linear-gradient(90deg, #000, #000); background-repeat: no-repeat; background-position: right bottom; background-size: 0 1px; -webkit-transition: background-size 0.4s cubic-bezier(0.39, 0.575, 0.565, 1); transition: background-size 0.4s cubic-bezier(0.39, 0.575, 0.565, 1); } .c-card__link:hover .c-card__title { background-position: left bottom; background-size: 100% 1px; } .c-card__category { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 0.5em; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-card__category li { font-size: 0.875rem; border-radius: 12px; background: #00c0fa; color: #fff; padding: 0.5em 1em; } /* c-form */ /* ============================================ */ .c-form__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.4; border-bottom: 1px solid #12426a; padding: 0.25em 0; color: #12426a; margin: 0 0 32px; } @media (max-width: 767px) { .c-form__title { font-size: 1.25rem; margin: 0 0 20px; } } .c-form__desc { line-height: 1.8; margin: 0 0 32px; } @media (max-width: 767px) { .c-form__desc { margin: 0 0 20px; } } .c-form__item { display: grid; grid-template-columns: 240px minmax(0, 1fr); } @media (max-width: 767px) { .c-form__item { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .c-form__item--text { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-form__item--textarea { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .c-form__item + .c-form__item { margin: 36px 0 0; } .c-form__label { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; 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-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .c-form__label .-required { color: #bd3500; font-size: 0.75rem; margin: 0 0 0 0.5em; } @media (max-width: 767px) { .c-form__label .-required { font-size: 0.75rem; } } .c-form__item--text input, .c-form__item--textarea textarea { width: 100% !important; line-height: 1.4; font-size: 1rem; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; color: #2b2b2b; padding: 8px 10px 8px; -webkit-box-shadow: unset; box-shadow: unset; margin: 0; } .c-form ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.4); } .c-form ::placeholder, .c-form ::-webkit-input-placeholder, .c-form ::-ms-input-placeholder, .c-form ::-moz-placeholder { color: rgba(0, 0, 0, 0.4); } .c-form__input--list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .c-form__input__radio { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; position: relative; padding: 0 0 0 26px !important; margin: 0 !important; border: unset !important; border-radius: unset !important; -webkit-box-shadow: none !important; box-shadow: none !important; background: unset !important; } .c-form__input__radio::before { content: ""; position: absolute; top: calc(50% + 1px); left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: solid 2px #ccc; -webkit-transition: border-color cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: border-color cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; } .c-form__input__radio.mfp_checked::before { border-color: #337eed; } .c-form__input__radio::after { content: ""; position: absolute; top: calc(50% + 1px); left: 4px; width: 12px; height: 12px; background-color: #337eed; border-radius: 50%; color: transparent; -webkit-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); -webkit-transition: -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s, -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; } .c-form__input__radio.mfp_checked::after { -webkit-transform: translateY(-50%) scale(1); transform: translateY(-50%) scale(1); } .c-form__input__radio__button { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .c-form__input__radio__text { font-size: 1rem; display: block; } .c-form__acceptance { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; text-align: center; margin: 36px auto 0; position: relative; } .c-form__acceptance__label { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .c-form__acceptance__desc { margin: 16px 0; line-height: 1.8; } .c-form__acceptance__desc a { color: #337eed; text-decoration: underline; } .c-form__acceptance__desc a:hover { text-decoration: none; } .c-form__acceptance__checkbox { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -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; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 8px; padding: 0 !important; margin: 0 auto !important; border: unset !important; border-radius: unset !important; -webkit-box-shadow: none !important; box-shadow: none !important; background: unset !important; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; } .c-form__acceptance__checkbox::before { margin: 1px 0 0; content: ""; display: block; background: #fff; width: 20px; height: 20px; border-radius: 4px; border: solid 2px #ccc; -webkit-transition: background cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s, border-color cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: background cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s, border-color cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; } .c-form__acceptance__checkbox.mfp_checked::before { background: #337eed; border-color: #337eed; } .c-form__acceptance__checkbox__button { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .c-form__acceptance__checkbox__text { font-size: 1rem; display: block; position: relative; } .c-form__acceptance__checkbox__text::before { content: ""; position: absolute; top: 9px; left: -22px; -webkit-transform: rotate(-45deg) scaleX(0); transform: rotate(-45deg) scaleX(0); -webkit-transform-origin: left; transform-origin: left; width: 12px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transition: -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; transition: transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s, -webkit-transform cubic-bezier(0.39, 0.575, 0.565, 1) 0.2s; } .c-form__acceptance__checkbox.mfp_checked .c-form__acceptance__checkbox__text::before { -webkit-transform: rotate(-45deg) scaleX(1); transform: rotate(-45deg) scaleX(1); } .c-form__acceptance__checkbox__text + div.mfp_err { white-space: normal; width: 100%; text-align: center; } .c-form__cta { margin: 36px 0 0; } .c-form__cta__wrapper { 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-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .c-form__cta__button.mfp_element_submit { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1rem; padding: 24px 0 24px 36px; width: 260px; max-width: 100%; overflow: hidden; background: #337eed; color: #fff; text-shadow: none; -webkit-box-shadow: none !important; box-shadow: none !important; border: 2px solid #337eed; border-radius: 48px; -webkit-transition: background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); } @media (max-width: 767px) { .c-form__cta__button.mfp_element_submit { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 240px; padding: 20px 0 20px 24px; } } .c-form__cta__button.mfp_element_submit:hover { background: #fff; color: #337eed; } .c-form__cta__arrow { width: 16px; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: 36px; pointer-events: none; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); transition: -webkit-filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .c-form__cta__arrow { right: 24px; } } .c-form__cta__button.mfp_element_submit:hover + .c-form__cta__arrow { -webkit-transform: translate(0.25em, -50%); transform: translate(0.25em, -50%); -webkit-filter: unset; filter: unset; } div#mfp_overlay_inner h4 { text-align: center; margin: 0 0 1em; } table#mfp_confirm_table tr th { font-weight: bold; } /* c-head */ /* ============================================ */ .c-head { color: #337eed; opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .c-head--white { color: #fff; } .c-head.-active { opacity: 1; -webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9), -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); -webkit-transform: translateZ(0); transform: translateZ(0); } .c-head__ja { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.125rem; line-height: 1.6; letter-spacing: 0.075em; } @media (max-width: 767px) { .c-head__ja { font-size: 0.875rem; } } .c-head__en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 5.625rem; line-height: 1.4; letter-spacing: 0.075em; } @media (max-width: 767px) { .c-head__en { font-size: 2.5rem; } } /* c-link */ /* ============================================ */ .c-link { display: grid; gap: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 767px) { .c-link { grid-template-columns: minmax(0, 1fr); } } .c-link__item { background: #fff; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 12px; padding: min(10vw, 80px) min(4vw, 80px); height: 100%; position: relative; } @media (max-width: 767px) { .c-link__item { padding: 6vw 6vw 20vw; } } .c-link__item--flex { display: grid; gap: 32px; grid-template-columns: 1fr min(12vw, 180px); } @media (max-width: 767px) { .c-link__item--flex { grid-template-columns: 1fr min(26vw, 180px); gap: 20px; } } .c-link__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.25rem; line-height: 1.4; letter-spacing: 0.075em; } @media (max-width: 767px) { .c-link__title { font-size: 1.125rem; } } .c-link__img { border-radius: 12px; overflow: hidden; } .c-link__img img { aspect-ratio: 4/3; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-link__item:hover .c-link__img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .c-link__desc { grid-area: 2/1/3/3; line-height: 1.8; } .c-link__arrow { position: absolute; bottom: min(2vw, 20px); right: min(2vw, 20px); width: 40px; height: 40px; border: 2px solid #337eed; border-radius: 12px; background: #fff; 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-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; } @media (max-width: 767px) { .c-link__arrow { bottom: 6vw; right: 6vw; border-radius: 8px; width: min(32px, 8.5333333333vw); height: min(32px, 8.5333333333vw); } } .c-link__arrow::before { content: ""; display: inline-block; width: 100%; height: 100%; background: #337eed; position: absolute; left: 0; top: 0; z-index: 10; pointer-events: none; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-link__item:hover .c-link__arrow::before { -webkit-transform: scale(1); transform: scale(1); } .c-link__arrow img { width: 12px; z-index: 10; } @media (max-width: 767px) { .c-link__arrow img { width: 10px; } } .c-link__item:hover .c-link__arrow img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* c-pager */ /* ============================================ */ .c-pager { 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; gap: 8px; } .c-pager__item { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; color: #337eed; -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .c-pager__number { font-size: 1.25rem; 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-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; border: 2px solid #337eed; border-radius: 50%; background: #fff; padding: 10px; } @media (max-width: 767px) { .c-pager__number { font-size: 1.125rem; width: 32px; height: 32px; } } .c-pager__number:hover { color: #fff; background: #337eed; } .c-pager__item.-first, .c-pager__item.-last, .c-pager__next, .c-pager__prev { font-size: 2rem; padding: 8px; margin: 0 4px; } .c-pager__item.-first:hover, .c-pager__item.-last:hover, .c-pager__next:hover, .c-pager__prev:hover { opacity: 0.75; } @media (max-width: 767px) { .c-pager__item.-first, .c-pager__item.-last, .c-pager__next, .c-pager__prev { font-size: 1.5rem; padding: 8px 4px; } } .c-pager__item.-current { color: #fff; background: #337eed; } /* p-index */ /* ============================================ */ .p-index-mv__inner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-index-mv__container { position: relative; width: 100%; height: 100svh; overflow: hidden; } @media (max-width: 767px) { .p-index-mv__container { height: auto; aspect-ratio: 1/1; } } .p-index-mv__curtain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 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; z-index: 10; } .p-index-mv__curtain__item { -webkit-box-flex: 1px; -webkit-flex: 1px; -ms-flex: 1px; flex: 1px; width: 100%; background: #fff; -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); } .p-index-mv__imgs { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; -webkit-transform-origin: center center; transform-origin: center center; } .p-index-mv__imgs.-stacked { left: 2em; bottom: 2em; width: auto; height: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 1em; -webkit-transform: none; transform: none; } .p-index-mv__img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(1.5); transform: translate(-50%, -50%) scale(1.5); width: 100%; height: 100%; visibility: visible; opacity: 0; } .p-index-mv__img:first-child { opacity: 1; } .p-index-mv__content { position: relative; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding: 0 0 10%; } @media (max-width: 767px) { .p-index-mv__content { padding: 0 0 32px; } } .p-index-mv__catch { -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 0 0 auto; } @media (max-width: 767px) { .p-index-mv__catch { margin: unset; } } .p-index-mv__catch h2 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; -webkit-transform: translateY(100%); transform: translateY(100%); font-size: max(2rem, 2.2222222222vw); line-height: 1.6; letter-spacing: 0.1em; color: #fff; text-shadow: 0px 0px 5px #337eed, 0px 0px 5px #337eed, 0px 0px 10px #337eed, 0px 0px 10px #337eed; } @media (max-width: 767px) { .p-index-mv__catch h2 { font-size: max(1.125rem, 4.8vw); text-shadow: 0px 0px 1px #337eed, 0px 0px 1px #337eed, 0px 0px 4px #337eed, 0px 0px 4px #337eed; } } .p-index-mv__header { -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); position: absolute; z-index: 10; width: 100%; top: 0; left: 0; margin: 12px 40px; mix-blend-mode: difference; } @media (max-width: 767px) { .p-index-mv__header { margin: 6px 20px; } } .p-index-mv__header__inner { -webkit-transform: translateY(100%); transform: translateY(100%); 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: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 40px 0 0; } @media (max-width: 767px) { .p-index-mv__header__inner { margin: 0; } } .p-index-mv__header-logo { position: relative; z-index: 10; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin: 0 1em 0 0; } .p-index-mv__header-logo a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 1em; } @media (max-width: 767px) { .p-index-mv__header-logo a { gap: 0.5em; } } .p-index-mv__header-logo__img { width: auto; height: 60px; display: block; position: relative; } @media (max-width: 767px) { .p-index-mv__header-logo__img { height: 40px; } } .p-index-mv__header-logo__img img { height: 100%; } .p-index-mv__header-logo__text { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; color: #fff; line-height: 1.6; font-size: 0.875rem; white-space: nowrap; } @media (max-width: 767px) { .p-index-mv__header-logo__text { font-size: 0.75rem; } } .p-index-mv__header-logo__text span { font-size: 1.25rem; } @media (max-width: 767px) { .p-index-mv__header-logo__text span { font-size: 1.125rem; } } .p-index-mv__header-en { color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-family: "Montserrat", sans-serif; font-size: max(0.75rem, 1vw); line-height: 1.3; margin: 0 auto 0 0; position: relative; z-index: 1000; } .p-index-mv__nav { -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%); position: absolute; left: 20px; top: 104px; z-index: 10; } .p-index-mv__nav__list { background: #fff; border-radius: 12px; padding: 40px; -webkit-transform: translateY(100%); transform: translateY(100%); } .p-index-mv__nav__item { position: relative; font-size: 1rem; font-weight: 500; } .p-index-mv__nav__item + .p-index-mv__header-en__nav__item { margin: 0.5em 0 0; } .p-index-mv__nav__item a { padding: 0.5em 1em; display: block; overflow: hidden; color: transparent; text-shadow: 0 -2em 0 #000, 0 0 0 #000; background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #000), color-stop(50%, transparent)) 0 100%; background: -webkit-linear-gradient(top, #000 50%, transparent 50%) 0 100%; background: linear-gradient(to bottom, #000 50%, transparent 50%) 0 100%; background-size: 100% 200%; -webkit-transition: text-shadow 0.2s, background-position 0.2s; transition: text-shadow 0.2s, background-position 0.2s; } .p-index-mv__nav__item a:hover { text-shadow: 0 0 0 #fff, 0 1.5em 0 #000; background-position: 0 0; } .p-index-mv__slider { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -10; -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } .p-index-mv__slider__img { height: 100%; } .p-index-topics { position: relative; } .p-index-topics__bg { position: absolute; overflow: hidden; z-index: -20; width: 100%; height: 100%; top: 0; left: 0; } .p-index-topics__bg::before { content: ""; background: url(../img/index/topics_bg.jpg) no-repeat right center/cover; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } @supports (background-image: url(../img/index/topics_bg.webp)) { .p-index-topics__bg::before { background-image: url(../img/index/topics_bg.webp); } } @media (max-width: 767px) { .p-index-topics__bg::before { background-image: url(../img/index/topics_bg_sp.jpg); } @supports (background-image: url(../img/index/topics_bg_sp.webp)) { .p-index-topics__bg::before { background-image: url(../img/index/topics_bg_sp.webp); background-position: center; } } } .p-index-topics__container { display: grid; grid-template-columns: -webkit-max-content minmax(0, 1fr); grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: -webkit-min-content 1fr; grid-template-rows: min-content 1fr; } @media (max-width: 1024px) { .p-index-topics__container { display: block; } } .p-index-topics__list { margin: 0 0 0 4vw; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; grid-area: 1/2/3/3; } @media (max-width: 1024px) { .p-index-topics__list { margin: 48px 0 0; } } @media (max-width: 767px) { .p-index-topics__list { overflow: auto; grid-template-columns: repeat(4, 240px); gap: 20px; } } .p-index-topics__item { -webkit-transform: translateY(100px); transform: translateY(100px); opacity: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); } @media (max-width: 767px) { .p-index-topics__item { -webkit-transform: translateY(0); transform: translateY(0); } } .p-index-topics__item.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .p-index-topics__category { margin: 24px 0 0; } @media (max-width: 767px) { .p-index-topics__category { margin: 16px 0 0; } } .p-index-topics__cta { margin: 32px 0 0; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } @media (max-width: 1024px) { .p-index-topics__cta { 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; } } .p-index-about { overflow: hidden; position: relative; } .p-index-about::before { content: ""; display: block; width: 100%; height: 100%; background: #337eed; position: absolute; top: 0; left: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; z-index: -10; } .p-index-about.-active::before { -webkit-transform: translateY(0); transform: translateY(0); } .p-index-about__head { margin: 0 0 32px; } .p-index-about__img { border-radius: 12px; overflow: hidden; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } @media (max-width: 767px) { .p-index-about__img { margin: 0 calc(50% - 50vw); border-radius: unset; } } .p-index-about__img.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .p-index-about__text { color: #fff; width: 100%; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); } .p-index-about__text.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .p-index-about__catch { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 2.25rem; line-height: 1.4; margin: 32px 0; } @media (max-width: 767px) { .p-index-about__catch { font-size: 1.5rem; } } .p-index-about__desc { line-height: 2; margin: 0 0 32px; } .p-index-about__cta { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media (max-width: 767px) { .p-index-about__cta { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-index-about__logo { position: absolute; top: 2%; right: 20px; width: 320px; height: auto; animation: logo-animation 1.5s ease-in-out infinite alternate-reverse; } @media (max-width: 767px) { .p-index-about__logo { width: 160px; } } @-webkit-keyframes logo-animation { 0% { -webkit-transform: translateY(-12px); transform: translateY(-12px); } 50% { -webkit-transform: translateY(12px); transform: translateY(12px); } 100% { -webkit-transform: translateY(12px); transform: translateY(12px); } } @keyframes logo-animation { 0% { -webkit-transform: translateY(-12px); transform: translateY(-12px); } 50% { -webkit-transform: translateY(12px); transform: translateY(12px); } 100% { -webkit-transform: translateY(12px); transform: translateY(12px); } } .p-index-research { position: relative; background: radial-gradient(circle at 50% 0%, rgba(0, 94, 234, 0.2) 0%, rgba(0, 94, 234, 0) 50%), -webkit-gradient(linear, left top, left bottom, from(#e9f3ff), to(#00c0fa)); background: -webkit-radial-gradient(50% 0%, circle, rgba(0, 94, 234, 0.2) 0%, rgba(0, 94, 234, 0) 50%), -webkit-linear-gradient(top, #e9f3ff 0%, #00c0fa 100%); background: radial-gradient(circle at 50% 0%, rgba(0, 94, 234, 0.2) 0%, rgba(0, 94, 234, 0) 50%), linear-gradient(to bottom, #e9f3ff 0%, #00c0fa 100%); } .p-index-research__head { margin: 0 0 32px; } .p-index-research__catch { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .p-index-research__catch--white { color: #fff; } .p-index-research__catch.-active { opacity: 1; -webkit-transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9), -webkit-transform 0.4s cubic-bezier(0.38, 1.72, 0.93, 0.9); -webkit-transform: translateZ(0); transform: translateZ(0); } .p-index-research__container { margin: 0 0 60px; } @media (max-width: 767px) { .p-index-research__container { margin: 0 0 48px; } } .p-index-research__catch { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 2.25rem; letter-spacing: 0.075em; line-height: 1.4; margin: 0 0 1em; } @media (max-width: 767px) { .p-index-research__catch { font-size: 1.5rem; } } .p-index-research__catch span { font-size: 1.75rem; } @media (max-width: 767px) { .p-index-research__catch span { font-size: 1.25rem; } } .p-index-research__panel { position: -webkit-sticky; position: sticky; top: 100px; margin: 0; background: #fff; border-radius: 12px; overflow: hidden; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -webkit-transform-origin: top center; transform-origin: top center; -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: opacity 0.2s ease, -webkit-transform 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease, -webkit-transform 0.2s ease; } @media (max-width: 767px) { .p-index-research__panel { top: 80px; } } .p-index-research__panel + .p-index-research__panel { margin: 40px 0 0; } @media (max-width: 767px) { .p-index-research__panel + .p-index-research__panel { margin: 32px 0 0; } } .p-index-research__link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 10; padding: 60px 80px; aspect-ratio: 2/1; } @media (max-width: 767px) { .p-index-research__link { padding: 40px 32px; aspect-ratio: 1/1; } } .p-index-research__img { position: absolute; top: 0; left: 0; z-index: -10; width: 100%; height: 100%; } .p-index-research__img img { -webkit-filter: opacity(0.5); filter: opacity(0.5); height: 100%; -o-object-fit: cover; object-fit: cover; } .p-index-research__text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media (max-width: 767px) { .p-index-research__text { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 100%; } } .p-index-research__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 2.25rem; line-height: 1.4; color: #fff; text-shadow: 0px 0px 4px #000; } @media (max-width: 767px) { .p-index-research__title { font-size: 1.25rem; line-height: 1.6; } } .p-index-research__desc { line-height: 2; } .p-index-research__arrow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 64px; height: 64px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; background: #fff; border: 2px solid #337eed; border-radius: 12px; -webkit-transition: background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .p-index-research__arrow { width: 52px; height: 52px; margin: 0 0 0 auto; } } .p-index-research__link:hover .p-index-research__arrow { -webkit-transform: translateX(0.25em); transform: translateX(0.25em); background: #337eed; } .p-index-research__arrow img { width: 16px; transition: -webkit-filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .p-index-research__arrow img { width: 12px; } } .p-index-research__link:hover .p-index-research__arrow img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .p-index-research__cta { 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; } .p-index-research #panel01 { --index: 1; } .p-index-research #panel02 { --index: 2; } .p-index-research #panel03 { --index: 3; } .p-index-research #panel04 { --index: 4; } .p-index-research #panel05 { --index: 5; } .p-index-research #panel06 { --index: 6; } @supports (animation-timeline: view()) { .p-index-research .p-index-research__panel { --index0: calc(var(--index) - 1); /* 0-based index */ --reverse-index: calc(var(--numcards) - var(--index0)); /* reverse index */ --reverse-index0: calc(var(--reverse-index) - 1); /* 0-based reverse index */ } @-webkit-keyframes scale { to { -webkit-transform: scale(calc(1.1 - 0.1 * var(--reverse-index))); transform: scale(calc(1.1 - 0.1 * var(--reverse-index))); opacity: 0; } } @keyframes scale { to { -webkit-transform: scale(calc(1.1 - 0.1 * var(--reverse-index))); transform: scale(calc(1.1 - 0.1 * var(--reverse-index))); opacity: 0; } } .p-index-research #panels { --numcards: 6; view-timeline-name: --cards-element-scrolls-in-body; } .p-index-research .p-index-research__panel { --start-range: calc(var(--index0) / var(--numcards) * 100%); --end-range: calc((var(--index)) / var(--numcards) * 100%); padding-top: calc(var(--index) * var(--card-top-offset)); -webkit-animation: linear scale forwards; animation: linear scale forwards; animation-timeline: --cards-element-scrolls-in-body; animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range); } } .p-index-medical { background: -webkit-gradient(linear, left top, left bottom, from(#00c0fa), to(#e9f3ff)); background: -webkit-linear-gradient(top, #00c0fa 0%, #e9f3ff 100%); background: linear-gradient(to bottom, #00c0fa 0%, #e9f3ff 100%); overflow: hidden; position: relative; } .p-index-medical__canvas { position: absolute; left: 0; top: 0; height: 100%; z-index: 0; } .p-index-medical__head { margin: 0 0 32px; } .p-index-medical__container { display: grid; grid-template-columns: -webkit-max-content minmax(0, 1fr); grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: -webkit-min-content 1fr; grid-template-rows: min-content 1fr; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); } @media (max-width: 1024px) { .p-index-medical__container { display: block; } } .p-index-medical__container.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .p-index-medical__tab { background: #fff; border-radius: 12px; padding: 32px; width: 320px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; 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-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 0 32px; gap: 0.75em; } @media (max-width: 1024px) { .p-index-medical__tab { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; } } @media (max-width: 767px) { .p-index-medical__tab { gap: 8px; padding: 20px; } } .p-index-medical__tab__item { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.125rem; cursor: pointer; color: #337eed; border: 2px solid #337eed; background: #fff; padding: 0.5em 1em; border-radius: 48px; -webkit-transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), background 0.2s cubic-bezier(0.39, 0.575, 0.565, 1); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .p-index-medical__tab__item { font-size: 1rem; } } .p-index-medical__tab__item:hover, .p-index-medical__tab__item.-active { color: #fff; background: #337eed; opacity: 1; } .p-index-medical__tab__item.-active { pointer-events: none; } .p-index-medical__content { margin: 0 0 0 4vw; } @media (max-width: 1024px) { .p-index-medical__content { margin: 0 0 32px; } } .p-index-medical__panel { display: none; } .p-index-medical__panel.-show { display: block; -webkit-animation: panel-show 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; animation: panel-show 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; } @-webkit-keyframes panel-show { from { opacity: 0; } to { opacity: 1; } } @keyframes panel-show { from { opacity: 0; } to { opacity: 1; } } .p-index-medical__link { 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: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; background: #fff; border-radius: 12px; overflow: hidden; } @media (max-width: 767px) { .p-index-medical__link { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-index-medical__text { 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; padding: 24px; } .p-index-medical__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 2.25rem; letter-spacing: 0.075em; line-height: 1.4; } @media (max-width: 767px) { .p-index-medical__title { font-size: 1.5rem; } } .p-index-medical__desc { line-height: 2; } .p-index-medical__img { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 20%; overflow: hidden; } @media (max-width: 767px) { .p-index-medical__img { width: 100%; } } .p-index-medical__img img { height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } @media (max-width: 767px) { .p-index-medical__img img { height: auto; -o-object-fit: unset; object-fit: unset; aspect-ratio: 2/1; } } .p-index-medical__link:hover .p-index-medical__img img { -webkit-transform: scale(1.1); transform: scale(1.1); } @media (max-width: 1024px) { .p-index-medical__cta { 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; } } .p-index-student { overflow: hidden; } .p-index-student__head { margin: 0 0 32px; } .p-index-student__container { display: grid; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 8vw; grid-template-columns: minmax(0, 1fr) 400px; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px); -webkit-transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1), opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 1s linear(0, 1.32, 0.87, 1.05, 0.98, 1.01, 1, 1); } @media (max-width: 1024px) { .p-index-student__container { grid-template-columns: 320px minmax(0, 1fr); } } @media (max-width: 767px) { .p-index-student__container { gap: 64px; grid-template-columns: minmax(0, 1fr); } } .p-index-student__container.-active { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .p-index-student__desc { line-height: 2; margin: 0 0 32px; } @media (max-width: 767px) { .p-index-student__slider { padding: 0 40px; } } .p-index-student__slider__img { border-radius: 12px; overflow: hidden; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* p-about */ /* ============================================ */ .p-about { overflow: hidden; } .p-about__thumbnail { margin: 0 0 48px; border-radius: 12px; overflow: hidden; } @media (max-width: 767px) { .p-about__thumbnail { margin: 0 calc(50% - 50vw) 48px; border-radius: unset; } } .p-about__cta { margin: 48px 0 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media (max-width: 767px) { .p-about__cta { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } /* p-contact */ /* ============================================ */ .p-contact { background: #fff; } .p-contact__desc { margin: 0 0 60px; line-height: 2; text-align: center; } @media (max-width: 767px) { .p-contact__desc { margin: 0 0 48px; text-align: left; } } .p-contact__desc a { color: #337eed; text-decoration: underline; } .p-contact__desc a:hover { text-decoration: none; } .p-contact__cta { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } /* p-greeting */ /* ============================================ */ .p-greeting__container { display: grid; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 4vw; grid-template-columns: minmax(0, 1fr) 400px; } @media (max-width: 767px) { .p-greeting__container { gap: 32px; grid-template-columns: minmax(0, 1fr); } } .p-greeting__desc { line-height: 2; } .p-greeting__img { border-radius: 12px; overflow: hidden; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin: 0 0 32px; } @media (max-width: 767px) { .p-greeting__img { margin: 0 0 24px; } } .p-greeting__name { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.5rem; text-align: right; } @media (max-width: 767px) { .p-greeting__name { font-size: 1.25rem; } } .p-greeting__name span { margin: 0 1em 0 0; font-size: 1.25rem; } @media (max-width: 767px) { .p-greeting__name span { font-size: 1rem; } } .p-greeting__cta { margin: 48px 0 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media (max-width: 767px) { .p-greeting__cta { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } /* p-privacy */ /* ============================================ */ .p-privacy__section + .p-privacy__section { margin: 48px 0 0; } .p-privacy__section__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.2; border-bottom: 1px solid #12426a; padding: 0.25em 0; color: #12426a; margin: 0 0 32px; } @media (max-width: 767px) { .p-privacy__section__title { font-size: 1.25rem; } } .p-privacy__section__desc { line-height: 1.8; } .p-privacy__section__desc ul, .p-privacy__section__desc ol { margin: 1em 0 0; } .p-privacy__section__desc ol li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .p-privacy__section__desc ul { list-style-type: disc; padding-left: 1.5em; } .p-privacy__section__desc ol li { counter-increment: section; } .p-privacy__section__desc ol li::before { content: "(" counter(section) ")"; white-space: nowrap; margin: 0 0.5em 0 0; } /* p-staff */ /* ============================================ */ .p-staff__section + .p-staff__section { margin: 48px 0 0; } .p-staff__section__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.2; border-bottom: 1px solid #12426a; padding: 0.25em 0; color: #12426a; margin: 0 0 32px; } @media (max-width: 767px) { .p-staff__section__title { font-size: 1.25rem; } } .p-staff__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } @media (max-width: 1024px) { .p-staff__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 600px) { .p-staff__list { grid-template-columns: minmax(0, 1fr); } } .p-staff__item { background: #fff; -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 12px; overflow: hidden; height: 100%; } .p-staff__item__text { padding: 36px; } @media (max-width: 1024px) { .p-staff__item__text { padding: 32px; } } @media (max-width: 600px) { .p-staff__item__text { padding: 20px; } } .p-staff__item__name { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; color: #337eed; font-size: 1.125rem; } @media (max-width: 767px) { .p-staff__item__name { font-size: 1rem; } } .p-staff a.p-staff__item__name { text-decoration: underline; -webkit-transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1); transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1); } .p-staff a.p-staff__item__name:hover { opacity: 0.75; text-decoration: underline; } .p-staff a.p-staff__item__name::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url(../img/common/external-link.svg) no-repeat center/contain; margin: 0 0 0 0.5em; vertical-align: -0.1em; } .p-staff__item__data { margin: 1em 0 0; } .p-staff__item__data__item { display: grid; grid-template-columns: 90px minmax(0, 1fr); } .p-staff__item__data__item + .p-staff__item__data__item { margin: 0.5em 0 0; } .p-staff__item__data__item dt::after { content: "："; } .p-staff__item__data__item dt, .p-staff__item__data__item dd { line-height: 1.4; } /* p-topics */ /* ============================================ */ .p-topics__list { margin: 0 0 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } @media (max-width: 1024px) { .p-topics__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } } @media (max-width: 600px) { .p-topics__list { grid-template-columns: minmax(0, 1fr); } } .p-topics__category { margin: 24px 0 0; } @media (max-width: 767px) { .p-topics__category { margin: 16px 0 0; } } /* p-topicsDetail */ /* ============================================ */ .p-topicsDetail { background: #fff; line-height: 1.8; } .p-topicsDetail__time { margin: 0 0 24px; } @media (max-width: 767px) { .p-topicsDetail__time { margin: 0 0 16px; } } .p-topicsDetail__title { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; font-size: 2.25rem; line-height: 1.4; margin: 0 0 32px; } @media (max-width: 767px) { .p-topicsDetail__title { font-size: 1.5rem; } } .p-topicsDetail__category { margin: 0 0 32px; } .p-topicsDetail__img { margin: 0 0 64px; } @media (max-width: 767px) { .p-topicsDetail__img { margin: 0 0 48px; } } .p-topicsDetail__content { margin: 0 0 48px; } .p-topicsDetail__content > * { margin: 50px 0; } .p-topicsDetail__content div, .p-topicsDetail__content p { line-height: 1.8; } .p-topicsDetail__content h1, .p-topicsDetail__content h2, .p-topicsDetail__content h3, .p-topicsDetail__content h4, .p-topicsDetail__content h5, .p-topicsDetail__content strong, .p-topicsDetail__content em, .p-topicsDetail__content b { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-weight: 700; } .p-topicsDetail__content img { width: auto; max-width: 100%; } .p-topicsDetail__content h1, .p-topicsDetail__content h2, .p-topicsDetail__content h3, .p-topicsDetail__content h4, .p-topicsDetail__content h5 { margin: 20px 0; } .p-topicsDetail__content h2 { line-height: 1.3; border-left: 11px solid #337eed; padding: 1rem 1.25rem; background: #e9f3ff; color: #337eed; font-size: 1.75rem; } @media (max-width: 767px) { .p-topicsDetail__content h2 { font-size: 1.25rem; } } .p-topicsDetail__content h3 { font-size: 1.5rem; line-height: 1.3; border-bottom: 2px solid #337eed; padding: 0 0 5px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media (max-width: 767px) { .p-topicsDetail__content h3 { font-size: 1.125rem; } } .p-topicsDetail__content h4 { font-size: 1.25rem; } @media (max-width: 767px) { .p-topicsDetail__content h4 { font-size: 1rem; } } .p-topicsDetail__content ol { list-style: decimal; padding-left: 1em; } .p-topicsDetail__content ul { list-style: disc; padding-left: 1em; } .p-topicsDetail__content a { text-decoration: underline; color: #337eed; } .p-topicsDetail__content a:hover { text-decoration: none; } .p-topicsDetail__cta { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } /* =============================================== Utility =============================================== */ /* display */ /* ============================================ */ .u-dis-i { display: inline; } .u-dis-ib { display: inline-block; } .u-dis-b { display: block; } .u-dis-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .u-pc-i { display: inline; } @media (max-width: 767px) { .u-pc-i { display: none; } } .u-sp-i { display: none; } @media (max-width: 767px) { .u-sp-i { display: inline; } } .u-pc-ib { display: inline-block; } @media (max-width: 767px) { .u-pc-ib { display: none; } } .u-sp-ib { display: none; } @media (max-width: 767px) { .u-sp-ib { display: inline-block; } } .u-pc-b { display: block; } @media (max-width: 767px) { .u-pc-b { display: none; } } .u-sp-b { display: none; } @media (max-width: 767px) { .u-sp-b { display: block; } } .u-pc-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media (max-width: 767px) { .u-pc-f { display: none; } } .u-sp-f { display: none; } @media (max-width: 767px) { .u-sp-f { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } /* underline */ /* ============================================ */ .u-underline { text-decoration: underline; } .u-underline--link:hover { text-decoration: none; } /* visibility */ /* ============================================ */ .u-hidden { visibility: hidden; } .u-visible { visibility: visible; } /* margin */ /* ============================================ */ .u-m-0 { margin: 0; } .u-mt-0 { margin-top: 0; } .u-mr-0 { margin-right: 0; } .u-mb-0 { margin-bottom: 0; } .u-ml-0 { margin-left: 0; } .u-mx-0 { margin-right: 0; margin-left: 0; } .u-my-0 { margin-top: 0; margin-bottom: 0; } .u-m-a { margin: auto; } .u-mt-a { margin-top: auto; } .u-mr-a { margin-right: auto; } .u-mb-a { margin-bottom: auto; } .u-ml-a { margin-left: auto; } .u-mx-a { margin-right: auto; margin-left: auto; } .u-my-a { margin-top: auto; margin-bottom: auto; } /* padding */ /* ============================================ */ .u-p-0 { padding: 0; } .u-pt-0 { padding-top: 0; } .u-pr-0 { padding-right: 0; } .u-pb-0 { padding-bottom: 0; } .u-pl-0 { padding-left: 0; } .u-px-0 { padding-right: 0; padding-left: 0; } .u-py-0 { padding-top: 0; padding-bottom: 0; } .u-p-a { padding: auto; } .u-pt-a { padding-top: auto; } .u-pr-a { padding-right: auto; } .u-pb-a { padding-bottom: auto; } .u-pl-a { padding-left: auto; } .u-px-a { padding-right: auto; padding-left: auto; } .u-py-a { padding-top: auto; padding-bottom: auto; } /* border */ /* ============================================ */ .u-b-none { border: none; } .u-bt-none { border-top: none; } .u-br-none { border-right: none; } .u-bb-none { border-bottom: none; } .u-bl-none { border-left: none; } /* text-align */ /* ============================================ */ .u-ta-l { text-align: left; } .u-ta-c { text-align: center; } .u-ta-r { text-align: right; } /* kerning */ /* ============================================ */ .u-palt { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; }/*# sourceMappingURL=style.css.map */