/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --color-bg:#f8f8f8; --color-text: #673a1b; --color-brown: #5c090e; --color-bg-modal: rgba(89, 73, 63,.75); --color-green: #08a783; --color-gray: #eee; --color-gray-ui: #e5e5e5; --min-padding: 16px; --spCloseHeight: 60px; --font-sans: "Roboto", "Noto Sans JP", sans-serif; } body { font-family: var(--font-sans); color: var(--color-text); } @media print, screen and (min-width: 781px) { body { font-size: 16px; line-height: 1.875; } } @media screen and (max-width: 780px) { body { font-size: 3.4615384615vw; line-height: 1.63; } } img { height: auto; } @media screen and (max-width: 780px) { img { width: 100%; } } svg { overflow: visible; } small { font-size: 1em; } i, em { font-style: normal; } button[type=button] { cursor: pointer; } .js-inView { visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s, transform 0.3s ease-in; transform: translateY(20px); } .js-inView.is-view { visibility: visible; opacity: 1; transform: translateY(0); } html { scroll-behavior: smooth; } @media print, screen and (min-width: 781px) { body.is-modalOpen { overflow: hidden; } } @media screen and (max-width: 780px) { .u-pc { display: none; } } @media print, screen and (min-width: 781px) { .u-sp { display: none; } } .sr-onry { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0 0 99.9% 99.9%); border: 0; } .siteWrapper { position: relative; overflow-x: clip; background-color: #fff; } .bgVideo { position: fixed; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; } .bgVideo::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0, 0, 0, 0.07); } .bgVideo__body { width: 100%; height: 100%; object-fit: cover; } .bgVideo__body::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; } .bgVideo__body:state(webkit-media-controls-play-button) { display: none !important; -webkit-appearance: none; } .firstView { position: relative; z-index: 1; height: 100dvh; } .firstView__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; } .firstView__siteid { line-height: 0; opacity: 0; } @media screen and (max-width: 780px) { .firstView__siteid { width: 45.8974358974vw; } } .firstView.is-run .firstView__siteid { animation: siteid 1s 1 forwards; } .firstView__catch { line-height: 0; text-align: center; opacity: 0; transform: translateY(20px); } @media print, screen and (min-width: 781px) { .firstView__catch { margin-top: 9.3251533742dvh; } } @media screen and (max-width: 780px) { .firstView__catch { display: grid; grid-auto-flow: row; gap: 10px; width: 53.4615384615vw; margin-top: 11.2820512821vw; } } .firstView.is-run .firstView__catch { animation: catch 1s 1 0.75s forwards; } .firstView .scrollHint { display: flex; flex-direction: column; align-items: center; opacity: 0; } @media print, screen and (min-width: 781px) { .firstView .scrollHint { margin-top: 7.3619631902dvh; } } @media screen and (max-width: 780px) { .firstView .scrollHint { margin-top: 11.7948717949vw; } } .firstView .scrollHint__label { color: #fff; letter-spacing: 0.04em; } @media print, screen and (min-width: 781px) { .firstView .scrollHint__label { font-size: 20px; } } @media screen and (max-width: 780px) { .firstView .scrollHint__label { font-size: 15px; } } .firstView .scrollHint::after { display: block; content: ""; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: contain; animation: scrollHintArrow 1.5s linear 0s infinite forwards; } @media print, screen and (min-width: 781px) { .firstView .scrollHint::after { width: 31px; height: 16px; } } @media screen and (max-width: 780px) { .firstView .scrollHint::after { width: 6.0256410256vw; height: 3.0769230769vw; } } .firstView.is-run .scrollHint { animation: scrollHint 1s 1 1.5s forwards; } @keyframes siteid { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes catch { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes scrollHint { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scrollHintArrow { 0% { opacity: 0; transform: translateY(-6px); } 10% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; transform: translateY(6px); } } .contents { position: relative; z-index: 1; background-color: #fff; } body.is-modalOpen .contents { padding-right: var(--scrollbar-width); } .simplebar-content-wrapper { scrollbar-width: auto; -ms-overflow-style: auto; } .simplebar-content-wrapper::-webkit-scrollbar, .simplebar-hide-scrollbar::-webkit-scrollbar { display: initial; width: initial; height: initial; } .simplebar-scrollbar::before { inset: 2px; width: 100%; background: #000; border-radius: 7px; opacity: 0; } .simplebar-scrollbar.simplebar-visible::before { opacity: 0.5; } .simplebar-track { width: 100%; background-color: var(--color-gray-ui); } @media screen and (max-width: 780px) { .section__inner { padding-right: 20px; padding-left: 20px; } } .statement { display: grid; place-content: center; background-position: top center; } @media print, screen and (min-width: 781px) { .statement { padding-top: 300px; padding-bottom: 300px; background-image: url("../images/statement-bg-pc.png"); } } @media screen and (max-width: 780px) { .statement { padding-top: 30.7692307692vw; padding-bottom: 30.7692307692vw; background-image: url("../images/statement-bg-sp.png"); background-size: cover; } } .statement .section__inner { background-color: #fff; } @media print, screen and (min-width: 781px) { .statement .section__inner { display: flex; flex-direction: column; align-items: center; width: 654px; height: 834px; padding-top: 48px; padding-bottom: 48px; } } @media screen and (max-width: 780px) { .statement .section__inner { padding-top: 5.5128205128vw; padding-bottom: 8.0769230769vw; } } @media screen and (max-width: 780px) { .statement .section__title { width: 64.8717948718vw; height: 16.7948717949vw; } } .statement__text { font-weight: bold; color: var(--color-brown); } @media print, screen and (min-width: 781px) { .statement__text { margin-top: 60px; font-size: 19px; line-height: 2.52; letter-spacing: 0.04em; } } @media screen and (max-width: 780px) { .statement__text { margin-top: 8.9743589744vw; font-size: 3.4615384615vw; line-height: 2.15; letter-spacing: 0.07em; } } @media print, screen and (min-width: 781px) { .visionMap { padding-top: 20px; padding-bottom: 100px; } } @media screen and (max-width: 780px) { .visionMap { padding-top: 30px; padding-bottom: 100px; overflow: hidden; } } .visionMap .section__inner { position: relative; } @media print, screen and (min-width: 781px) { .visionMap .section__inner { max-width: calc(1320px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-right: auto; margin-left: auto; } } @media screen and (max-width: 780px) { .visionMap .section__inner { padding-right: 0; padding-left: 0; } } .visionMap__container { position: relative; } @media print, screen and (min-width: 781px) { .visionMap__head { position: absolute; top: 0; left: 128px; z-index: 2; display: block; } } @media screen and (max-width: 780px) { .visionMap__head { width: 45vw; height: 28.8461538462vw; margin-left: 20px; } } .visionMap__body { position: relative; line-height: 0; text-align: center; } @media print, screen and (min-width: 781px) { .visionMap__body .base { padding-top: 10px; } } @media screen and (max-width: 780px) { .visionMap__body .base { margin-right: -8.9743589744vw; margin-left: -8.9743589744vw; } } .visionMap__body .logo { position: absolute; } @media print, screen and (min-width: 781px) { .visionMap__body .logo { top: 414px; left: 50%; transform: translateX(-50%); } } @media screen and (max-width: 780px) { .visionMap__body .logo { top: 37.4358974359vw; left: 50%; width: 29.2307692308vw; height: 12.6923076923vw; transform: translateX(-50%); } } .visionMap__body .bird { position: absolute; z-index: 1; } @media print, screen and (min-width: 781px) { .visionMap__body .bird { top: 83px; left: 335px; } } @media screen and (max-width: 780px) { .visionMap__body .bird { top: 6.2820512821vw; left: 24.358974359vw; width: 11.5384615385vw; height: 6.5384615385vw; } } .visionMap__body .kumo01 { position: absolute; top: 0; left: 0; } @media print, screen and (min-width: 781px) { .visionMap__body .kumo01 { top: 83px; left: -18px; } } @media screen and (max-width: 780px) { .visionMap__body .kumo01 { top: 6.2820512821vw; left: -6.2820512821vw; width: 26.2820512821vw; height: 15.3846153846vw; } } .visionMap__body .kumo02 { position: absolute; } @media print, screen and (min-width: 781px) { .visionMap__body .kumo02 { right: -34px; bottom: 75px; } } @media screen and (max-width: 780px) { .visionMap__body .kumo02 { top: 51.6666666667vw; right: -5.1282051282vw; width: 28.4615384615vw; height: 15.641025641vw; } } .visionMap__body .kikyu { position: absolute; } @media print, screen and (min-width: 781px) { .visionMap__body .kikyu { top: 56px; right: 163px; } } @media screen and (max-width: 780px) { .visionMap__body .kikyu { top: 3.9743589744vw; right: 10vw; width: 12.0512820513vw; height: 11.7948717949vw; } } .overDescription { background-color: #fff; } @media print, screen and (min-width: 781px) { .overDescription { width: 50%; padding: 26px 42px; margin-left: auto; } } @media screen and (max-width: 780px) { .overDescription { padding: 16px 24px; margin-right: 20px; margin-left: 20px; } } .overDescription__title { font-weight: bold; } @media print, screen and (min-width: 781px) { .overDescription__title { font-size: 22px; } } @media screen and (max-width: 780px) { .overDescription__title { font-size: 17px; } } .overDescription__text { margin-top: 20px; font-weight: 500; } @media print, screen and (min-width: 781px) { .overDescription__text { font-size: 17px; } } @media screen and (max-width: 780px) { .overDescription__text { font-size: 13.5px; } } @media print, screen and (min-width: 781px) { .youtube { padding-top: 150px; padding-bottom: 90px; background-image: url("../images/youtube-bg-pc.png"); background-repeat: repeat-x; background-position: top center; } } @media screen and (max-width: 780px) { .youtube { padding-top: 80px; padding-bottom: 180px; background-image: url("../images/youtube-bg-sp.png"); background-repeat: no-repeat; background-size: 100% auto; } } @media print, screen and (min-width: 781px) { .youtube .section__inner { max-width: calc(1240px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-right: auto; margin-left: auto; } } @media screen and (max-width: 780px) { .youtube .section__inner { padding-right: 0; padding-left: 0; } } .youtube__thumb { display: flex; justify-content: center; } .youtube__thumb__body { line-height: 0; background-color: #fff; } @media (hover: hover) and (pointer: fine) { .youtube__thumb__body img { transition: opacity 0.2s; } .youtube__thumb__body:hover img { opacity: 0.7; } } @media print, screen and (min-width: 781px) { .youtube .overDescription { margin-top: 50px; } } @media screen and (max-width: 780px) { .youtube .overDescription { margin-top: 35px; } } .youtube .overDescription__link { display: flex; justify-content: flex-end; margin-top: 20px; } @media print, screen and (min-width: 781px) { .spacer { width: 100%; height: 530px; } } @media print, screen and (min-width: 781px) { .spacer__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } } @media print, screen and (min-width: 781px) { .action { padding-top: 140px; padding-bottom: 130px; } } @media screen and (max-width: 780px) { .action { padding-top: 100px; padding-bottom: 80px; } } @media print, screen and (min-width: 781px) { .action .section__inner { max-width: calc(960px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-right: auto; margin-left: auto; } } .action .section__head { text-align: center; } .action .section__catch { font-weight: 500; } @media print, screen and (min-width: 781px) { .action .section__catch { margin-top: 30px; font-size: 18px; } } @media screen and (max-width: 780px) { .action .section__catch { margin-top: 20px; font-size: 15px; } } .actionList { display: grid; } @media print, screen and (min-width: 781px) { .actionList { grid-template-columns: repeat(2, 1fr); gap: 32px 54px; margin-top: 70px; } } @media screen and (max-width: 780px) { .actionList { grid-template-columns: 1fr; gap: 50px; margin-top: 30px; } } .c-button { display: flex; align-items: center; font-weight: bold; } @media (hover: hover) and (pointer: fine) { .c-button:is(a):hover .c-button__label::after, .c-button:is(button[type=button]):hover .c-button__label::after { animation-name: line; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .c-button:is(a):hover .c-button__icon::before, .c-button:is(button[type=button]):hover .c-button__icon::before { animation-name: bounceIn; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } } @keyframes line { 0% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } } @keyframes bounceIn { 0% { transform: scale3d(0.9, 0.9, 0.9); } 20% { transform: scale3d(1.05, 1.05, 1.05); } 40% { transform: scale3d(0.95, 0.95, 0.95); } 60% { transform: scale3d(1.01, 1.01, 1.01); } 80% { transform: scale3d(0.99, 0.99, 0.99); } 100% { transform: scale3d(1, 1, 1); } } .c-button__label { position: relative; } @media print, screen and (min-width: 781px) { .c-button__label { font-size: 17px; } } @media screen and (max-width: 780px) { .c-button__label { font-size: 15px; } } .c-button__label::after { display: block; width: 100%; height: 1px; content: ""; background-color: currentcolor; } .c-button__icon { position: relative; flex-shrink: 0; } .c-button__icon::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-image: url("../images/icon-bg.png"); background-repeat: no-repeat; background-size: contain; } .c-button__icon::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-repeat: no-repeat; background-size: contain; } @media print, screen and (min-width: 781px) { .c-button.-arrow .c-button__icon { width: 33px; height: 33px; margin-left: 14px; } } @media screen and (max-width: 780px) { .c-button.-arrow .c-button__icon { width: 30px; height: 30px; margin-left: 10px; } } .c-button.-arrow .c-button__icon::after { background-image: url("../images/icon-arrow.png"); } .c-button.-mail { color: var(--color-green); } @media print, screen and (min-width: 781px) { .c-button.-mail .c-button__icon { width: 62px; height: 62px; margin-left: 14px; } } @media screen and (max-width: 780px) { .c-button.-mail .c-button__icon { width: 46px; height: 46px; margin-left: 10px; } } .c-button.-mail .c-button__icon::after { background-image: url("../images/icon-mail.png"); } .actionItem { cursor: pointer; } @media (hover: hover) and (pointer: fine) { .actionItem { transition: opacity 0.2s; } .actionItem:hover { opacity: 0.7; } .actionItem:hover .c-button__label::after { animation-name: line; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .actionItem:hover .c-button__icon::before { animation-name: bounceIn; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } } .actionItem__thumb { overflow: hidden; line-height: 0; border-radius: 10px; } .actionItem__lead { margin-top: 16px; font-weight: 500; line-height: 1.36; } @media print, screen and (min-width: 781px) { .actionItem__lead { font-size: 22px; } } @media screen and (max-width: 780px) { .actionItem__lead { font-size: 19px; } } .actionItem__more { margin-top: 16px; } .modalWrapper { position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; overflow: auto; visibility: hidden; background-color: var(--color-bg-modal); opacity: 0; transition: opacity 0.5s, visibility 0s ease 0.5s; } @media screen and (max-width: 780px) { .modalWrapper { max-width: 100vw; } } @media print, screen and (min-width: 781px) { .modalWrapper { display: flex; align-items: center; justify-content: center; } } @media screen and (max-width: 780px) { .modalWrapper { padding-bottom: 30px; } } .modalWrapper__inner { width: 100%; } @media print, screen and (min-width: 781px) { .modalWrapper__inner { max-width: 1020px; } } body.is-modalOpen .modalWrapper.-actionProject { visibility: visible; opacity: 1; transition-delay: 0s; } body.is-youtubeOpen .modalWrapper.-youtube { visibility: visible; opacity: 1; transition-delay: 0s; } @media screen and (max-width: 780px) { .modalWrapper.-youtube { display: flex; align-items: center; justify-content: center; } } .modalClose { padding-right: 20px; } @media print, screen and (min-width: 781px) { .modalClose { margin-bottom: 20px; } } @media screen and (max-width: 780px) { .modalClose { display: flex; align-items: center; justify-content: flex-end; height: var(--spCloseHeight); } } .modalClose__button { display: block; margin-left: auto; cursor: pointer; } @media screen and (max-width: 780px) { .modalClose__button { width: 33px; height: 33px; } } @media (hover: hover) and (pointer: fine) { .modalClose__button { transition: opacity 0.2s; } .modalClose__button:hover { opacity: 0.7; } } .splide { visibility: visible !important; } .splide__slide { width: 100%; } .splide__slide img { max-width: 100%; } .splide__pagination { display: flex; justify-content: center; line-height: 0; } @media print, screen and (min-width: 781px) { .splide__pagination { gap: 26px; margin-top: 16px; } } @media screen and (max-width: 780px) { .splide__pagination { gap: 23px; margin-top: 15px; } } .splide__pagination li { line-height: 0; } .splide__pagination__page { background-color: var(--color-gray-ui); border-radius: 50%; } @media print, screen and (min-width: 781px) { .splide__pagination__page { width: 16px; height: 16px; } } @media screen and (max-width: 780px) { .splide__pagination__page { width: 14px; height: 14px; } } .splide__pagination__page.is-active { background-color: var(--color-green); } .projectActionModal { background-color: #fff; } .projectActionModal:not(.is-open) { display: none; } @media print, screen and (min-width: 781px) { .projectActionModal { display: grid; grid-template-columns: repeat(2, 50%); grid-auto-rows: 100%; height: 590px; } } @media screen and (max-width: 780px) { .projectActionModal__slider img { width: 100%; height: auto; } } .projectActionModal__title { font-weight: bold; line-height: 1.45; text-align: center; } @media print, screen and (min-width: 781px) { .projectActionModal__title { margin-top: 32px; font-size: 22px; } } @media screen and (max-width: 780px) { .projectActionModal__title { margin-top: 25px; font-size: 16px; } } @media print, screen and (min-width: 781px) { .projectActionModal__description { padding: 43px 34px 40px 40px; } } @media screen and (max-width: 780px) { .projectActionModal__description { padding-right: 20px; padding-bottom: 50px; padding-left: 20px; margin-top: 40px; } } @media print, screen and (min-width: 781px) { .projectActionModal__text { height: calc(100% - 50px); padding-right: 28px; overflow: auto; } } @media screen and (max-width: 780px) { .projectActionModal__text { max-height: 420px; padding-right: 25px; } } .projectActionModal__text a { text-decoration: underline; } .projectActionModal__link { display: flex; justify-content: flex-end; margin-top: 16px; } @media (hover: hover) and (pointer: fine) { .projectActionModal__link__button { transition: opacity 0.2s; } .projectActionModal__link__button:hover { text-decoration: none; opacity: 0.7; } } @media screen and (max-width: 780px) { .youtubeModal iframe { width: 100%; height: auto; aspect-ratio: 16/9; } } .about { background-color: var(--color-green); background-repeat: no-repeat; background-position: center bottom; } @media print, screen and (min-width: 781px) { .about { padding-top: 70px; padding-bottom: 500px; background-image: url("../images/about-img-pc.png"); } } @media screen and (max-width: 780px) { .about { padding-top: 50px; padding-bottom: 87.1794871795vw; background-image: url("../images/about-img-sp.png"); background-size: contain; } } @media print, screen and (min-width: 781px) { .about .section__inner { max-width: calc(880px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-right: auto; margin-left: auto; } } .about__text { color: #fff; } @media print, screen and (min-width: 781px) { .about__text { margin-top: 47px; font-size: 18px; letter-spacing: 0.025em; } } @media screen and (max-width: 780px) { .about__text { margin-top: 36px; font-size: 13; } } @media print, screen and (min-width: 781px) { .joinUs .section__inner { max-width: calc(950px + var(--min-padding) * 2); padding: 110px var(--min-padding) 70px var(--min-padding); margin-right: auto; margin-left: auto; } } @media screen and (max-width: 780px) { .joinUs .section__inner { padding-top: 60px; padding-bottom: 45px; } } .joinUs .section__head { text-align: center; } @media screen and (max-width: 780px) { .joinUs .section__title { width: 42.5641025641vw; height: 10.8974358974vw; margin-right: auto; margin-left: auto; } } .joinUs .section__catch { display: block; font-weight: 500; color: var(--color-green); } @media print, screen and (min-width: 781px) { .joinUs .section__catch { margin-top: 32px; font-size: 20px; } } @media screen and (max-width: 780px) { .joinUs .section__catch { margin-top: 26px; font-size: 17px; } } @media print, screen and (min-width: 781px) { .joinUs__text { margin-top: 56px; text-align: center; } } @media screen and (max-width: 780px) { .joinUs__text { margin-top: 36px; } } @media print, screen and (min-width: 781px) { .joinUs__category { display: flex; justify-content: center; margin-top: 36px; } } @media screen and (max-width: 780px) { .joinUs__category { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 20px; } } .joinUs__category__item { text-align: center; } @media screen and (max-width: 780px) { .joinUs__category__item__inner { width: 80%; } } @media print, screen and (min-width: 781px) { .joinUs__category__item__inner.mokuzai { margin-top: 3px; } } @media screen and (max-width: 780px) { .joinUs__category__item__inner.mokuzai { margin-left: auto; } } @media print, screen and (min-width: 781px) { .joinUs__category__item__inner.chihou { margin-top: 33px; margin-left: 37px; } } @media screen and (max-width: 780px) { .joinUs__category__item__inner.chihou { margin-right: auto; margin-left: auto; transform: translateY(30px); } } @media print, screen and (min-width: 781px) { .joinUs__category__item__inner.jisshou { margin-left: 63px; } } @media screen and (max-width: 780px) { .joinUs__category__item__inner.jisshou { margin-right: auto; margin-left: auto; } } @media print, screen and (min-width: 781px) { .joinUs__category__item__inner.community { margin-top: 41px; margin-left: 45px; } } @media screen and (max-width: 780px) { .joinUs__category__item__inner.community { margin-top: 60px; } } .joinUs__category__item__image { line-height: 0; } .joinUs__category__item__label { font-weight: bold; } @media print, screen and (min-width: 781px) { .joinUs__category__item__label { margin-top: 12px; font-size: 17px; } } @media screen and (max-width: 780px) { .joinUs__category__item__label { margin-top: 15px; font-size: 14px; } } @media print, screen and (min-width: 781px) { .joinUs__list { max-width: calc(600px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-top: 36px; margin-right: auto; margin-left: auto; } } @media screen and (max-width: 780px) { .joinUs__list { padding-right: 20px; padding-left: 20px; margin-top: 40px; } } .joinUs__list__item { display: flex; align-items: center; } .joinUs__list__item:nth-of-type(n + 2) { margin-top: 20px; } .joinUs__list__item::before { flex-shrink: 0; content: ""; background-repeat: no-repeat; background-position: center; background-size: contain; } @media print, screen and (min-width: 781px) { .joinUs__list__item::before { width: 24px; height: 40px; } } @media screen and (max-width: 780px) { .joinUs__list__item::before { width: 20px; height: 35px; } } .joinUs__list__item:nth-of-type(5n + 1)::before { background-image: url("../images/joinUs-marker01.png"); } .joinUs__list__item:nth-of-type(5n + 2)::before { background-image: url("../images/joinUs-marker02.png"); } .joinUs__list__item:nth-of-type(5n + 3)::before { background-image: url("../images/joinUs-marker03.png"); } .joinUs__list__item:nth-of-type(5n + 4)::before { background-image: url("../images/joinUs-marker04.png"); } .joinUs__list__item:nth-of-type(5n)::before { background-image: url("../images/joinUs-marker05.png"); } .joinUs__list__item__label { position: relative; width: 100%; font-weight: bold; letter-spacing: 0.04em; } @media print, screen and (min-width: 781px) { .joinUs__list__item__label { margin-left: 18px; font-size: 17px; } } @media screen and (max-width: 780px) { .joinUs__list__item__label { margin-left: 15px; font-size: 14px; } } .joinUs__list__item__label::after { position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; content: ""; background: radial-gradient(circle, var(--color-green) 9.5%, transparent 11%) left -4px bottom -4px/10px 10px; background-repeat: repeat-x; } .joinUs__inquiry { display: flex; justify-content: center; margin-top: 50px; } @media print, screen and (min-width: 781px) { .partners { padding-top: 70px; padding-bottom: 660px; background-image: url("../images/pertners-bg-pc.png"); background-repeat: repeat-x; background-position: center bottom 90px; background-size: auto; } } @media screen and (max-width: 780px) { .partners { padding-top: 45px; padding-bottom: 83.0769230769vw; background-image: url("../images/pertners-bg-sp.png"); background-repeat: no-repeat; background-position: center bottom 10.2564102564vw; background-size: contain; } } .partners .section__title { text-align: center; } .partners .partnersList { display: flex; } @media print, screen and (min-width: 781px) { .partners .partnersList { gap: 13px; justify-content: center; padding-right: 20px; padding-left: 20px; margin-top: 55px; } } @media screen and (max-width: 780px) { .partners .partnersList { margin-top: 20px; } } @media print, screen and (min-width: 781px) { .partners .partnersList__item { width: 240px; text-align: center; } } @media (hover: hover) and (pointer: fine) { .partners .partnersList__item { transition: opacity 0.2s; } .partners .partnersList__item:hover { opacity: 0.7; } } .siteFooter { position: relative; z-index: 1; background-color: var(--color-gray); } @media print, screen and (min-width: 781px) { .siteFooter { padding-top: 120px; padding-bottom: 50px; } } @media screen and (max-width: 780px) { .siteFooter { padding-top: 60px; padding-bottom: 30px; } } @media print, screen and (min-width: 781px) { .siteFooter__inner { max-width: calc(1240px + var(--min-padding) * 2); padding-right: var(--min-padding); padding-left: var(--min-padding); margin-right: auto; margin-left: auto; } } @media screen and (max-width: 780px) { .siteFooter__inner { padding-right: 20px; padding-left: 20px; } } .siteFooter .scrollTop { position: absolute; } @media print, screen and (min-width: 781px) { .siteFooter .scrollTop { top: 30px; right: 30px; } } @media (hover: hover) and (pointer: fine) { .siteFooter .scrollTop { transition: opacity 0.2s; } .siteFooter .scrollTop:hover { opacity: 0.7; } } @media screen and (max-width: 780px) { .siteFooter .scrollTop { top: 15px; right: 20px; } } .siteFooter .footerLink { display: flex; } @media print, screen and (min-width: 781px) { .siteFooter .footerLink { gap: 28px; } } @media screen and (max-width: 780px) { .siteFooter .footerLink { flex-direction: column; gap: 32px; } } @media (hover: hover) and (pointer: fine) { .siteFooter .footerLink__item { transition: opacity 0.2s; } .siteFooter .footerLink__item:hover { opacity: 0.7; } } @media screen and (max-width: 780px) { .siteFooter .footerLink__item.tokyu { width: 156.5px; } } @media screen and (max-width: 780px) { .siteFooter .footerLink__item.dentetsu { width: 156.5px; } } @media screen and (max-width: 780px) { .siteFooter .footerLink__item.ii { width: 90px; } } .siteFooter .copyright { display: block; letter-spacing: 0.04em; } @media print, screen and (min-width: 781px) { .siteFooter .copyright { margin-top: 250px; font-size: 16px; } } @media screen and (max-width: 780px) { .siteFooter .copyright { margin-top: 140px; font-size: 11px; } }