@charset "UTF-8"; :root { --font-family: "Zen Kaku Gothic New", sans-serif; --font-family-serif: "Noto Serif JP", serif; --font-family-en: "Inter", sans-serif; --main-color: #144790; --sub-color: #7ab241; --sub-color-dark: #6c9e3a; --sub-color-darker: #247c00; --tag-color-01: #6C9E3A; --tag-color-02: #D9635F; --tag-color-03: #AB830A; --tag-color-04: #144790; --c-white: #fff; --c-black: #000; --c-gray-lighter: #fafafa; --c-gray-light: #d9d9d9; --c-gray: #ccc; --c-gray-dark: #707070; --c-blue-light: #f4f7fb; --c-red: #E32929; --c-red50: rgba(255, 100, 100, .5); --header-height: 60px; --header-height-pc: 120px; --padding-inline-container: 5.3%; --layout-width: 1340; --max-layout-width: 1920; --fluid-ratio: calc(1 / var(--layout-width) * 100cqi); --parts-title-margin: 100px 0 -20px } @media only screen and (min-width: 768px) { :root { --padding-inline-container: 2%; --th-width16p: 16%; --th-width: 25%; --parts-title-margin: 100px 0 -50px } } @media (width >=1341px) { :root { --fluid-ratio: 1px } } header, footer, nav, main, section, aside, article { display: block } figure, figcaption { margin: 0; padding: 0 } :root { box-sizing: border-box } *, :before, :after { border-width: 0; border-style: solid; box-sizing: inherit; background-repeat: no-repeat } body { font-family: var(--font-family); font-size: .875rem; font-feature-settings: "palt"; line-height: 1.75; text-size-adjust: none; -webkit-text-size-adjust: 100%; overflow-scrolling: touch; background-color: var(--c-white) } @media only screen and (min-width: 768px) { body { font-size: 1rem } } html[lang=en] body { font-family: var(--font-family-en) } _::-webkit-full-page-media, _:future, :root body { font-feature-settings: "pkna" } body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td { margin: 0; padding: 0 } input, textarea { margin: 0; font-size: 100% } label { cursor: pointer } table { border-collapse: collapse; border-spacing: 0; font-size: 100% } fieldset, img { border: 0 } img { max-width: 100%; height: auto; vertical-align: middle } address, caption, cite, code, dfn, em, th, var { font-weight: 400; font-style: normal } ol, ul { list-style: none } caption, th { text-align: left } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400 } q:after, q:before { content: "" } abbr, acronym { border: 0 } button, input, select, textarea { font-family: inherit; font-size: 100% } button { padding: 0; background-color: transparent; cursor: pointer } html { overflow-y: scroll; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 30px) } @media only screen and (min-width: 1136px) { html { scroll-padding-top: calc(var(--header-height-pc) + 30px) } } html.is-menu { scroll-behavior: auto } html:has(.is-modal-open) { overflow: hidden } a { text-decoration: none } a:not([class]):has(img):focus-visible { transition: opacity .3s; opacity: .7 } @media (any-hover: hover) { a:not([class]):has(img):where(:any-link, :enabled, summary):hover { transition: opacity .3s; opacity: .7 } } aside.c-bg--aside .l-contents__inner { display: grid; row-gap: 80px } @media only screen and (min-width: 768px) { aside.c-bg--aside .l-contents__inner { row-gap: 160px } } .l-contents { padding: 80px var(--padding-inline-container); overflow: hidden } @media only screen and (min-width: 768px) { .l-contents { padding-block: 160px } } .p-page-header--image+.l-contents { padding-block-start: 40px } @media only screen and (min-width: 768px) { .p-page-header--image+.l-contents { padding-block: 160px } } .l-contents.l-contents--narrow { padding-block-start: 40px } @media only screen and (min-width: 768px) { .l-contents.l-contents--narrow { padding-block-start: 80px } } .l-contents.l-contents--compact { padding-block-start: unset } .l-contents__inner { max-width: 1340px; margin-inline: auto } .l-header { position: sticky; top: 0; background-color: #fff; z-index: 99; transition: background-color .5s } @media only screen and (min-width: 768px) { .is-scroll .l-header { background-color: #fff !important } } .is-home .l-header { background-color: transparent } .is-home .l-header:has(.l-gnav-menubtn[aria-expanded=true]) { background-color: #fff } .is-home:is(.is-scroll) .l-header { background-color: #fff } .l-header__inner { display: flex; justify-content: space-between; align-items: center; line-height: 1; padding-left: 20px } @media only screen and (min-width: 1136px) { .l-header__inner { display: block; padding: 0 } } .l-header__logo { color: #000; font-size: .75rem; font-weight: 700; display: flex; align-items: center; gap: 13px; height: 23px } @media only screen and (min-width: 1136px) { .l-header__logo { font-size: 1rem; height: 35px; gap: 23px; transition: color .3s; background-size: contain; background-position: 0 50%; position: absolute; z-index: 11; top: 15px; left: 40px } .is-scroll .l-header__logo { color: #fff; background-image: url(/assets/img/common/logo_white.svg) } } @media only screen and (min-width: 1650px) { .l-header__logo { transition: .3s; height: 50px; top: 35px; left: 50px } .is-scroll .l-header__logo { height: 35px; top: 15px; left: 70px } } .l-header__logo:after { content: ""; border-left: 1px solid; height: 20px } @media only screen and (min-width: 768px) { .l-header__logo:after { height: 30px } } @media only screen and (min-width: 1650px) { .l-header__logo:after { align-self: end } } .l-header__logo img { width: auto; height: 100% } @media only screen and (min-width: 1136px) { .l-header__logo img { transition: opacity .3s } .is-scroll .l-header__logo img { opacity: 0 } } .l-header__logo span { order: 3; white-space: nowrap } @media only screen and (min-width: 1650px) { .l-header__logo span { align-self: end; padding-bottom: 5px } } .l-gnav { display: none; position: absolute; z-index: 10; left: 0; top: var(--header-height); width: 100%; height: calc(100dvh - var(--header-height)) } @media only screen and (min-width: 1136px) { .l-gnav { display: block; position: relative; top: inherit; left: inherit; height: auto } } .l-gnav__inner { background-color: #fff; height: 100%; overflow-y: scroll; overscroll-behavior-y: contain; padding: 30px 20px } @media only screen and (min-width: 768px) { .l-gnav__inner { padding: 40px } } @media only screen and (min-width: 1136px) { .l-gnav__inner { background-color: transparent; height: var(--header-height-pc); display: flex; flex-direction: column-reverse; align-items: flex-end; padding: 0; opacity: 1; overflow-y: hidden } } @media only screen and (min-width: 1136px) { .l-gnav__lower { width: 100%; height: 50px; padding-right: 80px } } @media only screen and (min-width: 1136px) { .l-gnav__list { height: 50px; display: flex; gap: 40px; justify-content: end } } .l-gnav__item { border-bottom: 1px solid rgba(204, 204, 204, .5) } @media only screen and (min-width: 1136px) { .l-gnav__item { border: none; display: grid; place-items: center } } .l-gnav__link { color: #000; font-weight: 700; display: block; line-height: 55px; width: 100% } @media only screen and (min-width: 1136px) { .l-gnav__upper .l-gnav__link { line-height: 35px; font-size: .875rem } .l-gnav__upper .l-gnav__link:focus-visible { color: var(--main-color) } } @media only screen and (min-width: 1136px) and (any-hover: hover) { .l-gnav__upper .l-gnav__link:where(:any-link, :enabled, summary):hover { color: var(--main-color) } } @media only screen and (min-width: 1136px) { .is-scroll .l-gnav__upper .l-gnav__link:focus-visible { color: #fff; opacity: .7 } } @media only screen and (min-width: 1136px) and (any-hover: hover) { .is-scroll .l-gnav__upper .l-gnav__link:where(:any-link, :enabled, summary):hover { color: #fff; opacity: .7 } } @media only screen and (min-width: 1136px) { .l-gnav__lower .l-gnav__link { line-height: 2; transition: .2s; position: relative } .l-gnav__lower .l-gnav__link:focus-visible { color: var(--main-color) } .l-gnav__lower .l-gnav__link:focus-visible:after { content: ""; display: block; position: absolute; width: 100%; border-top: 1px solid var(--sub-color); bottom: 0 } } @media only screen and (min-width: 1136px) and (any-hover: hover) { .l-gnav__lower .l-gnav__link:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .l-gnav__lower .l-gnav__link:where(:any-link, :enabled, summary):hover:after { content: ""; display: block; position: absolute; width: 100%; border-top: 1px solid var(--sub-color); bottom: 0 } } .l-gnav__text { position: relative; display: inline-block; transition: .2s } .l-gnav__text span { display: block } .l-gnav__text span:nth-child(2) { display: none } @media only screen and (min-width: 1136px) { .l-gnav__text span:nth-child(2) { display: block; position: absolute; top: 100%; left: 0; width: 100% } } .l-gnav__btn { color: var(--c-black); font-weight: 700; text-align: left; width: 100%; line-height: 55px; background-image: url(/assets/img/common/ico_plus.svg); background-position: 100% 50% } @media only screen and (min-width: 1136px) { .l-gnav__btn { line-height: 50px; background-image: url(/assets/img/common/btn_gnav_open.svg); padding-right: 21px; position: relative } .l-gnav__lower .l-gnav__btn:after { content: ""; display: none; position: absolute; width: 100%; border-top: 1px solid var(--sub-color); bottom: 10px } .l-gnav__lower .l-gnav__btn:focus-visible:after { content: ""; display: block } } @media only screen and (min-width: 1136px) and (any-hover: hover) { .l-gnav__lower .l-gnav__btn:where(:any-link, :enabled, summary):hover:after { content: ""; display: block } } @media only screen and (min-width: 1136px) { .l-gnav__upper .l-gnav__btn { line-height: 35px } } .l-gnav__btn[aria-expanded=true] { color: var(--main-color); background-image: url(/assets/img/common/ico_minus.svg) } @media only screen and (min-width: 1136px) { .l-gnav__btn[aria-expanded=true] { background-image: url(/assets/img/common/btn_gnav_close.svg) } .l-gnav__btn[aria-expanded=true]:after { display: block } } @media only screen and (min-width: 1136px) { .l-gnav__btn--contact { display: grid; color: var(--c-white); background-color: var(--sub-color); border-radius: 40px; font-weight: 500; width: 144px; height: 35px; place-items: center; background-image: none; padding: 0; transition: .2s; overflow: hidden } } @media only screen and (min-width: 1136px) and (min-width: 1136px) { .l-gnav__btn--contact[aria-expanded=true] { color: var(--c-white); background-image: none; border: none } } @media only screen and (min-width: 1136px) { .l-gnav__btn--contact:focus-visible { color: var(--c-white); background-color: var(--main-color) } .is-scroll .l-gnav__btn--contact:focus-visible { color: var(--main-color); background-color: #fff } } @media only screen and (any-hover: hover) and (min-width: 1136px) { .l-gnav__btn--contact:where(:any-link, :enabled, summary):hover { color: var(--c-white); background-color: var(--main-color) } .is-scroll .l-gnav__btn--contact:where(:any-link, :enabled, summary):hover { color: var(--main-color); background-color: #fff } } html[lang=en] .l-gnav__btn--contact { display: block; background-image: none } @media only screen and (min-width: 1136px) { html[lang=en] .l-gnav__btn--contact { display: grid } } .l-gnav__upper { display: flex; flex-direction: column; gap: 40px } @media only screen and (min-width: 1136px) { .l-gnav__upper { flex-direction: row; justify-content: flex-end; gap: 16px; width: 100%; height: 70px; padding-right: 80px } .is-scroll .l-gnav__upper { background-color: var(--main-color) } } .l-gnav__list02 .l-gnav__item:last-child { border-bottom: unset } @media only screen and (min-width: 1136px) { .l-gnav__list02 { display: flex; align-items: center; gap: 16px } .l-gnav__list02 .l-gnav__item>a:not(.l-gnav__btn) { transition: color .3s, opacity .3s } .is-scroll .l-gnav__list02 .l-gnav__item>a:not(.l-gnav__btn) { color: var(--c-white) } } .l-gnav__utility { margin-top: 40px } @media only screen and (min-width: 1136px) { .l-gnav__utility { display: none } } .l-gnav__utility a { color: var(--c-black) } .l-gnav-search { display: grid; place-items: center } .l-gnav-search__toggle { display: none } @media only screen and (min-width: 1136px) { .l-gnav-search__toggle { display: block; width: 40px; height: 40px; transition: opacity .3s; background-image: url(/assets/img/common/ico_search_header_pc.svg) } .is-scroll .l-gnav-search__toggle { background-image: url(/assets/img/common/ico_search_header_pc_white.svg) } .l-gnav-search__toggle:focus-visible { opacity: .7 } } @media only screen and (min-width: 1136px) and (any-hover: hover) { .l-gnav-search__toggle:where(:any-link, :enabled, summary):hover { opacity: .7 } } .l-gnav-search__form { width: 100%; display: grid; grid-template-columns: auto 40px; gap: 8px } @media only screen and (min-width: 1136px) { .l-gnav-search__form { grid-template-columns: 614px 56px } } .l-gnav-search__text { border: 1px solid var(--c-gray); border-radius: 5px; padding: 10px; width: 100%; height: 40px } @media only screen and (min-width: 1136px) { .l-gnav-search__text { height: 56px } } .l-gnav-search__btn { background-image: url(/assets/img/common/ico_search_header.svg); background-size: cover } @media only screen and (min-width: 1136px) { .l-gnav-search__btn { height: 56px } } .l-gnav-language__list { display: grid; grid-template-columns: max-content 1px max-content; column-gap: 16px } @media only screen and (min-width: 1136px) { .l-gnav-language__list { margin-inline-start: 8px } } .l-gnav-language__item .l-gnav__link { position: relative; line-height: 35px; font-family: var(--font-family-en) } @media only screen and (min-width: 1136px) { .is-scroll .l-gnav-language__item .l-gnav__link { color: var(--c-white) } } html[lang=ja] .l-gnav-language__item:first-child .l-gnav__link, html[lang=en] .l-gnav-language__item:last-child .l-gnav__link { border-bottom: 2px solid var(--sub-color-dark) } .l-gnav-language__separator { min-width: 1px; height: 100%; margin-inline: auto; background-color: var(--c-gray) } .l-gnav-sub { visibility: hidden; opacity: 0; max-height: 0; transition: .3s; width: 100% } @media only screen and (min-width: 1136px) { .l-gnav-sub { max-width: 1340px; margin-inline: auto; position: absolute; left: 0; right: 0; top: 116px; padding: 60px; box-shadow: 0 0 30px #0000001a; background-color: #fff } } .l-gnav-sub[aria-hidden=false] { visibility: visible; opacity: 1; max-height: 1000px } @media only screen and (min-width: 1136px) { .l-gnav-sub[aria-hidden=false] { max-height: calc(100dvh - var(--header-height)) } } @media (height < 768px) { .l-gnav-sub[aria-hidden=false] { overflow-y: auto } } .l-gnav-sub--search { visibility: visible; opacity: 1 } @media only screen and (min-width: 1136px) { .l-gnav-sub--search { visibility: hidden; opacity: 0 } .l-gnav-sub--search[aria-hidden=false] { visibility: visible; opacity: 1 } } @media only screen and (min-width: 1136px) { .l-gnav-sub__inner { display: grid; grid-template-columns: calc((100% - 80px) / 3) auto; gap: 40px } } @media only screen and (min-width: 1136px) { .l-gnav-sub__inner--search { grid-template-columns: unset; justify-content: center } } .l-gnav-sub__title { display: none } @media only screen and (min-width: 1136px) { .l-gnav-sub__title { display: flex; align-items: center; gap: 8px; padding-left: 32px; height: 93px; border-radius: 5px; font-size: 1.25rem; font-weight: 700; color: var(--c-white); position: relative; overflow: hidden } .l-gnav-sub__title:before { content: ""; transition: .3s; display: block; position: absolute; left: 0; width: 100%; height: 100%; background-size: cover } .l-gnav-sub__title:after { content: ""; z-index: 1; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } } @media only screen and (min-width: 1136px) and (min-width: 768px) { .l-gnav-sub__title:after { background-size: 9px 6px; width: 20px; height: 20px } } .l-gnav-sub__title:focus-visible { color: var(--c-white) } .l-gnav-sub__title:focus-visible:before { transform: scale(1.1) } .l-gnav-sub__title:focus-visible:after { transform: translate(4px) } @media (any-hover: hover) { .l-gnav-sub__title:where(:any-link, :enabled, summary):hover { color: var(--c-white) } .l-gnav-sub__title:where(:any-link, :enabled, summary):hover:before { transform: scale(1.1) } .l-gnav-sub__title:where(:any-link, :enabled, summary):hover:after { transform: translate(4px) } } .l-gnav-sub__title span { z-index: 1 } .l-gnav-sub__title--01:before { background-image: url(/assets/img/common/bg_snav01.webp) } .l-gnav-sub__title--02:before { background-image: url(/assets/img/common/bg_snav02.webp) } .l-gnav-sub__title--03:before { background-image: url(/assets/img/common/bg_snav03.webp) } .l-gnav-sub__title--04:before { background-image: url(/assets/img/common/bg_snav04.webp) } .l-gnav-sub__title--05:before { background-image: url(/assets/img/common/bg_snav05.webp) } .l-gnav-sub__title--06:before { background-image: url(/assets/img/common/bg_snav06.webp) } .l-gnav-sub__list { display: grid; padding-bottom: 16px } @media only screen and (min-width: 1136px) { .l-gnav-sub__list { grid-template-columns: repeat(2, 1fr); gap: 0 40px; padding: 0 } } @media only screen and (min-width: 1136px) { .l-gnav-sub__item { display: none } } .l-gnav-sub__link { color: var(--c-black); line-height: 1.75; display: block; padding-block: 10px } @media only screen and (min-width: 1136px) { .l-gnav-sub__link { transition: color .5s; font-weight: 500; border-bottom: 1px solid var(--c-gray); padding: 14px 10px; display: flex; align-items: center; gap: 18px } .l-gnav-sub__link:after { content: ""; margin-left: auto; order: 3; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 14px; height: 14px } } @media only screen and (min-width: 1136px) and (min-width: 768px) { .l-gnav-sub__link:after { background-size: 9px 6px; width: 20px; height: 20px } } .l-gnav-sub__link[target=_blank] { gap: 8px; position: relative } @media only screen and (min-width: 1136px) { .l-gnav-sub__link[target=_blank] { gap: 0 } } .l-gnav-sub__link[target=_blank]:before { content: ""; position: absolute; top: 0; bottom: 0; margin-block: auto; right: -20px; background-image: url(/assets/img/common/ico_external_link_black.svg); background-size: contain; width: 12px; height: 12px; flex: 0 0 auto } @media only screen and (min-width: 1136px) { .l-gnav-sub__link[target=_blank]:before { position: relative; order: 2; margin: 0 } } .l-gnav-sub__link:focus-visible { color: var(--main-color) } .l-gnav-sub__link:focus-visible:after { transform: translate(4px) } .l-gnav-sub__link:focus-visible:before { background-image: url(/assets/img/common/ico_external_link.svg) } @media (any-hover: hover) { .l-gnav-sub__link:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .l-gnav-sub__link:where(:any-link, :enabled, summary):hover:after { transform: translate(4px) } .l-gnav-sub__link:where(:any-link, :enabled, summary):hover:before { background-image: url(/assets/img/common/ico_external_link.svg) } } .l-gnav-menubtn { flex: 0 0 auto; height: var(--header-height); width: var(--header-height); background-color: var(--sub-color-dark); display: flex; justify-content: center; align-items: center; z-index: 1 } @media only screen and (min-width: 1136px) { .l-gnav-menubtn { display: none } } .l-gnav-menubtn[aria-expanded=true] .l-gnav-menubtn__item { background-color: transparent } .l-gnav-menubtn[aria-expanded=true] .l-gnav-menubtn__item:before { transform: translateY(6px) rotate(-45deg) } .l-gnav-menubtn[aria-expanded=true] .l-gnav-menubtn__item:after { transform: translateY(-6px) rotate(45deg) } .l-gnav-menubtn__item { position: relative; width: 20px; height: 1px; background-color: var(--c-white); transition: .3s } .l-gnav-menubtn__item:before, .l-gnav-menubtn__item:after { content: ""; position: absolute; display: block; width: 20px; height: 1px; background-color: var(--c-white); transition: .3s } .l-gnav-menubtn__item:before { top: -6px } .l-gnav-menubtn__item:after { bottom: -6px } .l-unav { display: grid; gap: 10px 40px } @media only screen and (min-width: 768px) { .l-unav { display: flex; flex-wrap: wrap } } .l-header .l-unav { gap: 20px } .l-unav__link { color: #fff; font-size: .875rem; display: inline-flex; align-items: center; gap: 8px } @media only screen and (min-width: 768px) { .l-unav__link { transition: .3s } .l-unav__link:focus-visible { opacity: .7 } } @media only screen and (min-width: 768px) and (any-hover: hover) { .l-unav__link:where(:any-link, :enabled, summary):hover { opacity: .7 } } .l-unav__link[href$=".pdf"] { padding-right: 0 !important; position: relative; padding-right: 2em } .l-unav__link[href$=".pdf"]:after { content: ""/"PDFファイル"; position: relative; background-image: url(/assets/img/common/ico_pdf_white.svg); background-size: contain; width: 11px; height: 14px; margin: .3em 0 0 .5em } .l-unav__link[href$=".pdf"]:after { margin: 0 } .l-header .l-unav__link[href$=".pdf"]:after { background-image: url(/assets/img/common/ico_pdf.svg) } .l-footer { color: #fff; background-color: var(--main-color); padding: 40px 35px } @media only screen and (min-width: 768px) { .l-footer { padding: 80px 2% } } .l-footer__inner { display: grid; gap: 40px } @media only screen and (min-width: 768px) { .l-footer__inner { grid-template-columns: repeat(2, auto); gap: 60px 0 } } @media only screen and (min-width: 768px) { html[lang=en] .l-footer__inner { grid-template-columns: unset } } @media only screen and (min-width: 768px) { .l-footer__logo { grid-column: 1/-1; display: flex; align-items: baseline; gap: 16px } } .l-footer__logo span { display: none } @media only screen and (min-width: 768px) { .l-footer__logo span { display: block; font-weight: 500 } } .l-footer__small { font-family: var(--font-family-en); font-size: .75rem; text-align: center } @media only screen and (min-width: 768px) { .l-footer__small { display: grid; place-items: center; justify-content: flex-end; text-align: right } } @media only screen and (min-width: 768px) { .l-footer-nav { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 60px 42px } } @media only screen and (min-width: 1650px) { .l-footer-nav { gap: 60px 84px } } .l-footer-nav__item { border-bottom: 1px solid rgba(204, 204, 204, .5) } @media only screen and (min-width: 768px) { .l-footer-nav__item { border: none } } .l-footer-nav__link { color: #fff; font-size: 1rem; font-weight: 700; display: block; width: 100%; padding-block: 16px } @media only screen and (min-width: 768px) { .l-footer-nav__link { font-size: 1.125rem; padding-block: 20px; transition: opacity .5s } .l-footer-nav__link:focus-visible { opacity: .7 } } @media only screen and (min-width: 768px) and (any-hover: hover) { .l-footer-nav__link:where(:any-link, :enabled, summary):hover { opacity: .7 } } @media only screen and (min-width: 768px) { .l-footer-nav__item .l-footer-nav__link { border-bottom: 1px solid rgba(204, 204, 204, .5) } } .l-footer-snav { display: none; width: 100% } @media only screen and (min-width: 768px) { .l-footer-snav { display: block } } .l-footer-snav--contact { display: block } .l-footer-snav__list { display: grid; gap: 10px; padding-bottom: 16px } @media only screen and (min-width: 768px) { .l-footer-snav__list { gap: 18px; padding-top: 20px; padding-bottom: 0 } } .l-footer-snav__link { line-height: 1.75; color: #d9d9d9; width: 100%; transition: color .5s } .l-footer-snav__link[target=_blank] { display: flex; align-items: center; gap: 8px; padding-right: 0 !important; position: relative; padding-right: 2em } .l-footer-snav__link[target=_blank]:after { content: ""/"外部リンク"; position: relative; background-image: url(/assets/img/common/ico_external_link_white.svg); background-size: contain; width: 12px; height: 12px; margin: .5em 0 0 .5em } .l-footer-snav__link[target=_blank]:after { flex: 0 0 auto; margin: 0 } .l-footer-snav__link:focus-visible { color: #fff } @media (any-hover: hover) { .l-footer-snav__link:where(:any-link, :enabled, summary):hover { color: #fff } } .c-bg { border-radius: 5px; padding: 20px; background-color: var(--c-blue-light) } @media only screen and (min-width: 768px) { .c-bg { border-radius: 10px; padding: 40px } } @media only screen and (min-width: 1136px) { .c-bg { padding: 80px } } .c-bg--gray { background-color: var(--c-gray-lighter) } .c-bg--sky { background-image: url(/assets/img/common/bg_article.webp); background-position: 50% 100%; background-repeat: repeat } .c-bg--small { padding: 10px } @media only screen and (min-width: 768px) { .c-bg--small { padding: 20px } } .c-bg--aside { background-color: var(--c-blue-light); padding: 80px var(--padding-inline-container) } .c-bg-wide { overflow: unset; padding-inline: 0; border-image: linear-gradient(var(--c-blue-light), var(--c-blue-light)) fill 0; border-image-outset: 0 100vw 0 100vw } .c-bg-wide--dark { color: #fff; border-image: linear-gradient(var(--main-color), var(--main-color)) fill 0; border-image-outset: 0 100vw 0 100vw } .c-button-nf__wrap { display: grid; gap: 0 40px } @media only screen and (min-width: 768px) { .c-button-nf__wrap { grid-template-columns: repeat(2, 1fr); gap: 0 112px; align-items: end } .c-grid--1-2 .c-button-nf__wrap, .c-grid--1-2-btn .c-button-nf__wrap { gap: 0 40px } } @media only screen and (min-width: 768px) { .c-button-nf__wrap--3cols { grid-template-columns: repeat(3, 1fr); gap: 0 40px } } .c-button-nf { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 12px 10px 12px 16px; border-bottom: 1px solid var(--c-gray); color: #000; font-weight: 500; transition: .3s } @media only screen and (min-width: 768px) { .c-button-nf { padding: 30px 16px } } .c-button-nf:after { content: ""; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-button-nf:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-button-nf:focus-visible { color: var(--main-color) } .c-button-nf:focus-visible:after { transform: translate(3px) } @media (any-hover: hover) { .c-button-nf:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .c-button-nf:where(:any-link, :enabled, summary):hover:after { transform: translate(3px) } } .c-button-nf--anchor:after { transform: rotate(90deg) } .c-button-nf--anchor:focus-visible:after { transform: rotate(90deg) translate(3px) } @media (any-hover: hover) { .c-button-nf--anchor:where(:any-link, :enabled, summary):hover:after { transform: rotate(90deg) translate(3px) } } .c-button { position: relative; display: block; max-width: max-content; min-width: 266px; border: 1px solid var(--main-color); border-radius: 100px; background-color: var(--main-color); color: var(--c-white); font-size: .875rem; font-weight: 500; text-align: center; padding: 10px 40px; margin-inline: auto; overflow: hidden } .c-button.c-button--white { background-color: var(--c-white); border: 1px solid var(--main-color); color: var(--main-color) } .c-button:before, .c-button:after { content: ""; position: absolute; transition: .3s } .c-button:after { display: inline-block; inset: 0 18px 0 auto; margin: auto; background-size: contain } .c-button:focus-visible { background-color: var(--sub-color); border-color: var(--sub-color); color: var(--c-white) } @media (any-hover: hover) { .c-button:where(:any-link, :enabled, summary):hover { background-color: var(--sub-color); border-color: var(--sub-color); color: var(--c-white) } } @media only screen and (min-width: 768px) { .c-button { display: inline-block; max-width: unset; margin-inline: unset } } .c-button:after { width: 8px; height: 6px; background-image: url(/assets/img/common/ico_arrow_white.svg) } .c-button[href$=".pdf"]:not(.c-button--download):after { content: ""/"PDFファイル"; background-image: url(/assets/img/common/ico_pdf_white.svg); width: 10px; height: 12px } .c-button[target=_blank]:not([href$=".pdf"]):after { content: ""/"外部リンク"; background-image: url(/assets/img/common/ico_external_link_white.svg); width: 10px; height: 10px } .c-button--download:after { content: ""/"ダウンロード"; background-image: url(/assets/img/common/ico_download_white.svg); width: 10px; height: 11px } .c-grid .c-button, .c-service-elm__body .c-button, .c-heading-img .c-button { justify-self: center } @media only screen and (min-width: 768px) { .c-grid .c-button, .c-service-elm__body .c-button, .c-heading-img .c-button { justify-self: start } } .c-button--exp { height: 48px } .c-button--exp.c-button--white:before { background-color: var(--c-white) } .c-button--exp>span { width: calc(100% - 80px); height: 1.75em; position: absolute; inset: 0; margin: auto } .c-button--white:after { background-image: url(/assets/img/common/ico_arrow.svg) } .c-button--white:focus-visible:after { background-image: url(/assets/img/common/ico_arrow_white.svg) } @media (any-hover: hover) { .c-button--white:where(:any-link, :enabled, summary):hover:after { background-image: url(/assets/img/common/ico_arrow_white.svg) } } .c-button--white[href$=".pdf"]:not(.c-button--download):after { background-image: url(/assets/img/common/ico_pdf.svg) } .c-button--white[href$=".pdf"]:not(.c-button--download):focus-visible:after { background-image: url(/assets/img/common/ico_pdf_white.svg) } @media (any-hover: hover) { .c-button--white[href$=".pdf"]:not(.c-button--download):where(:any-link, :enabled, summary):hover:after { background-image: url(/assets/img/common/ico_pdf_white.svg) } } .c-button--white[target=_blank]:not([href$=".pdf"]):after { background-image: url(/assets/img/common/ico_external_link.svg) } .c-button--white[target=_blank]:not([href$=".pdf"]):focus-visible:after { background-image: url(/assets/img/common/ico_external_link_white.svg) } @media (any-hover: hover) { .c-button--white[target=_blank]:not([href$=".pdf"]):where(:any-link, :enabled, summary):hover:after { background-image: url(/assets/img/common/ico_external_link_white.svg) } } .c-button--white.c-button--download:after { background-image: url(/assets/img/common/ico_download.svg) } .c-button--white.c-button--download:focus-visible:after { background-image: url(/assets/img/common/ico_download_white.svg) } @media (any-hover: hover) { .c-button--white.c-button--download:where(:any-link, :enabled, summary):hover:after { background-image: url(/assets/img/common/ico_download_white.svg) } } .c-button-branch { display: flex; align-items: center; justify-content: space-between; color: #000; border: 1px solid var(--c-gray); border-radius: 100px; min-height: 48px; padding: 5px 10px 5px 16px; font-weight: 500; transition: .3s } @media only screen and (min-width: 768px) { .c-button-branch { min-height: 80px; padding: 10px 28px } } .c-button-branch:after { content: ""; display: block; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-button-branch:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-button-branch:focus-visible { border-color: var(--main-color); color: var(--c-white); background-color: var(--main-color) } .c-button-branch:focus-visible:after { transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-button-branch:focus-visible:after { background-size: 9px 6px; width: 20px; height: 20px } } @media (any-hover: hover) { .c-button-branch:where(:any-link, :enabled, summary):hover { border-color: var(--main-color); color: var(--c-white); background-color: var(--main-color) } .c-button-branch:where(:any-link, :enabled, summary):hover:after { transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } } @media only screen and (any-hover: hover) and (min-width: 768px) { .c-button-branch:where(:any-link, :enabled, summary):hover:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-button-recruit-cta { position: relative; display: grid; grid-template-columns: 1fr; place-content: center; place-items: center; color: var(--c-black); border: 1px solid var(--c-gray); border-radius: 100px; background-color: var(--c-white); width: 100%; max-width: 420px; min-height: 48px; padding: 5px 10px 5px 16px; font-weight: 500; transition: .3s } @media only screen and (min-width: 768px) { .c-button-recruit-cta { min-height: 80px; min-width: 420px; padding: 10px 30px } } .c-button-recruit-cta:after { position: absolute; content: ""; display: block; grid-column: 1/1; right: 0; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-button-recruit-cta:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-button-recruit-cta:focus-visible { border-color: var(--sub-color-dark); color: var(--c-white); background-color: var(--sub-color-dark) } .c-button-recruit-cta:focus-visible:after { transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-button-recruit-cta:focus-visible:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-button-recruit-cta:focus-visible:after { transform: translate(4px) } @media (any-hover: hover) { .c-button-recruit-cta:where(:any-link, :enabled, summary):hover { border-color: var(--sub-color-dark); color: var(--c-white); background-color: var(--sub-color-dark) } .c-button-recruit-cta:where(:any-link, :enabled, summary):hover:after { transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } } @media only screen and (any-hover: hover) and (min-width: 768px) { .c-button-recruit-cta:where(:any-link, :enabled, summary):hover:after { background-size: 9px 6px; width: 20px; height: 20px } } @media (any-hover: hover) { .c-button-recruit-cta:where(:any-link, :enabled, summary):hover:after { transform: translate(4px) } } .c-card__link { display: grid; align-items: start; color: #000; gap: 20px; text-decoration: none !important } .c-card__link:focus-visible { transition: color .3s } .c-card__link:focus-visible .c-card__title { color: var(--main-color); text-decoration: underline } .c-card__link:focus-visible .c-card__title--arrow { text-decoration: none } .c-card__link:focus-visible .c-card__title--arrow.c-card__title--dark { color: #fff } .c-card__link:focus-visible .c-card__title--arrow:after { transform: translate(4px) } .c-card__link:focus-visible .c-card__image { transform: scale(1.07); opacity: .7 } @media (any-hover: hover) { .c-card__link:where(:any-link, :enabled, summary):hover { transition: color .3s } .c-card__link:where(:any-link, :enabled, summary):hover .c-card__title { color: var(--main-color); text-decoration: underline } .c-card__link:where(:any-link, :enabled, summary):hover .c-card__title--arrow { text-decoration: none } .c-card__link:where(:any-link, :enabled, summary):hover .c-card__title--arrow.c-card__title--dark { color: #fff } .c-card__link:where(:any-link, :enabled, summary):hover .c-card__title--arrow:after { transform: translate(4px) } .c-card__link:where(:any-link, :enabled, summary):hover .c-card__image { transform: scale(1.07); opacity: .7 } } @media only screen and (min-width: 768px) { .c-card__link--widegap { gap: 40px } } @media only screen and (min-width: 768px) { .c-card__link--highlight { max-width: 800px; grid-template-columns: 38% 1fr; gap: 40px } } .c-card__fig { overflow: hidden; border-radius: 5px; grid-row: 1 } .c-card__fig--line { border: 1px solid var(--c-gray) } .c-card__image { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .3s, opacity .3s !important } .c-card__link--highlight .c-card__image { aspect-ratio: 305/203 } .c-card__image--3-2 { aspect-ratio: 3/2 } .c-card__image--origin { aspect-ratio: auto } .c-card__text { display: grid; gap: 5px } .c-card__title { font-size: 1rem; font-weight: 500 } .c-card__title.c-card__title--dark { color: #fff } .c-card__title--arrow { color: var(--c-black); display: flex; gap: 8px; align-items: center; margin: 0 !important; font-size: 16px !important } .c-card__title--arrow:after { content: ""; transition: transform .3s; background-size: 9px 6px; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 20px; height: 20px } @media only screen and (min-width: 768px) { .c-card__title--arrow:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-card__title--arrow.c-card__title--dark:after { transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .c-card__title--arrow.c-card__title--dark:after { background-size: 9px 6px; width: 20px; height: 20px } } .c-card__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden } .c-card__date { font-size: 1rem; color: var(--c-blue-dark); font-family: var(--font-family-en) } .c-cta { color: #fff; background: var(--sub-color-dark); position: relative; display: block; border-radius: 5px } @media only screen and (min-width: 768px) { .c-cta { border-radius: 10px; height: 302px } } .c-cta:before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; border-radius: 10px; background-image: linear-gradient(257deg, #052e62, #144790); opacity: 1; transition: .3s ease } .c-cta:focus-visible { color: #fff } .c-cta:focus-visible:before { opacity: 0 } .c-cta:focus-visible .c-cta__inner:after { background-image: url(/assets/img/common/ico_arrow_green.svg) } @media (any-hover: hover) { .c-cta:where(:any-link, :enabled, summary):hover { color: #fff } .c-cta:where(:any-link, :enabled, summary):hover:before { opacity: 0 } .c-cta:where(:any-link, :enabled, summary):hover .c-cta__inner:after { background-image: url(/assets/img/common/ico_arrow_green.svg) } } .c-cta__inner { position: relative; display: flex; align-items: center; gap: 17px; padding: 20px } @media only screen and (min-width: 768px) { .c-cta__inner { gap: 40px; padding: 0 40px; height: 100% } } @media only screen and (min-width: 1136px) { .c-cta__inner { padding: 0 80px } } .c-cta__inner:after { content: ""; grid-column: 2; grid-row: 1/3; margin-left: auto; background-size: 10px 7px; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 40px; height: 40px } @media only screen and (min-width: 768px) { .c-cta__inner:after { background-size: 9px 6px; width: 70px; height: 70px } } @media only screen and (min-width: 768px) { .c-cta__inner:after { background-size: 18px 12px } } .c-cta_text { display: flex; flex-direction: column; justify-content: space-between; gap: 10px } @media only screen and (min-width: 768px) { .c-cta_text { gap: 40px } } .c-cta__title { font-weight: 500; font-size: 1.5rem } @media only screen and (min-width: 768px) { .c-cta__title { font-size: 2rem } } .c-cta-recruitment { color: #fff; border-radius: 10px; background-image: linear-gradient(257deg, #052e62, #144790); opacity: 1; height: fit-content; padding: 40px 20px } @media only screen and (min-width: 768px) { .c-cta-recruitment { padding: 80px } } .c-cta-recruitment__body { margin-inline: auto } summary { display: grid } summary::-webkit-details-marker { display: none } .c-faq { display: grid; border: 1px solid var(--c-gray); border-radius: 5px } .c-faq[open] { transition: all .3s; background-color: var(--c-blue-light); border-color: transparent } .c-faq[open] .c-faq__mark:after { transform: translate(-50%) rotate(90deg) } @media only screen and (min-width: 768px) { .c-faq { line-height: 2 } } .c-faq__summary { position: relative; display: grid; align-items: center; grid-template: "icon question mark"auto/auto 1fr 20px; grid-area: question; gap: 20px; font-weight: 500; padding: 20px; cursor: pointer } @media only screen and (min-width: 768px) { .c-faq__summary { padding: 30px 40px } } .c-faq__summary:before { display: grid; place-content: center; grid-area: icon; color: var(--main-color); font-family: var(--font-family-en); font-size: 1.25rem; content: "Q"; line-height: 1 } @media only screen and (min-width: 768px) { .c-faq__summary:before { font-size: 1.5rem } } .c-faq__content { border-top: 1px solid var(--main-color); padding-block: 15px; margin-inline: 20px } @media only screen and (min-width: 768px) { .c-faq__content { padding-block: 30px; margin-inline: 40px } } .c-faq__text *+:where(p, a, div) { margin-block-start: 1em } .c-faq__text *:last-child { margin-block-end: 0 } .c-faq__text .c-button { min-width: unset } .c-faq__mark { position: absolute; display: grid; grid-area: mark; border-radius: 50%; background-color: var(--main-color); width: 14px; height: 14px; right: 0; top: 50%; transform: translateY(-50%) } @media only screen and (min-width: 768px) { .c-faq__mark { width: 20px; height: 20px } } .c-faq__mark:before, .c-faq__mark:after { content: ""; position: absolute; display: block; background-color: #fff; transition: transform .3s } .c-faq__mark:before { top: 50%; left: 4px; width: 6px; height: 1px; transform: translateY(-50%) } @media only screen and (min-width: 768px) { .c-faq__mark:before { left: 5px; width: 10px } } .c-faq__mark:after { top: 4px; left: 50%; width: 1px; height: 6px; transform: translate(-50%) } @media only screen and (min-width: 768px) { .c-faq__mark:after { top: 5px; height: 10px } } .c-flow { counter-reset: ol_li } .c-flow__item { position: relative; display: grid; gap: 10px; padding-bottom: 40px } @media only screen and (min-width: 768px) { .c-flow__item { display: flex; align-items: flex-start; gap: 40px } } .c-flow__item:before { position: absolute; top: 35px; left: 0; content: "0"counter(ol_li); counter-increment: ol_li; color: var(--main-color); font-family: var(--font-family-en); font-weight: 500; font-size: 1rem; border: 1px solid; border-radius: 50%; display: grid; place-items: center; width: 50px; height: 50px } @media only screen and (min-width: 768px) { .c-flow__item:before { font-size: 1.5rem; width: 75px; height: 75px } } .c-flow__item:after { content: ""; position: absolute; bottom: 40px; left: 21px; display: block; width: 9px; height: calc(100% - 114px); box-sizing: content-box; background-image: url(/assets/img/common/bg_flow-item.svg); background-repeat: repeat } @media only screen and (min-width: 768px) { .c-flow__item:after { display: none } } .c-flow__body { flex: 1 1 auto; display: grid; gap: 10px; position: relative; border-top: 1px solid var(--c-gray); padding: 45px 0 10px 63px } @media only screen and (min-width: 768px) { .c-flow__body { gap: 20px; padding: 50px 0 20px 90px } .c-flow__body:after { content: ""; position: absolute; bottom: 0; left: 33px; border: solid #fff; border-width: 0 4px; display: block; width: 1px; height: calc(100% - 97px); box-sizing: content-box; background-color: #749cce } } .c-flow__title { font-weight: 700; font-size: 1.125rem } @media only screen and (min-width: 768px) { .c-flow__title { font-size: 1.5rem } } .c-flow__text { margin-block-end: unset } .c-flow__fig { padding: 0 0 20px 63px } @media only screen and (min-width: 768px) { .c-flow__fig { padding: 0; flex: 0 0 auto; width: 31.34% } } .c-flow__img { width: 100%; border-radius: 5px } .p-inquiry .sex>* { display: inline-block; margin: 0 0 6px } @media only screen and (min-width: 768px) { .p-inquiry .sex>* { margin: 0 } } .p-inquiry .sex>*:last-child { margin: 0 } .p-inquiry input[type=submit], .p-inquiry input[type=button] { border: none; border-radius: 0; appearance: button; box-sizing: border-box; cursor: pointer } .p-inquiry input[type=submit]::-webkit-search-decoration, .p-inquiry input[type=button]::-webkit-search-decoration { display: none } .p-inquiry input[type=submit]::focus, .p-inquiry input[type=button]::focus { outline-offset: -2px } .p-inquiry fieldset>p { margin: 0 0 4%; font-family: var(--font-family) } .p-inquiry legend { display: block; width: 100%; margin: 0 0 4%; font-family: var(--font-family); font-size: 125%; text-align: center } .p-inquiry label.p_formAreaBox__title { position: relative; display: inline-block; font-family: var(--font-family); cursor: pointer } .p-inquiry label.p_formAreaBox__title:after { position: absolute; top: 0; right: 0; display: inline-block; padding: 6px 14px 8px; border-radius: 20px; color: var(--c-white); font-weight: 600; font-family: var(--font-family); font-size: .75rem; line-height: 1; text-align: center; vertical-align: middle; content: "必須"; background: var(--c-red); transform: translateY(-2px) } .p-inquiry label.p_formAreaBox__title.is-any:after { content: none } .p-inquiry .p_checkList--agree { position: relative; display: inline-block; padding-left: 5em; font-family: var(--font-family); cursor: pointer } .p-inquiry .p_checkList--agree:before { position: absolute; top: 2px; left: 0; display: inline-block; padding: 6px 14px 8px; border-radius: 20px; color: var(--c-white); font-weight: 600; font-family: var(--font-family); font-size: .75rem; line-height: 1; text-align: center; vertical-align: middle; content: "必須"; background: var(--c-red); transform: translateY(-2px) } .p-inquiry label+span { display: block; margin: -4px 0 8px; font-family: var(--font-family); font-size: 12px; font-size: 1.2rem } .p-inquiry input[type=text], .p-inquiry input[type=number], .p-inquiry input[type=tel], .p-inquiry input[type=email], .p-inquiry textarea { width: 100%; padding: 10px 5px 12px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); border-radius: 2px } .p-inquiry input[type=number].zip01 { width: 50% } .p-inquiry input[type=tel] { width: 20% } .p-inquiry input[type=text].age { width: 50%; margin: 0 4% 0 0 } .p-inquiry select { width: 50%; padding: .5em; border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); background-color: var(--c-white) } .p-inquiry textarea { resize: vertical; width: 100%; height: 200px } .p-inquiry input[type=number]::-webkit-outer-spin-button, .p-inquiry input[type=number]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none } .p-inquiry input[type=number] { -moz-appearance: textfield } .p-inquiry input:required, .p-inquiry textarea:required { border-width: 1px 1px 1px 1px; border-style: solid; border-color: #ccc; background: var(--c-white) } .p-inquiry input:required:invalid, .p-inquiry textarea:required:invalid { border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-red); background: var(--c-red) } .p-inquiry input:focus, .p-inquiry select:focus, .p-inquiry textarea:focus { border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); background: #fdf5d7b3 } .p-inquiry input:required:invalid:focus, .p-inquiry textarea:required:invalid:focus { border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); background: var(--c-white) } .p-inquiry ::-webkit-input-placeholder { color: var(--c-gray-light); font-style: italic } .p-inquiry :-moz-placeholder { opacity: 1; color: var(--c-gray-light); font-style: italic } .p-inquiry ::-moz-placeholder { opacity: 1; color: var(--c-gray-light); font-style: italic } .p-inquiry :-ms-input-placeholder { color: var(--c-gray-light); font-style: italic } .p-inquiry input[type=radio], .p-inquiry input[type=checkbox] { overflow: hidden; opacity: 0; position: absolute; margin: 0; padding: 0; border: 0; outline: 0 } .p-inquiry input[type=radio]+label, .p-inquiry input[type=checkbox]+label { display: inline-block; position: relative; margin: 0 2em 0 0; padding: .25em 0 .25em 2em; line-height: 1; text-align: left; cursor: pointer } .p-inquiry input[type=radio]:focus+label, .p-inquiry input[type=checkbox]:focus+label { outline: dotted 1px var(--main-color) } .p-inquiry input[type=radio]+label:before { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); border-radius: 50%; line-height: 100%; content: ""; background: var(--c-white) none } .p-inquiry input[type=radio]:checked+label:before { border-color: var(--main-color); background: var(--main-color) none } .p-inquiry input[type=radio]+label:after { display: none } .p-inquiry input[type=radio]:checked+label:after { display: block; position: absolute; top: .4em; left: .4em; width: .75em; height: .75em; margin: 0; border-radius: 50%; background: var(--c-white) none; content: "" } .p-inquiry input[type=checkbox]+label:before { position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; border-width: 1px 1px 1px 1px; border-style: solid; border-color: var(--c-gray-light); border-radius: 3px; line-height: 100%; content: ""; background: var(--c-white) none } .p-inquiry input[type=checkbox]:checked+label:before { border-color: var(--main-color); background: var(--main-color) none } .p-inquiry input[type=checkbox]+label a { color: var(--main-color); text-decoration: underline } .p-inquiry input[type=checkbox]+label a:hover { text-decoration: none } .p-inquiry input[type=checkbox]+label:after { display: none } .p-inquiry input[type=checkbox]:checked+label:after { display: block; position: absolute; top: .15em; left: .45em; width: .6em; height: 1em; border-right: 4px solid var(--c-white); border-bottom: 4px solid var(--c-white); content: ""; transform: rotate(45deg); background: none; margin: 0 } .p-inquiry input[type=checkbox]+label a, .p-inquiry input[type=checkbox]:checked+label a { color: var(--c-gray-dark) } .p-inquiry input[type=text].bg_error01, .p-inquiry textarea.bg_error01 { background: var(--c-red50) } .p-inquiry .txt_error01 { color: var(--c-red); font-weight: 700 } .p-inquiry .p_formsubmit { position: relative; display: block; max-width: 266px; margin: 4em auto 0; padding: 0 !important } .p-inquiry .p_formsubmit input[type=submit] { display: block; width: 100%; padding: 16px; border-width: 0; color: var(--c-white); font-weight: 600; background-color: transparent } .p-inquiry .p_formsubmit:hover, .p-inquiry .p_formsubmitfocus { border-color: var(--sub-color); background-color: var(--sub-color) } .c-grid { display: grid; gap: 24px } @media only screen and (min-width: 768px) { .c-grid { gap: 40px } } .c-card .c-grid { gap: 12px } @media only screen and (min-width: 768px) { .c-card .c-grid { gap: 40px } } .c-grid--fig>div { align-self: start } @media only screen and (min-width: 768px) { .c-grid--rev>figure { grid-column: 1; grid-row: 1 } .c-grid--rev>div { grid-column: 2 } } @media only screen and (min-width: 768px) { .c-grid--2cols { grid-template-columns: repeat(2, 1fr) } } @media only screen and (min-width: 1136px) { .c-grid--2cols { column-gap: 112px } } @media only screen and (min-width: 768px) { .c-grid--3cols { grid-template-columns: repeat(3, 1fr) } } @media only screen and (min-width: 768px) { .c-grid--4cols { gap: 24px } } @media only screen and (min-width: 768px) { .c-grid--4cols { grid-template-columns: repeat(4, 1fr) } } @media only screen and (min-width: 1136px) { .c-grid--4cols { gap: 40px } } .c-grid--4cols-sp2cols { grid-template-columns: repeat(2, 1fr) } @media only screen and (min-width: 768px) { .c-grid--4cols-sp2cols { gap: 24px; grid-template-columns: repeat(4, 1fr) } } @media only screen and (min-width: 1136px) { .c-grid--4cols-sp2cols { gap: 40px } } .c-grid--branch { display: grid; gap: 20px } @media only screen and (min-width: 768px) { .c-grid--branch { grid-template-columns: repeat(3, 1fr); gap: 20px } } @media only screen and (min-width: 1136px) { .c-grid--branch { gap: 40px } } .c-grid--branch--2col { grid-template-columns: repeat(2, 1fr) } @media only screen and (min-width: 768px) { .c-grid--branch--2col { grid-template-columns: repeat(3, 1fr) } } @media only screen and (min-width: 1136px) { .c-grid--1-2 { grid-template-columns: 1fr min(65.6%, 880px) } } @media only screen and (min-width: 1136px) { .c-grid--1-2-btn { grid-template-columns: 1fr min(65.6%, 880px); grid-template-rows: auto 1fr; align-items: start } .c-grid--1-2-btn *:nth-child(2) { grid-column: 2; grid-row: 1/-1 } } .c-heading-img { display: grid; gap: 40px } @media only screen and (min-width: 768px) { .c-heading-img { grid-template-columns: max(34.635%, 266px) 1fr; margin-inline: 0 calc(50% - 50vw); align-items: start } } @media only screen and (min-width: 1136px) { .c-heading-img { grid-template-columns: min(31.343%, 420px) 1fr; column-gap: 112px } } @media only screen and (min-width: 768px) { .c-heading-img--rev { grid-template-columns: 1fr max(34.635%, 266px); margin-inline: calc(50% - 50vw) 0 } } @media only screen and (min-width: 1136px) { .c-heading-img--rev { grid-template-columns: 1fr min(31.343%, 420px) } } @media only screen and (min-width: 768px) { .c-heading-img--center { align-items: center } } .c-heading-img__body { display: contents } @media only screen and (min-width: 768px) { .c-heading-img__body { display: grid; gap: 40px } } .c-heading-img__text { display: grid; gap: 20px } .c-heading-img__text .c-heading-lv2.c-heading--line { gap: 17px } .c-heading-img__text .c-heading-lv2.c-heading--line:after { width: 65px } @media only screen and (min-width: 768px) { .c-heading-img__text .c-heading-lv2.c-heading--line:after { width: 100px } } .c-heading-img__sub { color: var(--main-color); font-weight: 500; font-size: 1.5rem } @media only screen and (min-width: 768px) { .c-heading-img__sub { font-size: 1.75rem } } .c-heading-img__num { color: #fff; font-family: var(--font-family-en); letter-spacing: -1.8px; line-height: 1.4; -webkit-text-stroke: 1px var(--main-color); width: 100%; border-bottom: 1px solid var(--c-gray); font-size: 3.75rem } @media only screen and (min-width: 768px) { .c-heading-img__num { line-height: 1.2; border: none; font-size: 6.25rem } } .c-heading-img__num>span { filter: url(#filter-dilate) } .c-heading-img__fig { overflow: hidden; border-radius: 10px 0 0 10px; margin-inline: 0 calc(50% - 50vw); grid-row: 1 } @media only screen and (min-width: 768px) { .c-heading-img__fig { grid-column: 2; grid-row: 1; margin: 0 } } .c-heading-img--rev .c-heading-img__fig { border-radius: 0 10px 10px 0; margin-inline: calc(50% - 50vw) 0 } @media only screen and (min-width: 768px) { .c-heading-img--rev .c-heading-img__fig { grid-column: 1; margin: 0 } } .c-heading-img__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 355/223 } @media only screen and (min-width: 768px) { .c-heading-img__img { aspect-ratio: 1098/544 } } .c-heading-img__filter { position: absolute } .c-heading-lv1, .c-heading-lv2, .c-heading-lv3, .c-heading-lv4 { font-weight: 500 } .c-heading-lv1.c-heading--main, .c-heading-lv2.c-heading--main, .c-heading-lv3.c-heading--main, .c-heading-lv4.c-heading--main { color: var(--main-color) } .c-heading-lv1.c-heading--sub, .c-heading-lv2.c-heading--sub, .c-heading-lv3.c-heading--sub, .c-heading-lv4.c-heading--sub { color: var(--sub-color-dark) } .c-heading-lv1 { color: var(--main-color); line-height: 1.1428571429; font-size: 1.75rem } @media only screen and (min-width: 768px) { .c-heading-lv1 { line-height: 1.5; font-size: 3.125rem } } .c-heading-lv2 { font-size: 1.5rem } @media only screen and (min-width: 768px) { .c-heading-lv2 { font-size: 2rem } } .c-heading-lv2.c-heading--line { display: grid; gap: 27px } @media only screen and (min-width: 768px) { .c-heading-lv2.c-heading--line { gap: 32px } } .c-heading-lv2.c-heading--line:after { content: ""; width: 100px; height: 3px; background-color: var(--sub-color) } .c-heading-lv3 { font-size: 1.25rem } @media only screen and (min-width: 768px) { .c-heading-lv3 { font-size: 1.75rem } } .c-heading-lv3.c-heading--line { border-left: 3px solid var(--sub-color); padding-left: 20px } @media only screen and (min-width: 768px) { .c-heading-lv3.c-heading--line { padding-left: 32px } } .c-heading-lv4 { font-size: 1rem } @media only screen and (min-width: 768px) { .c-heading-lv4 { font-size: 1.5rem } } .c-heading-bg { margin-block-end: 16px; padding: 20px; background-color: var(--c-blue-light); border-radius: 5px; font-weight: 500; font-size: 1rem } @media only screen and (min-width: 768px) { .c-heading-bg { margin-block-end: 24px; font-size: 1.25rem } } @media only screen and (min-width: 768px) { .c-highlight .splide__list { display: flex !important; justify-content: center; gap: 24px } } @media only screen and (min-width: 1136px) { .c-highlight .splide__list { gap: 40px } } @media only screen and (min-width: 768px) { .c-highlight .splide__slide { width: 22.761% } } .c-highlight .splide__arrow { width: 40px; height: 40px; background-color: var(--main-color); background-image: url(/assets/img/common/ico_arrow_white.svg); background-repeat: no-repeat; background-position: 50%; background-size: 10px 7px; opacity: 1; top: 24vw; transform: none } .c-highlight .splide__arrow:disabled { background-color: #b7c6dd; opacity: 1 } .c-highlight .splide__arrow svg { display: none } .c-highlight .splide__arrow--prev { left: -12px; transform: rotate(180deg); transform-origin: center } .c-highlight .splide__arrow--next { right: -12px } .c-highlight .c-card__fig { border: 1px solid var(--c-gray) } .c-highlight .c-card__image { aspect-ratio: 335/223 } .c-image-link { display: block; overflow: hidden; border-radius: 5px; position: relative; transition: .3s } .c-image-link:focus-visible { opacity: .7 } .c-image-link:focus-visible .c-image-link__img { transform: scale(1.07) } .c-image-link:focus-visible .c-image-link__more { color: var(--main-color); background-color: #fff } .c-image-link:focus-visible .c-image-link__more:after { background-image: url(/assets/img/common/ico_arrow.svg) } @media (any-hover: hover) { .c-image-link:where(:any-link, :enabled, summary):hover { opacity: .7 } .c-image-link:where(:any-link, :enabled, summary):hover .c-image-link__img { transform: scale(1.07) } .c-image-link:where(:any-link, :enabled, summary):hover .c-image-link__more { color: var(--main-color); background-color: #fff } .c-image-link:where(:any-link, :enabled, summary):hover .c-image-link__more:after { background-image: url(/assets/img/common/ico_arrow.svg) } } .c-image-link--dark:after { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 100%; background-image: url(/assets/img/common/bg_overlay.webp); background-position: 50%; background-size: cover } .c-image-link__img { display: block; transition: transform .3s; width: 100% } .c-image-link__more { text-transform: uppercase; background-color: var(--sub-color-dark); font-family: var(--font-family-en); color: #fff; font-size: .625rem; display: grid; place-items: center; border-radius: 20px; width: 80px; height: 18px; position: absolute; right: 8px; bottom: 8px } @media only screen and (min-width: 768px) { .c-image-link__more { font-size: .75rem; width: 100px; height: 22px; right: 20px; bottom: 20px } } .c-image-link__more:after { content: ""; display: block; position: absolute; right: 8px; width: 6px; height: 4px; background-image: url(/assets/img/common/ico_arrow_white.svg) } @media only screen and (min-width: 768px) { .c-image-link__more:after { width: 9px; height: 6px; background-size: 9px 6px } } .c-image-link__text { position: absolute; z-index: 1; inset: auto 0 8px; margin: auto; width: max-content; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 4px; color: #fff; font-weight: 700; font-size: .625rem } @media only screen and (min-width: 1136px) { .c-image-link__text { bottom: 20px; font-size: 1rem } } .c-image-link__text:after { content: ""; background-size: 3px 2px; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 9px; height: 9px } @media only screen and (min-width: 768px) { .c-image-link__text:after { background-size: 9px 6px; width: 14px; height: 14px } } @media only screen and (min-width: 1136px) { .c-image-link__text:after { background-size: 6px 4px } } [target=_blank] .c-image-link__text:after { background-image: url(/assets/img/common/ico_external_link_white.svg); background-color: transparent; border-radius: 0; background-size: contain; flex: 0 0 auto; width: 9px; height: 9px } @media only screen and (min-width: 1136px) { [target=_blank] .c-image-link__text:after { width: 16px; height: 16px } } .c-image-text-link__grid { display: grid; gap: 24px } @media only screen and (min-width: 1136px) { .c-image-text-link__grid { grid-template-columns: repeat(2, 1fr); column-gap: 112px } } .c-image-text-link { overflow: hidden; background-color: #fff; display: grid; grid-template-columns: 46.6% 1fr; justify-items: center; gap: 20px 0; border-radius: 5px; padding-bottom: 20px } @media only screen and (min-width: 768px) { .c-image-text-link { grid-template-columns: 43.6% 1fr; border-radius: 10px; padding-bottom: 0 } } @media only screen and (min-width: 768px) { .c-image-text-link .c-button { min-width: 100% } } .c-image-text-link__fig { grid-row: 1 } @media only screen and (min-width: 768px) { .c-image-text-link__fig { grid-column: 1; grid-row: 1/-1 } } .c-image-text-link__img { width: 100%; height: 100%; object-fit: cover } @media only screen and (min-width: 1136px) { .c-image-text-link__img { aspect-ratio: 268/345 } } .c-image-text-link__body { display: contents } @media only screen and (min-width: 768px) { .c-image-text-link__body { display: flex; flex-direction: column; gap: 20px; padding: 50px 40px } } .c-image-text-link__text { padding: 20px 20px 0; display: flex; flex-direction: column; gap: 10px } @media only screen and (min-width: 768px) { .c-image-text-link__text { gap: 20px; padding: 0 } } .c-image-text-link__title { font-weight: 700; color: var(--main-color); font-size: 1.25rem } @media only screen and (min-width: 768px) { .c-image-text-link__title { font-size: 1.5rem } } .c-image-text-link__btn { grid-column: 1/-1; height: 48px } @media only screen and (min-width: 768px) { .c-image-text-link__btn { margin-top: auto } } :root { --_full-width: 100vw } .c-infinite-slide { --_animation-speed: 60s; --_slide-gap: 100; grid-row-start: 2; width: 100%; overflow-x: hidden } .c-infinite-slide__container { display: grid; margin-inline: calc(50% - 50vw) } .c-infinite-slide__container .c-toggle-button { grid-row-start: 1; justify-self: end; align-self: start; margin-inline-end: calc(64 * var(--fluid-ratio)) } .c-infinite-slide__track { position: relative; display: flex; column-gap: calc(var(--_slide-gap) * var(--fluid-ratio)); margin-block: calc(100 * var(--fluid-ratio)); animation: infinite-scroll var(--_animation-speed) linear infinite; transform: translateZ(0); will-change: transform; filter: blur(.1px) } @media (prefers-reduced-motion: reduce) { .c-infinite-slide__track { animation-play-state: paused } } .c-infinite-slide__track img { grid-area: 1/1; margin-inline-start: calc(var(--_x, 0) * var(--fluid-ratio)); margin-block-start: calc(var(--_y, 0) * var(--fluid-ratio)); inline-size: calc(var(--_w, var(--layout-width)) * var(--fluid-ratio)); block-size: calc(var(--_h) * var(--fluid-ratio)); backface-visibility: hidden; transform: translateZ(0); will-change: transform; filter: blur(.1px); border-radius: 5px } .c-infinite-slide__wrapper { position: relative; display: grid; min-width: max-content } @keyframes infinite-scroll { 0% { transform: translateZ(0) } to { transform: translate3d(calc(-1 * var(--_full-width)), 0, 0) } } .c-link { color: var(--main-color); text-decoration: underline; word-break: break-word } .c-link img { transition: opacity .3s; opacity: 1 } @media (hover: hover) { .c-link { transition: color .3s, opacity .3s } .c-link:is(:hover, :active, :focus) { opacity: .7 } } .c-link:focus-visible { color: var(--main-color) } .c-link:focus-visible img { opacity: .7 } @media (any-hover: hover) { .c-link:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .c-link:where(:any-link, :enabled, summary):hover img { opacity: .7 } } .c-link[target=_blank]:not([href$=".pdf"], :has(img)) { position: relative; padding-right: 2em } .c-link[target=_blank]:not([href$=".pdf"], :has(img)):after { content: ""/"外部リンク"; position: absolute; background-image: url(/assets/img/common/ico_external_link.svg); background-size: contain; width: 14px; height: 14px; margin: .5em 0 0 .5em } .c-link[href$=".pdf"] { position: relative; padding-right: 2em } .c-link[href$=".pdf"]:after { content: ""/"PDFファイル"; position: absolute; background-image: url(/assets/img/common/ico_pdf.svg); background-size: contain; width: 15px; height: 19px; margin: .3em 0 0 .5em } .c-link-map { position: relative; padding-left: 1.2em; color: var(--main-color); text-decoration: underline; word-break: break-word } .c-link-map img { transition: opacity .3s; opacity: 1 } @media (hover: hover) { .c-link-map { transition: color .3s, opacity .3s } .c-link-map:is(:hover, :active, :focus) { opacity: .7 } } .c-link-map:focus-visible { color: var(--main-color) } .c-link-map:focus-visible img { opacity: .7 } @media (any-hover: hover) { .c-link-map:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .c-link-map:where(:any-link, :enabled, summary):hover img { opacity: .7 } } .c-link-map:before { content: ""/"マップリンク"; position: absolute; background-image: url(/assets/img/common/ico_map.svg); background-size: contain; width: 13px; height: 18px; top: 50%; left: 0; transform: translateY(-50%) } .c-list { margin-left: 1.5em; display: grid; gap: .8em } .c-list li { list-style-type: disc } .c-list li::marker { color: var(--main-color) } .c-list-num { margin-left: 1.5em; display: grid; gap: .8em } .c-list-num li { list-style-type: decimal } .c-list-num li::marker { color: var(--main-color); font-family: var(--font-family-en); font-weight: 700 } .c-list-num ul>li { list-style-type: disc } .c-list-num.roman>li { list-style-type: lower-roman } .c-list-none { margin-inline-start: 0 !important } .c-list-none li { list-style-type: none !important } .c-list-dot { display: grid } .c-list-dot li { list-style-type: "・" !important } .c-list-news { display: grid } @media only screen and (min-width: 768px) { .c-list-news { grid-template-columns: max-content max-content 1fr } } .c-list-news__item { gap: 8px 16px; border-bottom: 1px solid var(--c-gray); padding-block: 24px; display: grid; align-items: center; grid-template-columns: max-content 1fr } .c-list-news__item:first-child { border-top: 1px solid var(--c-gray) } @media only screen and (min-width: 768px) { .c-list-news__item { padding-block: 32px; grid-template-columns: subgrid; grid-column: span 3/span 3 } } .c-list-news__item .c-tag { justify-self: start } .is-home .c-list-news__item:first-child { border-top: unset } .c-list-news__date { color: var(--c-blue-dark) } .c-list-news__title { grid-column: 1/-1 } @media only screen and (min-width: 768px) { .c-list-news__title { grid-column: 3 } } .c-list-news__link { color: var(--c-black); transition: color .3s; padding: 0 !important } .c-list-news__link:after { display: inline-block; position: unset !important } .c-list-news__link[href$=".pdf"] { position: relative; padding-right: 2em } .c-list-news__link[href$=".pdf"]:after { content: ""/"PDFファイル"; position: absolute; background-image: url(/assets/img/common/ico_pdf.svg); background-size: contain; width: 15px; height: 19px; margin: .3em 0 0 .5em } .c-list-news__link[target=_blank]:not([href$=".pdf"]) { position: relative; padding-right: 2em } .c-list-news__link[target=_blank]:not([href$=".pdf"]):after { content: ""/"外部リンク"; position: absolute; background-image: url(/assets/img/common/ico_external_link.svg); background-size: contain; width: 14px; height: 14px; margin: .5em 0 0 .5em } .c-list-news__link:focus-visible { color: var(--main-color); text-decoration: underline } @media (any-hover: hover) { .c-list-news__link:where(:any-link, :enabled, summary):hover { color: var(--main-color); text-decoration: underline } } .c-list-btn { border-top: 1px solid var(--c-gray) } .c-list-btn__item { border-bottom: 1px solid var(--c-gray); padding: 25px 0; display: grid; justify-items: center; gap: 1em; text-align: center } @media only screen and (min-width: 768px) { .c-list-btn__item { padding: 30px 0; display: flex; justify-content: space-between; align-items: center; text-align: left } } .c-list-numtext { border-top: 1px solid var(--c-gray); counter-reset: num } .c-list-numtext__item { border-bottom: 1px solid var(--c-gray); display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 8px 16px; padding-block: 24px } @media only screen and (min-width: 768px) { .c-list-numtext__item { grid-template-columns: max-content 1fr 31.3%; gap: 1em; padding-block: 60px } } .c-list-numtext__item:before { content: "0"counter(num); counter-increment: num; word-break: normal; font-family: var(--font-family-en); font-size: 1.25rem; color: var(--main-color) } .c-list-numtext__title { font-weight: 500; font-size: 1.75rem } .c-list-numtext__text { grid-column: 1/-1 } @media only screen and (min-width: 768px) { .c-list-numtext__text { grid-column: unset } } .c-media { border-radius: 5px } .c-pagenation__list { display: grid; place-content: center; gap: 8px; margin: 0 !important; grid-auto-flow: column; grid-auto-columns: max-content } .c-pagenation__item { margin: 0 !important; list-style: none !important } .c-pagenation__link { display: grid; place-content: center; color: var(--main-color); background-color: #fff; border-radius: 50%; border: 1px solid var(--c-gray); font-weight: 700; width: 40px; height: 40px } @media only screen and (min-width: 768px) { .c-pagenation__link { width: 50px; height: 50px } } .c-pagenation__link:focus-visible { border-color: var(--main-color) !important; background-color: var(--main-color) !important; color: #fff } @media (any-hover: hover) { .c-pagenation__link:where(:any-link, :enabled, summary):hover { border-color: var(--main-color) !important; background-color: var(--main-color) !important; color: #fff } } .c-pagenation__link.is-current { background-color: var(--main-color); color: #fff; border-color: var(--main-color) } .c-pagenation__link--next, .c-pagenation__link--prev { position: relative; background-color: #fafafa; border-color: #fafafa; transition: right .3s } .c-pagenation__link--next:not([tabindex="-1"]), .c-pagenation__link--prev:not([tabindex="-1"]) { background-color: #fff; border-color: var(--c-gray); pointer-events: all } .c-pagenation__link--next:not([tabindex="-1"]):before, .c-pagenation__link--prev:not([tabindex="-1"]):before { background-image: url(/assets/img/common/ico_arrow.svg) } .c-pagenation__link--next:before, .c-pagenation__link--prev:before { content: ""; background-image: url(/assets/img/common/ico_arrow_gray.svg); background-size: contain; width: 14px; height: 8px } @media only screen and (min-width: 768px) { .c-pagenation__link--next:before, .c-pagenation__link--prev:before { width: 18px; height: 12px } } .c-pagenation__link--next:focus-visible:before, .c-pagenation__link--prev:focus-visible:before { background-image: url(/assets/img/common/ico_arrow_white.svg) } @media (any-hover: hover) { .c-pagenation__link--next:where(:any-link, :enabled, summary):hover:before, .c-pagenation__link--prev:where(:any-link, :enabled, summary):hover:before { background-image: url(/assets/img/common/ico_arrow_white.svg) } } @media only screen and (min-width: 768px) { .c-pagenation__link--next { margin-left: 24px } } @media only screen and (min-width: 768px) { .c-pagenation__link--prev { margin-right: 24px } } .c-pagenation__link--prev:before { transform: rotate(180deg) } .c-pagetop { opacity: 0; position: fixed; right: var(--padding-inline-container); bottom: 30px; width: 40px; height: 40px; border-radius: 50%; z-index: -1 } @media only screen and (min-width: 1136px) { .c-pagetop { bottom: 60px; width: 60px; height: 60px; transition: .3s } } .is-scroll .c-pagetop { opacity: 1; z-index: 99 } .is-scroll .c-pagetop:focus-visible { opacity: .7; box-shadow: 0 0 20px #00000029 } @media (any-hover: hover) { .is-scroll .c-pagetop:where(:any-link, :enabled, summary):hover { opacity: .7; box-shadow: 0 0 20px #00000029 } } .is-menu .c-pagetop, .is-modal-open .c-pagetop { z-index: -1 } .c-schedule__item { display: grid; grid-template-columns: minmax(min(3.5rem, 100%), max-content) 1fr; column-gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--c-gray) } @media only screen and (min-width: 768px) { .c-schedule__item { column-gap: 70px; padding-block: 24px } } .c-schedule__item:first-child { padding-block-start: unset } .c-schedule__item:last-child { padding-block-end: unset; border-bottom: unset } .c-schedule__time { font-family: var(--font-family-en); font-weight: 700; color: var(--main-color); font-size: 1rem } @media only screen and (min-width: 768px) { .c-schedule__time { font-size: 1.25rem } } .c-schedule__text { font-size: 1rem } @media only screen and (min-width: 768px) { .c-schedule__text { font-size: 1.25rem } } .c-search-result__item:not(:last-child) { border-bottom: 1px solid var(--c-gray-light) } .c-search-result__item:first-child .c-search-result__link { padding-block-start: 0 } .c-search-result__title, .c-search-result__url { text-decoration: underline } .c-search-result__link { display: grid; grid-template-columns: 1fr; padding-block: 40px; row-gap: 16px } .c-search-result__link:focus-visible .c-search-result__title, .c-search-result__link:focus-visible .c-search-result__url { text-decoration: none } @media (any-hover: hover) { .c-search-result__link:where(:any-link, :enabled, summary):hover .c-search-result__title, .c-search-result__link:where(:any-link, :enabled, summary):hover .c-search-result__url { text-decoration: none } } .c-search-result__text { color: initial } @media only screen and (min-width: 768px) { .c-search-result__text { margin-block-start: 8px } } .c-separator { height: 1px; background-color: var(--c-gray); border-width: 0 } .c-service-elm { overflow: hidden; border-radius: 5px; background-color: var(--c-blue-light); display: grid } @media only screen and (min-width: 768px) { .c-service-elm { border-radius: 10px; grid-template-columns: 1fr 48.507% } } .c-service-elm__body { display: grid; gap: 24px; padding: 40px 20px } @media only screen and (min-width: 768px) { .c-service-elm__body { gap: 40px; padding: 40px } } @media only screen and (min-width: 1136px) { .c-service-elm__body { padding: 80px } } .c-service-elm__fig { grid-row: 1 } @media only screen and (min-width: 768px) { .c-service-elm__fig { grid-column: 2 } } .c-service-elm__fig .c-service-elm__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 335/223 } .c-service-elm__fig .c-service-elm__img--no-ratio { aspect-ratio: unset } .c-social { background-color: var(--c-gray-lighter); border-radius: 10px; padding: 24px; display: grid; justify-content: center; gap: 10px } @media only screen and (min-width: 768px) { .c-social { display: flex; justify-content: unset; align-items: center; padding: 40px; gap: 40px } } .c-social .c-social__list { margin: 0; display: flex; gap: 24px } .c-social .c-social__item { list-style-type: none } .c-social__title { text-align: center; font-weight: 500; font-size: 1.25rem } @media only screen and (min-width: 768px) { .c-social__title { font-size: 1.5rem } } .c-social__list { display: flex; gap: 24px } .c-social__link { display: block; background-size: cover; width: 40px; height: 40px } @media only screen and (min-width: 768px) { .c-social__link { width: 48px; height: 48px } } .c-social__link--facebook { background-image: url(/assets/img/common/ico_sns_facebook.svg) } .c-social__link--x { background-image: url(/assets/img/common/ico_sns_x.svg) } .c-social__link--line { background-image: url(/assets/img/common/ico_sns_line.svg) } .c-tag { display: grid; place-items: center; min-height: 25px; line-height: 1.2; border: solid 1px #ccc; border-radius: 25px; padding: 3px 14px; font-size: .75rem; color: var(--c-black); background-color: #fff } .c-tag__txt { display: block; line-height: 1.4 } .c-tag.is-current, .c-tag.active { color: #fff; background-color: var(--sub-color-dark); border-color: var(--sub-color-dark) } .c-tag:focus-visible { color: #fff; background-color: var(--sub-color-dark); border-color: var(--sub-color-dark) } @media (any-hover: hover) { .c-tag:where(:any-link, :enabled, summary):hover { color: #fff; background-color: var(--sub-color-dark); border-color: var(--sub-color-dark) } } .c-tag__chronology { border: none; color: var(--c-white); width: 43px; height: 25px } .c-tag__chronology--01 { background: var(--tag-color-01) } .c-tag__chronology--02 { background: var(--tag-color-02) } .c-tag__chronology--03 { background: var(--tag-color-03) } .c-tag__chronology--04 { background: var(--tag-color-04) } @media only screen and (min-width: 1136px) { .c-tag__chronology { margin-top: 6px } } .c-text-em { font-weight: 700 } .c-text-em--main { color: var(--main-color) } .c-text-em--sub { color: var(--sub-color-darker) } .c-text-note { color: var(--c-gray-dark); font-size: .75rem } @media only screen and (min-width: 768px) { .c-text-note { font-size: .875rem } } .c-toggle-button { --_bg-color: var(--c-white); --_icon-color: var(--main-color); --_border-color: var(--main-color); display: grid; border: none; padding: 0; background: none; cursor: pointer; transition: all .3s ease } .c-toggle-button:focus-visible { --_bg-color: var(--main-color); --_icon-color: var(--c-white) } @media (any-hover: hover) { .c-toggle-button:where(:any-link, :enabled, summary):hover { --_bg-color: var(--main-color); --_icon-color: var(--c-white) } } .c-toggle-button svg circle { fill: var(--_bg-color); stroke: var(--_border-color) } .c-toggle-button svg .icon { fill: var(--_icon-color) } .c-toggle-button[aria-pressed=true] .pause, .c-toggle-button[aria-pressed=false] .play { display: none } .c-toggle-button--gray { --_bg-color: var(--c-white); --_icon-color: var(--c-gray-dark); --_border-color: var(--c-gray-dark) } .c-toggle-button--gray:focus-visible { --_bg-color: var(--c-gray-dark); --_icon-color: var(--c-white) } @media (any-hover: hover) { .c-toggle-button--gray:where(:any-link, :enabled, summary):hover { --_bg-color: var(--c-gray-dark); --_icon-color: var(--c-white) } } .c-tab-list { display: flex } .c-tab-button { background: var(--c-blue-light); border: 1px solid var(--c-blue-light); border-radius: 10px 10px 0 0; color: var(--main-color); display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 5px; font-weight: 500; transition: .3s; width: 50% } @media only screen and (min-width: 768px) { .c-tab-button { padding: 10px 28px; width: 280px } } .c-tab-button.active { border-color: var(--main-color); color: var(--c-white); background-color: var(--main-color) } .c-tab-button:focus-visible { border-color: var(--main-color); color: var(--c-white); background-color: var(--main-color) } @media (any-hover: hover) { .c-tab-button:where(:any-link, :enabled, summary):hover { border-color: var(--main-color); color: var(--c-white); background-color: var(--main-color) } } .c-tab-button:nth-child(2).active { background: var(--sub-color-dark); border-color: var(--sub-color-dark); color: var(--c-white) } .c-tab-button:nth-child(2):focus-visible { background: var(--sub-color-dark); border-color: var(--sub-color-dark); color: var(--c-white) } @media (any-hover: hover) { .c-tab-button:nth-child(2):where(:any-link, :enabled, summary):hover { background: var(--sub-color-dark); border-color: var(--sub-color-dark); color: var(--c-white) } } .c-graph-scroll { margin-inline-end: calc(50% - 50vw) } @media only screen and (min-width: 768px) { .c-graph-scroll { margin-inline-end: unset } } .c-graph-scroll__img { height: auto; display: block; margin-block-end: 24px; overflow-x: auto } .c-graph-scroll__img picture, .c-graph-scroll__img img { max-width: unset; height: auto; display: block } @media only screen and (min-width: 768px) { .c-graph-scroll__img picture, .c-graph-scroll__img img { max-width: 100% } } .c-graph-scroll__note { font-size: .75rem; color: var(--c-gray-dark) } @media only screen and (min-width: 768px) { .c-graph-scroll__note { display: none } } .p-block { margin-top: 60px } @media only screen and (min-width: 768px) { .p-block { margin-top: 100px } } .p-block-social { margin-block: 40px } .p-block-button, .p-block-list { margin-top: 2em } .p-block-table table { width: 100%; border-collapse: collapse; border: solid var(--c-gray); border-width: 1px 1px 0 0; word-break: break-word } .p-block-table table th, .p-block-table table td { display: block; padding: 1em; border: 1px solid var(--c-gray); border-width: 0 0 1px 1px } @media only screen and (min-width: 768px) { .p-block-table table th, .p-block-table table td { display: table-cell } } @media only screen and (min-width: 768px) and (min-width: 768px) { .p-block-table table th, .p-block-table table td { padding: 1.5em } } .p-block-table table th { background-color: var(--c-blue-light); font-weight: 500 } .p-block-table table td { background-color: #fff } .p-block-faq { display: grid; gap: 16px } @media only screen and (min-width: 768px) { .p-block-faq { gap: 24px } } .p-block-pagenation { margin-top: 64px } .p-block-tag { display: flex; flex-wrap: wrap; gap: 1em .5em } .p-block-cta { margin-block: 40px } .p-breadcrumbs { padding-inline: var(--padding-inline-container) } .p-breadcrumbs__inner { max-width: 1340px; margin-inline: auto; white-space: nowrap; overflow-x: auto; overflow-y: hidden } .p-breadcrumbs__list { padding-block: 8px; display: flex; gap: 8px } .p-breadcrumbs__list-item { display: flex; align-items: center; gap: 8px; font-size: .75rem } .p-breadcrumbs__list-item:not(:first-child):before { content: ">" } .p-breadcrumbs__list-item a { color: var(--main-color) } .p-breadcrumbs__list-item a:focus-visible { text-decoration: underline } @media (any-hover: hover) { .p-breadcrumbs__list-item a:where(:any-link, :enabled, summary):hover { text-decoration: underline } } @media only screen and (min-width: 768px) { .p-page-header--crosstalk .p-page-header__inner { padding-block: 124px } } .p-crosstalk-members { margin-block-end: 80px } @media only screen and (min-width: 768px) { .p-crosstalk-members { margin-block-end: 240px } } .p-crosstalk-members__list { display: grid; row-gap: 20px } @media only screen and (min-width: 768px) { .p-crosstalk-members__list { max-width: fit-content; margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 420px)); column-gap: 40px; row-gap: 80px } } @media only screen and (min-width: 1136px) { .p-crosstalk-members__list { grid-template-columns: repeat(3, 1fr); column-gap: 40px } } .p-crosstalk-member { display: grid; margin-block-end: -40px } @media only screen and (min-width: 768px) { .p-crosstalk-member { margin-block-end: -94px } } @media only screen and (768px < width < 1136px) { .p-crosstalk-member:nth-child(odd) { translate: 0 40px } } @media only screen and (min-width: 1136px) { .p-crosstalk-member:nth-child(1), .p-crosstalk-member:nth-child(4) { translate: 0 80px } .p-crosstalk-member:nth-child(2), .p-crosstalk-member:nth-child(5) { translate: 0 40px } } .p-crosstalk-member__img { grid-area: 1/1; margin-left: 20px } .p-crosstalk-member__img img { width: 100%; border-radius: 5px } .p-crosstalk-member__text { display: grid; row-gap: 4px; grid-area: 2/1; width: 100%; max-width: calc(100% - 20px); padding: 20px; background-color: var(--c-white); border-radius: 5px; translate: 0 -40px } @media only screen and (min-width: 768px) { .p-crosstalk-member__text { max-width: clamp(0px, 80.2380952381%, 337px); translate: 0 -94px } } @media only screen and (min-width: 1136px) { .p-crosstalk-member__text { translate: 0 -94px } } .p-crosstalk-member__job, .p-crosstalk-member__office { color: var(--main-color); font-weight: 500 } .p-crosstalk-message { display: grid; grid-template-columns: 80px 1fr; column-gap: 24px } .p-crosstalk-message+.p-crosstalk-message { margin-block-start: 40px } .p-crosstalk-message__avatar { display: grid; row-gap: 4px; justify-items: center; align-items: center; align-self: start } .p-crosstalk-message__avatar-img { border-radius: 9999px } .p-crosstalk-message__avatar figcaption { font-size: .75rem; font-weight: 500 } @media only screen and (min-width: 768px) { .p-crosstalk-conversation-container { display: block } } @media only screen and (min-width: 768px) { .p-crosstalk-conversation__figure { max-width: 45.8208955224% } } @media only screen and (min-width: 768px) { .p-crosstalk-conversation__figure--right { float: right } } @media only screen and (min-width: 768px) { .p-crosstalk-conversation__figure--left { float: left } } .p-entry-header { position: relative; word-break: break-word; overflow: hidden } .p-entry-header h1 { font-weight: 500 } .p-entry-header h1.c-heading--main { color: var(--main-color) } .p-entry-header h1.c-heading--sub { color: var(--sub-color-dark) } .p-entry-header h1 { color: var(--main-color); line-height: 1.1428571429; font-size: 1.75rem } @media only screen and (min-width: 768px) { .p-entry-header h1 { line-height: 1.5; font-size: 3.125rem } } .p-entry-header__inner { display: grid; align-content: center; row-gap: 40px; word-break: break-word; padding-block: 40px 80px } @media only screen and (min-width: 768px) { .p-entry-header__inner { padding-block: 80px } } .p-entry-meta { display: grid; grid-template-columns: repeat(2, max-content); align-items: center; column-gap: 24px } .p-entry-date { color: var(--c-gray-dark); font-family: var(--font-family-en); font-size: .875rem } @media only screen and (min-width: 768px) { .p-entry-date { font-size: 1rem } } .p-entry-body { padding-block-end: 40px } @media only screen and (min-width: 768px) { .p-entry-body { max-width: 960px; margin-inline: auto; padding: 80px; border-radius: 10px } } .p-entry--highlight .p-entry-header { padding-inline: var(--padding-inline-container) } .p-entry-footer { margin-block-start: 40px } @media only screen and (min-width: 768px) { .p-entry-footer { margin-block-start: 80px } } .p-entry-content { word-break: break-word } .p-entry-content>section:first-child>h2 { margin-top: 0 } .p-entry-content hr { border-top: 1px solid var(--c-gray); margin: 56px 0 } @media only screen and (min-width: 768px) { .p-entry-content hr { margin: 64px 0 } } .p-entry-content p, .p-entry-content div:not([class]) { font-family: var(--font-family); margin-block-end: 1em } .p-entry-content p code, .p-entry-content div:not([class]) code { background-color: var(--c-gray-light) } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta) { color: var(--main-color); text-decoration: underline; word-break: break-word } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta) img { transition: opacity .3s; opacity: 1 } @media (hover: hover) { .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta) { transition: color .3s, opacity .3s } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta):is(:hover, :active, :focus) { opacity: .7 } } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta):focus-visible { color: var(--main-color) } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta):focus-visible img { opacity: .7 } @media (any-hover: hover) { .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta):where(:any-link, :enabled, summary):hover { color: var(--main-color) } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta):where(:any-link, :enabled, summary):hover img { opacity: .7 } } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta)[target=_blank]:not([href$=".pdf"], :has(img), [class]) { position: relative; padding-right: 2em } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta)[target=_blank]:not([href$=".pdf"], :has(img), [class]):after { content: ""/"外部リンク"; position: absolute; background-image: url(/assets/img/common/ico_external_link.svg); background-size: contain; width: 14px; height: 14px; margin: .5em 0 0 .5em } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta)[href$=".pdf"] { position: relative; padding-right: 2em } .p-entry-content:where(*) a:not(.c-button, .c-button-recruit-cta)[href$=".pdf"]:after { content: ""/"PDFファイル"; position: absolute; background-image: url(/assets/img/common/ico_pdf.svg); background-size: contain; width: 15px; height: 19px; margin: .3em 0 0 .5em } .p-entry-content h1, .p-entry-content h2, .p-entry-content h3, .p-entry-content h4, .p-entry-content h5 { margin: 40px 0 24px; font-weight: 500 } .p-entry-content h1.c-heading--main, .p-entry-content h2.c-heading--main, .p-entry-content h3.c-heading--main, .p-entry-content h4.c-heading--main, .p-entry-content h5.c-heading--main { color: var(--main-color) } .p-entry-content h1.c-heading--sub, .p-entry-content h2.c-heading--sub, .p-entry-content h3.c-heading--sub, .p-entry-content h4.c-heading--sub, .p-entry-content h5.c-heading--sub { color: var(--sub-color-dark) } @media only screen and (min-width: 768px) { .p-entry-content h1, .p-entry-content h2, .p-entry-content h3, .p-entry-content h4, .p-entry-content h5 { margin: 80px 0 40px } } .p-entry-content h1 { color: var(--main-color); line-height: 1.1428571429; font-size: 1.75rem } @media only screen and (min-width: 768px) { .p-entry-content h1 { line-height: 1.5; font-size: 3.125rem } } .p-entry-content h2 { font-size: 1.5rem } @media only screen and (min-width: 768px) { .p-entry-content h2 { font-size: 2rem } } .p-entry-content h2.c-heading--line { display: grid; gap: 27px } @media only screen and (min-width: 768px) { .p-entry-content h2.c-heading--line { gap: 32px } } .p-entry-content h2.c-heading--line:after { content: ""; width: 100px; height: 3px; background-color: var(--sub-color) } .p-entry-content h3 { font-size: 1.25rem } @media only screen and (min-width: 768px) { .p-entry-content h3 { font-size: 1.75rem } } .p-entry-content h3.c-heading--line { border-left: 3px solid var(--sub-color); padding-left: 20px } @media only screen and (min-width: 768px) { .p-entry-content h3.c-heading--line { padding-left: 32px } } .p-entry-content h4 { margin: 24px 0 16px; font-size: 1rem } @media only screen and (min-width: 768px) { .p-entry-content h4 { font-size: 1.5rem } } @media only screen and (min-width: 768px) { .p-entry-content h4 { margin: 40px 0 24px } } .p-entry-content ul { margin-top: 1em; margin-left: 1.5em; display: grid; gap: .8em } .p-entry-content ul li { list-style-type: disc } .p-entry-content ul li::marker { color: var(--main-color) } .p-entry-content ol { margin-top: 1em; margin-left: 1.5em; display: grid; gap: .8em } .p-entry-content ol li { list-style-type: decimal } .p-entry-content ol li::marker { color: var(--main-color); font-family: var(--font-family-en); font-weight: 700 } .p-entry-content ol ul>li { list-style-type: disc } .p-entry-content ol.roman>li { list-style-type: lower-roman } .p-entry-content table { width: 100%; border-collapse: collapse; border: solid var(--c-gray); border-width: 1px 1px 0 0; word-break: break-word } .p-entry-content table th, .p-entry-content table td { display: block; padding: 1em; border: 1px solid var(--c-gray); border-width: 0 0 1px 1px } @media only screen and (min-width: 768px) { .p-entry-content table th, .p-entry-content table td { display: table-cell } } @media only screen and (min-width: 768px) and (min-width: 768px) { .p-entry-content table th, .p-entry-content table td { padding: 1.5em } } .p-entry-content table th { background-color: var(--c-blue-light); font-weight: 500 } .p-entry-content table td { background-color: #fff } .p-entry-content iframe { aspect-ratio: 16/9; object-fit: cover; width: 100%; height: auto } .p-entry-content .asset.asset-image:not(.is-no-rounded) { object-fit: cover; border-radius: 10px } .p-entry-content .asset.asset-image:not(.is-no-rounded).is-no-rounded { border-radius: 0 } .p-entry-content .mt-figure { display: table; width: fit-content; margin-block-end: 2em } .p-entry-content .mt-figure.is-scroll { display: block; overflow: auto; width: 100% } @media only screen and (min-width: 1136px) { .p-entry-content .mt-figure.is-scroll { display: table; width: fit-content } } .p-entry-content .mt-figure a:focus-visible { opacity: .7 } @media (any-hover: hover) { .p-entry-content .mt-figure a:where(:any-link, :enabled, summary):hover { opacity: .7 } } .p-entry-content .mt-figure figcaption { display: table-caption; caption-side: bottom; margin-block: 1em; font-size: .75rem } @media only screen and (min-width: 768px) { .p-entry-content .mt-figure figcaption { font-size: .875rem } } .p-entry-content .mt-figure picture img { max-width: inherit } @media only screen and (min-width: 1136px) { .p-entry-content .mt-figure picture img { max-width: 100% } } .p-entry-content .mt-figure p { color: var(--c-gray-dark) } .p-home-pickup { background-color: var(--c-blue-light); padding: 20px; border-radius: 5px; display: grid; grid-template-columns: auto 1fr; justify-items: start; gap: 3px 23px } @media only screen and (min-width: 1136px) { .p-home-pickup { padding: 30px 40px; border-radius: 10px; display: flex; align-items: center; gap: 24px } } .p-home-pickup a { color: #000 } @media only screen and (min-width: 1136px) { .p-home-pickup .c-tag { flex: 0 0 auto } } .p-home-pickup__title { color: var(--main-color); font-weight: 500; font-family: var(--font-family-en); text-transform: uppercase; letter-spacing: -.01em; line-height: 1; justify-self: center; font-size: 1.25rem; grid-column: 1/-1; margin-bottom: 25px } @media only screen and (min-width: 1136px) { .p-home-pickup__title { flex: 0 0 auto; margin: 0 } .p-home-pickup__title:after { content: ""; border-left: 1px solid #000; height: 25px; margin-left: 37px } } .p-home-pickup__article { grid-column: 1/-1; transition: color .3s } .p-home-pickup__article:focus-visible { color: var(--main-color); text-decoration: underline } @media (any-hover: hover) { .p-home-pickup__article:where(:any-link, :enabled, summary):hover { color: var(--main-color); text-decoration: underline } } .p-home-pickup__link { line-height: 1; display: flex; align-items: center; gap: 9px; grid-column: 1/-1; justify-self: end; margin-top: 10px } @media only screen and (min-width: 1136px) { .p-home-pickup__link { flex: 0 0 auto; gap: 18px; margin: 0 0 0 auto } } .p-home-pickup__link:after { content: ""; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_white.svg); background-position: 50%; background-color: var(--main-color); flex: 0 0 auto; width: 14px; height: 14px } @media only screen and (min-width: 768px) { .p-home-pickup__link:after { background-size: 9px 6px; width: 20px; height: 20px } } .p-home-sec { margin-top: 80px } @media only screen and (min-width: 768px) { .p-home-sec { margin-top: 160px } } .p-home-sec .c-heading--line:after { width: 65px } @media only screen and (min-width: 768px) { .p-home-sec .c-heading--line:after { width: 100px } } .p-home-sec .c-button { justify-self: center } .p-home-grid--80 { display: grid; gap: 40px } @media only screen and (min-width: 768px) { .p-home-grid--80 { gap: 80px } } .p-home-grid--40 { display: grid; gap: 40px } .p-home-mv { margin-top: calc(var(--header-height) * -1); position: relative; overflow: hidden } @media only screen and (min-width: 768px) { .p-home-mv { margin-top: calc(var(--header-height-pc) * -1) } } .p-home-mv .splide { height: inherit; opacity: 0; transition: .5s } .p-home-mv .splide.is-initialized { opacity: 1 } .p-home-mv .splide__track { height: inherit } .p-home-mv .splide__track[aria-live=polite] .p-home-mv__image img, .p-home-mv .splide__track[aria-live=polite]+.splide__pagination .splide__pagination__page.is-active+svg circle { animation-play-state: paused } .p-home-mv .splide__slide { width: 100%; display: grid; grid-template-rows: 1fr max-content } @media only screen and (min-width: 768px) { .p-home-mv .splide__slide { display: block } } .p-home-mv .splide__slide.is-active img, .p-home-mv .splide__slide.is-prev img, .p-home-mv .splide__slide img.is-prev { animation-name: fadeInAnime; animation-duration: 12s; animation-fill-mode: forwards } @keyframes fadeInAnime { 0% { transform: scale(1) } to { transform: scale(1.05) } } .p-home-mv .splide__slide img { width: 100%; height: 100%; object-fit: cover } .p-home-mv .splide__pagination { padding: 0; gap: 24px; bottom: 24px; left: var(--padding-inline-container); right: unset } @media only screen and (min-width: 768px) { .p-home-mv .splide__pagination { flex-direction: column; align-content: center; gap: 24px; top: 0; bottom: calc(min(64 / var(--max-layout-width) * 100vw, 64px) + 80px); left: unset; right: calc(min(64 / var(--max-layout-width) * 100vw, 64px) + 8px); block-size: fit-content; margin-block-start: auto } } .p-home-mv .splide__pagination li { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto; grid-template-columns: auto; grid-template-rows: auto } @media only screen and (min-width: 768px) { .p-home-mv .splide__pagination li { width: 24px; height: 24px } } .p-home-mv .splide__pagination__page { position: relative; margin: 0; width: 8px; height: 8px; grid-column: 1; grid-row: 1; background-color: var(--c-gray-dark) } .p-home-mv .splide__pagination__page:after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 24px; height: 24px } .p-home-mv .splide__pagination__page+svg { display: none } .p-home-mv .splide__pagination__page.is-active { transform: scale(1); background-color: var(--c-gray-dark) } .p-home-mv .splide__pagination__page.is-active+svg { display: block; width: 24px; height: 24px; transform: rotate(-90deg); grid-column: 1; grid-row: 1 } @media only screen and (min-width: 768px) { .p-home-mv .splide__pagination__page.is-active+svg { width: 24px; height: 24px } } .p-home-mv .splide__pagination__page.is-active+svg circle { fill: transparent; stroke: var(--c-gray-dark); stroke-width: 1 } .p-home-mv__image { overflow: hidden; aspect-ratio: 1 } @media only screen and (min-width: 768px) { .p-home-mv__image { width: 100vw; height: 100%; aspect-ratio: unset } } .p-home-mv__body { color: var(--main-color); font-weight: 500; font-size: 1rem; display: flex; flex-direction: column; gap: .5em; padding: 6.4vw var(--padding-inline-container) calc(10.6666666667vw + 48px) } @media only screen and (min-width: 768px) { .p-home-mv__body { font-size: max(20px, 1.042vw); margin-inline: auto !important; padding: 0; position: absolute; bottom: 5.417vw; left: 0; right: 0 } } @media only screen and (min-width: 768px) and (min-width: 768px) { .p-home-mv__body { max-width: 90vw } } @media only screen and (min-width: 768px) and (min-width: 1136px) { .p-home-mv__body { max-width: 69.792vw } } @media only screen and (min-width: 768px) { .p-home-mv__body.p-home-mv__body--01 { bottom: 10.417vw } } @media only screen and (min-width: 768px) and (min-width: 768px) { .p-home-mv__body.p-home-mv__body--03 .c-button { align-self: center } } .p-home-mv__body .c-button { margin-top: 1em; align-self: center } @media only screen and (min-width: 768px) { .p-home-mv__body .c-button { align-self: start; min-width: max(266px, 13.854vw); margin-top: 2em } } .p-home-mv__title { font-size: 1.75rem; letter-spacing: -.01em } @media only screen and (min-width: 768px) { .p-home-mv__title { font-size: max(50px, 2.604vw); text-shadow: 0 0 30px var(--c-white); text-shadow: var(--c-white) 0 0 30px, var(--c-white) 0 0 30px, var(--c-white) 0 0 30px, var(--c-white) 0 0 30px, var(--c-white) 0 0 30px } } @media only screen and (min-width: 768px) { .p-home-mv__br-sp { display: none } } .p-home-mv__br-pc { display: none } @media only screen and (min-width: 768px) { .p-home-mv__br-pc { display: block } } .p-home-mv__20th { font-family: var(--font-family-serif); text-align: center; margin-top: 15px; line-height: 2 } @media only screen and (min-width: 768px) { .p-home-mv__20th { display: none } } .p-home-mv__toggle-button { cursor: pointer; display: grid; place-content: center; place-items: center; border-radius: 50%; border: 1px solid var(--c-gray-dark); position: absolute; z-index: 1; bottom: 24px; right: var(--padding-inline-container); width: 24px; height: 24px } @media only screen and (min-width: 768px) { .p-home-mv__toggle-button { bottom: min(64 / var(--max-layout-width) * 100vw, 64px); right: min(64 / var(--max-layout-width) * 100vw, 64px); width: 40px; height: 40px } } .is-menu .p-home-mv__toggle-button, .p-home-mv__toggle-button[aria-pressed=false] .p-home-mv__toggle-button--play, .p-home-mv__toggle-button[aria-pressed=true] .p-home-mv__toggle-button--pause { display: none } .p-home-mv__toggle-button:focus-visible { background-color: var(--c-gray-dark); opacity: 1 } .p-home-mv__toggle-button:focus-visible:focus-visible { outline: none } .p-home-mv__toggle-button:focus-visible .p-home-mv__toggle-button__bg { fill: var(--c-white) } @media (any-hover: hover) { .p-home-mv__toggle-button:where(:any-link, :enabled, summary):hover { background-color: var(--c-gray-dark); opacity: 1 } .p-home-mv__toggle-button:where(:any-link, :enabled, summary):hover:focus-visible { outline: none } .p-home-mv__toggle-button:where(:any-link, :enabled, summary):hover .p-home-mv__toggle-button__bg { fill: var(--c-white) } } @media only screen and (min-width: 768px) { .p-home-mv__toggle-button svg { width: 13px; height: 14px } } .p-home-mv+.l-contents { padding-block-start: 40px } @media only screen and (min-width: 768px) { .p-home-mv+.l-contents { padding-block-start: 80px } } .p-home-sec01 { background-image: url(/assets/img/common/bg_article.webp); background-position: 50% 100%; margin: 40px calc(50% - 50vw); padding: 40px 20px } @media only screen and (min-width: 768px) { .p-home-sec01 { margin: 80px 0 0; padding-block: 80px 110px; border-radius: 10px } } .p-home-sec01 .p-home-sec01__title { text-align: center; width: 335px } @media only screen and (min-width: 768px) { .p-home-sec01 .p-home-sec01__title { width: auto } } @media only screen and (min-width: 768px) { .p-home-sec02__inner { position: relative; padding-top: 106px } } @media only screen and (min-width: 768px) { .p-home-sec02__list { width: 50%; margin-left: auto; border-top: 1px solid rgba(204, 204, 204, .5) } .p-home-sec02__list:before, .p-home-sec02__list:after { content: ""; display: block; position: absolute; z-index: -1; bottom: 0; background-color: var(--main-color); height: calc(100% - 106px) } .p-home-sec02__list:before { left: 0; width: 44%; border-radius: 0 10px 10px 0 } .p-home-sec02__list:after { left: calc(50% - 50vw); width: calc(50vw - 50%) } } .p-home-sec02__item { border-bottom: 1px solid rgba(204, 204, 204, .5) } .p-home-sec02__item:has(.p-home-sec02__btn[aria-expanded=true]) { border: none } @media only screen and (min-width: 768px) { .p-home-sec02__item:has(.p-home-sec02__btn[aria-expanded=true]) { border-bottom: 1px solid rgba(204, 204, 204, .5) } } .p-home-sec02__btn { font-weight: 500; text-align: left; display: flex; align-items: center; gap: 18px; width: 100%; background-image: url(/assets/img/common/ico_plus.svg); background-position: 100% 50%; padding: 25px 30px 25px 0; transition: .3s; color: #000 } @media only screen and (min-width: 768px) { .p-home-sec02__btn { gap: 30px; background-image: none; padding: 40px 0; font-size: 1.25rem } } .p-home-sec02__btn[aria-expanded=true] { color: var(--main-color); background-image: url(/assets/img/common/ico_minus.svg) } @media only screen and (min-width: 768px) { .p-home-sec02__btn[aria-expanded=true] { background: none; padding-left: 20px } } .p-home-sec02__btn span { color: var(--main-color); font-family: var(--font-family-en); font-weight: 400; font-size: .875rem } .p-home-sec02__panel { visibility: hidden; opacity: 0; max-height: 0; transition: .3s; width: 100% } @media only screen and (min-width: 768px) { .p-home-sec02__panel { width: 38%; height: calc(100% - 106px); max-height: unset; position: absolute; top: 106px; left: 0 } } .p-home-sec02__panel[aria-hidden=false] { visibility: visible; opacity: 1; max-height: 1000px } @media only screen and (min-width: 768px) { .p-home-sec02__panel .c-button { margin-top: 16px; justify-self: left } } .p-home-sec02__panel-inner { color: #fff; background-color: var(--main-color); padding: 20px; display: flex; flex-direction: column-reverse; gap: 40px } @media only screen and (min-width: 768px) { .p-home-sec02__panel-inner { background-color: transparent; padding: 0; justify-content: flex-end; gap: 0; height: 100% } } .p-home-sec02__title { display: grid; gap: 5px; font-weight: 500; font-size: 1.25rem } @media only screen and (min-width: 768px) { .p-home-sec02__title { font-size: 1.75rem } } .p-home-sec02__title span { font-size: .875rem; font-family: var(--font-family-en); font-weight: 400 } @media only screen and (min-width: 768px) { .p-home-sec02__title span { display: none } } .p-home-sec02__txt { display: grid; gap: 20px } @media only screen and (min-width: 768px) { .p-home-sec02__txt { margin-block: auto; font-size: 1rem; transition: .7s; opacity: 0; transform: translate(-30px) } .p-home-sec02__panel[aria-hidden=false] .p-home-sec02__txt { opacity: 1; transform: translate(0) } } @media only screen and (min-width: 768px) { .p-home-sec02__fig { margin-top: -106px; transition: .7s; opacity: 0 } .p-home-sec02__panel[aria-hidden=false] .p-home-sec02__fig { opacity: 1 } } .p-home-sec02__fig img { border-radius: 5px; width: 100% } @media only screen and (min-width: 768px) { .p-home-sec04 .c-button { justify-self: left } } .p-home-sec03__list { display: flex; flex-wrap: wrap; gap: 40px } @media only screen and (min-width: 1136px) { .p-home-sec03__list { justify-content: space-between; margin-inline: calc(50% - 50vw); gap: 0 } } .p-home-sec03__item { width: 100%; border-radius: 5px; overflow: hidden } @media only screen and (min-width: 1136px) { .p-home-sec03__item { width: 24.688%; border-radius: 10px; transition: .3s } .p-home-sec03__item.is-active { width: 48.906% } .p-home-sec03__item.is-active .p-home-sec03__img { transform: scale(1.1) } .p-home-sec03__item:first-child { border-radius: 0 10px 10px 0 } .p-home-sec03__item:last-child { border-radius: 10px 0 0 10px } } .p-home-sec03__link { background-color: var(--main-color); display: block; color: #fff; transition: .3s } @media only screen and (min-width: 1136px) { .p-home-sec03__link { min-height: 630px; height: 100% } } .p-home-sec03__link:hover, .p-home-sec03__link:focus-within { background-color: var(--sub-color-dark) } .p-home-sec03__link:hover .p-home-sec03__title:after, .p-home-sec03__link:focus-within .p-home-sec03__title:after { transform: translate(4px); transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow_green.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 20px; height: 20px } @media only screen and (min-width: 768px) { .p-home-sec03__link:hover .p-home-sec03__title:after, .p-home-sec03__link:focus-within .p-home-sec03__title:after { background-size: 9px 6px; width: 20px; height: 20px } } .p-home-sec03__fig { overflow: hidden } .p-home-sec03__img { aspect-ratio: 334/188; background-size: cover; background-position: 50%; transition: .3s } @media only screen and (min-width: 1136px) { .p-home-sec03__img { aspect-ratio: unset; height: 315px } } .p-home-sec03__img--01 { background-image: url(/assets/img/home/img_business01.webp) } .p-home-sec03__img--02 { background-image: url(/assets/img/home/img_business02.webp) } .p-home-sec03__img--03 { background-image: url(/assets/img/home/img_business03.webp) } .p-home-sec03__body { display: grid; align-items: start; gap: 10px; padding: 20px } @media only screen and (min-width: 768px) { .p-home-sec03__body { padding: 60px; gap: 25px } } @media only screen and (min-width: 1136px) { .p-home-sec03__body { gap: 40px } } .p-home-sec03__title { font-weight: 500; display: flex; align-items: center; gap: 8px; font-size: 1.125rem } @media only screen and (min-width: 768px) { .p-home-sec03__title { font-size: 1.5rem } } .p-home-sec03__title:after { content: ""; display: block; background-size: 9px 6px; transition: .3s; border-radius: 50%; background-image: url(/assets/img/common/ico_arrow.svg); background-position: 50%; background-color: #fff; flex: 0 0 auto; width: 16px; height: 16px } @media only screen and (min-width: 768px) { .p-home-sec03__title:after { background-size: 9px 6px; width: 20px; height: 20px } } .p-home-sec06 { padding-block: 100px } .p-home-sec07 { margin-inline: calc(50% - 50vw); margin-top: 0; padding: 50px 20px 0; position: relative; overflow: hidden; height: 386px } @media only screen and (min-width: 768px) { .p-home-sec07 { height: 558px; padding-top: 115px } } .p-home-sec07 .l-contents__inner { position: relative; z-index: 1 } @media only screen and (min-width: 768px) { .p-home-sec07 .c-button { justify-self: left } } .p-home-sec07__text { width: 10em; font-size: 1.25rem } @media only screen and (min-width: 768px) { .p-home-sec07__text { width: 16em; font-size: 1.5rem } } .p-home-sec07__bg { object-fit: cover; object-position: 56% 0; position: absolute; z-index: 0; top: 0; left: 50%; transform: translate(-50%); transition: top 2s; width: 100%; height: 431px } @media only screen and (min-width: 768px) { .p-home-sec07__bg { height: 599px } } .p-home-sec08 .p-home-grid--40 { gap: 20px } @media only screen and (min-width: 768px) { .p-home-sec08 .p-home-grid--40 { gap: 40px } } .p-home-sec08 .c-grid--2cols { gap: 0 40px } .p-home-sec09 .c-grid { gap: 40px } .p-home-bnr { display: grid; justify-items: center; gap: 16px } @media only screen and (min-width: 768px) { .p-home-bnr { grid-template-columns: repeat(3, 1fr); gap: 20px } } @media only screen and (min-width: 1136px) { .p-home-bnr { gap: 40px } } @media only screen and (min-width: 768px) { .p-home-bnr__link { transition: .3s } } .p-home-bnr__link:focus-visible { opacity: .7 } @media (any-hover: hover) { .p-home-bnr__link:where(:any-link, :enabled, summary):hover { opacity: .7 } } .p-home-bnr__link img { border-radius: 5px; border: 1px solid var(--c-gray) } .p-inquiry h2 { font-weight: 500 } .p-inquiry h2.c-heading--main { color: var(--main-color) } .p-inquiry h2.c-heading--sub { color: var(--sub-color-dark) } .p-inquiry h2 { font-size: 1.5rem } @media only screen and (min-width: 768px) { .p-inquiry h2 { font-size: 2rem } } .p-inquiry h2.c-heading--line { display: grid; gap: 27px } @media only screen and (min-width: 768px) { .p-inquiry h2.c-heading--line { gap: 32px } } .p-inquiry h2.c-heading--line:after { content: ""; width: 100px; height: 3px; background-color: var(--sub-color) } .p-inquiry p:not([class]), .p-inquiry div:not([class]) { font-family: var(--font-family); margin-block-end: 1em } .p-inquiry p:not([class]) code, .p-inquiry div:not([class]) code { background-color: var(--c-gray-light) } .p-inquiry__summary { margin-bottom: 5em } .p-inquiry ul:not([class]) { margin: 1em 0 2em 1.5em; display: grid; gap: .8em } .p-inquiry ul:not([class]) li { list-style-type: disc } .p-inquiry ul:not([class]) li::marker { color: var(--main-color) } .p-inquiry ul:not([class]).p_formCheckList { list-style: none } .p-inquiry ul:not([class]).p_formCheckList li { line-height: 1.5 } .p-inquiry .p_formAreaBox { display: block; padding-block: 2em; border-block-start-width: 1px; border-style: solid; border-color: var(--c-gray-light) } @media only screen and (min-width: 768px) { .p-inquiry .p_formAreaBox { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding-inline: 1em } .p-inquiry .p_formAreaBox.is_flexstart { align-items: flex-start } } .p-inquiry .p_formAreaBox__title { display: block; width: 100%; margin-bottom: 1em } @media only screen and (min-width: 768px) { .p-inquiry .p_formAreaBox__title { width: 30%; margin-bottom: 0 } } @media only screen and (min-width: 768px) { .p-inquiry .p_formAreaBox__input { width: 68% } } .p-inquiry .p_formAreaBox__example { display: block } @media only screen and (min-width: 768px) { .p-inquiry .p_formAreaBox__example { width: 68%; margin-left: 32%; margin-bottom: 0 } } .p-inquiry .p_privacyAreaBox { display: block; padding-block: 2em; border-block-start-width: 1px; border-style: solid; border-color: var(--c-gray-light); text-align: center } .p-inquiry .p_formhighlightBox { display: block; width: 100%; padding: 40px; background: var(--c-blue-light) none } .p-inquiry .p_formhighlightBox ul { margin-bottom: 0 } .p-inquiry .p_formhighlightBox--title { margin-bottom: 1em; font-size: 1.125rem; color: var(--main-color); font-weight: 600 } .p-page-content { word-break: break-word } .p-page-content>.l-contents__inner>:last-child { margin-block-end: 0 } .p-page-content p:not([class]) { margin-block-end: 1.75em } .p-page-content p:last-child { margin-block-end: 0 } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)) { color: var(--main-color); text-decoration: underline; word-break: break-word } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)) img { transition: opacity .3s; opacity: 1 } @media (hover: hover) { .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)) { transition: color .3s, opacity .3s } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)):is(:hover, :active, :focus) { opacity: .7 } } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)):focus-visible { color: var(--main-color) } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)):focus-visible img { opacity: .7 } @media (any-hover: hover) { .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)):where(:any-link, :enabled, summary):hover { color: var(--main-color) } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img)):where(:any-link, :enabled, summary):hover img { opacity: .7 } } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img))[target=_blank]:not([href$=".pdf"], :has(img), [class]) { position: relative; padding-right: 2em } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img))[target=_blank]:not([href$=".pdf"], :has(img), [class]):after { content: ""/"外部リンク"; position: absolute; background-image: url(/assets/img/common/ico_external_link.svg); background-size: contain; width: 14px; height: 14px; margin: .5em 0 0 .5em } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img))[href$=".pdf"] { position: relative; padding-right: 2em } .p-page-content:where(*) a:not([class]):not(.c-button):not(:has(img))[href$=".pdf"]:after { content: ""/"PDFファイル"; position: absolute; background-image: url(/assets/img/common/ico_pdf.svg); background-size: contain; width: 15px; height: 19px; margin: .3em 0 0 .5em } .p-page-header { position: relative; word-break: break-word; padding-inline: var(--padding-inline-container); overflow: hidden } .p-page-header--underline { border-bottom: 1px solid var(--c-gray) } .p-page-header__inner { display: grid; align-items: center; min-height: 120px; padding-block: 40px } @media only screen and (min-width: 768px) { .p-page-header__inner { min-height: 296px } } .p-page-header--image .p-page-header__inner { align-items: end; min-height: 300px; padding-block: 48px } @media only screen and (min-width: 768px) { .p-page-header--image .p-page-header__inner { align-items: center; min-height: 497px; padding-block: 40px } } .p-page-header__title { font-weight: 500; color: var(--main-color); position: relative; z-index: 1; font-size: 1.75rem } @media only screen and (min-width: 768px) { .p-page-header__title { font-size: 3.125rem } } .p-page-header--image .p-page-header__title { color: #fff } .p-page-header__img { position: absolute; top: 0; left: 0; transition: top 2s; object-fit: cover; width: 100%; height: 116.666% } .p-page-header-sub { display: flex; flex-direction: column-reverse; gap: 15px } @media only screen and (min-width: 768px) { .p-page-header-sub { display: grid; align-items: center; grid-template-columns: min(31.343%, 420px) 1fr; margin-right: calc(50% - 50vw); gap: 40px } } @media only screen and (min-width: 1136px) { .p-page-header-sub { gap: 112px } } .p-page-header-sub__body { display: grid; gap: 20px } @media only screen and (min-width: 768px) { .p-page-header-sub__body { flex: 0 0 min(25.767%, 420px); gap: 40px } } .p-page-header-sub__fig { margin-right: calc(50% - 50vw) } @media only screen and (min-width: 768px) { .p-page-header-sub__fig { margin: 0 } } .p-page-header-sub__img { object-fit: cover; border-radius: 5px 0 0 5px; width: 100%; height: 250px } @media only screen and (min-width: 768px) { .p-page-header-sub__img { border-radius: 10px 0 0 10px; height: 500px } } .p-page-header-sub__title { font-weight: 500; font-size: 1.5rem } @media only screen and (min-width: 768px) { .p-page-header-sub__title { font-size: 2rem } } .p-page-header-sub__text { line-height: 1.75 } @media only screen and (min-width: 768px) { .p-page-header-sub__text { line-height: 2 } } .p-highlight-header .l-contents__inner { height: unset; padding-block: 40px 80px } @media only screen and (min-width: 768px) { .p-highlight-header .l-contents__inner { padding-block: 68px 80px } } .p-highlight-header .p-page-header__title { margin-block-end: 40px } @media only screen and (min-width: 768px) { .p-highlight-header .p-page-header__title { margin-block-end: 68px } } .p-highlight-contents { background-color: var(--c-blue-light) } @media only screen and (min-width: 768px) { .p-highlight-contents { padding-block: 80px 160px } } .l-highlight-wrapper { display: grid; grid-template-columns: 1fr; row-gap: 80px; margin-inline: calc(50% - 50vw); margin-block-end: 80px } @media only screen and (min-width: 768px) { .l-highlight-wrapper { column-gap: 40px; margin-inline: unset } } @media only screen and (min-width: 1136px) { .l-highlight-wrapper { row-gap: unset; align-items: start; grid-template-columns: calc(960 / var(--layout-width) * 100%) calc(340 / var(--layout-width) * 100%) } } .l-highlight-main, .l-highlight-sub { background-color: var(--c-white) } @media only screen and (min-width: 768px) { .l-highlight-main, .l-highlight-sub { border-radius: 10px; width: 100%; max-width: 880px; margin-inline: auto } } @media only screen and (min-width: 1136px) { .l-highlight-main, .l-highlight-sub { max-width: unset; margin-inline: unset } } .l-highlight-main { padding: 80px var(--padding-inline-container) } @media only screen and (min-width: 768px) { .l-highlight-main { padding: 40px } } @media only screen and (min-width: 1136px) { .l-highlight-main { padding: 80px } } .l-highlight-sub { padding: 40px } .p-highlight-widget-title { border-bottom: 1px solid var(--c-gray) } .p-highlight-archives { display: grid; row-gap: 16px } .p-highlight-archives a { color: var(--main-color); text-decoration: underline } .p-highlight-archives a:focus-visible { opacity: .7 } @media (any-hover: hover) { .p-highlight-archives a:where(:any-link, :enabled, summary):hover { opacity: .7 } } @media only screen and (min-width: 1136px) { .p-highlight-top-button { max-width: calc(960 / var(--layout-width) * 100%) } } .p-way-title__img { width: clamp(20.938rem, .908rem + 85.46vw, 41.875rem) } @media only screen and (min-width: 768px) { .p-way-intro { column-gap: 56px } } .p-way-intro__text { line-height: 2.8214285714 } .p-way-intro__fig { margin-inline-end: clamp(-262px, 669.7744360902px + -49.2481203008vw, 0px) } .p-way-naming { margin-inline: calc(50% - 50vw) } @media only screen and (min-width: 1136px) { .p-way-naming { margin-inline: unset; border-radius: 10px } } .p-way-naming__logo { width: clamp(12.5rem, 3.532rem + 38.27vw, 21.875rem) } .p-way-naming__text { line-height: 2.1666666667 } @media only screen and (min-width: 1136px) { .p-way-foundation { margin-inline-end: calc(50% - 50vw); justify-content: start; grid-template-columns: auto 1fr } } .p-way-foundation__content { background-color: var(--c-blue-light); border-image: linear-gradient(var(--c-blue-light) 0 0) fill 0; border-image-outset: 0 8vi 0 100vi; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-block: 40px } @media only screen and (min-width: 1136px) { .p-way-foundation__content { max-width: 670px; padding: 160px 56px 160px 0; padding: clamp(80px, -365.4901960784px + 39.2156862745vw, 160px) clamp(28px, -127.9215686275px + 13.7254901961vw, 56px) clamp(80px, -365.4901960784px + 39.2156862745vw, 160px) 0 } } .p-way-foundation__image { margin-inline: calc(50% - 50vw) } @media only screen and (min-width: 1136px) { .p-way-foundation__image { translate: 0 clamp(160px, -730.9803921569px + 78.431372549vw, 320px); margin-inline: unset } .p-way-foundation__image img { max-height: 1005px; object-fit: cover; border-top-left-radius: 10px; border-bottom-left-radius: 10px } } @media only screen and (min-width: 1650px) { .p-way-foundation__image { margin-inline: 0 calc(50% + var(--layout-width) * 1px / 4 - 50vw) } } .p-way-contribution__fig { margin-inline: calc(50% - 50vw); max-height: 700px; overflow: hidden } .p-way-contribution__fig img { max-height: inherit; width: 100%; object-fit: cover } .p-way-contribution__number { position: absolute; top: -.5lh; color: var(--sub-color); font-family: var(--font-family-en); font-weight: 700; font-size: 3.125rem } @media only screen and (min-width: 1136px) { .p-way-contribution__number { font-size: 6.25rem } } .p-way-contribution__content { position: relative; padding: 40px 20px; margin-block-end: -20px; border-radius: 5px; background-color: var(--c-white); max-width: 100%; translate: 0 -20px } @media only screen and (min-width: 1136px) { .p-way-contribution__content { margin-block-end: -150px; padding: 64px; max-width: calc(882 / var(--layout-width) * 100%); translate: 0 -50% } } .p-way-slide .c-infinite-slide__wrapper img:nth-child(1) { --_w: 468; --_h: 467; --_x: 0; --_y: 0 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(2) { --_w: 389; --_h: 467; --_x: 532; --_y: 169 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(3) { --_w: 520; --_h: 403; --_x: 985; --_y: 60 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(4) { --_w: 389; --_h: 468; --_x: 1331; --_y: 228 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(5) { --_w: 389; --_h: 467; --_x: 1784; --_y: -6 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(6) { --_w: 623; --_h: 467; --_x: 2237; --_y: 170 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(7) { --_w: 389; --_h: 389; --_x: 2924; --_y: 170 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(8) { --_w: 714; --_h: 467; --_x: 3155; --_y: -68 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(9) { --_w: 492; --_h: 592; --_x: 3933; --_y: 48 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(10) { --_w: 571; --_h: 403; --_x: 4335; --_y: 280 } .p-way-slide .c-infinite-slide__wrapper img:nth-child(11) { --_w: 623; --_h: 467; --_x: 4970; --_y: 60 } .p-20th__load-wrap { position: relative; scale: .56; top: -130px } @media only screen and (min-width: 1136px) { .p-20th__load-wrap { position: unset; scale: unset; top: unset } } .p-20th__load { --clip-path: path("M6440 2250.8c2145.4 268.6 4342.9 1287.7 3121.8 2733.8C8913 5752.9 7900 6426.1 6985.5 6957.1c-2113.3 1227.1-4868.3 1249.5-4853.7 1232-.5-778.7.5-1913.8.2-2583.1 10.4 5 2936.2 155.1 4300.1-1022.7 119.8-104.1 192.6-204 261.4-296.9 416-561.3-110.2-854.9-440.4-984.5-228.1-89.5-2603.6-935.3-2228-2020.3 254.7-585.2 1312.7-420 1472.3-690.2 64.4-130.9-45.1-240.4-152.3-322.4C5177.3 145 4926.5 45.7 4722.7 1.8c-4.5-1-7.3-1.6-7.1-1.9 20.7 1 83.8 1 103.4 1.7 247.8 66.1 937.6 293.5 783.1 632.5-141.4 271.6-995.3 234.3-1240.4 620.4-57.2 96.7-7.8 197.9 64.2 281.2 236.9 274.7 906.6 563.1 1460 636.1 133.8 19.4 520.9 73.9 554.1 79Z"); --original-width: 7780; --original-height: 8192; width: calc(var(--original-width) * 1px); aspect-ratio: var(--original-width)/var(--original-height); position: absolute; z-index: 2; margin-inline: auto; inset: 0; transform: translate(calc(50vw - 5040px)) } @media only screen and (min-width: 1136px) { .p-20th__load { top: -80px; transform: translate(calc(50vw - 5040px)) } } .p-20th__load:before { content: ""; position: absolute; inset: 0; width: calc(var(--original-width) * 1px); aspect-ratio: var(--original-width)/var(--original-height); clip-path: var(--clip-path); background-image: url(/assets/img/20th/bg_texture.webp); background-repeat: repeat } .p-20th { padding: 50px 0 0; position: relative; overflow: hidden } @media only screen and (min-width: 1136px) { .p-20th { padding: 120px 0 0 } } .p-20th picture { display: block } .p-20th section { position: relative } .p-20th_obj_road { position: absolute; width: 5104px; height: 4280px; top: -60px; left: 50%; transform: translateZ(0) translate(-50%); z-index: 2; translate: 0 60px } @media only screen and (min-width: 1136px) { .p-20th_obj_road { width: 9912px; height: 8192px; z-index: 2; top: -50px; translate: 0 120px } } .p-20th_obj_01 { width: 391px; height: 58px; position: absolute; top: 22px; left: 50%; transform: translate(-50%); z-index: 3; transition-delay: .6s !important } @media only screen and (min-width: 1136px) { .p-20th_obj_01 { width: 1922px; height: 211px; top: 108px } } .p-20th_obj_02 { width: 461px; height: 241px; position: absolute; top: 176px; left: 50%; transform: translate(-50%); z-index: 1; transition-delay: 1.2s !important } @media only screen and (min-width: 1136px) { .p-20th_obj_02 { width: 2166px; height: 951px; top: 268px } } .p-20th_obj_03 { width: 375px; height: 70px; position: absolute; top: 322px; left: 50%; transform: translate(-50%); z-index: 4; transition-delay: 1.2s !important } @media only screen and (min-width: 1136px) { .p-20th_obj_03 { width: 1922px; height: 200px; top: 730px } } .p-20th_obj_04 { width: 375px; height: 94px; position: absolute; top: 345px; left: 50%; transform: translate(-50%); z-index: 3; transition-delay: 1.2s !important } @media only screen and (min-width: 1136px) { .p-20th_obj_04 { width: 1922px; height: 300px; top: 724px } } .p-20th_obj_05 { width: 375px; height: 94px; position: absolute; top: 866px; left: 50%; transform: translate(-50%); z-index: 3 } @media only screen and (min-width: 1136px) { .p-20th_obj_05 { width: 1922px; height: 300px; top: 1310px } } .p-20th_obj_06 { width: 835px; height: 213px; position: absolute; top: 853px; left: 50%; transform: translate(-50%); z-index: 3 } @media only screen and (min-width: 1136px) { .p-20th_obj_06 { width: 3198px; height: 749px; top: 1429px } } .p-20th_obj_07 { width: 375px; height: 91px; position: absolute; top: -90px; left: 50%; transform: translate(-50%); z-index: 4 } @media only screen and (min-width: 1136px) { .p-20th_obj_07 { width: 1922px; height: 330px; top: -60px; z-index: 4 } } .p-20th_obj_08 { position: absolute; width: clamp(126.76px, 0px + 33.8026666667vw, 383.6602666667px) } @media only screen and (min-width: 1136px) { .p-20th_obj_08 { left: -141px; bottom: 3%; z-index: 3; width: clamp(258.1818181818px, 0px + 22.7272727273vw, 375px) } } .p-20th_obj_09 { position: absolute; top: 77%; right: 4%; width: clamp(80px, 0px + 21.3333333333vw, 242.1333333333px) } @media only screen and (min-width: 768px) { .p-20th_obj_09 { top: 65% } } @media only screen and (min-width: 1136px) { .p-20th_obj_09 { top: 806px; right: -6%; z-index: 3; width: clamp(161.1054545455px, 0px + 14.1818181818vw, 234px) } } .p-20th_obj_10 { width: 623px; height: 201px; position: absolute; bottom: -11px; left: 50%; transform: translate(-50%); z-index: 4 } @media only screen and (min-width: 768px) { .p-20th_obj_10 { width: 2800px; height: 452px; bottom: 0; z-index: 5 } } .p-20th_obj_11 { width: 375px; height: 130px; position: absolute; top: -65px; left: 50%; transform: translate(-50%); z-index: 4 } @media only screen and (min-width: 1136px) { .p-20th_obj_11 { width: 1922px; height: 252px; top: -350px; z-index: 5 } } .p-20th_obj_12 { width: 734px; height: 192px; position: absolute; top: -120px; left: 50%; transform: translate(-50%); z-index: 4 } @media only screen and (min-width: 1136px) { .p-20th_obj_12 { width: 2696px; height: 559px; top: -644px; z-index: 5 } } .p-20th_obj_13 { width: 375px; height: 148px; position: absolute; top: -74px; left: 50%; transform: translate(-50%); z-index: 4 } @media only screen and (min-width: 1136px) { .p-20th_obj_13 { width: 1922px; height: 324px; top: -118px; z-index: 5 } } .p-20th__ttl { position: relative } .p-20th__ttl:after { content: ""; display: block; width: 65px; height: 3px; background-color: var(--sub-color); position: absolute; bottom: 0; left: 50%; transform: translate(-50%) } .p-20th-read { padding: 0 0 324px; z-index: 8 } @media only screen and (min-width: 1136px) { .p-20th-read { padding: 0 0 400px } } .p-20th-read .l-contents__inner:before, .p-20th-read .l-contents__inner:after { content: ""; display: block; position: absolute } .p-20th-read__ttl { transition-delay: 1.8s !important; margin: 0 0 256px } @media only screen and (min-width: 1136px) { .p-20th-read__ttl { margin: 0 0 505px } } .p-20th-read__ttl--img { width: 186px; margin: 0 auto 24px } @media only screen and (min-width: 1136px) { .p-20th-read__ttl--img { width: 434px; margin: 0 auto 40px } } .p-20th-read__ttl--txt { width: 202px; margin: 0 auto } @media only screen and (min-width: 1136px) { .p-20th-read__ttl--txt { width: 504px } } .p-20th-read p { line-height: 2.285 } @media only screen and (min-width: 1136px) { .p-20th-read p { line-height: 2.5 } } .p-20th-message { padding: 0 4% 320px; z-index: 3 } @media only screen and (min-width: 768px) { .p-20th-message { padding: 0 4% 600px } } @media only screen and (min-width: 1136px) { .p-20th-message { box-sizing: border-box; max-width: calc(1340px + 8%); padding: 0 4% 484px; margin: 0 auto } } @media only screen and (min-width: 1136px) { .p-20th-message .l-contents__inner { background: var(--c-gray-lighter); border-radius: 20px; max-width: 1340px; padding: 112px; margin: 0 auto; position: relative; z-index: 3 } } .p-20th-message h2 { color: var(--c-white); position: relative; z-index: 5 } @media only screen and (min-width: 1136px) { .p-20th-message h2 { color: var(--main-color) } } .p-20th-message__cont { background: var(--c-gray-lighter); border-radius: 10px; overflow: hidden; max-width: 1000px; margin: 0 auto } @media only screen and (min-width: 1136px) { .p-20th-message__cont { background: none; border-radius: 0; display: flex; gap: 112px; max-width: none } } @media only screen and (min-width: 1136px) { .p-20th-message__img, .p-20th-message__txt { width: calc((100% - 112px)/2) } } .p-20th-message__img p, .p-20th-message__txt p { letter-spacing: 0 } .p-20th-message__img img { width: 100% } .p-20th-future { position: relative; background: var(--c-gray-lighter); padding: 56px 4% 160px; z-index: 3 } .p-20th-future:before { content: ""; width: 100%; height: 100%; background-color: var(--c-gray-lighter); z-index: -1 } @media only screen and (min-width: 1136px) { .p-20th-future { background: unset; padding: 152px 4% 600px; z-index: 4 } } .p-20th-future .l-contents__inner figure img { aspect-ratio: auto } .p-20th-future .l-contents__inner p { line-height: 2 } .p-20th-future .l-contents__inner .p-block { margin-block-start: 80px } @media only screen and (min-width: 1136px) { .p-20th-future .l-contents__inner .p-block { margin-block-start: 104px } } .p-20th-attempt { background: url(/assets/img/20th/bg_texture.webp) repeat center center; padding: 112px 4% 154px; z-index: 3 } @media only screen and (min-width: 1136px) { .p-20th-attempt { background: none; padding: 0 4% 160px; z-index: 9 } } @media only screen and (min-width: 768px) { .p-20th-attempt__list { display: flex; flex-wrap: wrap; gap: 40px } } .p-20th-attempt__list--item { width: fit-content; margin: 0 auto } @media only screen and (min-width: 768px) { .p-20th-attempt__list--item { width: calc((100% - 40px)/2) } } @media only screen and (min-width: 1136px) { .p-20th-attempt__list--item { width: calc((100% - 120px)/4) } } .p-20th-attempt__list--item .modal-open span:after { transition: translate .3s } .p-20th-attempt__list--item .modal-open figure img { width: 100%; transition: scale .3s, opacity .3s } .p-20th-attempt__list--item .modal-open:focus-visible img { scale: 1.07; opacity: .7 } .p-20th-attempt__list--item .modal-open:focus-visible span:after { translate: 4px 0 } @media (any-hover: hover) { .p-20th-attempt__list--item .modal-open:where(:any-link, :enabled, summary):hover img { scale: 1.07; opacity: .7 } .p-20th-attempt__list--item .modal-open:where(:any-link, :enabled, summary):hover span:after { translate: 4px 0 } } .p-20th-memorial { background: var(--c-gray-lighter); padding: 128px 4% 80px; z-index: 6 } .is-modal-open .p-20th-memorial { z-index: -1 } @media only screen and (min-width: 1136px) { .p-20th-memorial { padding: 160px 4% 136px; z-index: 8 } } .p-20th-memorial .l-contents__inner { position: relative; z-index: 8 } .p-20th-memorial h3 { max-width: 226px } @media only screen and (min-width: 1136px) { .p-20th-memorial h3 { max-width: 332px } } .p-20th-content-bg { background-color: var(--c-gray-lighter) } .modal-overlay { align-items: center; background: #0009; display: flex; justify-content: center; inset: 0; position: fixed; z-index: 100 } .modal-wrap { max-width: 1340px; width: 92% } .modal-container { background: var(--c-white); border-radius: 10px; overflow-y: auto; padding: 40px 4%; height: fit-content; max-height: 80dvh } @media only screen and (min-width: 1136px) { .modal-container { padding: 96px 112px; display: flex; flex-wrap: wrap; align-items: center } } .modal-close { background: var(--c-white); border-radius: 999px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: absolute; top: -50px; right: 0 } @media only screen and (min-width: 1136px) { .modal-close { cursor: pointer; top: -60px; right: 0 } } .modal-close:before { content: "✕"; display: block } .modal-header { display: flex; justify-content: space-between } @media only screen and (min-width: 1136px) { .modal-content { display: flex; flex-wrap: wrap; column-gap: 112px; row-gap: 40px; align-items: center } } @media only screen and (min-width: 1136px) { .modal-content .p-block-button { width: 100% } } .modal-content .p-block-button .c-button { display: block; margin: 0 auto; max-width: 90% } @media only screen and (min-width: 1136px) { .modal-content .p-block-button .c-button { max-width: 266px } } @media only screen and (min-width: 1136px) { .modal-image { width: calc((100% - 112px)/2) } } @media only screen and (min-width: 1136px) { .modal-text { width: calc((100% - 112px)/2) } } .modal-open { cursor: pointer; display: block } .modal-open figure { border-radius: 5px; overflow: hidden } .modal-open span { position: relative; display: block; width: fit-content; padding: 0 28px 0 0 } .modal-open span:after { background: url(/assets/img/common/ico_circle_arrow_white.svg) no-repeat; background-size: 100%; content: ""; display: block; width: 20px; height: 20px; position: absolute; top: 50%; right: 0; transform: translateY(-50%) } @keyframes mmfadeIn { 0% { opacity: 0 } to { opacity: 1 } } @keyframes mmfadeOut { 0% { opacity: 1 } to { opacity: 0 } } @keyframes mmslideIn { 0% { transform: translateY(15%) } to { transform: translateY(0) } } @keyframes mmslideOut { 0% { transform: translateY(0) } to { transform: translateY(-10%) } } .micromodal-slide { display: none } .micromodal-slide.is-open { display: block } .micromodal-slide[aria-hidden=false] .modal-wrap { animation: mmfadeIn .3s cubic-bezier(0, 0, .2, 1) } .micromodal-slide[aria-hidden=false] .modal-wrap { animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1) } .micromodal-slide[aria-hidden=true] .modal-overlay { animation: mmfadeOut .3s cubic-bezier(0, 0, .2, 1) } .micromodal-slide[aria-hidden=true] .modal-wrap { animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1) } .micromodal-slide .modal-wrap, .micromodal-slide .modal-overlay { will-change: transform } .scrollAnimate { opacity: 0; transition: opacity 1.4s, translate .8s; translate: 0 40px } .scrollAnimate.is-show { opacity: 1; translate: 0 0 } .scrollAnimate.left-to-right { translate: -40px 0; transition: opacity 1.4s, translate .8s } .scrollAnimate.left-to-right.is-show { translate: 0 0 } .scrollAnimate.right-to-left { translate: 40px 0; transition: opacity 1.4s, translate .8s } .scrollAnimate.right-to-left.is-show { translate: 0 0 } .p-company__message { display: flex; flex-direction: column; gap: 40px } @media only screen and (min-width: 1136px) { .p-company__message { flex-direction: inherit } } @media only screen and (min-width: 1136px) { .p-company__message--ttl { width: 420px } } @media only screen and (min-width: 1136px) { .p-company__message--txt { width: calc(100% - 460px) } } .p-company__history--origins { background: url(/assets/img/company/bg_history_sp.webp) no-repeat center center; background-size: cover; border-radius: 10px; overflow: hidden; text-align: center; padding: 40px 4% } @media only screen and (min-width: 1136px) { .p-company__history--origins { background: url(/assets/img/company/bg_history_pc.webp) no-repeat center center; background-size: cover; border-radius: 20px; padding: 80px 4% } } .p-company__center--col { display: flex; flex-direction: column; gap: 24px } @media only screen and (min-width: 1136px) { .p-company__center--col { flex-direction: row-reverse; gap: 40px } } .p-company__center--col figure { border-radius: 5px; display: block; overflow: hidden; width: 100% } @media only screen and (min-width: 1136px) { .p-company__center--col figure { width: 420px } } @media only screen and (min-width: 1136px) { .p-company__center--col table { width: calc(100% - 460px) } } .p-company-map__list { display: flex !important; flex-wrap: wrap; gap: 24px !important; margin: 0 !important } .p-company-map__list li { width: 100%; list-style-type: none !important } @media only screen and (min-width: 1136px) { .p-company-map__list li { width: calc((100% - 48px) / 3) } } .p-company-map__list li a { color: var(--main-color); text-decoration: underline; word-break: break-word } .p-company-map__list li a img { transition: opacity .3s; opacity: 1 } @media (hover: hover) { .p-company-map__list li a { transition: color .3s, opacity .3s } .p-company-map__list li a:is(:hover, :active, :focus) { opacity: .7 } } .p-company-map__list li a:focus-visible { color: var(--main-color) } .p-company-map__list li a:focus-visible img { opacity: .7 } @media (any-hover: hover) { .p-company-map__list li a:where(:any-link, :enabled, summary):hover { color: var(--main-color) } .p-company-map__list li a:where(:any-link, :enabled, summary):hover img { opacity: .7 } } .p-company-map__list li a[target=_blank]:not([href$=".pdf"], :has(img), [class]) { position: relative; padding-right: 2em } .p-company-map__list li a[target=_blank]:not([href$=".pdf"], :has(img), [class]):after { content: ""/"外部リンク"; position: absolute; background-image: url(/assets/img/common/ico_external_link.svg); background-size: contain; width: 14px; height: 14px; margin: .5em 0 0 .5em } .p-company-map__list li a[href$=".pdf"] { position: relative; padding-right: 2em } .p-company-map__list li a[href$=".pdf"]:after { content: ""/"PDFファイル"; position: absolute; background-image: url(/assets/img/common/ico_pdf.svg); background-size: contain; width: 15px; height: 19px; margin: .3em 0 0 .5em } .p-entry-content .p-company-group__list { display: flex; flex-direction: column; gap: 8px; margin: 0 } @media only screen and (min-width: 1136px) { .p-entry-content .p-company-group__list { flex-direction: row; flex-wrap: wrap; column-gap: 40px; row-gap: 16px } } .p-entry-content .p-company-group__list--item { display: flex; align-items: center; gap: 8px; list-style-type: none; position: relative } .p-entry-content .p-company-group__list--item:nth-child(1) span:first-child { color: var(--tag-color-02) } .p-entry-content .p-company-group__list--item:nth-child(2) span:first-child { color: var(--main-color) } .p-entry-content .p-company-group__list--item:nth-child(3) span:first-child { color: var(--tag-color-02) } .p-entry-content .p-company-group__list--item:nth-child(4) span:first-child { color: #7ab241 } .p-entry-content .p-company-group__list--item:nth-child(5) span:first-child { color: var(--tag-color-03) } .p-entry-content .p-company-group__list--item:nth-child(6) span:first-child { color: var(--c-gray-dark) } .p-company-promise { align-items: start; gap: 40px } .p-company-promise h2 { margin: 0; position: relative; padding: 0 0 24px } @media only screen and (min-width: 1136px) { .p-company-promise h2 { padding: 0 0 32px } } .p-company-promise h2:after { content: ""; display: block; position: absolute; width: 100px; height: 3px; background-color: var(--sub-color); bottom: 0; left: 0 } .p-company-promise__item { display: flex; gap: 8px; margin: 0 0 40px } @media only screen and (min-width: 1136px) { .p-company-promise__item { gap: 20px; margin: 0 0 80px } } .p-company-promise__item span { border: 1px solid var(--main-color); border-radius: 50%; color: var(--main-color); display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc((100% - 16px) / 3); aspect-ratio: 1; font-size: clamp(1.125rem, .34rem + 3.93vw, 3.125rem) } @media only screen and (min-width: 1136px) { .p-company-promise__item span { width: calc((100% - 40px) / 3); font-size: 50px } } .p-company-promise__list { gap: 24px !important } @media only screen and (min-width: 1136px) { .p-company-promise__list { gap: 40px !important } } .p-company__philosophy [data-ruby] { position: relative } .p-company__philosophy [data-ruby]:before { position: absolute; top: -1em; left: -1em; right: -1em; margin: auto; font-size: .5em; text-align: center; content: attr(data-ruby) } .p-company__philosophy rt { display: none } .p-chronology--item { border-bottom: 1px solid var(--c-gray-light); display: flex; flex-direction: column; gap: 16px; padding: 24px 4% } @media only screen and (min-width: 1136px) { .p-chronology--item { flex-direction: inherit; padding: 40px 20px; align-items: center } } .p-chronology--item:first-child { border-top: 1px solid var(--c-gray-light) } @media only screen and (min-width: 1136px) { .p-chronology__year { width: 312px } } .p-chronology__year span { font-size: 40px; line-height: .8 } @media only screen and (min-width: 1136px) { .p-chronology__year span { font-size: 70px } } @media only screen and (min-width: 1136px) { .p-chronology__cont { width: calc(100% - 312px) } } .p-chronology__cont ul li { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px } @media only screen and (min-width: 1136px) { .p-chronology__cont ul li { margin: 0 0 32px } } .p-chronology__cont ul li:last-child { margin: 0 } @media only screen and (min-width: 1136px) { .p-chronology__cont ul li { display: flex } } .p-chronology__cont--month { display: block; width: 100% } @media only screen and (min-width: 1136px) { .p-chronology__cont--month { width: 42px; margin: 0 72px 0 0; line-height: 1.75; text-align: right } } .p-chronology__cont--txt { width: calc(100% - 56px); font-size: 18px } @media only screen and (min-width: 1136px) { .p-chronology__cont--txt { width: calc(100% - 178px); margin-top: 5px } } .p-img__scaling { position: relative } .p-img__scaling--wrapper { width: 100%; transform-origin: top center } .p-img__scaling--wrapper img { position: relative; width: 100%; object-fit: cover } .p-officer { display: grid; grid-template-columns: auto; place-content: flex-start; row-gap: 8px } @media only screen and (min-width: 1136px) { .p-officer { grid-template-columns: max-content } } .p-officer li { display: grid; grid-template-columns: subgrid; grid-column: span 2/span 2; column-gap: 1.5em } .p-officer li p:not([class]) { margin: 0 } .p-taglist { display: flex; flex-direction: column; gap: 8px } @media only screen and (min-width: 1136px) { .p-taglist { flex-direction: inherit; gap: 40px } } .p-taglist li { display: flex; gap: 8px; align-items: center } .p-taglist__txt { display: block; line-height: 1.4 } .is-recruit main { position: relative } .is-recruit .p-page-content { position: relative; z-index: 1; background: var(--c-white); transform: translateZ(0) } .p-recruit-mv { --_layout-width: 375; --_fluid-ratio: calc(1 / var(--_layout-width) * 100cqi); position: relative; display: grid; padding-inline: var(--padding-inline-container); overflow: hidden; aspect-ratio: 375/528 } @media only screen and (min-width: 768px) { .p-recruit-mv { --_layout-width: 1920; aspect-ratio: 1920/762; position: sticky; top: calc(var(--header-height) + 37px) } } @media only screen and (min-width: 1136px) { .p-recruit-mv { top: calc(var(--header-height-pc) + 37px) } } .p-recruit-mv>div { grid-area: 1/1 } .p-recruit-mv-text { z-index: 10; width: 100% } .p-recruit-mv .c-toggle-button { display: grid; place-content: center; position: absolute; z-index: 11; top: 43.75%; right: 16px; width: 40px; aspect-ratio: 1 } @media only screen and (min-width: 768px) { .p-recruit-mv .c-toggle-button { right: 3.3333333333%; top: 20.2099737533% } } .p-recruit-mv .c-toggle-button svg { width: clamp(20px, .8673469388px + 5.1020408163vw, 40px); height: auto } @media only screen and (min-width: 768px) { .p-recruit-mv .c-toggle-button svg { width: clamp(20px, -6.8531468531px + 3.4965034965vw, 40px) } } .p-recruit-mv-image { display: grid; z-index: 1; margin-inline: calc(50% - 50vw) } .p-recruit-mv-image__item { grid-area: 1/1; margin-inline-start: calc(var(--_x, 0) * var(--_fluid-ratio)); margin-block-start: calc(var(--_y, 0) * var(--_fluid-ratio)); inline-size: calc(var(--_w, var(--_layout-width)) * var(--_fluid-ratio)); block-size: calc(var(--_h) * var(--_fluid-ratio)) } .p-recruit-mv-image__item img { inline-size: calc(var(--_w, var(--_layout-width)) * var(--_fluid-ratio)); block-size: calc(var(--_h) * var(--_fluid-ratio)) } .p-recruit-mv-image__item:nth-child(1) { --_w: 105; --_h: 156; --_x: 0; --_y: 336; border-top-right-radius: 5px; border-bottom-right-radius: 5px } .p-recruit-mv-image__item:nth-child(2) { --_w: 200; --_h: 118; --_x: 155; --_y: 410; border-top-left-radius: 5px; border-top-right-radius: 5px } .p-recruit-mv-image__item:nth-child(3) { --_w: 130; --_h: 161; --_x: 20; --_y: 119; border-radius: 5px } .p-recruit-mv-image__item:nth-child(4) { --_w: 187; --_h: 219; --_x: 188; --_y: 0 } .p-recruit-mv-image__item:nth-child(4) img { border-top-left-radius: 5px; border-bottom-left-radius: 5px } @media only screen and (min-width: 768px) { .p-recruit-mv-image__item:nth-child(1) { --_w: 250; --_h: 369; --_x: 0; --_y: 305; border-top-right-radius: 10px; border-bottom-right-radius: 10px } .p-recruit-mv-image__item:nth-child(2) { --_w: 466; --_h: 277; --_x: 330; --_y: 484; border-top-left-radius: 10px; border-top-right-radius: 10px } .p-recruit-mv-image__item:nth-child(3) { --_w: 350; --_h: 434; --_x: 1040; --_y: 0; border-radius: 10px } .p-recruit-mv-image__item:nth-child(4) { --_w: 450; --_h: 527; --_x: 1470; --_y: 234 } .p-recruit-mv-image__item:nth-child(4) img { border-top-left-radius: 10px } } .p-recruit-mv__title { display: grid; color: var(--main-color); margin-block: clamp(42px, .0038265306px + 11.1989795918vw, 85.9px) clamp(176px, -.0012755102px + 46.9336734694vw, 359.98px) } @media only screen and (min-width: 768px) { .p-recruit-mv__title { margin-block: clamp(20px, 0px + 2.6041666667vw, 50px) clamp(43.2px, 0px + 5.625vw, 108px) } } .p-recruit-mv__title h1[lang=ja] { font-size: .875rem; font-weight: 500 } .p-recruit-mv__title span[lang=en] { line-height: 1.2; font-family: var(--font-family-en); font-weight: 700; font-size: clamp(32px, .0006377551px + 8.5331632653vw, 65.45px) } @media only screen and (min-width: 768px) { .p-recruit-mv__title span[lang=en] { line-height: 1.4; font-size: clamp(20px, 0px + 2.6041666667vw, 50px) } } @media only screen and (min-width: 768px) { .p-recruit-mv__copy { margin-inline: auto; width: clamp(384px, 0px + 50vw, 960px) } } .p-recruit__column { display: flex; flex-direction: column; gap: 40px } @media only screen and (min-width: 1136px) { .p-recruit__column { flex-direction: row; gap: 112px } } @media only screen and (min-width: 1136px) { .p-recruit__column.is-reverse { flex-direction: row-reverse } } @media only screen and (min-width: 1136px) { .p-recruit__column--img { width: calc((100% - 112px)/2) } } .p-recruit__column--img figure { border-radius: 5px; overflow: hidden } @media only screen and (min-width: 1136px) { .p-recruit__column--txt { width: calc((100% - 112px)/2) } } .p-recruit__numtxt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; counter-reset: listnum } @media only screen and (min-width: 1136px) { .p-recruit__numtxt { gap: 40px; max-width: 980px; margin: 0 auto } } .p-recruit__numtxt__item { background: var(--main-color); border-radius: 50%; display: grid; place-content: center; align-items: center; justify-content: center; flex-direction: column; gap: 4px; width: 200px; aspect-ratio: 1; position: relative } @media only screen and (min-width: 1136px) { .p-recruit__numtxt__item { gap: 8px; width: 300px } } .p-recruit__numtxt__item:before { color: var(--sub-color); counter-increment: listnum; content: counter(listnum); font-family: var(--font-family-en); text-align: center; font-size: 2.0625rem; font-weight: 700; line-height: 1 } @media only screen and (min-width: 1136px) { .p-recruit__numtxt__item:before { font-size: 3.1875rem } } .p-recruit__numtxt__ttl, .p-recruit__numtxt__txt { color: var(--c-white); text-align: center; font-weight: 500 } .p-recruit__numtxt__ttl { font-size: 1.625rem; line-height: 1.25; padding-block-end: 12px; border-bottom: 1px solid var(--sub-color) } @media only screen and (min-width: 1136px) { .p-recruit__numtxt__ttl { font-size: 2.5rem; padding-block-end: 16px } } .p-recruit__numtxt__txt { font-size: .875rem } @media only screen and (min-width: 1136px) { .p-recruit__numtxt__txt { font-size: 1rem } } .p-recruit-message { line-height: 2 } .p-page-content .p-job-desc { display: grid; padding-block: 40px; border-bottom: 1px solid var(--c-gray) } .p-page-content .p-job-desc:first-child { padding-block-start: 0 } @media only screen and (min-width: 768px) { .p-page-content .p-job-desc { grid-template-columns: auto calc(880 / var(--layout-width) * 100%); column-gap: calc(60 / var(--layout-width) * 100%); padding-block: 80px } } .p-page-content .p-job-desc.--has-border { border-top: 1px solid var(--c-gray) } .p-page-content .p-job-desc__body>:first-child { margin-block-start: 0 } .p-page-content .p-job-desc__body>:last-child { margin-block-end: 0 } .p-page-content .p-job-desc__title { margin-block-end: 40px } @media only screen and (min-width: 768px) { .p-page-content .p-job-desc__title { margin-block-end: 0 } } .p-onboarding__title { border-bottom: 3px solid var(--main-color); margin-inline: auto; inline-size: max-content; font-weight: 700; color: var(--main-color); font-size: 1.9375rem } @media only screen and (min-width: 768px) { .p-onboarding__title { font-size: 3.125rem } } .p-onboarding__title-num { margin-inline: .05em; color: var(--c-white); font-family: var(--font-family-en); line-height: .875; -webkit-text-stroke: 1px var(--main-color); border-bottom: 1px solid var(--c-gray); font-size: 4rem } @media only screen and (min-width: 768px) { .p-onboarding__title-num { border: none; font-size: 6.25rem } } .p-service-item-title:not(:first-of-type) { margin-block: 80px } @media only screen and (min-width: 768px) { .p-service-item-title:not(:first-of-type) { margin-block: 124px } } .p-service-item-detail { margin-block-end: 80px } @media only screen and (min-width: 768px) { .p-service-item-detail { margin-block-end: 124px } } .p-service-item-movie { display: grid; justify-items: center; row-gap: 24px; border: 1px solid var(--c-gray); border-radius: 10px; margin-block-start: 40px; margin-block-end: 80px; padding: 40px 24px } @media only screen and (min-width: 768px) { .p-service-item-movie { grid-template-columns: 1fr max-content; column-gap: 40px; align-items: center; margin-block-start: 40px; margin-block-end: 124px; padding: 40px } } @media only screen and (min-width: 1136px) { .p-service-item-movie { column-gap: 124px; padding: 56px 124px 56px 56px } } .p-service-item-movie__fig { grid-row-start: 1 } @media only screen and (min-width: 768px) { .p-service-item-movie__fig { grid-row-start: auto } } .p-service-item-movie__fig img { border-radius: 5px } .p-sustainability__table--wrap { width: 100%; overflow-x: scroll } @media only screen and (min-width: 768px) { .p-sustainability__table--wrap { overflow-x: inherit } } .p-sustainability__table { width: 300% !important } @media only screen and (min-width: 768px) { .p-sustainability__table { width: 100% !important } } .p-sustainability__table tr th, .p-sustainability__table tr td { display: table-cell } .p-sustainability__table--ttl { background-color: var(--main-color) !important; color: var(--c-white) } .p-welfare-data__item { display: grid; grid-template-rows: subgrid; grid-row: span 4/span 4; gap: 8px; place-content: center; place-items: center; padding: 40px 30px; background-color: var(--c-blue-light); border-radius: 10px } @media only screen and (min-width: 768px) { .p-welfare-data__item { padding: 40px } } .p-welfare-data__icon { max-height: 95px } @media only screen and (min-width: 768px) { .p-welfare-data__icon { max-height: unset } } .p-welfare-data__item--childcare-leave .p-welfare-data__value { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 8px } .p-welfare-data__value-unit { font-size: 1.5625rem; font-weight: 700; color: var(--main-color) } @media only screen and (min-width: 768px) { .p-welfare-data__value-unit { font-size: 2rem } } .p-welfare-data__value-text { font-size: 1.1875rem; font-weight: 700; color: var(--main-color) } @media only screen and (min-width: 768px) { .p-welfare-data__value-text { font-size: 1.5rem } } .p-welfare-data__value-num { line-height: 1.05; color: var(--sub-color-dark); font-size: 2.375rem; font-family: var(--font-family-en); font-weight: 900 } @media only screen and (min-width: 768px) { .p-welfare-data__value-num { font-size: 3rem } } .p-welfare-data__title { font-weight: 500; font-size: 1.25rem } .p-welfare-data__sub-title { font-size: 1rem } .u-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; position: absolute; white-space: nowrap } .u-serif { font-family: var(--font-family-serif) } .u-en { font-family: var(--font-family-en) } .u-fz[data-fz~="9"] { font-size: .5625rem } .u-fz[data-fz~="10"] { font-size: .625rem } .u-fz[data-fz~="11"] { font-size: .6875rem } .u-fz[data-fz~="12"] { font-size: .75rem } .u-fz[data-fz~="14"] { font-size: .875rem } .u-fz[data-fz~="16"] { font-size: 1rem } .u-fz[data-fz~="20"] { font-size: 1.25rem } .u-fz[data-fz~="24"] { font-size: 1.5rem } .u-fz[data-fz~="28"] { font-size: 1.75rem } .u-fz[data-fz~="32"] { font-size: 2rem } .u-fz[data-fz~="40"] { font-size: 2.5rem } .u-fz[data-fz~="50"] { font-size: 3.125rem } @media only screen and (min-width: 768px) { .u-fz[data-fz~="tab:9"] { font-size: .5625rem } .u-fz[data-fz~="tab:10"] { font-size: .625rem } .u-fz[data-fz~="tab:11"] { font-size: .6875rem } .u-fz[data-fz~="tab:12"] { font-size: .75rem } .u-fz[data-fz~="tab:14"] { font-size: .875rem } .u-fz[data-fz~="tab:16"] { font-size: 1rem } .u-fz[data-fz~="tab:20"] { font-size: 1.25rem } .u-fz[data-fz~="tab:24"] { font-size: 1.5rem } .u-fz[data-fz~="tab:28"] { font-size: 1.75rem } .u-fz[data-fz~="tab:32"] { font-size: 2rem } .u-fz[data-fz~="tab:40"] { font-size: 2.5rem } .u-fz[data-fz~="tab:50"] { font-size: 3.125rem } } @media only screen and (min-width: 1136px) { .u-fz[data-fz~="pc:9"] { font-size: .5625rem } .u-fz[data-fz~="pc:10"] { font-size: .625rem } .u-fz[data-fz~="pc:11"] { font-size: .6875rem } .u-fz[data-fz~="pc:12"] { font-size: .75rem } .u-fz[data-fz~="pc:14"] { font-size: .875rem } .u-fz[data-fz~="pc:16"] { font-size: 1rem } .u-fz[data-fz~="pc:20"] { font-size: 1.25rem } .u-fz[data-fz~="pc:24"] { font-size: 1.5rem } .u-fz[data-fz~="pc:28"] { font-size: 1.75rem } .u-fz[data-fz~="pc:32"] { font-size: 2rem } .u-fz[data-fz~="pc:40"] { font-size: 2.5rem } .u-fz[data-fz~="pc:50"] { font-size: 3.125rem } } .u-fw[data-fw~=normal] { font-weight: 400 } .u-fw[data-fw~=medium] { font-weight: 500 } .u-fw[data-fw~=bold] { font-weight: 700 } .u-text-decoration[data-text-decoration=underline] { text-decoration: underline } .u-text-decoration[data-text-decoration=overline] { text-decoration: overline } .u-text-decoration[data-text-decoration=line-through] { text-decoration: line-through } .u-text-decoration[data-text-decoration=no-underline] { text-decoration: none } .u-text-color[data-text-color~=default] { color: var(--c-black) } .u-text-color[data-text-color~=white] { color: var(--c-white) } .u-text-color[data-text-color~=main] { color: var(--main-color) } .u-text-color[data-text-color~=sub] { color: var(--sub-color) } .u-text-color[data-text-color~=gray-dark] { color: var(--c-gray-dark) } .u-text-align[data-text-align~=left] { text-align: left } .u-text-align[data-text-align~=center] { text-align: center } .u-text-align[data-text-align~=right] { text-align: right } @media only screen and (min-width: 768px) { .u-text-align[data-text-align~="tab:left"] { text-align: left } .u-text-align[data-text-align~="tab:center"] { text-align: center } .u-text-align[data-text-align~="tab:right"] { text-align: right } } @media only screen and (min-width: 1136px) { .u-text-align[data-text-align~="pc:left"] { text-align: left } .u-text-align[data-text-align~="pc:center"] { text-align: center } .u-text-align[data-text-align~="pc:right"] { text-align: right } } .u-display[data-display~=none] { display: none !important } .u-display[data-display~=inline-block] { display: inline-block !important } .u-display[data-display~=block] { display: block !important } @media only screen and (min-width: 768px) { .u-display[data-display~="tab:none"] { display: none !important } .u-display[data-display~="tab:inline-block"] { display: inline-block !important } .u-display[data-display~="tab:block"] { display: block !important } } @media only screen and (min-width: 1136px) { .u-display[data-display~="pc:none"] { display: none !important } .u-display[data-display~="pc:inline-block"] { display: inline-block !important } .u-display[data-display~="pc:block"] { display: block !important } } .u-width[data-width~=auto] { width: auto } .u-min-width[data-min-width~=auto] { min-width: auto } .u-max-width[data-max-width~=auto] { max-width: auto } .u-height[data-height~=auto] { height: auto } .u-min-height[data-min-height~=auto] { min-height: auto } .u-max-height[data-max-height~=auto] { max-height: auto } @media only screen and (min-width: 768px) { .u-width[data-width~="tab:auto"] { width: auto } .u-min-width[data-min-width~="tab:auto"] { min-width: auto } .u-max-width[data-max-width~="tab:auto"] { max-width: auto } .u-height[data-height~="tab:auto"] { height: auto } .u-min-height[data-min-height~="tab:auto"] { min-height: auto } .u-max-height[data-max-height~="tab:auto"] { max-height: auto } } @media only screen and (min-width: 1136px) { .u-width[data-width~="pc:auto"] { width: auto } .u-min-width[data-min-width~="pc:auto"] { min-width: auto } .u-max-width[data-max-width~="pc:auto"] { max-width: auto } .u-height[data-height~="pc:auto"] { height: auto } .u-min-height[data-min-height~="pc:auto"] { min-height: auto } .u-max-height[data-max-height~="pc:auto"] { max-height: auto } } .u-width[data-width~=full] { width: 100% } .u-min-width[data-min-width~=full] { min-width: 100% } .u-max-width[data-max-width~=full] { max-width: 100% } .u-height[data-height~=full] { height: 100% } .u-min-height[data-min-height~=full] { min-height: 100% } .u-max-height[data-max-height~=full] { max-height: 100% } @media only screen and (min-width: 768px) { .u-width[data-width~="tab:full"] { width: 100% } .u-min-width[data-min-width~="tab:full"] { min-width: 100% } .u-max-width[data-max-width~="tab:full"] { max-width: 100% } .u-height[data-height~="tab:full"] { height: 100% } .u-min-height[data-min-height~="tab:full"] { min-height: 100% } .u-max-height[data-max-height~="tab:full"] { max-height: 100% } } @media only screen and (min-width: 1136px) { .u-width[data-width~="pc:full"] { width: 100% } .u-min-width[data-min-width~="pc:full"] { min-width: 100% } .u-max-width[data-max-width~="pc:full"] { max-width: 100% } .u-height[data-height~="pc:full"] { height: 100% } .u-min-height[data-min-height~="pc:full"] { min-height: 100% } .u-max-height[data-max-height~="pc:full"] { max-height: 100% } } .u-width[data-width~=min] { width: min-content } .u-min-width[data-min-width~=min] { min-width: min-content } .u-max-width[data-max-width~=min] { max-width: min-content } .u-height[data-height~=min] { height: min-content } .u-min-height[data-min-height~=min] { min-height: min-content } .u-max-height[data-max-height~=min] { max-height: min-content } @media only screen and (min-width: 768px) { .u-width[data-width~="tab:min"] { width: min-content } .u-min-width[data-min-width~="tab:min"] { min-width: min-content } .u-max-width[data-max-width~="tab:min"] { max-width: min-content } .u-height[data-height~="tab:min"] { height: min-content } .u-min-height[data-min-height~="tab:min"] { min-height: min-content } .u-max-height[data-max-height~="tab:min"] { max-height: min-content } } @media only screen and (min-width: 1136px) { .u-width[data-width~="pc:min"] { width: min-content } .u-min-width[data-min-width~="pc:min"] { min-width: min-content } .u-max-width[data-max-width~="pc:min"] { max-width: min-content } .u-height[data-height~="pc:min"] { height: min-content } .u-min-height[data-min-height~="pc:min"] { min-height: min-content } .u-max-height[data-max-height~="pc:min"] { max-height: min-content } } .u-width[data-width~=max] { width: max-content } .u-min-width[data-min-width~=max] { min-width: max-content } .u-max-width[data-max-width~=max] { max-width: max-content } .u-height[data-height~=max] { height: max-content } .u-min-height[data-min-height~=max] { min-height: max-content } .u-max-height[data-max-height~=max] { max-height: max-content } @media only screen and (min-width: 768px) { .u-width[data-width~="tab:max"] { width: max-content } .u-min-width[data-min-width~="tab:max"] { min-width: max-content } .u-max-width[data-max-width~="tab:max"] { max-width: max-content } .u-height[data-height~="tab:max"] { height: max-content } .u-min-height[data-min-height~="tab:max"] { min-height: max-content } .u-max-height[data-max-height~="tab:max"] { max-height: max-content } } @media only screen and (min-width: 1136px) { .u-width[data-width~="pc:max"] { width: max-content } .u-min-width[data-min-width~="pc:max"] { min-width: max-content } .u-max-width[data-max-width~="pc:max"] { max-width: max-content } .u-height[data-height~="pc:max"] { height: max-content } .u-min-height[data-min-height~="pc:max"] { min-height: max-content } .u-max-height[data-max-height~="pc:max"] { max-height: max-content } } .u-width[data-width~=fit] { width: fit-content } .u-min-width[data-min-width~=fit] { min-width: fit-content } .u-max-width[data-max-width~=fit] { max-width: fit-content } .u-height[data-height~=fit] { height: fit-content } .u-min-height[data-min-height~=fit] { min-height: fit-content } .u-max-height[data-max-height~=fit] { max-height: fit-content } @media only screen and (min-width: 768px) { .u-width[data-width~="tab:fit"] { width: fit-content } .u-min-width[data-min-width~="tab:fit"] { min-width: fit-content } .u-max-width[data-max-width~="tab:fit"] { max-width: fit-content } .u-height[data-height~="tab:fit"] { height: fit-content } .u-min-height[data-min-height~="tab:fit"] { min-height: fit-content } .u-max-height[data-max-height~="tab:fit"] { max-height: fit-content } } @media only screen and (min-width: 1136px) { .u-width[data-width~="pc:fit"] { width: fit-content } .u-min-width[data-min-width~="pc:fit"] { min-width: fit-content } .u-max-width[data-max-width~="pc:fit"] { max-width: fit-content } .u-height[data-height~="pc:fit"] { height: fit-content } .u-min-height[data-min-height~="pc:fit"] { min-height: fit-content } .u-max-height[data-max-height~="pc:fit"] { max-height: fit-content } } .u-margin[data-mr~=auto] { margin-inline-end: auto } .u-margin[data-ml~=auto] { margin-inline-start: auto } .u-margin[data-mx~=auto] { margin-inline: auto } @media only screen and (min-width: 768px) { .u-margin[data-mr~="tab:auto"] { margin-inline-end: auto } .u-margin[data-ml~="tab:auto"] { margin-inline-start: auto } .u-margin[data-mx~="tab:auto"] { margin-inline: auto } } @media only screen and (min-width: 1136px) { .u-margin[data-mr~="pc:auto"] { margin-inline-end: auto } .u-margin[data-ml~="pc:auto"] { margin-inline-start: auto } .u-margin[data-mx~="pc:auto"] { margin-inline: auto } } .u-margin[data-mt~="0"] { margin-block-start: 0px } .u-margin[data-mt~="4"] { margin-block-start: 4px } .u-margin[data-mt~="8"] { margin-block-start: 8px } .u-margin[data-mt~="12"] { margin-block-start: 12px } .u-margin[data-mt~="16"] { margin-block-start: 16px } .u-margin[data-mt~="20"] { margin-block-start: 20px } .u-margin[data-mt~="24"] { margin-block-start: 24px } .u-margin[data-mt~="32"] { margin-block-start: 32px } .u-margin[data-mt~="40"] { margin-block-start: 40px } .u-margin[data-mt~="48"] { margin-block-start: 48px } .u-margin[data-mt~="56"] { margin-block-start: 56px } .u-margin[data-mt~="64"] { margin-block-start: 64px } .u-margin[data-mt~="80"] { margin-block-start: 80px } .u-margin[data-mt~="160"] { margin-block-start: 160px } .u-margin[data-mr~="0"] { margin-inline-end: 0px } .u-margin[data-mr~="4"] { margin-inline-end: 4px } .u-margin[data-mr~="8"] { margin-inline-end: 8px } .u-margin[data-mr~="12"] { margin-inline-end: 12px } .u-margin[data-mr~="16"] { margin-inline-end: 16px } .u-margin[data-mr~="20"] { margin-inline-end: 20px } .u-margin[data-mr~="24"] { margin-inline-end: 24px } .u-margin[data-mr~="32"] { margin-inline-end: 32px } .u-margin[data-mr~="40"] { margin-inline-end: 40px } .u-margin[data-mr~="48"] { margin-inline-end: 48px } .u-margin[data-mr~="56"] { margin-inline-end: 56px } .u-margin[data-mr~="64"] { margin-inline-end: 64px } .u-margin[data-mr~="80"] { margin-inline-end: 80px } .u-margin[data-mr~="160"] { margin-inline-end: 160px } .u-margin[data-mb~="0"] { margin-block-end: 0px } .u-margin[data-mb~="4"] { margin-block-end: 4px } .u-margin[data-mb~="8"] { margin-block-end: 8px } .u-margin[data-mb~="12"] { margin-block-end: 12px } .u-margin[data-mb~="16"] { margin-block-end: 16px } .u-margin[data-mb~="20"] { margin-block-end: 20px } .u-margin[data-mb~="24"] { margin-block-end: 24px } .u-margin[data-mb~="32"] { margin-block-end: 32px } .u-margin[data-mb~="40"] { margin-block-end: 40px } .u-margin[data-mb~="48"] { margin-block-end: 48px } .u-margin[data-mb~="56"] { margin-block-end: 56px } .u-margin[data-mb~="64"] { margin-block-end: 64px } .u-margin[data-mb~="80"] { margin-block-end: 80px } .u-margin[data-mb~="160"] { margin-block-end: 160px } .u-margin[data-ml~="0"] { margin-inline-start: 0px } .u-margin[data-ml~="4"] { margin-inline-start: 4px } .u-margin[data-ml~="8"] { margin-inline-start: 8px } .u-margin[data-ml~="12"] { margin-inline-start: 12px } .u-margin[data-ml~="16"] { margin-inline-start: 16px } .u-margin[data-ml~="20"] { margin-inline-start: 20px } .u-margin[data-ml~="24"] { margin-inline-start: 24px } .u-margin[data-ml~="32"] { margin-inline-start: 32px } .u-margin[data-ml~="40"] { margin-inline-start: 40px } .u-margin[data-ml~="48"] { margin-inline-start: 48px } .u-margin[data-ml~="56"] { margin-inline-start: 56px } .u-margin[data-ml~="64"] { margin-inline-start: 64px } .u-margin[data-ml~="80"] { margin-inline-start: 80px } .u-margin[data-ml~="160"] { margin-inline-start: 160px } .u-margin[data-mx~="0"] { margin-inline: 0px } .u-margin[data-mx~="4"] { margin-inline: 4px } .u-margin[data-mx~="8"] { margin-inline: 8px } .u-margin[data-mx~="12"] { margin-inline: 12px } .u-margin[data-mx~="16"] { margin-inline: 16px } .u-margin[data-mx~="20"] { margin-inline: 20px } .u-margin[data-mx~="24"] { margin-inline: 24px } .u-margin[data-mx~="32"] { margin-inline: 32px } .u-margin[data-mx~="40"] { margin-inline: 40px } .u-margin[data-mx~="48"] { margin-inline: 48px } .u-margin[data-mx~="56"] { margin-inline: 56px } .u-margin[data-mx~="64"] { margin-inline: 64px } .u-margin[data-mx~="80"] { margin-inline: 80px } .u-margin[data-mx~="160"] { margin-inline: 160px } .u-margin[data-my~="0"] { margin-block: 0px } .u-margin[data-my~="4"] { margin-block: 4px } .u-margin[data-my~="8"] { margin-block: 8px } .u-margin[data-my~="12"] { margin-block: 12px } .u-margin[data-my~="16"] { margin-block: 16px } .u-margin[data-my~="20"] { margin-block: 20px } .u-margin[data-my~="24"] { margin-block: 24px } .u-margin[data-my~="32"] { margin-block: 32px } .u-margin[data-my~="40"] { margin-block: 40px } .u-margin[data-my~="48"] { margin-block: 48px } .u-margin[data-my~="56"] { margin-block: 56px } .u-margin[data-my~="64"] { margin-block: 64px } .u-margin[data-my~="80"] { margin-block: 80px } .u-margin[data-my~="160"] { margin-block: 160px } .u-margin[data-m~="0"] { margin: 0 } .u-margin[data-m~="4"] { margin: 4px } .u-margin[data-m~="8"] { margin: 8px } .u-margin[data-m~="12"] { margin: 12px } .u-margin[data-m~="16"] { margin: 16px } .u-margin[data-m~="20"] { margin: 20px } .u-margin[data-m~="24"] { margin: 24px } .u-margin[data-m~="32"] { margin: 32px } .u-margin[data-m~="40"] { margin: 40px } .u-margin[data-m~="48"] { margin: 48px } .u-margin[data-m~="56"] { margin: 56px } .u-margin[data-m~="64"] { margin: 64px } .u-margin[data-m~="80"] { margin: 80px } .u-margin[data-m~="160"] { margin: 160px } @media only screen and (min-width: 768px) { .u-margin[data-mt~="tab:0"] { margin-block-start: 0px } .u-margin[data-mt~="tab:4"] { margin-block-start: 4px } .u-margin[data-mt~="tab:8"] { margin-block-start: 8px } .u-margin[data-mt~="tab:12"] { margin-block-start: 12px } .u-margin[data-mt~="tab:16"] { margin-block-start: 16px } .u-margin[data-mt~="tab:20"] { margin-block-start: 20px } .u-margin[data-mt~="tab:24"] { margin-block-start: 24px } .u-margin[data-mt~="tab:32"] { margin-block-start: 32px } .u-margin[data-mt~="tab:40"] { margin-block-start: 40px } .u-margin[data-mt~="tab:48"] { margin-block-start: 48px } .u-margin[data-mt~="tab:56"] { margin-block-start: 56px } .u-margin[data-mt~="tab:64"] { margin-block-start: 64px } .u-margin[data-mt~="tab:80"] { margin-block-start: 80px } .u-margin[data-mt~="tab:160"] { margin-block-start: 160px } .u-margin[data-mr~="tab:0"] { margin-inline-end: 0px } .u-margin[data-mr~="tab:4"] { margin-inline-end: 4px } .u-margin[data-mr~="tab:8"] { margin-inline-end: 8px } .u-margin[data-mr~="tab:12"] { margin-inline-end: 12px } .u-margin[data-mr~="tab:16"] { margin-inline-end: 16px } .u-margin[data-mr~="tab:20"] { margin-inline-end: 20px } .u-margin[data-mr~="tab:24"] { margin-inline-end: 24px } .u-margin[data-mr~="tab:32"] { margin-inline-end: 32px } .u-margin[data-mr~="tab:40"] { margin-inline-end: 40px } .u-margin[data-mr~="tab:48"] { margin-inline-end: 48px } .u-margin[data-mr~="tab:56"] { margin-inline-end: 56px } .u-margin[data-mr~="tab:64"] { margin-inline-end: 64px } .u-margin[data-mr~="tab:80"] { margin-inline-end: 80px } .u-margin[data-mr~="tab:160"] { margin-inline-end: 160px } .u-margin[data-mb~="tab:0"] { margin-block-end: 0px } .u-margin[data-mb~="tab:4"] { margin-block-end: 4px } .u-margin[data-mb~="tab:8"] { margin-block-end: 8px } .u-margin[data-mb~="tab:12"] { margin-block-end: 12px } .u-margin[data-mb~="tab:16"] { margin-block-end: 16px } .u-margin[data-mb~="tab:20"] { margin-block-end: 20px } .u-margin[data-mb~="tab:24"] { margin-block-end: 24px } .u-margin[data-mb~="tab:32"] { margin-block-end: 32px } .u-margin[data-mb~="tab:40"] { margin-block-end: 40px } .u-margin[data-mb~="tab:48"] { margin-block-end: 48px } .u-margin[data-mb~="tab:56"] { margin-block-end: 56px } .u-margin[data-mb~="tab:64"] { margin-block-end: 64px } .u-margin[data-mb~="tab:80"] { margin-block-end: 80px } .u-margin[data-mb~="tab:160"] { margin-block-end: 160px } .u-margin[data-ml~="tab:0"] { margin-inline-start: 0px } .u-margin[data-ml~="tab:4"] { margin-inline-start: 4px } .u-margin[data-ml~="tab:8"] { margin-inline-start: 8px } .u-margin[data-ml~="tab:12"] { margin-inline-start: 12px } .u-margin[data-ml~="tab:16"] { margin-inline-start: 16px } .u-margin[data-ml~="tab:20"] { margin-inline-start: 20px } .u-margin[data-ml~="tab:24"] { margin-inline-start: 24px } .u-margin[data-ml~="tab:32"] { margin-inline-start: 32px } .u-margin[data-ml~="tab:40"] { margin-inline-start: 40px } .u-margin[data-ml~="tab:48"] { margin-inline-start: 48px } .u-margin[data-ml~="tab:56"] { margin-inline-start: 56px } .u-margin[data-ml~="tab:64"] { margin-inline-start: 64px } .u-margin[data-ml~="tab:80"] { margin-inline-start: 80px } .u-margin[data-ml~="tab:160"] { margin-inline-start: 160px } .u-margin[data-mx~="tab:0"] { margin-inline: 0px } .u-margin[data-mx~="tab:4"] { margin-inline: 4px } .u-margin[data-mx~="tab:8"] { margin-inline: 8px } .u-margin[data-mx~="tab:12"] { margin-inline: 12px } .u-margin[data-mx~="tab:16"] { margin-inline: 16px } .u-margin[data-mx~="tab:20"] { margin-inline: 20px } .u-margin[data-mx~="tab:24"] { margin-inline: 24px } .u-margin[data-mx~="tab:32"] { margin-inline: 32px } .u-margin[data-mx~="tab:40"] { margin-inline: 40px } .u-margin[data-mx~="tab:48"] { margin-inline: 48px } .u-margin[data-mx~="tab:56"] { margin-inline: 56px } .u-margin[data-mx~="tab:64"] { margin-inline: 64px } .u-margin[data-mx~="tab:80"] { margin-inline: 80px } .u-margin[data-mx~="tab:160"] { margin-inline: 160px } .u-margin[data-my~="tab:0"] { margin-block: 0px } .u-margin[data-my~="tab:4"] { margin-block: 4px } .u-margin[data-my~="tab:8"] { margin-block: 8px } .u-margin[data-my~="tab:12"] { margin-block: 12px } .u-margin[data-my~="tab:16"] { margin-block: 16px } .u-margin[data-my~="tab:20"] { margin-block: 20px } .u-margin[data-my~="tab:24"] { margin-block: 24px } .u-margin[data-my~="tab:32"] { margin-block: 32px } .u-margin[data-my~="tab:40"] { margin-block: 40px } .u-margin[data-my~="tab:48"] { margin-block: 48px } .u-margin[data-my~="tab:56"] { margin-block: 56px } .u-margin[data-my~="tab:64"] { margin-block: 64px } .u-margin[data-my~="tab:80"] { margin-block: 80px } .u-margin[data-my~="tab:160"] { margin-block: 160px } .u-margin[data-m~="tab:0"] { margin: 0 } .u-margin[data-m~="tab:4"] { margin: 4px } .u-margin[data-m~="tab:8"] { margin: 8px } .u-margin[data-m~="tab:12"] { margin: 12px } .u-margin[data-m~="tab:16"] { margin: 16px } .u-margin[data-m~="tab:20"] { margin: 20px } .u-margin[data-m~="tab:24"] { margin: 24px } .u-margin[data-m~="tab:32"] { margin: 32px } .u-margin[data-m~="tab:40"] { margin: 40px } .u-margin[data-m~="tab:48"] { margin: 48px } .u-margin[data-m~="tab:56"] { margin: 56px } .u-margin[data-m~="tab:64"] { margin: 64px } .u-margin[data-m~="tab:80"] { margin: 80px } .u-margin[data-m~="tab:160"] { margin: 160px } } @media only screen and (min-width: 1136px) { .u-margin[data-mt~="pc:0"] { margin-block-start: 0px } .u-margin[data-mt~="pc:4"] { margin-block-start: 4px } .u-margin[data-mt~="pc:8"] { margin-block-start: 8px } .u-margin[data-mt~="pc:12"] { margin-block-start: 12px } .u-margin[data-mt~="pc:16"] { margin-block-start: 16px } .u-margin[data-mt~="pc:20"] { margin-block-start: 20px } .u-margin[data-mt~="pc:24"] { margin-block-start: 24px } .u-margin[data-mt~="pc:32"] { margin-block-start: 32px } .u-margin[data-mt~="pc:40"] { margin-block-start: 40px } .u-margin[data-mt~="pc:48"] { margin-block-start: 48px } .u-margin[data-mt~="pc:56"] { margin-block-start: 56px } .u-margin[data-mt~="pc:64"] { margin-block-start: 64px } .u-margin[data-mt~="pc:80"] { margin-block-start: 80px } .u-margin[data-mt~="pc:160"] { margin-block-start: 160px } .u-margin[data-mr~="pc:0"] { margin-inline-end: 0px } .u-margin[data-mr~="pc:4"] { margin-inline-end: 4px } .u-margin[data-mr~="pc:8"] { margin-inline-end: 8px } .u-margin[data-mr~="pc:12"] { margin-inline-end: 12px } .u-margin[data-mr~="pc:16"] { margin-inline-end: 16px } .u-margin[data-mr~="pc:20"] { margin-inline-end: 20px } .u-margin[data-mr~="pc:24"] { margin-inline-end: 24px } .u-margin[data-mr~="pc:32"] { margin-inline-end: 32px } .u-margin[data-mr~="pc:40"] { margin-inline-end: 40px } .u-margin[data-mr~="pc:48"] { margin-inline-end: 48px } .u-margin[data-mr~="pc:56"] { margin-inline-end: 56px } .u-margin[data-mr~="pc:64"] { margin-inline-end: 64px } .u-margin[data-mr~="pc:80"] { margin-inline-end: 80px } .u-margin[data-mr~="pc:160"] { margin-inline-end: 160px } .u-margin[data-mb~="pc:0"] { margin-block-end: 0px } .u-margin[data-mb~="pc:4"] { margin-block-end: 4px } .u-margin[data-mb~="pc:8"] { margin-block-end: 8px } .u-margin[data-mb~="pc:12"] { margin-block-end: 12px } .u-margin[data-mb~="pc:16"] { margin-block-end: 16px } .u-margin[data-mb~="pc:20"] { margin-block-end: 20px } .u-margin[data-mb~="pc:24"] { margin-block-end: 24px } .u-margin[data-mb~="pc:32"] { margin-block-end: 32px } .u-margin[data-mb~="pc:40"] { margin-block-end: 40px } .u-margin[data-mb~="pc:48"] { margin-block-end: 48px } .u-margin[data-mb~="pc:56"] { margin-block-end: 56px } .u-margin[data-mb~="pc:64"] { margin-block-end: 64px } .u-margin[data-mb~="pc:80"] { margin-block-end: 80px } .u-margin[data-mb~="pc:160"] { margin-block-end: 160px } .u-margin[data-ml~="pc:0"] { margin-inline-start: 0px } .u-margin[data-ml~="pc:4"] { margin-inline-start: 4px } .u-margin[data-ml~="pc:8"] { margin-inline-start: 8px } .u-margin[data-ml~="pc:12"] { margin-inline-start: 12px } .u-margin[data-ml~="pc:16"] { margin-inline-start: 16px } .u-margin[data-ml~="pc:20"] { margin-inline-start: 20px } .u-margin[data-ml~="pc:24"] { margin-inline-start: 24px } .u-margin[data-ml~="pc:32"] { margin-inline-start: 32px } .u-margin[data-ml~="pc:40"] { margin-inline-start: 40px } .u-margin[data-ml~="pc:48"] { margin-inline-start: 48px } .u-margin[data-ml~="pc:56"] { margin-inline-start: 56px } .u-margin[data-ml~="pc:64"] { margin-inline-start: 64px } .u-margin[data-ml~="pc:80"] { margin-inline-start: 80px } .u-margin[data-ml~="pc:160"] { margin-inline-start: 160px } .u-margin[data-mx~="pc:0"] { margin-inline: 0px } .u-margin[data-mx~="pc:4"] { margin-inline: 4px } .u-margin[data-mx~="pc:8"] { margin-inline: 8px } .u-margin[data-mx~="pc:12"] { margin-inline: 12px } .u-margin[data-mx~="pc:16"] { margin-inline: 16px } .u-margin[data-mx~="pc:20"] { margin-inline: 20px } .u-margin[data-mx~="pc:24"] { margin-inline: 24px } .u-margin[data-mx~="pc:32"] { margin-inline: 32px } .u-margin[data-mx~="pc:40"] { margin-inline: 40px } .u-margin[data-mx~="pc:48"] { margin-inline: 48px } .u-margin[data-mx~="pc:56"] { margin-inline: 56px } .u-margin[data-mx~="pc:64"] { margin-inline: 64px } .u-margin[data-mx~="pc:80"] { margin-inline: 80px } .u-margin[data-mx~="pc:160"] { margin-inline: 160px } .u-margin[data-my~="pc:0"] { margin-block: 0px } .u-margin[data-my~="pc:4"] { margin-block: 4px } .u-margin[data-my~="pc:8"] { margin-block: 8px } .u-margin[data-my~="pc:12"] { margin-block: 12px } .u-margin[data-my~="pc:16"] { margin-block: 16px } .u-margin[data-my~="pc:20"] { margin-block: 20px } .u-margin[data-my~="pc:24"] { margin-block: 24px } .u-margin[data-my~="pc:32"] { margin-block: 32px } .u-margin[data-my~="pc:40"] { margin-block: 40px } .u-margin[data-my~="pc:48"] { margin-block: 48px } .u-margin[data-my~="pc:56"] { margin-block: 56px } .u-margin[data-my~="pc:64"] { margin-block: 64px } .u-margin[data-my~="pc:80"] { margin-block: 80px } .u-margin[data-my~="pc:160"] { margin-block: 160px } .u-margin[data-m~="pc:0"] { margin: 0 } .u-margin[data-m~="pc:4"] { margin: 4px } .u-margin[data-m~="pc:8"] { margin: 8px } .u-margin[data-m~="pc:12"] { margin: 12px } .u-margin[data-m~="pc:16"] { margin: 16px } .u-margin[data-m~="pc:20"] { margin: 20px } .u-margin[data-m~="pc:24"] { margin: 24px } .u-margin[data-m~="pc:32"] { margin: 32px } .u-margin[data-m~="pc:40"] { margin: 40px } .u-margin[data-m~="pc:48"] { margin: 48px } .u-margin[data-m~="pc:56"] { margin: 56px } .u-margin[data-m~="pc:64"] { margin: 64px } .u-margin[data-m~="pc:80"] { margin: 80px } .u-margin[data-m~="pc:160"] { margin: 160px } } .u-padding[data-pt~="0"] { padding-block-start: 0px } .u-padding[data-pt~="4"] { padding-block-start: 4px } .u-padding[data-pt~="8"] { padding-block-start: 8px } .u-padding[data-pt~="12"] { padding-block-start: 12px } .u-padding[data-pt~="16"] { padding-block-start: 16px } .u-padding[data-pt~="20"] { padding-block-start: 20px } .u-padding[data-pt~="24"] { padding-block-start: 24px } .u-padding[data-pt~="32"] { padding-block-start: 32px } .u-padding[data-pt~="40"] { padding-block-start: 40px } .u-padding[data-pt~="48"] { padding-block-start: 48px } .u-padding[data-pt~="56"] { padding-block-start: 56px } .u-padding[data-pt~="64"] { padding-block-start: 64px } .u-padding[data-pt~="80"] { padding-block-start: 80px } .u-padding[data-pt~="160"] { padding-block-start: 160px } .u-padding[data-pr~="0"] { padding-inline-end: 0px } .u-padding[data-pr~="4"] { padding-inline-end: 4px } .u-padding[data-pr~="8"] { padding-inline-end: 8px } .u-padding[data-pr~="12"] { padding-inline-end: 12px } .u-padding[data-pr~="16"] { padding-inline-end: 16px } .u-padding[data-pr~="20"] { padding-inline-end: 20px } .u-padding[data-pr~="24"] { padding-inline-end: 24px } .u-padding[data-pr~="32"] { padding-inline-end: 32px } .u-padding[data-pr~="40"] { padding-inline-end: 40px } .u-padding[data-pr~="48"] { padding-inline-end: 48px } .u-padding[data-pr~="56"] { padding-inline-end: 56px } .u-padding[data-pr~="64"] { padding-inline-end: 64px } .u-padding[data-pr~="80"] { padding-inline-end: 80px } .u-padding[data-pr~="160"] { padding-inline-end: 160px } .u-padding[data-pb~="0"] { padding-block-end: 0px } .u-padding[data-pb~="4"] { padding-block-end: 4px } .u-padding[data-pb~="8"] { padding-block-end: 8px } .u-padding[data-pb~="12"] { padding-block-end: 12px } .u-padding[data-pb~="16"] { padding-block-end: 16px } .u-padding[data-pb~="20"] { padding-block-end: 20px } .u-padding[data-pb~="24"] { padding-block-end: 24px } .u-padding[data-pb~="32"] { padding-block-end: 32px } .u-padding[data-pb~="40"] { padding-block-end: 40px } .u-padding[data-pb~="48"] { padding-block-end: 48px } .u-padding[data-pb~="56"] { padding-block-end: 56px } .u-padding[data-pb~="64"] { padding-block-end: 64px } .u-padding[data-pb~="80"] { padding-block-end: 80px } .u-padding[data-pb~="160"] { padding-block-end: 160px } .u-padding[data-pl~="0"] { padding-inline-start: 0px } .u-padding[data-pl~="4"] { padding-inline-start: 4px } .u-padding[data-pl~="8"] { padding-inline-start: 8px } .u-padding[data-pl~="12"] { padding-inline-start: 12px } .u-padding[data-pl~="16"] { padding-inline-start: 16px } .u-padding[data-pl~="20"] { padding-inline-start: 20px } .u-padding[data-pl~="24"] { padding-inline-start: 24px } .u-padding[data-pl~="32"] { padding-inline-start: 32px } .u-padding[data-pl~="40"] { padding-inline-start: 40px } .u-padding[data-pl~="48"] { padding-inline-start: 48px } .u-padding[data-pl~="56"] { padding-inline-start: 56px } .u-padding[data-pl~="64"] { padding-inline-start: 64px } .u-padding[data-pl~="80"] { padding-inline-start: 80px } .u-padding[data-pl~="160"] { padding-inline-start: 160px } .u-padding[data-px~="0"] { padding-inline: 0px } .u-padding[data-px~="4"] { padding-inline: 4px } .u-padding[data-px~="8"] { padding-inline: 8px } .u-padding[data-px~="12"] { padding-inline: 12px } .u-padding[data-px~="16"] { padding-inline: 16px } .u-padding[data-px~="20"] { padding-inline: 20px } .u-padding[data-px~="24"] { padding-inline: 24px } .u-padding[data-px~="32"] { padding-inline: 32px } .u-padding[data-px~="40"] { padding-inline: 40px } .u-padding[data-px~="48"] { padding-inline: 48px } .u-padding[data-px~="56"] { padding-inline: 56px } .u-padding[data-px~="64"] { padding-inline: 64px } .u-padding[data-px~="80"] { padding-inline: 80px } .u-padding[data-px~="160"] { padding-inline: 160px } .u-padding[data-py~="0"] { padding-block: 0px } .u-padding[data-py~="4"] { padding-block: 4px } .u-padding[data-py~="8"] { padding-block: 8px } .u-padding[data-py~="12"] { padding-block: 12px } .u-padding[data-py~="16"] { padding-block: 16px } .u-padding[data-py~="20"] { padding-block: 20px } .u-padding[data-py~="24"] { padding-block: 24px } .u-padding[data-py~="32"] { padding-block: 32px } .u-padding[data-py~="40"] { padding-block: 40px } .u-padding[data-py~="48"] { padding-block: 48px } .u-padding[data-py~="56"] { padding-block: 56px } .u-padding[data-py~="64"] { padding-block: 64px } .u-padding[data-py~="80"] { padding-block: 80px } .u-padding[data-py~="160"] { padding-block: 160px } .u-padding[data-p~="0"] { padding: 0 } .u-padding[data-p~="4"] { padding: 4px } .u-padding[data-p~="8"] { padding: 8px } .u-padding[data-p~="12"] { padding: 12px } .u-padding[data-p~="16"] { padding: 16px } .u-padding[data-p~="20"] { padding: 20px } .u-padding[data-p~="24"] { padding: 24px } .u-padding[data-p~="32"] { padding: 32px } .u-padding[data-p~="40"] { padding: 40px } .u-padding[data-p~="48"] { padding: 48px } .u-padding[data-p~="56"] { padding: 56px } .u-padding[data-p~="64"] { padding: 64px } .u-padding[data-p~="80"] { padding: 80px } .u-padding[data-p~="160"] { padding: 160px } @media only screen and (min-width: 768px) { .u-padding[data-pt~="tab:0"] { padding-block-start: 0px } .u-padding[data-pt~="tab:4"] { padding-block-start: 4px } .u-padding[data-pt~="tab:8"] { padding-block-start: 8px } .u-padding[data-pt~="tab:12"] { padding-block-start: 12px } .u-padding[data-pt~="tab:16"] { padding-block-start: 16px } .u-padding[data-pt~="tab:20"] { padding-block-start: 20px } .u-padding[data-pt~="tab:24"] { padding-block-start: 24px } .u-padding[data-pt~="tab:32"] { padding-block-start: 32px } .u-padding[data-pt~="tab:40"] { padding-block-start: 40px } .u-padding[data-pt~="tab:48"] { padding-block-start: 48px } .u-padding[data-pt~="tab:56"] { padding-block-start: 56px } .u-padding[data-pt~="tab:64"] { padding-block-start: 64px } .u-padding[data-pt~="tab:80"] { padding-block-start: 80px } .u-padding[data-pt~="tab:160"] { padding-block-start: 160px } .u-padding[data-pr~="tab:0"] { padding-inline-end: 0px } .u-padding[data-pr~="tab:4"] { padding-inline-end: 4px } .u-padding[data-pr~="tab:8"] { padding-inline-end: 8px } .u-padding[data-pr~="tab:12"] { padding-inline-end: 12px } .u-padding[data-pr~="tab:16"] { padding-inline-end: 16px } .u-padding[data-pr~="tab:20"] { padding-inline-end: 20px } .u-padding[data-pr~="tab:24"] { padding-inline-end: 24px } .u-padding[data-pr~="tab:32"] { padding-inline-end: 32px } .u-padding[data-pr~="tab:40"] { padding-inline-end: 40px } .u-padding[data-pr~="tab:48"] { padding-inline-end: 48px } .u-padding[data-pr~="tab:56"] { padding-inline-end: 56px } .u-padding[data-pr~="tab:64"] { padding-inline-end: 64px } .u-padding[data-pr~="tab:80"] { padding-inline-end: 80px } .u-padding[data-pr~="tab:160"] { padding-inline-end: 160px } .u-padding[data-pb~="tab:0"] { padding-block-end: 0px } .u-padding[data-pb~="tab:4"] { padding-block-end: 4px } .u-padding[data-pb~="tab:8"] { padding-block-end: 8px } .u-padding[data-pb~="tab:12"] { padding-block-end: 12px } .u-padding[data-pb~="tab:16"] { padding-block-end: 16px } .u-padding[data-pb~="tab:20"] { padding-block-end: 20px } .u-padding[data-pb~="tab:24"] { padding-block-end: 24px } .u-padding[data-pb~="tab:32"] { padding-block-end: 32px } .u-padding[data-pb~="tab:40"] { padding-block-end: 40px } .u-padding[data-pb~="tab:48"] { padding-block-end: 48px } .u-padding[data-pb~="tab:56"] { padding-block-end: 56px } .u-padding[data-pb~="tab:64"] { padding-block-end: 64px } .u-padding[data-pb~="tab:80"] { padding-block-end: 80px } .u-padding[data-pb~="tab:160"] { padding-block-end: 160px } .u-padding[data-pl~="tab:0"] { padding-inline-start: 0px } .u-padding[data-pl~="tab:4"] { padding-inline-start: 4px } .u-padding[data-pl~="tab:8"] { padding-inline-start: 8px } .u-padding[data-pl~="tab:12"] { padding-inline-start: 12px } .u-padding[data-pl~="tab:16"] { padding-inline-start: 16px } .u-padding[data-pl~="tab:20"] { padding-inline-start: 20px } .u-padding[data-pl~="tab:24"] { padding-inline-start: 24px } .u-padding[data-pl~="tab:32"] { padding-inline-start: 32px } .u-padding[data-pl~="tab:40"] { padding-inline-start: 40px } .u-padding[data-pl~="tab:48"] { padding-inline-start: 48px } .u-padding[data-pl~="tab:56"] { padding-inline-start: 56px } .u-padding[data-pl~="tab:64"] { padding-inline-start: 64px } .u-padding[data-pl~="tab:80"] { padding-inline-start: 80px } .u-padding[data-pl~="tab:160"] { padding-inline-start: 160px } .u-padding[data-px~="tab:0"] { padding-inline: 0px } .u-padding[data-px~="tab:4"] { padding-inline: 4px } .u-padding[data-px~="tab:8"] { padding-inline: 8px } .u-padding[data-px~="tab:12"] { padding-inline: 12px } .u-padding[data-px~="tab:16"] { padding-inline: 16px } .u-padding[data-px~="tab:20"] { padding-inline: 20px } .u-padding[data-px~="tab:24"] { padding-inline: 24px } .u-padding[data-px~="tab:32"] { padding-inline: 32px } .u-padding[data-px~="tab:40"] { padding-inline: 40px } .u-padding[data-px~="tab:48"] { padding-inline: 48px } .u-padding[data-px~="tab:56"] { padding-inline: 56px } .u-padding[data-px~="tab:64"] { padding-inline: 64px } .u-padding[data-px~="tab:80"] { padding-inline: 80px } .u-padding[data-px~="tab:160"] { padding-inline: 160px } .u-padding[data-py~="tab:0"] { padding-block: 0px } .u-padding[data-py~="tab:4"] { padding-block: 4px } .u-padding[data-py~="tab:8"] { padding-block: 8px } .u-padding[data-py~="tab:12"] { padding-block: 12px } .u-padding[data-py~="tab:16"] { padding-block: 16px } .u-padding[data-py~="tab:20"] { padding-block: 20px } .u-padding[data-py~="tab:24"] { padding-block: 24px } .u-padding[data-py~="tab:32"] { padding-block: 32px } .u-padding[data-py~="tab:40"] { padding-block: 40px } .u-padding[data-py~="tab:48"] { padding-block: 48px } .u-padding[data-py~="tab:56"] { padding-block: 56px } .u-padding[data-py~="tab:64"] { padding-block: 64px } .u-padding[data-py~="tab:80"] { padding-block: 80px } .u-padding[data-py~="tab:160"] { padding-block: 160px } .u-padding[data-p~="tab:0"] { padding: 0 } .u-padding[data-p~="tab:4"] { padding: 4px } .u-padding[data-p~="tab:8"] { padding: 8px } .u-padding[data-p~="tab:12"] { padding: 12px } .u-padding[data-p~="tab:16"] { padding: 16px } .u-padding[data-p~="tab:20"] { padding: 20px } .u-padding[data-p~="tab:24"] { padding: 24px } .u-padding[data-p~="tab:32"] { padding: 32px } .u-padding[data-p~="tab:40"] { padding: 40px } .u-padding[data-p~="tab:48"] { padding: 48px } .u-padding[data-p~="tab:56"] { padding: 56px } .u-padding[data-p~="tab:64"] { padding: 64px } .u-padding[data-p~="tab:80"] { padding: 80px } .u-padding[data-p~="tab:160"] { padding: 160px } } @media only screen and (min-width: 1136px) { .u-padding[data-pt~="pc:0"] { padding-block-start: 0px } .u-padding[data-pt~="pc:4"] { padding-block-start: 4px } .u-padding[data-pt~="pc:8"] { padding-block-start: 8px } .u-padding[data-pt~="pc:12"] { padding-block-start: 12px } .u-padding[data-pt~="pc:16"] { padding-block-start: 16px } .u-padding[data-pt~="pc:20"] { padding-block-start: 20px } .u-padding[data-pt~="pc:24"] { padding-block-start: 24px } .u-padding[data-pt~="pc:32"] { padding-block-start: 32px } .u-padding[data-pt~="pc:40"] { padding-block-start: 40px } .u-padding[data-pt~="pc:48"] { padding-block-start: 48px } .u-padding[data-pt~="pc:56"] { padding-block-start: 56px } .u-padding[data-pt~="pc:64"] { padding-block-start: 64px } .u-padding[data-pt~="pc:80"] { padding-block-start: 80px } .u-padding[data-pt~="pc:160"] { padding-block-start: 160px } .u-padding[data-pr~="pc:0"] { padding-inline-end: 0px } .u-padding[data-pr~="pc:4"] { padding-inline-end: 4px } .u-padding[data-pr~="pc:8"] { padding-inline-end: 8px } .u-padding[data-pr~="pc:12"] { padding-inline-end: 12px } .u-padding[data-pr~="pc:16"] { padding-inline-end: 16px } .u-padding[data-pr~="pc:20"] { padding-inline-end: 20px } .u-padding[data-pr~="pc:24"] { padding-inline-end: 24px } .u-padding[data-pr~="pc:32"] { padding-inline-end: 32px } .u-padding[data-pr~="pc:40"] { padding-inline-end: 40px } .u-padding[data-pr~="pc:48"] { padding-inline-end: 48px } .u-padding[data-pr~="pc:56"] { padding-inline-end: 56px } .u-padding[data-pr~="pc:64"] { padding-inline-end: 64px } .u-padding[data-pr~="pc:80"] { padding-inline-end: 80px } .u-padding[data-pr~="pc:160"] { padding-inline-end: 160px } .u-padding[data-pb~="pc:0"] { padding-block-end: 0px } .u-padding[data-pb~="pc:4"] { padding-block-end: 4px } .u-padding[data-pb~="pc:8"] { padding-block-end: 8px } .u-padding[data-pb~="pc:12"] { padding-block-end: 12px } .u-padding[data-pb~="pc:16"] { padding-block-end: 16px } .u-padding[data-pb~="pc:20"] { padding-block-end: 20px } .u-padding[data-pb~="pc:24"] { padding-block-end: 24px } .u-padding[data-pb~="pc:32"] { padding-block-end: 32px } .u-padding[data-pb~="pc:40"] { padding-block-end: 40px } .u-padding[data-pb~="pc:48"] { padding-block-end: 48px } .u-padding[data-pb~="pc:56"] { padding-block-end: 56px } .u-padding[data-pb~="pc:64"] { padding-block-end: 64px } .u-padding[data-pb~="pc:80"] { padding-block-end: 80px } .u-padding[data-pb~="pc:160"] { padding-block-end: 160px } .u-padding[data-pl~="pc:0"] { padding-inline-start: 0px } .u-padding[data-pl~="pc:4"] { padding-inline-start: 4px } .u-padding[data-pl~="pc:8"] { padding-inline-start: 8px } .u-padding[data-pl~="pc:12"] { padding-inline-start: 12px } .u-padding[data-pl~="pc:16"] { padding-inline-start: 16px } .u-padding[data-pl~="pc:20"] { padding-inline-start: 20px } .u-padding[data-pl~="pc:24"] { padding-inline-start: 24px } .u-padding[data-pl~="pc:32"] { padding-inline-start: 32px } .u-padding[data-pl~="pc:40"] { padding-inline-start: 40px } .u-padding[data-pl~="pc:48"] { padding-inline-start: 48px } .u-padding[data-pl~="pc:56"] { padding-inline-start: 56px } .u-padding[data-pl~="pc:64"] { padding-inline-start: 64px } .u-padding[data-pl~="pc:80"] { padding-inline-start: 80px } .u-padding[data-pl~="pc:160"] { padding-inline-start: 160px } .u-padding[data-px~="pc:0"] { padding-inline: 0px } .u-padding[data-px~="pc:4"] { padding-inline: 4px } .u-padding[data-px~="pc:8"] { padding-inline: 8px } .u-padding[data-px~="pc:12"] { padding-inline: 12px } .u-padding[data-px~="pc:16"] { padding-inline: 16px } .u-padding[data-px~="pc:20"] { padding-inline: 20px } .u-padding[data-px~="pc:24"] { padding-inline: 24px } .u-padding[data-px~="pc:32"] { padding-inline: 32px } .u-padding[data-px~="pc:40"] { padding-inline: 40px } .u-padding[data-px~="pc:48"] { padding-inline: 48px } .u-padding[data-px~="pc:56"] { padding-inline: 56px } .u-padding[data-px~="pc:64"] { padding-inline: 64px } .u-padding[data-px~="pc:80"] { padding-inline: 80px } .u-padding[data-px~="pc:160"] { padding-inline: 160px } .u-padding[data-py~="pc:0"] { padding-block: 0px } .u-padding[data-py~="pc:4"] { padding-block: 4px } .u-padding[data-py~="pc:8"] { padding-block: 8px } .u-padding[data-py~="pc:12"] { padding-block: 12px } .u-padding[data-py~="pc:16"] { padding-block: 16px } .u-padding[data-py~="pc:20"] { padding-block: 20px } .u-padding[data-py~="pc:24"] { padding-block: 24px } .u-padding[data-py~="pc:32"] { padding-block: 32px } .u-padding[data-py~="pc:40"] { padding-block: 40px } .u-padding[data-py~="pc:48"] { padding-block: 48px } .u-padding[data-py~="pc:56"] { padding-block: 56px } .u-padding[data-py~="pc:64"] { padding-block: 64px } .u-padding[data-py~="pc:80"] { padding-block: 80px } .u-padding[data-py~="pc:160"] { padding-block: 160px } .u-padding[data-p~="pc:0"] { padding: 0 } .u-padding[data-p~="pc:4"] { padding: 4px } .u-padding[data-p~="pc:8"] { padding: 8px } .u-padding[data-p~="pc:12"] { padding: 12px } .u-padding[data-p~="pc:16"] { padding: 16px } .u-padding[data-p~="pc:20"] { padding: 20px } .u-padding[data-p~="pc:24"] { padding: 24px } .u-padding[data-p~="pc:32"] { padding: 32px } .u-padding[data-p~="pc:40"] { padding: 40px } .u-padding[data-p~="pc:48"] { padding: 48px } .u-padding[data-p~="pc:56"] { padding: 56px } .u-padding[data-p~="pc:64"] { padding: 64px } .u-padding[data-p~="pc:80"] { padding: 80px } .u-padding[data-p~="pc:160"] { padding: 160px } } .u-radius[data-radius~="5"] { border-radius: 5px } @media only screen and (min-width: 768px) { .u-radius[data-radius~="tab:5"] { border-radius: 5px } } @media only screen and (min-width: 1136px) { .u-radius[data-radius~="pc:5"] { border-radius: 5px } } .u-radius[data-radius~="10"] { border-radius: 10px } @media only screen and (min-width: 768px) { .u-radius[data-radius~="tab:10"] { border-radius: 10px } } @media only screen and (min-width: 1136px) { .u-radius[data-radius~="pc:10"] { border-radius: 10px } } .u-grid { display: grid } .u-grid[data-cols~="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)) } .u-grid[data-cols~="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .u-grid[data-cols~="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .u-grid[data-cols~="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } @media only screen and (min-width: 768px) { .u-grid[data-cols~="tab:1"] { grid-template-columns: repeat(1, minmax(0, 1fr)) } .u-grid[data-cols~="tab:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .u-grid[data-cols~="tab:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .u-grid[data-cols~="tab:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } } @media only screen and (min-width: 1136px) { .u-grid[data-cols~="pc:1"] { grid-template-columns: repeat(1, minmax(0, 1fr)) } .u-grid[data-cols~="pc:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .u-grid[data-cols~="pc:3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) } .u-grid[data-cols~="pc:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) } } .u-grid[data-cols~=none] { grid-template-columns: none } @media only screen and (min-width: 768px) { .u-grid[data-cols~="tab:none"] { grid-template-columns: none } } @media only screen and (min-width: 1136px) { .u-grid[data-cols~="pc:none"] { grid-template-columns: none } } .u-grid[data-cols~=subgrid] { grid-template-columns: subgrid } @media only screen and (min-width: 768px) { .u-grid[data-cols~="tab:subgrid"] { grid-template-columns: subgrid } } @media only screen and (min-width: 1136px) { .u-grid[data-cols~="pc:subgrid"] { grid-template-columns: subgrid } } .u-grid[data-rows~="1"] { grid-template-rows: repeat(1, minmax(0, 1fr)) } .u-grid[data-rows~="2"] { grid-template-rows: repeat(2, minmax(0, 1fr)) } .u-grid[data-rows~="3"] { grid-template-rows: repeat(3, minmax(0, 1fr)) } .u-grid[data-rows~="4"] { grid-template-rows: repeat(4, minmax(0, 1fr)) } @media only screen and (min-width: 768px) { .u-grid[data-rows~="tab:1"] { grid-template-rows: repeat(1, minmax(0, 1fr)) } .u-grid[data-rows~="tab:2"] { grid-template-rows: repeat(2, minmax(0, 1fr)) } .u-grid[data-rows~="tab:3"] { grid-template-rows: repeat(3, minmax(0, 1fr)) } .u-grid[data-rows~="tab:4"] { grid-template-rows: repeat(4, minmax(0, 1fr)) } } @media only screen and (min-width: 1136px) { .u-grid[data-rows~="pc:1"] { grid-template-rows: repeat(1, minmax(0, 1fr)) } .u-grid[data-rows~="pc:2"] { grid-template-rows: repeat(2, minmax(0, 1fr)) } .u-grid[data-rows~="pc:3"] { grid-template-rows: repeat(3, minmax(0, 1fr)) } .u-grid[data-rows~="pc:4"] { grid-template-rows: repeat(4, minmax(0, 1fr)) } } .u-grid[data-rows~=none] { grid-template-rows: none } @media only screen and (min-width: 768px) { .u-grid[data-rows~="tab:none"] { grid-template-rows: none } } @media only screen and (min-width: 1136px) { .u-grid[data-rows~="pc:none"] { grid-template-rows: none } } .u-grid[data-rows~=subgrid] { grid-template-rows: subgrid } @media only screen and (min-width: 768px) { .u-grid[data-rows~="tab:subgrid"] { grid-template-rows: subgrid } } @media only screen and (min-width: 1136px) { .u-grid[data-rows~="pc:subgrid"] { grid-template-rows: subgrid } } .u-grid[data-flow~=col] { grid-auto-flow: column } .u-grid[data-flow~=row] { grid-auto-flow: row } @media only screen and (min-width: 768px) { .u-grid[data-flow~="tab:col"] { grid-auto-flow: column } .u-grid[data-flow~="tab:row"] { grid-auto-flow: row } } @media only screen and (min-width: 1136px) { .u-grid[data-flow~="pc:col"] { grid-auto-flow: column } .u-grid[data-flow~="pc:row"] { grid-auto-flow: row } } .u-grid>[data-col-span~="1"] { grid-column: span 1/span 1 } .u-grid>[data-col-start~="1"] { grid-column-start: 1 } .u-grid>[data-col-span~="2"] { grid-column: span 2/span 2 } .u-grid>[data-col-start~="2"] { grid-column-start: 2 } .u-grid>[data-col-span~="3"] { grid-column: span 3/span 3 } .u-grid>[data-col-start~="3"] { grid-column-start: 3 } .u-grid>[data-col-span~="4"] { grid-column: span 4/span 4 } .u-grid>[data-col-start~="4"] { grid-column-start: 4 } .u-grid>[data-col-span~=auto] { grid-column: auto } .u-grid>[data-col-span~=full] { grid-column: 1/-1 } @media only screen and (min-width: 768px) { .u-grid>[data-col-span~="tab:1"] { grid-column: span 1/span 1 } .u-grid>[data-col-start~="tab:1"] { grid-column-start: 1 } .u-grid>[data-col-span~="tab:2"] { grid-column: span 2/span 2 } .u-grid>[data-col-start~="tab:2"] { grid-column-start: 2 } .u-grid>[data-col-span~="tab:3"] { grid-column: span 3/span 3 } .u-grid>[data-col-start~="tab:3"] { grid-column-start: 3 } .u-grid>[data-col-span~="tab:4"] { grid-column: span 4/span 4 } .u-grid>[data-col-start~="tab:4"] { grid-column-start: 4 } .u-grid>[data-col-span~="tab:auto"] { grid-column: auto } .u-grid>[data-col-span~="tab:full"] { grid-column: 1/-1 } } @media only screen and (min-width: 1136px) { .u-grid>[data-col-span~="pc:1"] { grid-column: span 1/span 1 } .u-grid>[data-col-start~="pc:1"] { grid-column-start: 1 } .u-grid>[data-col-span~="pc:2"] { grid-column: span 2/span 2 } .u-grid>[data-col-start~="pc:2"] { grid-column-start: 2 } .u-grid>[data-col-span~="pc:3"] { grid-column: span 3/span 3 } .u-grid>[data-col-start~="pc:3"] { grid-column-start: 3 } .u-grid>[data-col-span~="pc:4"] { grid-column: span 4/span 4 } .u-grid>[data-col-start~="pc:4"] { grid-column-start: 4 } .u-grid>[data-col-span~="pc:auto"] { grid-column: auto } .u-grid>[data-col-span~="pc:full"] { grid-column: 1/-1 } } .u-grid>[data-row-span~="1"] { grid-row: span 1/span 1 } .u-grid>[data-row-start~="1"] { grid-row-start: 1 } .u-grid>[data-row-span~="2"] { grid-row: span 2/span 2 } .u-grid>[data-row-start~="2"] { grid-row-start: 2 } .u-grid>[data-row-span~="3"] { grid-row: span 3/span 3 } .u-grid>[data-row-start~="3"] { grid-row-start: 3 } .u-grid>[data-row-span~="4"] { grid-row: span 4/span 4 } .u-grid>[data-row-start~="4"] { grid-row-start: 4 } .u-grid>[data-row-span~="5"] { grid-row: span 5/span 5 } .u-grid>[data-row-start~="5"] { grid-row-start: 5 } .u-grid>[data-row-span~="6"] { grid-row: span 6/span 6 } .u-grid>[data-row-start~="6"] { grid-row-start: 6 } .u-grid>[data-row-span~=auto] { grid-row: auto } .u-grid>[data-row-span~=full] { grid-row: 1/-1 } @media only screen and (min-width: 768px) { .u-grid>[data-row-span~="tab:1"] { grid-row: span 1/span 1 } .u-grid>[data-row-start~="tab:1"] { grid-row-start: 1 } .u-grid>[data-row-span~="tab:2"] { grid-row: span 2/span 2 } .u-grid>[data-row-start~="tab:2"] { grid-row-start: 2 } .u-grid>[data-row-span~="tab:3"] { grid-row: span 3/span 3 } .u-grid>[data-row-start~="tab:3"] { grid-row-start: 3 } .u-grid>[data-row-span~="tab:4"] { grid-row: span 4/span 4 } .u-grid>[data-row-start~="tab:4"] { grid-row-start: 4 } .u-grid>[data-row-span~="tab:5"] { grid-row: span 5/span 5 } .u-grid>[data-row-start~="tab:5"] { grid-row-start: 5 } .u-grid>[data-row-span~="tab:6"] { grid-row: span 6/span 6 } .u-grid>[data-row-start~="tab:6"] { grid-row-start: 6 } .u-grid>[data-row-span~="tab:auto"] { grid-row: auto } .u-grid>[data-row-span~="tab:full"] { grid-row: 1/-1 } } @media only screen and (min-width: 1136px) { .u-grid>[data-row-span~="pc:1"] { grid-row: span 1/span 1 } .u-grid>[data-row-start~="pc:1"] { grid-row-start: 1 } .u-grid>[data-row-span~="pc:2"] { grid-row: span 2/span 2 } .u-grid>[data-row-start~="pc:2"] { grid-row-start: 2 } .u-grid>[data-row-span~="pc:3"] { grid-row: span 3/span 3 } .u-grid>[data-row-start~="pc:3"] { grid-row-start: 3 } .u-grid>[data-row-span~="pc:4"] { grid-row: span 4/span 4 } .u-grid>[data-row-start~="pc:4"] { grid-row-start: 4 } .u-grid>[data-row-span~="pc:5"] { grid-row: span 5/span 5 } .u-grid>[data-row-start~="pc:5"] { grid-row-start: 5 } .u-grid>[data-row-span~="pc:6"] { grid-row: span 6/span 6 } .u-grid>[data-row-start~="pc:6"] { grid-row-start: 6 } .u-grid>[data-row-span~="pc:auto"] { grid-row: auto } .u-grid>[data-row-span~="pc:full"] { grid-row: 1/-1 } } .u-grid[data-gap~="0"] { gap: 0px } .u-grid[data-gap-x~="0"] { column-gap: 0px } .u-grid[data-gap-y~="0"] { row-gap: 0px } .u-grid[data-gap~="4"] { gap: 4px } .u-grid[data-gap-x~="4"] { column-gap: 4px } .u-grid[data-gap-y~="4"] { row-gap: 4px } .u-grid[data-gap~="8"] { gap: 8px } .u-grid[data-gap-x~="8"] { column-gap: 8px } .u-grid[data-gap-y~="8"] { row-gap: 8px } .u-grid[data-gap~="12"] { gap: 12px } .u-grid[data-gap-x~="12"] { column-gap: 12px } .u-grid[data-gap-y~="12"] { row-gap: 12px } .u-grid[data-gap~="16"] { gap: 16px } .u-grid[data-gap-x~="16"] { column-gap: 16px } .u-grid[data-gap-y~="16"] { row-gap: 16px } .u-grid[data-gap~="24"] { gap: 24px } .u-grid[data-gap-x~="24"] { column-gap: 24px } .u-grid[data-gap-y~="24"] { row-gap: 24px } .u-grid[data-gap~="32"] { gap: 32px } .u-grid[data-gap-x~="32"] { column-gap: 32px } .u-grid[data-gap-y~="32"] { row-gap: 32px } .u-grid[data-gap~="40"] { gap: 40px } .u-grid[data-gap-x~="40"] { column-gap: 40px } .u-grid[data-gap-y~="40"] { row-gap: 40px } .u-grid[data-gap~="48"] { gap: 48px } .u-grid[data-gap-x~="48"] { column-gap: 48px } .u-grid[data-gap-y~="48"] { row-gap: 48px } .u-grid[data-gap~="56"] { gap: 56px } .u-grid[data-gap-x~="56"] { column-gap: 56px } .u-grid[data-gap-y~="56"] { row-gap: 56px } .u-grid[data-gap~="80"] { gap: 80px } .u-grid[data-gap-x~="80"] { column-gap: 80px } .u-grid[data-gap-y~="80"] { row-gap: 80px } .u-grid[data-gap~="112"] { gap: 112px } .u-grid[data-gap-x~="112"] { column-gap: 112px } .u-grid[data-gap-y~="112"] { row-gap: 112px } @media only screen and (min-width: 768px) { .u-grid[data-gap~="tab:0"] { gap: 0px } .u-grid[data-gap-x~="tab:0"] { column-gap: 0px } .u-grid[data-gap-y~="tab:0"] { row-gap: 0px } .u-grid[data-gap~="tab:4"] { gap: 4px } .u-grid[data-gap-x~="tab:4"] { column-gap: 4px } .u-grid[data-gap-y~="tab:4"] { row-gap: 4px } .u-grid[data-gap~="tab:8"] { gap: 8px } .u-grid[data-gap-x~="tab:8"] { column-gap: 8px } .u-grid[data-gap-y~="tab:8"] { row-gap: 8px } .u-grid[data-gap~="tab:12"] { gap: 12px } .u-grid[data-gap-x~="tab:12"] { column-gap: 12px } .u-grid[data-gap-y~="tab:12"] { row-gap: 12px } .u-grid[data-gap~="tab:16"] { gap: 16px } .u-grid[data-gap-x~="tab:16"] { column-gap: 16px } .u-grid[data-gap-y~="tab:16"] { row-gap: 16px } .u-grid[data-gap~="tab:24"] { gap: 24px } .u-grid[data-gap-x~="tab:24"] { column-gap: 24px } .u-grid[data-gap-y~="tab:24"] { row-gap: 24px } .u-grid[data-gap~="tab:32"] { gap: 32px } .u-grid[data-gap-x~="tab:32"] { column-gap: 32px } .u-grid[data-gap-y~="tab:32"] { row-gap: 32px } .u-grid[data-gap~="tab:40"] { gap: 40px } .u-grid[data-gap-x~="tab:40"] { column-gap: 40px } .u-grid[data-gap-y~="tab:40"] { row-gap: 40px } .u-grid[data-gap~="tab:48"] { gap: 48px } .u-grid[data-gap-x~="tab:48"] { column-gap: 48px } .u-grid[data-gap-y~="tab:48"] { row-gap: 48px } .u-grid[data-gap~="tab:56"] { gap: 56px } .u-grid[data-gap-x~="tab:56"] { column-gap: 56px } .u-grid[data-gap-y~="tab:56"] { row-gap: 56px } .u-grid[data-gap~="tab:80"] { gap: 80px } .u-grid[data-gap-x~="tab:80"] { column-gap: 80px } .u-grid[data-gap-y~="tab:80"] { row-gap: 80px } .u-grid[data-gap~="tab:112"] { gap: 112px } .u-grid[data-gap-x~="tab:112"] { column-gap: 112px } .u-grid[data-gap-y~="tab:112"] { row-gap: 112px } } @media only screen and (min-width: 1136px) { .u-grid[data-gap~="pc:0"] { gap: 0px } .u-grid[data-gap-x~="pc:0"] { column-gap: 0px } .u-grid[data-gap-y~="pc:0"] { row-gap: 0px } .u-grid[data-gap~="pc:4"] { gap: 4px } .u-grid[data-gap-x~="pc:4"] { column-gap: 4px } .u-grid[data-gap-y~="pc:4"] { row-gap: 4px } .u-grid[data-gap~="pc:8"] { gap: 8px } .u-grid[data-gap-x~="pc:8"] { column-gap: 8px } .u-grid[data-gap-y~="pc:8"] { row-gap: 8px } .u-grid[data-gap~="pc:12"] { gap: 12px } .u-grid[data-gap-x~="pc:12"] { column-gap: 12px } .u-grid[data-gap-y~="pc:12"] { row-gap: 12px } .u-grid[data-gap~="pc:16"] { gap: 16px } .u-grid[data-gap-x~="pc:16"] { column-gap: 16px } .u-grid[data-gap-y~="pc:16"] { row-gap: 16px } .u-grid[data-gap~="pc:24"] { gap: 24px } .u-grid[data-gap-x~="pc:24"] { column-gap: 24px } .u-grid[data-gap-y~="pc:24"] { row-gap: 24px } .u-grid[data-gap~="pc:32"] { gap: 32px } .u-grid[data-gap-x~="pc:32"] { column-gap: 32px } .u-grid[data-gap-y~="pc:32"] { row-gap: 32px } .u-grid[data-gap~="pc:40"] { gap: 40px } .u-grid[data-gap-x~="pc:40"] { column-gap: 40px } .u-grid[data-gap-y~="pc:40"] { row-gap: 40px } .u-grid[data-gap~="pc:48"] { gap: 48px } .u-grid[data-gap-x~="pc:48"] { column-gap: 48px } .u-grid[data-gap-y~="pc:48"] { row-gap: 48px } .u-grid[data-gap~="pc:56"] { gap: 56px } .u-grid[data-gap-x~="pc:56"] { column-gap: 56px } .u-grid[data-gap-y~="pc:56"] { row-gap: 56px } .u-grid[data-gap~="pc:80"] { gap: 80px } .u-grid[data-gap-x~="pc:80"] { column-gap: 80px } .u-grid[data-gap-y~="pc:80"] { row-gap: 80px } .u-grid[data-gap~="pc:112"] { gap: 112px } .u-grid[data-gap-x~="pc:112"] { column-gap: 112px } .u-grid[data-gap-y~="pc:112"] { row-gap: 112px } } .u-grid[data-justify-content~=normal] { justify-content: normal } .u-grid[data-justify-content~=start] { justify-content: flex-start } .u-grid[data-justify-content~=end] { justify-content: flex-end } .u-grid[data-justify-content~=center] { justify-content: center } .u-grid[data-justify-content~=between] { justify-content: space-between } .u-grid[data-justify-content~=around] { justify-content: space-around } .u-grid[data-justify-content~=evenly] { justify-content: space-evenly } .u-grid[data-justify-content~=stretch] { justify-content: stretch } @media only screen and (min-width: 768px) { .u-grid[data-justify-content~="tab:normal"] { justify-content: normal } .u-grid[data-justify-content~="tab:start"] { justify-content: flex-start } .u-grid[data-justify-content~="tab:end"] { justify-content: flex-end } .u-grid[data-justify-content~="tab:center"] { justify-content: center } .u-grid[data-justify-content~="tab:between"] { justify-content: space-between } .u-grid[data-justify-content~="tab:around"] { justify-content: space-around } .u-grid[data-justify-content~="tab:evenly"] { justify-content: space-evenly } .u-grid[data-justify-content~="tab:stretch"] { justify-content: stretch } } @media only screen and (min-width: 1136px) { .u-grid[data-justify-content~="pc:normal"] { justify-content: normal } .u-grid[data-justify-content~="pc:start"] { justify-content: flex-start } .u-grid[data-justify-content~="pc:end"] { justify-content: flex-end } .u-grid[data-justify-content~="pc:center"] { justify-content: center } .u-grid[data-justify-content~="pc:between"] { justify-content: space-between } .u-grid[data-justify-content~="pc:around"] { justify-content: space-around } .u-grid[data-justify-content~="pc:evenly"] { justify-content: space-evenly } .u-grid[data-justify-content~="pc:stretch"] { justify-content: stretch } } .u-grid[data-justify-items~=start] { justify-items: start } .u-grid[data-justify-items~=end] { justify-items: end } .u-grid[data-justify-items~=center] { justify-items: center } .u-grid[data-justify-items~=stretch] { justify-items: stretch } @media only screen and (min-width: 768px) { .u-grid[data-justify-items~="tab:start"] { justify-items: start } .u-grid[data-justify-items~="tab:end"] { justify-items: end } .u-grid[data-justify-items~="tab:center"] { justify-items: center } .u-grid[data-justify-items~="tab:stretch"] { justify-items: stretch } } @media only screen and (min-width: 1136px) { .u-grid[data-justify-items~="pc:start"] { justify-items: start } .u-grid[data-justify-items~="pc:end"] { justify-items: end } .u-grid[data-justify-items~="pc:center"] { justify-items: center } .u-grid[data-justify-items~="pc:stretch"] { justify-items: stretch } } .u-grid[data-align-content~=normal] { align-content: normal } .u-grid[data-align-content~=center] { align-content: center } .u-grid[data-align-content~=start] { align-content: flex-start } .u-grid[data-align-content~=between] { align-content: space-between } .u-grid[data-align-content~=around] { align-content: space-around } .u-grid[data-align-content~=evenly] { align-content: space-evenly } .u-grid[data-align-content~=baseline] { align-content: baseline } .u-grid[data-align-content~=stretch] { align-content: stretch } @media only screen and (min-width: 768px) { .u-grid[data-align-content~="tab:normal"] { align-content: normal } .u-grid[data-align-content~="tab:center"] { align-content: center } .u-grid[data-align-content~="tab:start"] { align-content: flex-start } .u-grid[data-align-content~="tab:between"] { align-content: space-between } .u-grid[data-align-content~="tab:around"] { align-content: space-around } .u-grid[data-align-content~="tab:evenly"] { align-content: space-evenly } .u-grid[data-align-content~="tab:baseline"] { align-content: baseline } .u-grid[data-align-content~="tab:stretch"] { align-content: stretch } } @media only screen and (min-width: 1136px) { .u-grid[data-align-content~="pc:normal"] { align-content: normal } .u-grid[data-align-content~="pc:center"] { align-content: center } .u-grid[data-align-content~="pc:start"] { align-content: flex-start } .u-grid[data-align-content~="pc:between"] { align-content: space-between } .u-grid[data-align-content~="pc:around"] { align-content: space-around } .u-grid[data-align-content~="pc:evenly"] { align-content: space-evenly } .u-grid[data-align-content~="pc:baseline"] { align-content: baseline } .u-grid[data-align-content~="pc:stretch"] { align-content: stretch } } .u-grid[data-align-items~=start] { align-items: flex-start } .u-grid[data-align-items~=end] { align-items: flex-end } .u-grid[data-align-items~=center] { align-items: center } .u-grid[data-align-items~=baseline] { align-items: baseline } .u-grid[data-align-items~=stretch] { align-items: stretch } @media only screen and (min-width: 768px) { .u-grid[data-align-items~="tab:start"] { align-items: flex-start } .u-grid[data-align-items~="tab:end"] { align-items: flex-end } .u-grid[data-align-items~="tab:center"] { align-items: center } .u-grid[data-align-items~="tab:baseline"] { align-items: baseline } .u-grid[data-align-items~="tab:stretch"] { align-items: stretch } } @media only screen and (min-width: 1136px) { .u-grid[data-align-items~="pc:start"] { align-items: flex-start } .u-grid[data-align-items~="pc:end"] { align-items: flex-end } .u-grid[data-align-items~="pc:center"] { align-items: center } .u-grid[data-align-items~="pc:baseline"] { align-items: baseline } .u-grid[data-align-items~="pc:stretch"] { align-items: stretch } }