@charset "UTF-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @charset "UTF-8"; html.is-scroll-prevent { overflow: hidden; } body { font-family: "Noto Serif JP", serif; font-weight: 600; color: #222222; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body.is-scroll-prevent { overflow: hidden; } .to-top { position: fixed; right: 15px; bottom: 15px; width: 60px; cursor: pointer; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .to-top.is-show { opacity: 1; pointer-events: auto; } .common-container { position: relative; overflow: hidden; } .common-container .common-footer { margin-top: -60px; } .common-section-title { color: #1d2e87; font-size: 34px; } .width-wrapper { max-width: 1800px; margin: 0 auto; } * { box-sizing: border-box; } a { color: inherit; text-decoration: none; } .hover-opacity { transition: opacity 0.3s; } .resizer { position: relative; opacity: 0; overflow: hidden; } .resizer.is-show { opacity: 1; } .resizer__content { position: absolute; top: 0; left: 50%; -webkit-transform-origin: center top; transform-origin: center top; } .resizer.is-inactive { overflow: initial; } .resizer.is-inactive .resizer__content { position: relative; top: auto; left: auto; } @-webkit-keyframes show-delayed-show { 0% { -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); } 100% { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); } } @keyframes show-delayed-show { 0% { -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); } 100% { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%); } } .js-delayed-show { -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0 100%); } .js-delayed-show.is-show { -webkit-animation: show-delayed-show 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards; animation: show-delayed-show 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s forwards; } .comp { display: none; position: relative; z-index: 99; } .comp__img { visibility: hidden; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: 1; pointer-events: none; } .comp__input-container { position: fixed; top: 32px; right: 32px; } .common-button { position: relative; display: flex; justify-content: center; align-items: center; width: 200px; height: 50px; border: 1px solid #1d2e87; background-color: white; } .common-button__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #1d2e87; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scaleX(1); transform: scaleX(1); transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .common-button__title { position: relative; color: white; transition: color 0.2s; } .common-button__arrow-container { position: absolute; top: calc(50% - 7px); right: -26px; width: 36px; line-height: 0; overflow: hidden; } .common-button__arrow-on { position: absolute; top: 0; left: -36px; width: 100%; } .common-button__arrow { width: 100%; } .common-button.is-white { background-color: #1d2e87; border-color: white; } .common-button.is-white .common-button__background { background-color: white; } .common-button.is-white .common-button__title { color: #1d2e87; } .common-header { position: fixed; top: 0; right: 0; left: 0; height: 100px; z-index: 2; } .common-header.is-scrolled { background-color: white; } .common-header__background { position: fixed; top: 100px; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .common-header__background.is-show { opacity: 1; pointer-events: auto; } .common-header__logo { position: absolute; top: 32px; left: 32px; } .common-header__link-container { position: absolute; top: 0; right: 22px; display: flex; align-items: center; height: 100px; } .common-header__link { position: relative; padding: 0 14px; font-size: 14px; } .common-header__external-link-container { display: flex; align-items: center; margin-left: 16px; } .common-header__external-link-container .common-button { width: 124px; height: 40px; margin: 0 7px; font-size: 14px; } .common-header__external-link-container .common-button .common-button__arrow-container { display: none; } .common-header__social { display: none; } .common-header-sub-links { position: fixed; top: 100px; right: 0; left: 0; padding: 36px 32px 48px; font-size: 15px; background-color: #f1f1f1; opacity: 0; -webkit-transform: translateY(-5px); transform: translateY(-5px); transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-duration: 0.3s; pointer-events: none; } .common-header-sub-links.is-show { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); pointer-events: auto; } .common-header-sub-links__box { display: flex; align-items: center; max-width: 980px; margin: 0 auto; padding: 0 32px; box-sizing: content-box; } .common-header-sub-links__top { width: 250px; } .common-header-sub-links__top-arrow { position: relative; display: inline-block; width: calc(32px * 0.875); line-height: 0; margin-left: 28px; -webkit-transform: translateY(-2px); transform: translateY(-2px); overflow: hidden; } .common-header-sub-links__top-arrow img { width: 100%; } .common-header-sub-links__content-container { position: relative; display: flex; flex-wrap: wrap; flex-grow: 1; padding-left: 50px; } .common-header-sub-links__content-container:before { position: absolute; top: -4px; left: 0; bottom: -20px; width: 1px; background-color: #cccccc; content: ""; } .common-header-sub-links__sub-link { position: relative; width: calc((100% - 80px) / 3); line-height: 1.5em; padding: 8px 0 24px; border-bottom: 1px solid #cccccc; } .common-header-sub-links__sub-link:not(:nth-child(3n)) { margin-right: 40px; } .common-header-sub-links__sub-link:nth-child(n + 4) { margin-top: 24px; } .common-header-sub-links__sub-link.is-coming-soon { padding-bottom: 0; color: #aaaaaa; pointer-events: none; } .common-header-sub-links__sub-link.is-coming-soon small { display: block; margin-top: -12px; margin-bottom: 8px; font-size: 10px; } .common-header-sub-links__sub-link.is-coming-soon:after { margin-left: 6px; font-size: 10px; content: "Coming Soon"; } .common-header-sub-links__sub-link-arrow { position: absolute; top: 12px; right: 0; display: block; width: calc(32px * 0.875); line-height: 0; overflow: hidden; } .common-header-sub-links__sub-link-arrow img { width: 100%; } .common-footer { position: relative; padding: 160px 0 160px 32px; color: #f8f8f8; background-color: #222222; } .common-footer__box { display: flex; max-width: 1140px; margin: 0 auto; } .common-footer__address { line-height: 2em; margin-top: 8px; font-size: 12px; } .common-footer__social { display: block; margin-top: 40px; } .common-footer__link-container-container { display: flex; flex-grow: 1; margin-top: -8px; margin-left: 136px; } .common-footer__link-container { padding-right: 16px; } .common-footer__link-container:nth-child(1) { width: 36%; } .common-footer__link-container:nth-child(2) { width: 30%; } .common-footer__link-container:nth-child(3) { width: 33%; } .common-footer__link { display: block; padding: 10px 0; margin-bottom: 8px; font-size: 15px; } .common-footer__sub-link { display: block; line-height: 1.5em; padding: 10px 0; font-size: 13px; } .common-footer__sub-link:before { margin-right: 4px; content: "-"; } .common-footer__sub-link.is-coming-soon { color: #aaaaaa; pointer-events: none; } .common-footer__sub-link.is-coming-soon:after { display: block; padding: 8px 0 8px 8px; content: "Coming Soon"; } .common-footer__meta { display: flex; justify-content: space-between; align-items: center; position: absolute; right: 24px; bottom: 0; left: 24px; height: 54px; padding-bottom: 4px; border-top: 1px solid #444444; } .common-footer__copyright { font-size: 12px; } .common-footer__policy { font-size: 12px; } @-webkit-keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } .background-effect { position: fixed; top: 0; right: 0; left: 0; height: 100vh; height: calc(var(--vh, 1vh) * 100); opacity: 0; } .background-effect.start-animation { -webkit-animation: show 1.5s ease 0s forwards; animation: show 1.5s ease 0s forwards; } .background-effect.has-delay { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .background-effect:after { position: absolute; top: 0; right: 0; bottom: 30%; left: 0; background-image: linear-gradient(to bottom, #f8f8f8 0%, #f8f8f8 15%, rgba(248, 248, 248, 0) 100%); content: ""; } .common-banner { position: relative; display: flex; max-width: 1120px; margin: 0 auto; padding: 0 32px; box-sizing: content-box; z-index: 1; } .common-banner-content { width: 50%; padding: 72px 64px 80px; color: white; background-color: #1d2e87; text-align: center; } .common-banner-content:not(:first-child) { border-left: 1px solid #4a589f; } .common-banner-content__title { font-size: 22px; } .common-banner-content__description { line-height: 2.1em; margin-top: 24px; font-size: 15px; } .common-banner-content .common-button { margin: 32px auto 0; } .common-breadcrumb { display: flex; } .common-breadcrumb__content { flex-shrink: 0; font-size: 13px; } .common-breadcrumb__content--link { position: relative; color: #aaaaaa; } .common-breadcrumb__content--link:after { position: absolute; top: -1px; right: -12px; bottom: 0; width: 1px; background-color: #aaaaaa; content: ""; } .common-breadcrumb__content:not(:first-child) { margin-left: 28px; } .common-breadcrumb__content:last-child { flex-shrink: initial; display: -webkit-box; max-height: 1.5em; overflow: hidden; -webkit-line-clamp: 1; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } .common-firstview { position: relative; max-width: 980px; padding: 156px 0 56px; margin: 0 auto; } .common-firstview__title-en { position: relative; padding-left: 32px; color: #1d2e87; font-size: 20px; } .common-firstview__title-en:before { position: absolute; top: 8px; left: 0; width: 20px; height: 4px; background-color: #1d2e87; content: ""; } .common-firstview__title { position: relative; margin-top: 16px; margin-bottom: 88px; color: #1d2e87; font-size: 48px; } .common-firstview__title:before { position: absolute; bottom: -68px; left: calc(50% - 50vw); width: 100vw; height: 1px; background-color: #bbbbbb; content: ""; } .common-firstview__description { line-height: 2.2em; margin-top: 48px; font-size: 18px; } @-webkit-keyframes arrow-animation { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60.1% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes arrow-animation { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60.1% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } .common-solution-content { position: relative; display: flex; align-items: center; padding: 64px 150px 56px 90px; } .common-solution-content:not(:last-child) { border-bottom: 1px solid #bbbbbb; } .common-solution-content__picture { position: relative; flex-shrink: 0; width: 128px; } .common-solution-content__picture .pixel-ratio-img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .common-solution-content__information { margin-left: 84px; } .common-solution-content__subtitle-container { display: flex; align-items: center; color: #1d2e87; font-size: 16px; font-weight: bold; } .common-solution-content__index { position: relative; margin-left: 48px; } .common-solution-content__index:before { position: absolute; top: 8px; left: -40px; width: 32px; height: 1px; background-color: #1d2e87; content: ""; } .common-solution-content__title { margin-top: 16px; color: #1d2e87; font-size: 34px; } .common-solution-content__description { line-height: 2.1em; margin-top: 20px; font-size: 15px; } .common-solution-content__arrow-container { position: absolute; top: calc(50% - 4px); right: 48px; width: 36px; line-height: 0; overflow: hidden; } .common-solution-content__arrow { width: 100%; } .common-winpass-banner { position: relative; display: flex; align-items: center; padding: 80px 72px; background-color: white; } .common-winpass-banner__picture { flex-shrink: 0; width: 328px; } .common-winpass-banner__information { margin-left: 40px; } .common-winpass-banner__logo-title { color: #000080; font-size: 15px; } .common-winpass-banner__logo { width: 219px; margin-top: 12px; } .common-winpass-banner__description { line-height: 2.1em; margin-top: 12px; font-size: 15px; } .common-winpass-banner .common-button { margin-top: 32px; } .common-banner-introduction { position: relative; padding: 112px 0 80px; text-align: center; } .common-banner-introduction__title { font-size: 34px; color: #1d2e87; } .common-banner-introduction__description { margin-top: 32px; font-size: 18px; } .common-background { position: absolute; top: 100px; right: -9999px; bottom: -100px; left: -80px; background-color: #1d2e87; } .common-background.is-left { right: -80px; left: -9999px; } .common-case-study-content-container { display: flex; padding-bottom: 48px; } .common-case-study-content { display: block; width: 50%; } .common-case-study-content:nth-child(odd) { padding-right: 40px; border-right: 1px solid #bbbbbb; } .common-case-study-content:nth-child(even) { padding-left: 40px; } .common-case-study-content__picture { padding-top: 67.6%; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #bbbbbb; } .common-case-study-content__title { line-height: 1.35em; margin-top: 16px; color: #1d2e87; font-size: 22px; } .common-case-study-content__description { line-height: 2em; margin-top: 20px; font-size: 13px; } .common-case-study-content__arrow-container { width: 36px; line-height: 0; margin: 24px 0 0 auto; overflow: hidden; } .common-case-study-content__arrow { width: 100%; } .common-case-study-content .common-button { margin-top: 32px; } .common-case-study-button-container { padding: 40px 0 0; border-top: 1px solid #bbbbbb; } .common-case-study-button-container .common-button { width: 220px; margin: 0 auto; } .common-firstview-blue { position: relative; padding: 128px 32px 144px; color: white; background-color: #1d2e87; } .common-firstview-blue__box { max-width: 980px; margin: 0 auto; } .common-firstview-blue__title-en { position: relative; padding-left: 32px; margin-top: 60px; font-size: 20px; } .common-firstview-blue__title-en:before { position: absolute; top: 8px; left: 0; width: 20px; height: 3px; background-color: white; content: ""; } .common-firstview-blue__title { line-height: 1.6em; margin-top: 20px; font-size: 34px; } .common-firstview-blue__role { line-height: 1.9em; margin-top: 20px; font-size: 15px; } .common-firstview-blue__name { line-height: 1.3em; font-size: 18px; } .common-firstview-blue__meta { display: flex; align-items: center; margin-top: 32px; } .common-firstview-blue__date { margin-right: 28px; font-size: 15px; } .common-firstview-blue__category { padding: 8px 24px; font-size: 13px; } .common-link-card { position: relative; width: calc((100% - 120px - 1px) / 3); margin-right: 60px; padding-bottom: 32px; } .common-link-card:after { position: absolute; top: 0; right: -30px; bottom: 0; width: 1px; background-color: #bbbbbb; content: ""; } .common-link-card:nth-child(3n) { margin-right: 0; } .common-link-card:nth-child(3n):after { display: none; } .common-link-card__thumbnail { padding-top: 68%; background-size: cover; background-position: center; background-repeat: no-repeat; } .common-link-card__meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 20px; } .common-link-card__date { padding: 4px 0; margin-right: 16px; font-size: 16px; color: #1d2e87; } .common-link-card__category { padding: 8px 24px; font-size: 13px; white-space: nowrap; } .common-link-card__title { position: relative; display: -webkit-box; line-height: 1.6em; max-height: 3.2em; margin-top: 12px; font-size: 22px; color: #1d2e87; overflow: hidden; -webkit-line-clamp: 2; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } .common-link-card__description { position: relative; display: -webkit-box; line-height: 2em; max-height: 4em; margin-top: 12px; font-size: 13px; overflow: hidden; -webkit-line-clamp: 2; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; } .common-link-card__arrow-container { position: absolute; right: 0; bottom: 0; width: 36px; line-height: 0; overflow: hidden; } .common-link-card__arrow { width: 100%; } .common-pager { display: flex; align-items: center; justify-content: center; padding-top: 40px; } .common-pager__prev, .common-pager__next { position: relative; font-size: 16px; color: #1d2e87; cursor: pointer; } .common-pager__prev .common-pager__arrow-container { left: -48px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } .common-pager__arrow-container { position: absolute; top: 4px; width: 36px; line-height: 0; overflow: hidden; } .common-pager__arrow { width: 100%; } .common-pager__number-container { display: flex; align-items: center; justify-content: center; margin: 0 64px; } .common-pager__number { padding: 12px 16px; margin: 0 8px; font-size: 22px; cursor: pointer; } .common-pager__number.is-current { color: white; background-color: #1d2e87; pointer-events: none; } .common-pager__dot { color: #bbbbbb; font-size: 22px; } .common-pager__next .common-pager__arrow-container { right: -48px; } .common-news-category { color: white; background-color: #0087d5; } .common-news-category.is-interactive { color: #0087d5; border: 1px solid #0087d5; background-color: white; transition-property: color, background-color; transition-duration: 0.3s; cursor: pointer; } .common-news-category.is-interactive.is-current { color: white; background-color: #0087d5; pointer-events: none; } .common-news-category[data-id="全て"] { background-color: #1d2e86; } .common-news-category[data-id="全て"].is-interactive { color: #1d2e86; border-color: #1d2e86; background-color: white; } .common-news-category[data-id="全て"].is-interactive.is-current { color: white; background-color: #1d2e86; } .common-news-category[data-id="セミナー"] { background-color: #0287d6; } .common-news-category[data-id="セミナー"].is-interactive { color: #0287d6; border-color: #0287d6; background-color: white; } .common-news-category[data-id="セミナー"].is-interactive.is-current { color: white; background-color: #0287d6; } .common-news-category[data-id="終了したセミナー"] { background-color: #4fb3d5; } .common-news-category[data-id="終了したセミナー"].is-interactive { color: #4fb3d5; border-color: #4fb3d5; background-color: white; } .common-news-category[data-id="終了したセミナー"].is-interactive.is-current { color: white; background-color: #4fb3d5; } .common-news-category[data-id="コラム"] { background-color: #7444ce; } .common-news-category[data-id="コラム"].is-interactive { color: #7444ce; border-color: #7444ce; background-color: white; } .common-news-category[data-id="コラム"].is-interactive.is-current { color: white; background-color: #7444ce; } .common-news-category[data-id="官民連携コラム"] { background-color: #ab64dc; } .common-news-category[data-id="官民連携コラム"].is-interactive { color: #ab64dc; border-color: #ab64dc; background-color: white; } .common-news-category[data-id="官民連携コラム"].is-interactive.is-current { color: white; background-color: #ab64dc; } .common-news-category[data-id="お知らせ"] { background-color: #37b5aa; } .common-news-category[data-id="お知らせ"].is-interactive { color: #37b5aa; border-color: #37b5aa; background-color: white; } .common-news-category[data-id="お知らせ"].is-interactive.is-current { color: white; background-color: #37b5aa; } .wrapper--index { position: relative; overflow: hidden; } .wrapper--index .background { display: block; position: absolute; top: 0; left: 0; width: 100%; } .wrapper--index .firstview { position: relative; height: 100vh; height: calc(var(--vh, 1vh) * 100); padding: 180px 80px; padding: 14vw 6.3vw; padding-top: 0; padding-bottom: 0; } .wrapper--index .firstview__title { position: absolute; top: 50%; width: 845px; width: 66vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @-webkit-keyframes firstview-arrow-animation { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40.1% { -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); -webkit-transform: translateX(0%); transform: translateX(0%); } 65% { -webkit-transform: translateX(100%); transform: translateX(100%); } 75% { -webkit-transform: translateX(100%); transform: translateX(100%); } 75.1% { -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes firstview-arrow-animation { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40.1% { -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); -webkit-transform: translateX(0%); transform: translateX(0%); } 65% { -webkit-transform: translateX(100%); transform: translateX(100%); } 75% { -webkit-transform: translateX(100%); transform: translateX(100%); } 75.1% { -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } .wrapper--index .firstview-arrow { display: flex; align-items: center; position: absolute; right: 48px; bottom: 24px; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .wrapper--index .firstview-arrow__title { line-height: 1em; margin-right: 8px; font-size: 16px; } .wrapper--index .firstview-arrow__icon-container { position: relative; line-height: 0; overflow: hidden; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .wrapper--index .firstview-arrow__icon { -webkit-animation: firstview-arrow-animation 3s linear 0s infinite; animation: firstview-arrow-animation 3s linear 0s infinite; } .wrapper--index .introduction { position: relative; padding: 80px 0 200px; text-align: center; } .wrapper--index .introduction__title { color: #1d2e87; font-size: 34px; font-weight: bold; } .wrapper--index .introduction__description { line-height: 2.2em; margin-top: 32px; font-size: 18px; } .wrapper--index .introduction .common-button { margin: 40px auto 0; } .wrapper--index .section-subtitle { position: relative; padding-left: 28px; color: #1d2e87; font-size: 20px; font-weight: bold; } .wrapper--index .section-subtitle:before { position: absolute; top: 8px; left: 0; width: 20px; height: 4px; background-color: #1d2e87; content: ""; } .wrapper--index .section-title { position: relative; padding-top: 12px; margin-left: -8px; color: #1d2e87; font-size: 48px; font-weight: bold; } .wrapper--index .section-title.is-small { padding-top: 16px; margin-left: -2px; font-size: 34px; } .wrapper--index .section-description { position: relative; line-height: 2.2em; padding-top: 20px; font-size: 15px; } .wrapper--index .solution { position: relative; max-width: 980px; margin: 0 auto; padding: 0 32px 220px; box-sizing: content-box; } .wrapper--index .solution__button-container .common-button { margin-top: -56px; margin-right: 24px; margin-left: auto; } .wrapper--index .solution__content-container-container { position: relative; } .wrapper--index .solution__content-container { position: relative; margin: 64px 0 80px; background-color: white; } @keyframes arrow-animation { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 40% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60% { -webkit-transform: translateX(100%); transform: translateX(100%); } 60.1% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } .wrapper--index .seminar-case-study { position: relative; } .wrapper--index .seminar-case-study .common-background { top: 250px; bottom: 440px; left: -9999px; } .wrapper--index .seminar { position: relative; } .wrapper--index .seminar__picture { width: 1130px; } .wrapper--index .seminar__box { position: relative; max-width: 960px; padding: 48px 148px 64px; margin-top: -120px; margin-bottom: 120px; background-color: white; } .wrapper--index .seminar__box .common-button { margin-top: 24px; } .wrapper--index .case-study { position: relative; } .wrapper--index .case-study__picture { display: block; width: 1130px; margin-left: auto; } .wrapper--index .case-study__box { position: relative; max-width: 960px; padding: 56px 112px 64px 80px; margin-top: -120px; margin-left: auto; background-color: white; } .wrapper--index .case-study__box .common-button { margin-top: 24px; } .wrapper--index .case-study .common-case-study-content-container { margin-top: 48px; } .wrapper--index .news { position: relative; max-width: 980px; margin: 0 auto; padding: 164px 32px; box-sizing: content-box; } .wrapper--index .news__content-container { margin-top: 32px; padding: 56px 48px; background-color: white; } .wrapper--index .news .common-button { margin: 40px auto 0; } .wrapper--index .news-content { position: relative; display: block; padding: 32px 48px 32px 0; } .wrapper--index .news-content:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--index .news-content__meta { display: flex; align-items: center; } .wrapper--index .news-content__date { font-size: 16px; color: #1d2e87; } .wrapper--index .news-content__category { margin-left: 32px; padding: 8px 24px; font-size: 13px; } .wrapper--index .news-content__title { line-height: 1.35em; margin-top: 20px; font-size: 15px; } .wrapper--index .news-content__arrow-container { position: absolute; top: calc(50% - 4px); right: 0; width: 36px; line-height: 0; overflow: hidden; } .wrapper--index .news-content__arrow { width: 100%; } .wrapper--index .recruit { position: relative; display: flex; align-items: center; padding-bottom: 148px; } .wrapper--index .recruit__picture { width: 740px; } .wrapper--index .recruit__information { max-width: 460px; padding-right: 32px; margin-left: 70px; } .wrapper--index .recruit__information .common-button { margin-top: 32px; } .wrapper--about { padding: 0 32px; } .wrapper--about .introduction { position: relative; } .wrapper--about .introduction__box { position: relative; max-width: 980px; margin: 0 auto; } .wrapper--about .introduction__content-container { position: relative; padding: 32px 0 40px; background-color: white; } .wrapper--about .introduction__picture-container-container { position: relative; max-width: 980px; margin: 220px auto 0; } .wrapper--about .introduction__picture-container { position: relative; padding: 100px; background-color: white; } .wrapper--about .introduction__picture { width: 100%; } .wrapper--about .introduction-content { padding: 56px 96px; } .wrapper--about .introduction-content:not(:last-child) { border-bottom: 1px solid #bbbbbb; } .wrapper--about .introduction-content__title-en { line-height: 2.4em; font-size: 16px; color: #1d2e87; } .wrapper--about .introduction-content__title { line-height: 1.6em; margin-top: -8px; font-size: 34px; color: #1d2e87; } .wrapper--about .introduction-content__description { line-height: 1.9em; margin-top: 8px; font-size: 24px; } .wrapper--about .introduction-content__content-container { margin-top: 32px; } .wrapper--about .introduction-content-content { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #bbbbbb; } .wrapper--about .introduction-content-content:first-child { border-top: 1px solid #bbbbbb; } .wrapper--about .introduction-content-content__index { position: relative; line-height: 2em; padding: 0 40px; font-size: 28px; color: #1d2e87; } .wrapper--about .introduction-content-content__index:after { position: absolute; top: 2px; right: 0; bottom: 2px; width: 1px; background-color: #bbbbbb; content: ""; } .wrapper--about .introduction-content-content__title { line-height: 2em; padding: 0 40px; font-size: 24px; } .wrapper--about .reason { position: relative; max-width: 980px; margin: 0 auto; padding: 224px 0 208px; } .wrapper--about .reason__content-container-container { position: relative; margin-top: 40px; } .wrapper--about .reason__content-container { position: relative; padding: 40px 0; background-color: white; } .wrapper--about .reason-content { position: relative; padding: 56px 96px; } .wrapper--about .reason-content:not(:last-child) { border-bottom: 1px solid #bbbbbb; } .wrapper--about .reason-content:last-child .reason-content__index { display: none; } .wrapper--about .reason-content__index { position: absolute; right: 20px; bottom: 40px; font-size: 220px; color: #f0f1f7; } .wrapper--about .reason-content__title { position: relative; line-height: 1.9em; color: #0078bd; font-size: 22px; } .wrapper--about .reason-content__description { position: relative; line-height: 2.1em; margin-top: 24px; font-size: 15px; } .wrapper--about .reason-content__description img { max-width: 100%; margin: 32px auto 0; } .wrapper--about .achievement { position: relative; max-width: 980px; margin: 0 auto; } .wrapper--about .achievement .achievement-content { margin-top: 48px; } .wrapper--about .achievement-content { position: relative; color: #1d2e87; } .wrapper--about .achievement-content__content-container { position: relative; background-color: white; } .wrapper--about .achievement-content__main-container { display: flex; padding: 100px 100px 64px; } .wrapper--about .achievement-content__graph-container { display: flex; flex-wrap: wrap; padding-bottom: 56px; border-top: 1px solid #bbbbbb; } .wrapper--about .achievement-content-main { text-align: center; } .wrapper--about .achievement-content-main:first-child { flex-shrink: 0; width: 35%; } .wrapper--about .achievement-content-main:last-child { flex-grow: 1; } .wrapper--about .achievement-content-main__key { font-size: 20px; } .wrapper--about .achievement-content-main__value { margin-top: 24px; font-size: 48px; } .wrapper--about .achievement-content-main__value strong { font-size: 80px; } .wrapper--about .achievement-content-graph { width: 50%; padding: 48px 24px; text-align: center; } .wrapper--about .achievement-content-graph:first-child { border-right: 1px solid #bbbbbb; } .wrapper--about .achievement-content-graph:last-child { width: 100%; border-top: 1px solid #bbbbbb; } .wrapper--about .achievement-content-graph__title { font-size: 20px; } .wrapper--about .achievement-content-graph .pixel-ratio-img { display: block; max-width: 100%; margin: 24px auto 0; } .wrapper--about .message { position: relative; max-width: 980px; margin: 0 auto; padding: 220px 0; } .wrapper--about .message__content-container { position: relative; } .wrapper--about .message .common-background { top: 92px; } .wrapper--about .message__picture-container { line-height: 0; } .wrapper--about .message__picture { width: calc(100% + 550px); margin-left: -80px; } .wrapper--about .message-content { position: relative; background-color: white; margin-top: -92px; padding: 100px; } .wrapper--about .message-content__title { color: #1d2e87; font-size: 34px; } .wrapper--about .message-content__description-container { margin-top: 32px; } .wrapper--about .message-content__description { line-height: 2.1em; margin-top: 24px; font-size: 15px; letter-spacing: 0.02em; } .wrapper--about .message-content__role { margin-top: 36px; color: #1d2e87; text-align: right; font-size: 14px; } .wrapper--about .message-content__name { margin-top: 12px; color: #1d2e87; text-align: right; font-size: 22px; } .wrapper--about .member { position: relative; padding: 24px 0 96px; } .wrapper--about .member:before { position: absolute; top: 0; right: -32px; bottom: 0; left: -32px; background-color: white; content: ""; } .wrapper--about .member__box { position: relative; max-width: 1060px; margin: 0 auto; } .wrapper--about .member__content-container { display: flex; flex-wrap: wrap; margin-top: 44px; } .wrapper--about .member .common-section-title { margin-top: 64px; } .wrapper--about .member-content { width: calc((100% - 100px - 1px) / 3); } .wrapper--about .member-content:not(:nth-child(3n)) { margin-right: 50px; } .wrapper--about .member-content:nth-child(n + 4) { margin-top: 80px; } .wrapper--about .member-content__picture { padding-top: 112.5%; background-size: cover; background-position: center; background-repeat: no-repeat; } .wrapper--about .member-content__name { line-height: 1.5em; margin-top: 20px; color: #1d2e87; font-size: 22px; } .wrapper--about .member-content__role { line-height: 2em; color: #1d2e87; font-size: 16px; } .wrapper--about .member-content__description { line-height: 2em; margin-top: 12px; font-size: 14px; } .wrapper--about .outline { position: relative; max-width: 980px; margin: 0 auto; padding: 120px 0 160px; } .wrapper--about .outline__content-container { position: relative; } .wrapper--about .outline__box { position: relative; padding: 100px; background-color: white; } .wrapper--about .outline__title { margin-bottom: 40px; font-size: 34px; color: #1d2e87; } .wrapper--about .outline-table-content { display: flex; padding: 28px 0; font-size: 15px; border-bottom: 1px solid #bbbbbb; } .wrapper--about .outline-table-content:first-child { border-top: 1px solid #bbbbbb; } .wrapper--about .outline-table-content__key { flex-shrink: 0; line-height: 2.1em; width: 230px; } .wrapper--about .outline-table-content__value { line-height: 2.1em; } .wrapper--about .modal, .wrapper--about .is-zoom { display: none; } .wrapper--solution { padding: 0 32px; } .wrapper--solution .feature { position: relative; max-width: 980px; margin: 0 auto; padding: 16px 0 0; } .wrapper--solution .feature__content-container-container { position: relative; } .wrapper--solution .feature__content-container { position: relative; margin-top: 48px; padding: 40px 0; background-color: white; } .wrapper--solution .feature-content { padding: 45px 100px; } .wrapper--solution .feature-content:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--solution .feature-content__main { display: flex; } .wrapper--solution .feature-content__index { position: relative; flex-shrink: 0; padding-right: 40px; margin-top: 12px; font-size: 28px; color: #1d2e87; } .wrapper--solution .feature-content__information { position: relative; padding-left: 40px; } .wrapper--solution .feature-content__information:before { position: absolute; top: 10px; bottom: 4px; left: 0; width: 1px; background-color: #bbbbbb; content: ""; } .wrapper--solution .feature-content__title { line-height: 2em; color: #0078bd; font-size: 24px; } .wrapper--solution .feature-content__description { line-height: 2.1em; margin-top: 8px; font-size: 15px; } .wrapper--solution .solution { position: relative; max-width: 980px; margin: 0 auto; padding: 212px 0 220px; } .wrapper--solution .solution__content-container-container { position: relative; margin-top: 48px; } .wrapper--solution .solution__content-container { position: relative; background-color: white; } .wrapper--solution .solution__winpass-banner-container { position: relative; margin-top: 80px; background-color: white; } .wrapper--solution .seminar { position: relative; background-color: white; } .wrapper--solution .seminar__box { max-width: 1094px; margin: 0 auto; padding: 96px 0 100px; } .wrapper--solution .seminar__content-container { display: flex; margin-top: 48px; } .wrapper--solution-detail { padding: 0 32px; } .wrapper--solution-detail .introduction-container { position: relative; max-width: 980px; margin: 0 auto; padding: 16px 0 0; } .wrapper--solution-detail .introduction-container .common-background { top: 120px; } .wrapper--solution-detail .introduction { position: relative; padding: 30px 0; background-color: white; } .wrapper--solution-detail .introduction__box { padding: 60px 100px; } .wrapper--solution-detail .introduction__box:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .introduction__box--single { padding-bottom: 28px; } .wrapper--solution-detail .introduction__box--single .introduction__content { line-height: 1.8em; font-size: 18px; } .wrapper--solution-detail .introduction__box--single .introduction__content:before { top: 33px; } .wrapper--solution-detail .introduction__box--single .introduction__content:last-child { border-bottom: none; } .wrapper--solution-detail .introduction__title { line-height: 1.6em; font-size: 28px; color: #1d2e87; } .wrapper--solution-detail .introduction__title.is-large { font-size: 34px; } .wrapper--solution-detail .introduction__content-container { margin-top: 40px; } .wrapper--solution-detail .introduction__content { position: relative; line-height: 1.5em; padding: 28px 0 28px 36px; font-size: 15px; border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .introduction__content:last-child { border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .introduction__content:before { position: absolute; top: 28px; left: 0; width: 27px; height: 22px; background-image: url(/img/solution/training/icon_check.png); background-size: contain; background-repeat: no-repeat; content: ""; } .wrapper--solution-detail .introduction__description { display: flex; align-items: flex-start; line-height: 2.1em; margin-top: 24px; font-size: 15px; } .wrapper--solution-detail .introduction__description-image { flex-shrink: 0; margin-left: 40px; } .wrapper--solution-detail .introduction__phase-container { margin-top: -24px; padding: 0 100px 72px; } .wrapper--solution-detail .introduction-phase { position: relative; display: flex; align-items: center; padding: 20px 0; color: #1d2e87; background-color: #e8eaf3; } .wrapper--solution-detail .introduction-phase:not(:first-child) { margin-top: 30px; } .wrapper--solution-detail .introduction-phase:not(:last-child):before { position: absolute; bottom: -19px; left: 50px; width: 27px; height: 19px; background-size: contain; background-repeat: no-repeat; background-image: url(/img/solution/consulting/icon_arrow.png); content: ""; } .wrapper--solution-detail .introduction-phase__key { position: relative; flex-shrink: 0; width: 134px; padding: 0 20px 0 28px; font-size: 16px; } .wrapper--solution-detail .introduction-phase__value { position: relative; line-height: 1.5em; padding-left: 28px; font-size: 20px; } .wrapper--solution-detail .introduction-phase__value:before { position: absolute; top: -14px; bottom: -14px; left: 0; width: 1px; background-color: #1d2e87; content: ""; } .wrapper--solution-detail .introduction-phase__value small { display: block; line-height: 1.5em; margin-top: 4px; margin-left: -0.5em; font-size: 16px; } .wrapper--solution-detail .value { position: relative; max-width: 980px; margin: 0 auto; padding: 210px 0 0; } .wrapper--solution-detail .value__content-container-container { position: relative; margin-top: 56px; } .wrapper--solution-detail .value__content-container { position: relative; padding: 80px 0; background-color: white; } .wrapper--solution-detail .value-content { padding: 20px 100px; } .wrapper--solution-detail .value-content__title-container { display: flex; } .wrapper--solution-detail .value-content__index { position: relative; display: flex; align-items: center; padding: 18px 16px 18px 24px; color: white; font-size: 26px; background-color: #0078bd; } .wrapper--solution-detail .value-content__index:after { position: absolute; top: 0; right: -20px; bottom: 0; width: 20px; background-color: #0078bd; -webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%); clip-path: polygon(0% 0%, 100% 50%, 0% 100%); -webkit-transform: translateX(-0.5px); transform: translateX(-0.5px); content: ""; } .wrapper--solution-detail .value-content__title { flex-grow: 1; line-height: 1.5em; padding: 12px 24px 12px 36px; color: #0078bd; background-color: #e5f1f8; font-size: 24px; } .wrapper--solution-detail .value-content__description { line-height: 2.1em; margin-top: 20px; font-size: 15px; } .wrapper--solution-detail .value-content.is-large .value-content__index { padding: 18px 8px 18px 20px; } .wrapper--solution-detail .value-content.is-large .value-content__index:after { right: -32px; width: 32px; } .wrapper--solution-detail .value-content.is-large .value-content__title { padding: 12px 60px 12px 54px; } .wrapper--solution-detail .example { position: relative; max-width: 980px; margin: 0 auto; padding: 210px 0 0; } .wrapper--solution-detail .example__content-container-container { position: relative; } .wrapper--solution-detail .example__content-container { position: relative; margin-top: 56px; padding: 40px 100px 100px; background-color: white; } .wrapper--solution-detail .example__caution { line-height: 2em; margin-top: 32px; font-size: 13px; } .wrapper--solution-detail .example-content { position: relative; padding: 40px 0; border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .example-content--step { padding-bottom: 0; border-bottom: none; } .wrapper--solution-detail .example-content--step:not(:last-child) { padding-bottom: 100px; } .wrapper--solution-detail .example-content--step:not(:last-child):after { position: absolute; right: -100px; bottom: 20px; left: -100px; height: 1px; background-color: #bbbbbb; content: ""; } .wrapper--solution-detail .example-content__title { line-height: 2.1em; font-size: 24px; color: #0078bd; } .wrapper--solution-detail .example-content__description { line-height: 2.1em; margin-top: 8px; font-size: 15px; } .wrapper--solution-detail .example-content-client { display: flex; align-items: center; padding: 24px 0 28px; border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .example-content-client__picture { flex-shrink: 0; width: 110px; height: 110px; background-size: contain; background-repeat: no-repeat; } .wrapper--solution-detail .example-content-client__information { margin-left: 20px; } .wrapper--solution-detail .example-content-client__title { display: inline-block; padding: 8px 20px; color: white; background-color: #0078bd; font-size: 13px; } .wrapper--solution-detail .example-content-client__description { line-height: 2.1em; margin-top: 12px; font-size: 15px; } .wrapper--solution-detail .example-content-step { position: relative; display: flex; padding: 24px 0 0; } .wrapper--solution-detail .example-content-step__time { position: relative; line-height: 1.875em; width: 132px; padding-left: 30px; font-size: 16px; color: #1d2e87; } .wrapper--solution-detail .example-content-step__time-line { position: absolute; top: 35px; bottom: -4px; left: 9px; width: 2px; background-color: #1d2e87; } .wrapper--solution-detail .example-content-step__time-line:before { position: absolute; bottom: 0; left: -9px; width: 20px; height: 12px; background-image: url(/img/solution/consulting/icon_arrow_2.png); background-size: contain; background-repeat: no-repeat; content: ""; } .wrapper--solution-detail .example-content-step__time-line:after { position: absolute; top: -6px; left: -9px; width: 20px; height: 20px; background-color: #1d2e87; border-radius: 50%; content: ""; } .wrapper--solution-detail .example-content-step__content-container { flex-grow: 1; padding-bottom: 20px; border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .example-content-step__content { position: relative; padding-left: 1em; line-height: 2em; font-size: 15px; } .wrapper--solution-detail .example-content-step__content:before { position: absolute; top: 0; left: 0; content: "\30FB"; } .wrapper--solution-detail .example-content-step:last-child { border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .example-content-step:last-child .example-content-step__time-line { background-color: transparent; } .wrapper--solution-detail .example-content-step:last-child .example-content-step__time-line:before { display: none; } .wrapper--solution-detail .example-content-step:last-child .example-content-step__content-container { border-bottom: none; } .wrapper--solution-detail .step { position: relative; max-width: 980px; margin: 0 auto; padding: 210px 0 0; } .wrapper--solution-detail .step__content-container-container { position: relative; margin-top: 60px; } .wrapper--solution-detail .step__content-container { position: relative; padding: 50px 0; background-color: white; } .wrapper--solution-detail .step__box { padding: 32px 100px; } .wrapper--solution-detail .step__box:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .step__title { line-height: 2.1em; color: #0078bd; font-size: 24px; } .wrapper--solution-detail .step__description { line-height: 2.1em; margin-top: 8px; font-size: 15px; } .wrapper--solution-detail .step__caution { line-height: 2em; margin-top: 6px; padding-top: 24px; font-size: 13px; border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .step__sub-content-container { position: relative; padding: 16px 0; margin-top: 24px; border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .step__sub-content-container:before { position: absolute; top: 40px; left: 19px; bottom: 40px; width: 2px; background-color: #0078bd; content: ""; } .wrapper--solution-detail .step__sub-content-container--has-line { margin-bottom: 20px; border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .step--has-margin-bottom { margin-bottom: 250px; } .wrapper--solution-detail .step-sub-content { position: relative; padding: 14px 0; } .wrapper--solution-detail .step-sub-content__index { display: flex; justify-content: center; align-items: center; position: absolute; top: 8px; left: 0; width: 40px; height: 40px; font-size: 20px; color: white; background-color: #0078bd; border-radius: 50%; } .wrapper--solution-detail .step-sub-content__title { line-height: 2.1em; padding-left: 52px; font-size: 15px; } .wrapper--solution-detail .voice { position: relative; max-width: 980px; margin: 0 auto; padding: 220px 0 0; } .wrapper--solution-detail .voice__content-container-container { position: relative; margin-top: 48px; } .wrapper--solution-detail .voice__content-container { position: relative; padding: 100px; background-color: white; } .wrapper--solution-detail .voice--has-padding-bottom { padding-bottom: 250px; } .wrapper--solution-detail .voice-content { display: flex; align-items: center; padding: 40px; background-color: #e8eaf3; } .wrapper--solution-detail .voice-content:not(:first-child) { margin-top: 30px; } .wrapper--solution-detail .voice-content__picture { flex-shrink: 0; width: 132px; height: 132px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .wrapper--solution-detail .voice-content__description { line-height: 2.1em; margin-left: 28px; font-size: 15px; } .wrapper--solution-detail .case-study { position: relative; max-width: 980px; margin: 0 auto; padding: 220px 0; } .wrapper--solution-detail .case-study__content-container-container { position: relative; } .wrapper--solution-detail .case-study__content-container { position: relative; margin-top: 48px; padding: 100px; background-color: white; } .wrapper--solution-detail .case-study__description { line-height: 2.1em; margin-bottom: 32px; font-size: 15px; } .wrapper--solution-detail .works { position: relative; max-width: 980px; margin: 0 auto; padding: 0 0 240px; } .wrapper--solution-detail .works__content-container-container { position: relative; } .wrapper--solution-detail .works .common-background { top: 120px; } .wrapper--solution-detail .works__content-container { position: relative; margin-top: 48px; padding: 50px 0; background-color: white; } .wrapper--solution-detail .works-content { display: flex; padding: 50px 100px; } .wrapper--solution-detail .works-content:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .works-content__picture { flex-shrink: 0; width: 200px; box-shadow: 0 0 50px 0 rgba(29, 46, 135, 0.2); } .wrapper--solution-detail .works-content__information { margin-top: -8px; margin-left: 48px; } .wrapper--solution-detail .works-content__title { line-height: 1.8em; font-size: 24px; color: #0078bd; } .wrapper--solution-detail .works-content__meta { line-height: 2em; margin-top: 20px; font-size: 13px; } .wrapper--solution-detail .works-content__subtitle { line-height: 2em; margin-top: 28px; font-size: 18px; } .wrapper--solution-detail .works-content__description { line-height: 2.1em; margin-top: 16px; font-size: 15px; } .wrapper--solution-detail .process { position: relative; max-width: 980px; margin: 0 auto; padding: 220px 0 0; } .wrapper--solution-detail .process__content-container-container { position: relative; margin-top: 48px; } .wrapper--solution-detail .process__content-container { position: relative; padding: 100px; background-color: white; } .wrapper--solution-detail .schedule { position: relative; max-width: 980px; margin: 0 auto; padding: 220px 0 0; } .wrapper--solution-detail .schedule__content-container-container { position: relative; margin-top: 48px; } .wrapper--solution-detail .schedule__content-container-container:before { position: absolute; top: 0; right: -9999px; bottom: -90px; left: -9999px; background-color: white; content: ""; } .wrapper--solution-detail .schedule__content-container { position: relative; max-width: 980px; margin: 0 auto; padding: 100px 0 0; } .wrapper--solution-detail .schedule__caution { position: relative; line-height: 2em; margin-top: 20px; font-size: 13px; } .wrapper--solution-detail .schedule__caution a { position: relative; } .wrapper--solution-detail .schedule__caution a:before { position: absolute; right: 0; bottom: -4px; left: 0; height: 1px; background-color: #222222; content: ""; } .wrapper--solution-detail .schedule-content { display: flex; } .wrapper--solution-detail .schedule-content:first-child { background-color: #0078bd; } .wrapper--solution-detail .schedule-content:first-child .schedule-content__content { align-items: center; padding: 14px 0; font-size: 14px; color: white; } .wrapper--solution-detail .schedule-content:not(:first-child) .schedule-content__content { padding: 24px 16px; border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .schedule-content:not(:first-child):nth-child(odd) { background-color: #e5f1f8; } .wrapper--solution-detail .schedule-content:nth-child(n + 3) .schedule-content__content:nth-child(1) { line-height: 1.8em; } .wrapper--solution-detail .schedule-content:last-child .schedule-content__content { border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .schedule-content__content { display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; font-size: 14px; } .wrapper--solution-detail .schedule-content__content:nth-child(1) { width: 10%; line-height: 1.5em; color: #1d2e87; font-size: 20px; } .wrapper--solution-detail .schedule-content__content:nth-child(1) strong { margin-right: 4px; font-size: 28px; } .wrapper--solution-detail .schedule-content__content:nth-child(2) { width: 19.2%; line-height: 1.6em; color: #1d2e87; font-size: 16px; } .wrapper--solution-detail .schedule-content__content:nth-child(n + 3) { line-height: 1.7em; } .wrapper--solution-detail .schedule-content__content:nth-child(3) { width: 24.5%; } .wrapper--solution-detail .schedule-content__content:nth-child(4) { width: 26%; } .wrapper--solution-detail .schedule-content__content:nth-child(5) { width: 20.3%; line-height: 2em; } .wrapper--solution-detail .schedule-content__content:nth-child(5) strong { padding: 0 4px; font-size: 18px; } .wrapper--solution-detail .schedule-content__content:not(:last-child) { border-right: 1px solid #bbbbbb; } .wrapper--solution-detail .schedule-content__inner-content { position: relative; padding-left: 1em; } .wrapper--solution-detail .schedule-content__inner-content:before { position: absolute; top: 0; left: 0; content: "\30FB"; } .wrapper--recruit { padding: 0 32px; } .wrapper--recruit .content { position: relative; max-width: 980px; margin: 0 auto; padding: 8px 0 216px; } .wrapper--recruit .content__picture-container { line-height: 0; } .wrapper--recruit .content__picture { width: calc(100% + 550px); margin-left: -80px; } .wrapper--recruit .content__content-container { position: relative; } .wrapper--recruit .content__content { position: relative; margin-top: -100px; padding: 20px 0; background-color: white; } .wrapper--recruit .content-content { padding: 76px 100px; } .wrapper--recruit .content-content:not(:last-child) { border-bottom: 1px solid #bbbbbb; } .wrapper--recruit .content-content__title { line-height: 1.6em; color: #1d2e87; font-size: 34px; } .wrapper--recruit .content-content__description { line-height: 2.1em; margin-top: 24px; font-size: 15px; } .wrapper--recruit .content-content__button-container { margin-top: 40px; } .wrapper--recruit .content-content__button { position: relative; display: flex; justify-content: center; align-items: center; height: 100px; color: white; background-color: #1d2e87; font-size: 22px; cursor: pointer; } .wrapper--recruit .content-content__button:not(:first-child) { margin-top: 30px; } .wrapper--recruit .content-content__button:before, .wrapper--recruit .content-content__button:after { position: absolute; top: 50%; right: 40px; width: 30px; height: 2px; background-color: white; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; content: ""; } .wrapper--recruit .content-content__button:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .wrapper--recruit .content-content__button.is-empty { color: white; background-color: #aaaaaa; pointer-events: none; } .wrapper--recruit .content-content__button.is-empty:before, .wrapper--recruit .content-content__button.is-empty:after { display: none; } .wrapper--recruit .interview { position: relative; max-width: 980px; margin: 0 auto; padding: 0 0 114px; } .wrapper--recruit .interview__title { line-height: 1.6em; font-size: 34px; color: #1d2e87; } .wrapper--recruit .interview__description { line-height: 2.1em; margin-top: 12px; margin-bottom: 32px; font-size: 15px; } .wrapper--recruit .interview-box { display: flex; align-items: center; background-color: white; } .wrapper--recruit .interview-box__picture { flex-shrink: 0; width: 440px; min-height: 440px; background-size: cover; background-position: center; background-repeat: no-repeat; } .wrapper--recruit .interview-box__information { padding: 48px 60px; } .wrapper--recruit .interview-box__title { line-height: 1.7em; font-size: 22px; color: #1d2e87; } .wrapper--recruit .interview-box__role { position: relative; line-height: 1.6em; margin-top: 48px; font-size: 15px; } .wrapper--recruit .interview-box__role:before { position: absolute; top: -16px; right: 0; left: 0; height: 1px; background-color: #bbbbbb; content: ""; } .wrapper--recruit .interview-box__name { line-height: 1.3em; font-size: 18px; } .wrapper--recruit .interview-box .common-button { margin-top: 36px; } .wrapper--recruit .interview-box:not(:first-child) { margin-top: 48px; } .wrapper--recruit .message { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 248px; } .wrapper--recruit .message__picture-container { line-height: 0; } .wrapper--recruit .message__picture { width: calc(100% + 550px); margin-left: -470px; } .wrapper--recruit .message__content-container { position: relative; } .wrapper--recruit .message__box { position: relative; margin-top: -100px; padding: 100px; background-color: white; } .wrapper--recruit .message__subtitle { color: #1d2e87; font-size: 22px; } .wrapper--recruit .message__title { line-height: 1.2em; margin-top: 16px; color: #1d2e87; font-size: 34px; } .wrapper--recruit .message__description { line-height: 2.1em; margin-top: 24px; font-size: 15px; } .wrapper--recruit .message__description small { font-size: 11px; } .wrapper--recruit .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 160px 32px 234px; background-color: rgba(29, 46, 135, 0.95); z-index: 3; overflow: scroll; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .wrapper--recruit .modal.is-show { opacity: 1; pointer-events: auto; } .wrapper--recruit .modal__close { position: absolute; top: -88px; right: 0; cursor: pointer; } .wrapper--recruit .modal__box { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 100px; background-color: white; } .wrapper--recruit .modal__title { padding: 56px 100px 32px; font-size: 44px; color: #1d2e87; border-bottom: 1px solid #bbbbbb; } .wrapper--recruit .modal__content-container-container { padding: 0 100px; } .wrapper--recruit .modal-meta { display: flex; align-items: center; padding: 48px 0 36px; border-bottom: 1px solid #bbbbbb; } .wrapper--recruit .modal-meta__key { display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: 8px 24px; margin-right: 18px; font-size: 13px; color: white; background-color: #0087d5; } .wrapper--recruit .modal-meta__value { color: #1d2e87; font-size: 32px; } .wrapper--recruit .modal-content { display: flex; padding: 36px 0; border-bottom: 1px solid #bbbbbb; } .wrapper--recruit .modal-content__key { line-height: 2em; flex-shrink: 0; width: 170px; font-size: 18px; color: #1d2e87; } .wrapper--recruit .modal-content__value { line-height: 2.1em; font-size: 15px; } .wrapper--recruit .modal-content__value p:not(:first-child) { margin-top: 28px; } .wrapper--recruit-detail .content { position: relative; max-width: 980px; margin: -100px auto 0; background-color: white; } .wrapper--recruit-detail .content__picture { width: 100%; } .wrapper--recruit-detail .content__content { padding: 64px 100px 100px; } .wrapper--recruit-detail .faq-content { padding-bottom: 48px; } .wrapper--recruit-detail .faq-content__question { padding-bottom: 20px; font-size: 22px; color: #1d2e87; border-bottom: 1px solid #bbbbbb; } .wrapper--recruit-detail .faq-content__answer { line-height: 2.1em; margin-top: 20px; font-size: 15px; } .wrapper--recruit-detail .faq-content__answer img { display: block; max-width: 100%; height: auto; margin: 56px auto 0; } .wrapper--recruit-detail .profile__title { color: #1d2e87; font-size: 22px; } .wrapper--recruit-detail .profile__box { padding: 32px 40px; margin-top: 20px; border: 1px solid #bbbbbb; } .wrapper--recruit-detail .profile__role { line-height: 1.6em; color: #1d2e87; font-size: 15px; } .wrapper--recruit-detail .profile__name { line-height: 1.6em; padding-bottom: 20px; color: #1d2e87; border-bottom: 1px solid #bbbbbb; font-size: 18px; } .wrapper--recruit-detail .profile__description { line-height: 2.1em; margin-top: 16px; font-size: 15px; } .wrapper--recruit-detail .to-top-link .common-button { margin: 100px auto 150px; } .wrapper--news .content-box { visibility: hidden; position: relative; margin-top: 28px; margin-bottom: 150px; padding: 90px 32px; background-color: white; box-sizing: content-box; } .wrapper--news .content-box.is-show { visibility: visible; } .wrapper--news .content-box__box { max-width: 980px; margin: 0 auto; } .wrapper--news .category-container { display: flex; flex-wrap: wrap; margin-bottom: 28px; } .wrapper--news .category { padding: 8px 24px; margin-right: 20px; margin-bottom: 20px; font-size: 13px; } .wrapper--news .content { position: relative; display: flex; align-items: center; padding: 40px 60px 40px 0; border-top: 1px solid #bbbbbb; } .wrapper--news .content:last-child { border-bottom: 1px solid #bbbbbb; } .wrapper--news .content__thumbnail-container { flex-shrink: 0; width: 290px; } .wrapper--news .content__thumbnail { padding-top: 62%; background-size: cover; background-position: center; background-repeat: no-repeat; } .wrapper--news .content__information { padding-left: 28px; } .wrapper--news .content__meta { display: flex; align-items: center; } .wrapper--news .content__date { margin-right: 20px; font-size: 16px; } .wrapper--news .content__category { padding: 8px 24px; font-size: 13px; } .wrapper--news .content__title { line-height: 1.7em; margin-top: 12px; color: #1d2e87; font-size: 22px; } .wrapper--news .content__description { line-height: 2em; margin-top: 8px; font-size: 13px; } .wrapper--news .content__arrow-container { position: absolute; top: calc(50% - 6px); right: 0; width: 36px; overflow: hidden; } .wrapper--news .content__arrow { width: 100%; } .wrapper--news-detail .common-firstview-blue { padding-bottom: 164px; } .wrapper--news-detail .content { position: relative; max-width: 980px; margin: -100px auto 0; padding: 100px; font-size: 15px; background-color: white; } .wrapper--news-detail .content__picture { display: block; max-width: 100%; height: auto; margin: 0 auto 90px; } .wrapper--news-detail .content__introduction *, .wrapper--news-detail .content__content * { line-height: 2.1em; } .wrapper--news-detail .content__introduction p, .wrapper--news-detail .content__content p { margin-top: 28px; } .wrapper--news-detail .content__introduction p:empty, .wrapper--news-detail .content__content p:empty { height: 1.5em; } .wrapper--news-detail .content__introduction a, .wrapper--news-detail .content__content a { color: #0087d5; transition: opacity 0.3s; word-break: break-all; } .wrapper--news-detail .content__introduction ul, .wrapper--news-detail .content__content ul { margin-top: 28px; } .wrapper--news-detail .content__introduction li, .wrapper--news-detail .content__content li { position: relative; padding-left: 1em; } .wrapper--news-detail .content__introduction li:before, .wrapper--news-detail .content__content li:before { position: absolute; top: 0; left: 0; content: "\30FB"; } .wrapper--news-detail .content__introduction h1, .wrapper--news-detail .content__introduction h2, .wrapper--news-detail .content__content h1, .wrapper--news-detail .content__content h2 { position: relative; padding-left: 1em; margin-top: 90px; font-size: 22px; color: #1d2e87; } .wrapper--news-detail .content__introduction h1:before, .wrapper--news-detail .content__introduction h2:before, .wrapper--news-detail .content__content h1:before, .wrapper--news-detail .content__content h2:before { position: absolute; top: 8px; bottom: 6px; left: 0; width: 1px; background-color: #1d2e87; content: ""; } .wrapper--news-detail .content__introduction h3, .wrapper--news-detail .content__introduction h4, .wrapper--news-detail .content__introduction h5, .wrapper--news-detail .content__introduction h6, .wrapper--news-detail .content__content h3, .wrapper--news-detail .content__content h4, .wrapper--news-detail .content__content h5, .wrapper--news-detail .content__content h6 { margin-top: 40px; color: #1d2e87; } .wrapper--news-detail .content__introduction h3, .wrapper--news-detail .content__content h3 { font-size: 20px; } .wrapper--news-detail .content__introduction h4, .wrapper--news-detail .content__content h4 { font-size: 18px; } .wrapper--news-detail .content__introduction h5, .wrapper--news-detail .content__content h5 { font-size: 17px; } .wrapper--news-detail .content__introduction h6, .wrapper--news-detail .content__content h6 { font-size: 16px; } .wrapper--news-detail .content__introduction img, .wrapper--news-detail .content__content img, .wrapper--news-detail .content__introduction iframe { display: block; max-width: 100%; height: auto; margin: 40px auto 0; } .wrapper--news-detail .content__content iframe { display: block; max-width: 100%; margin: 40px auto 0; } .wrapper--news-detail .content__introduction blockquote, .wrapper--news-detail .content__content blockquote { margin: 40px auto 0; padding: 24px 32px; border: 1px solid #cccccc; } .wrapper--news-detail .content__introduction hr, .wrapper--news-detail .content__content hr { margin: 40px auto 0; } .wrapper--news-detail .content__introduction i, .wrapper--news-detail .content__content i { font-style: italic; } .wrapper--news-detail .content__introduction table, .wrapper--news-detail .content__content table { margin: 40px auto 0; } .wrapper--news-detail .content__introduction td, .wrapper--news-detail .content__content td { padding: 8px 12px; border: 1px solid #cccccc; } .wrapper--news-detail .content__introduction td:first-child, .wrapper--news-detail .content__content td:first-child { width: 100px; } .wrapper--news-detail .content__introduction td:not(:last-child), .wrapper--news-detail .content__content td:not(:last-child) { border-right: none; } .wrapper--news-detail .content__introduction strong, .wrapper--news-detail .content__content strong { font-weight: bold; } .wrapper--news-detail .content__introduction b, .wrapper--news-detail .content__content b { color: #1d2e87; } .wrapper--news-detail .content__introduction u, .wrapper--news-detail .content__content u { text-decoration: underline; text-underline-offset: 0.5em; } .wrapper--news-detail .content .index { margin: 90px 0; } .wrapper--news-detail .content .share { margin-top: 60px; } .wrapper--news-detail .content.has-margin { margin-bottom: 120px; } .wrapper--news-detail .index { padding: 40px 40px 50px; border: 1px solid #bbbbbb; } .wrapper--news-detail .index__title { padding-bottom: 22px; font-size: 22px; } .wrapper--news-detail .index__content { line-height: 1.5em; padding: 28px 0; font-size: 15px; border-top: 1px solid #bbbbbb; cursor: pointer; } .wrapper--news-detail .index__content:last-child { border-bottom: 1px solid #bbbbbb; } .wrapper--news-detail .share { padding: 60px 0 0; font-size: 15px; border-top: 1px solid #bbbbbb; } .wrapper--news-detail .share__title { text-align: center; } .wrapper--news-detail .share__content-container { display: flex; justify-content: center; align-items: center; margin-top: 28px; } .wrapper--news-detail .share__content-container .share-content { margin: 0 10px; } .wrapper--news-detail .share-content { display: flex; align-items: center; justify-content: center; width: 250px; height: 60px; color: white; } .wrapper--news-detail .share-content__icon { width: 28px; height: 28px; margin-right: 14px; background-position: center; background-size: contain; background-repeat: no-repeat; } .wrapper--news-detail .share-content--facebook { background-color: #1877f2; } .wrapper--news-detail .share-content--twitter { background-color: #1da1f2; } .wrapper--news-detail .other-contents { position: relative; margin: 150px 0; padding: 100px 0; background-color: white; } .wrapper--news-detail .other-contents__box { position: relative; max-width: 1094px; margin: 0 auto; padding: 0 32px; box-sizing: content-box; } .wrapper--news-detail .other-contents__content-container { display: flex; margin-top: 32px; padding-bottom: 50px; border-bottom: 1px solid #bbbbbb; } .wrapper--news-detail .other-contents__content-container .common-link-card__thumbnail { padding-top: 62%; } .wrapper--news-detail .to-top-link .common-button { margin: 50px auto 0; } .wrapper--case .content-container { visibility: hidden; position: relative; margin-bottom: 150px; padding-bottom: 100px; background-color: white; } .wrapper--case .content-container.is-show { visibility: visible; } .wrapper--case .content-container__box { display: flex; flex-wrap: wrap; max-width: 1094px; margin: 0 auto; padding: 100px 32px 80px; box-sizing: content-box; border-bottom: 1px solid #bbbbbb; } .wrapper--case .content-container__box .common-link-card__thumbnail { border: 1px solid #bbbbbb; } .wrapper--case .content-container__box .common-link-card:nth-child(n + 4) { margin-top: 80px; } .wrapper--case-detail .content { position: relative; max-width: 980px; margin: -100px auto 0; background-color: white; } .wrapper--case-detail .content__picture { width: 100%; } .wrapper--case-detail .content__content { line-height: 2.1em; padding: 64px 100px 96px; font-size: 15px; } .wrapper--case-detail .content__content *:not(img):first-child { margin-top: 0; } .wrapper--case-detail .content__content h1 { line-height: 1.7em; margin-top: 48px; color: #1d2e87; font-size: 28px; } .wrapper--case-detail .content__content h2 { position: relative; padding-left: 1.3em; padding-bottom: 16px; margin-top: 48px; color: #0078bd; font-size: 22px; border-bottom: 1px solid #bbbbbb; } .wrapper--case-detail .content__content h2:before { position: absolute; top: 18px; left: 0; width: 20px; height: 2px; background-color: #0078bd; content: ""; } .wrapper--case-detail .content__content p { margin-top: 20px; } .wrapper--case-detail .content__content img { display: block; max-width: 100%; height: auto; margin: 48px auto 0; } .wrapper--case-detail .profile { line-height: 2.1em; padding: 0 100px; font-size: 15px; } .wrapper--case-detail .profile__box { display: flex; padding: 72px 0 64px; border-bottom: 1px solid #bbbbbb; } .wrapper--case-detail .profile__picture { width: 250px; border: 1px solid #bbbbbb; } .wrapper--case-detail .profile__information { margin-top: -8px; padding-left: 40px; } .wrapper--case-detail .profile__row { display: flex; } .wrapper--case-detail .profile__key { flex-shrink: 0; width: 100px; color: #1d2e87; } .wrapper--case-detail .profile__caution { margin-top: 12px; font-size: 13px; } .wrapper--case-detail .other-contents { position: relative; padding: 100px 0; margin: 150px 0; background-color: white; } .wrapper--case-detail .other-contents__box { max-width: 1094px; margin: 0 auto; padding: 0 32px; box-sizing: content-box; } .wrapper--case-detail .other-contents__content-container { display: flex; margin-top: 40px; padding-bottom: 48px; border-bottom: 1px solid #bbbbbb; } .wrapper--case-detail .other-contents__content-container .common-link-card__thumbnail { border: 1px solid #bbbbbb; } .wrapper--case-detail .to-top-link .common-button { margin: 90px auto 0; } .wrapper--privacy .content { position: relative; max-width: 980px; margin: 30px auto 150px; line-height: 2.1em; padding: 92px 100px; font-size: 15px; background-color: white; } .wrapper--privacy .content__introduction { margin-bottom: 40px; } .wrapper--privacy .content__introduction a { text-decoration: underline; word-break: break-all; } .wrapper--privacy .content-content { padding: 32px 0; } .wrapper--privacy .content-content__key { font-size: 28px; color: #1d2e87; } .wrapper--privacy .content-content__value { margin-top: 32px; } @media (min-width: 768px) { .hover-opacity:hover { opacity: 0.6; } .only-sp { display: none; } .common-button:hover .common-button__background { -webkit-transform: scaleX(0); transform: scaleX(0); } .common-button:hover .common-button__title { color: #1d2e87; } .common-button:hover .common-button__arrow-on { -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.2s ease 0.25s; transition: transform 0.2s ease 0.25s; transition: transform 0.2s ease 0.25s, -webkit-transform 0.2s ease 0.25s; } .common-button:hover .common-button__arrow { -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .common-button:hover.is-white .common-button__title { color: white; } .common-header-sub-links__top:hover .common-header-sub-links__top-arrow img { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-header-sub-links__sub-link span { display: block; } .common-header-sub-links__sub-link.is-multiple-line { padding: 0; } .common-header-sub-links__sub-link.is-multiple-line > span:first-child { -webkit-transform: translateY(-4px); transform: translateY(-4px); } .common-header-sub-links__sub-link:hover .common-header-sub-links__sub-link-arrow img { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-solution-content:hover .common-solution-content__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-case-study-content-container.is-single { display: block; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid #bbbbbb; } .common-case-study-content-container.is-single .common-case-study-content { display: flex; align-items: center; width: 100%; } .common-case-study-content-container.is-single .common-case-study-content:nth-child(odd) { padding-right: 0; border-right: none; } .common-case-study-content-container.is-single .common-case-study-content__picture-container { flex-shrink: 0; width: 380px; } .common-case-study-content-container.is-single .common-case-study-content__information { padding: 0 40px; } .common-case-study-content-container.is-single .common-case-study-content__arrow-container { flex-shrink: 0; margin: 0; } .common-case-study-content:hover .common-case-study-content__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-link-card:hover .common-link-card__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-pager__prev:hover .common-pager__arrow, .common-pager__next:hover .common-pager__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .common-news-category.is-interactive:hover { color: white; background-color: #0087d5; } .common-news-category[data-id="全て"].is-interactive:hover { color: white; background-color: #1d2e86; } .common-news-category[data-id="セミナー"].is-interactive:hover { color: white; background-color: #0287d6; } .common-news-category[data-id="終了したセミナー"].is-interactive:hover { color: white; background-color: #4fb3d5; } .common-news-category[data-id="コラム"].is-interactive:hover { color: white; background-color: #7444ce; } .common-news-category[data-id="官民連携コラム"].is-interactive:hover { color: white; background-color: #ab64dc; } .common-news-category[data-id="お知らせ"].is-interactive:hover { color: white; background-color: #37b5aa; } .wrapper--index .news-content:hover .news-content__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .wrapper--recruit .content-content__button:hover:before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .wrapper--recruit .content-content__button:hover:after { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .wrapper--news .common-firstview { padding-right: 32px; padding-left: 32px; box-sizing: content-box; } .wrapper--news .content:hover .content__arrow { -webkit-animation: arrow-animation 0.5s; animation: arrow-animation 0.5s; } .wrapper--news-detail .content__introduction a:hover, .wrapper--news-detail .content__content a:hover { opacity: 0.6; } .wrapper--case .common-firstview { padding-right: 32px; padding-left: 32px; box-sizing: content-box; } .wrapper--privacy .common-firstview { padding-right: 32px; padding-left: 32px; box-sizing: content-box; } } @media (max-width: 767px) { .common-container .common-footer { margin-top: -420px; } .to-top { width: 40px; } .common-section-title { line-height: 1.3em; font-size: 29px; } .only-pc { display: none; } .comp__input-container { top: 0; right: 16px; } .common-button { font-size: 16px; } .common-footer { padding: 480px 24px 192px; } .common-footer__box { flex-direction: column-reverse; } .common-footer__information { margin-top: 48px; } .common-footer__logo .pixel-ratio-img { min-width: 144px; } .common-footer__address { margin-top: 8px; } .common-footer__social { margin-top: 40px; } .common-footer__social .pixel-ratio-img { display: block; min-width: 35px; margin-top: -80px; margin-left: auto; } .common-footer__link-container-container { display: block; margin-top: 0; margin-left: 0; border-bottom: 1px solid #444444; } .common-footer__link-container { padding-right: 0; } .common-footer__link-container:nth-child(1) { width: 100%; } .common-footer__link-container:nth-child(2) { width: 100%; } .common-footer__link-container:nth-child(3) { width: 100%; } .common-footer__link { position: relative; padding: 25px 0; margin-bottom: 0; border-top: 1px solid #444444; } .common-footer__link:after { position: absolute; top: calc(50% - 4px); right: 0; width: 32px; height: 8px; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url(/img/common/icon_arrow.white.png); content: ""; } .common-footer__link.has-sublinks:not(.has-inner-links):before, .common-footer__link.has-sublinks:not(.has-inner-links):after { position: absolute; top: calc(50% - 12px); right: 12px; width: 1px; height: 25px; background-color: white; background-image: none; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; content: ""; } .common-footer__link.has-sublinks:not(.has-inner-links):after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .common-footer__link.is-open:before { -webkit-transform: scaleY(0); transform: scaleY(0); } .common-footer__sub-link-container-container { position: relative; height: 0; overflow: hidden; transition: height 0.3s; } .common-footer__sub-link-container-container.is-inner-links { display: none; } .common-footer__sub-link-container { margin-top: -12px; padding: 0 0 16px 24px; } .common-footer__sub-link { padding: 10px 0; font-size: 14px; } .common-footer__sub-link:before { display: none; } .common-footer__sub-link.is-coming-soon:after { display: inline-block; font-size: 11px; padding: 0; margin-left: 8px; } .common-footer__meta { flex-direction: column-reverse; align-items: flex-start; right: 24px; left: 24px; height: auto; padding-bottom: 0; border-top: none; } .common-footer__copyright { width: 100%; padding: 24px 0 48px; font-size: 10px; border-top: 1px solid #444444; } .common-footer__policy { position: relative; display: inline-block; padding: 24px 0; } .common-footer__policy:after { position: absolute; right: 0; bottom: 16px; left: 0; height: 1px; background-color: #f8f8f8; content: ""; } .common-banner { display: block; padding: 0 24px; } .common-banner-content { width: 100%; padding: 48px 16px; } .common-banner-content:not(:first-child) { border-top: 1px solid #4a589f; border-left: none; } .common-banner-content__title { font-size: 23px; } .common-banner-content__description { margin-top: 20px; font-size: 13px; } .common-banner-content .common-button { margin: 24px auto 0; } .common-breadcrumb__content { line-height: 1.5em; font-size: 12px; } .common-breadcrumb__content--link:after { right: -12px; } .common-breadcrumb__content:not(:first-child) { margin-left: 28px; } .common-firstview { padding: 100px 24px 32px; } .common-firstview__title-en { padding-left: 24px; font-size: 15px; } .common-firstview__title-en:before { top: 6px; width: 14px; height: 2px; } .common-firstview__title { margin-bottom: 52px; font-size: 34px; } .common-firstview__title:before { bottom: -28px; } .common-firstview__description { line-height: 2em; margin-top: 32px; font-size: 15px; } .common-firstview__description br { display: none; } .common-solution-content { display: block; padding: 32px 24px 48px; } .common-solution-content__picture { width: 100%; } .common-solution-content__picture .pixel-ratio-img { display: block; position: relative; top: auto; left: auto; margin: 0 auto; -webkit-transform: none; transform: none; } .common-solution-content__information { margin-top: 28px; margin-left: 0; } .common-solution-content__subtitle-container { font-size: 13px; } .common-solution-content__index { margin-left: 32px; } .common-solution-content__index:before { top: 7px; left: -27px; width: 22px; } .common-solution-content__title { margin-top: 12px; margin-left: -4px; font-size: 24px; } .common-solution-content__description { margin-top: 12px; font-size: 13px; } .common-solution-content__arrow-container { top: auto; right: 24px; bottom: 30px; width: 30px; } .common-winpass-banner { display: block; padding: 48px 24px; } .common-winpass-banner__picture { display: block; width: calc(100% - 48px); margin: 0 auto; } .common-winpass-banner__information { margin-top: 32px; margin-left: 0; } .common-winpass-banner__logo-title { font-size: 11px; } .common-winpass-banner__logo { width: 164px; } .common-winpass-banner__description { margin-top: 16px; font-size: 13px; } .common-winpass-banner .common-button { margin: 24px auto 0; } .common-banner-introduction { padding: 56px 0 36px; } .common-banner-introduction__title { font-size: 29px; } .common-banner-introduction__description { line-height: 2.1em; margin-top: 16px; font-size: 13px; } .common-background { top: 50px; bottom: -50px; left: -9999px; } .common-background.is-left { right: -9999px; } .common-case-study-content-container { display: block; padding-bottom: 0; } .common-case-study-content { width: 100%; padding-bottom: 36px; } .common-case-study-content:nth-child(odd) { padding-right: 0; border-right: none; } .common-case-study-content:nth-child(even) { padding-left: 0; } .common-case-study-content:not(:first-child) { border-top: 1px solid #bbbbbb; padding-top: 32px; } .common-case-study-content__picture-container { width: 100%; } .common-case-study-content__title { margin-top: 20px; font-size: 20px; } .common-case-study-content__description { margin-top: 16px; font-size: 13px; } .common-case-study-content__arrow-container { width: 30px; margin-top: 20px; } .common-case-study-content .common-button { margin: 12px auto 0; } .common-case-study-button-container { padding: 32px 0 0; } .common-case-study-button-container .common-button { width: 212px; } .common-firstview-blue { padding: 96px 24px 88px; } .common-firstview-blue__title-en { padding-left: 20px; margin-top: 36px; font-size: 15px; } .common-firstview-blue__title-en:before { top: 7px; width: 12px; height: 2px; } .common-firstview-blue__title { line-height: 1.7em; margin-top: 12px; font-size: 21px; } .common-firstview-blue__role { margin-top: 16px; font-size: 13px; } .common-firstview-blue__meta { margin-top: 24px; } .common-firstview-blue__name { font-size: 15px; } .common-firstview-blue__date { margin-right: 16px; font-size: 13px; } .common-firstview-blue__category { padding: 8px 16px; font-size: 11px; } .common-link-card { display: block; width: 100%; padding-bottom: 84px; } .common-link-card:after { top: auto; bottom: 32px; right: 0; left: 0; width: 100%; height: 1px; } .common-link-card:nth-child(3n) { margin-right: 0; } .common-link-card:nth-child(3n):after { display: block; } .common-link-card__date { font-size: 13px; } .common-link-card__category { padding: 8px 20px; font-size: 11px; } .common-link-card__title { font-size: 19px; } .common-link-card__description { margin-top: 8px; font-size: 12px; } .common-link-card__arrow-container { bottom: 62px; width: 30px; } .common-pager { padding-top: 30px; } .common-pager__prev p, .common-pager__next p { display: none; } .common-pager__prev .common-pager__arrow-container, .common-pager__next .common-pager__arrow-container { top: -4px; width: 30px; } .common-pager__prev .common-pager__arrow-container { left: 0; } .common-pager__number-container { margin: 0 36px; } .common-pager__number { padding: 8px 10px; margin: 0 3px; font-size: 15px; } .common-pager__dot { font-size: 15px; } .common-pager__next .common-pager__arrow-container { right: 0; } .wrapper--index .firstview { padding: 108px 24px; padding: 28.8vw 6.4vw; padding-top: 0; padding-bottom: 0; } .wrapper--index .firstview__title { width: 284px; width: 75.7vw; } .wrapper--index .firstview-arrow { right: 24px; bottom: 20px; } .wrapper--index .firstview-arrow__title { margin-right: 10px; font-size: 13px; } .wrapper--index .firstview-arrow__icon { width: 70px; } .wrapper--index .introduction { padding: 24px 24px 84px; text-align: left; } .wrapper--index .introduction__title { line-height: 1.5em; font-size: 24px; } .wrapper--index .introduction__description { line-height: 2em; margin-top: 12px; font-size: 15px; } .wrapper--index .introduction .common-button { margin: 24px auto 0; } .wrapper--index .section-subtitle { padding-left: 22px; font-size: 15px; } .wrapper--index .section-subtitle:before { top: 8px; width: 12px; height: 2px; } .wrapper--index .section-title { padding-top: 12px; margin-left: -4px; font-size: 29px; } .wrapper--index .section-title.is-small { padding-top: 12px; margin-left: -2px; font-size: 29px; } .wrapper--index .section-description { padding-top: 16px; font-size: 13px; } .wrapper--index .solution { padding: 0 20px 128px; } .wrapper--index .solution__button-container .common-button { margin-top: 24px; margin-right: auto; margin-left: auto; } .wrapper--index .solution__content-container { margin: 56px 0 50px; padding: 16px 0; } .wrapper--index .seminar-case-study .common-background { display: none; } .wrapper--index .seminar__picture { width: calc(100vw - 20px); max-width: 394px; } .wrapper--index .seminar__box { width: calc(100vw - 40px); max-width: 374px; padding: 48px 28px; margin-top: -28px; margin-bottom: 48px; } .wrapper--index .seminar__box .common-button { margin-top: 16px; } .wrapper--index .case-study__picture { width: calc(100vw - 20px); max-width: 394px; } .wrapper--index .case-study__box { width: calc(100vw - 40px); max-width: 374px; padding: 48px 28px; margin-top: -28px; } .wrapper--index .case-study__content-container { margin-top: 32px; } .wrapper--index .news { max-width: 100%; padding: 68px 24px; } .wrapper--index .news__content-container { width: 100vw; margin-top: 32px; margin-left: -24px; padding: 24px; } .wrapper--index .news .common-button { margin: 40px auto 0; } .wrapper--index .news-content { padding: 24px 0 16px; } .wrapper--index .news-content__date { font-size: 13px; } .wrapper--index .news-content__category { margin-left: 16px; padding: 6px 16px; font-size: 11px; } .wrapper--index .news-content__title { line-height: 2em; padding-right: 48px; margin-top: 12px; font-size: 13px; } .wrapper--index .news-content__arrow-container { top: calc(50% + 16px); width: 30px; } .wrapper--index .recruit { display: block; padding-bottom: 72px; } .wrapper--index .recruit__picture { width: calc(100vw - 20px); max-width: 394px; } .wrapper--index .recruit__information { max-width: initial; margin-left: 0; padding: 28px 24px 20px; } .wrapper--index .recruit__information .common-button { margin: 32px auto 0; } .wrapper--about { padding: 0; } .wrapper--about .introduction__box { max-width: calc(100% - 20px * 2); margin: 0 auto; } .wrapper--about .introduction__content-container { padding: 12px 0 24px; } .wrapper--about .introduction__picture-container-container { max-width: calc(100% - 20px * 2); margin: 100px auto 0; } .wrapper--about .introduction__picture-container { line-height: 0; padding: 50px 24px; } .wrapper--about .introduction-content { padding: 28px 24px; } .wrapper--about .introduction-content__title-en { font-size: 15px; } .wrapper--about .introduction-content__title { line-height: 1.3em; margin-top: -4px; font-size: 29px; } .wrapper--about .introduction-content__description { margin-top: 8px; font-size: 16px; } .wrapper--about .introduction-content__description br { display: none; } .wrapper--about .introduction-content__content-container { margin-top: 16px; } .wrapper--about .introduction-content-content { padding: 8px 0; } .wrapper--about .introduction-content-content__index { padding: 0 16px 0 0; font-size: 19px; } .wrapper--about .introduction-content-content__title { padding: 0 0 0 16px; font-size: 16px; } .wrapper--about .reason { padding: 100px 20px 92px; } .wrapper--about .reason__content-container-container { margin-top: 32px; } .wrapper--about .reason__content-container { padding: 8px 0 16px; } .wrapper--about .reason-content { padding: 36px 24px; } .wrapper--about .reason-content__index { right: 28px; bottom: 32px; font-size: 150px; } .wrapper--about .reason-content__title { font-size: 16px; } .wrapper--about .reason-content__title br { display: none; } .wrapper--about .reason-content__description { position: relative; margin-top: 16px; font-size: 13px; } .wrapper--about .reason-content__description img { margin: 24px auto 0; } .wrapper--about .achievement { padding: 0 20px; } .wrapper--about .achievement .achievement-content { margin-top: 32px; } .wrapper--about .achievement-content__main-container { display: block; padding: 32px 24px; } .wrapper--about .achievement-content__graph-container { display: block; padding-bottom: 8px; } .wrapper--about .achievement-content-main { padding: 16px 0; } .wrapper--about .achievement-content-main:first-child { width: 100%; } .wrapper--about .achievement-content-main__key { font-size: 17px; } .wrapper--about .achievement-content-main__value { margin-top: 8px; font-size: 30px; } .wrapper--about .achievement-content-main__value strong { font-size: 50px; } .wrapper--about .achievement-content-graph { width: 100%; padding: 40px 40px; } .wrapper--about .achievement-content-graph:not(:first-child) { border-top: 1px solid #bbbbbb; } .wrapper--about .achievement-content-graph__title { font-size: 17px; } .wrapper--about .achievement-content-graph .pixel-ratio-img { margin: 16px auto 0; } .wrapper--about .message { padding: 100px 0 112px; } .wrapper--about .message__picture { width: 100%; margin-left: 0; } .wrapper--about .message .common-background { top: 48px; } .wrapper--about .message-content { max-width: calc(100% - 20px * 2); margin: -48px auto 0; padding: 48px 24px; } .wrapper--about .message-content__title { font-size: 29px; } .wrapper--about .message-content__description-container { margin-top: 8px; } .wrapper--about .message-content__description { margin-top: 16px; font-size: 13px; } .wrapper--about .message-content__role { margin-top: 20px; font-size: 13px; } .wrapper--about .message-content__name { margin-top: 12px; font-size: 18px; } .wrapper--about .member { padding: 1px 24px 48px; } .wrapper--about .member__content-container { margin-top: 32px; } .wrapper--about .member .common-section-title { margin-top: 40px; } .wrapper--about .member-content { width: 100%; } .wrapper--about .member-content:not(:nth-child(3n)) { margin-right: 0; } .wrapper--about .member-content:nth-child(n + 2) { margin-top: 48px; } .wrapper--about .member-content:nth-child(n + 4) { margin-top: 48px; } .wrapper--about .member-content__picture { padding-top: 62%; } .wrapper--about .member-content__name { margin-top: 20px; font-size: 18px; } .wrapper--about .member-content__role { font-size: 14px; } .wrapper--about .member-content__description { margin-top: 8px; font-size: 12px; } .wrapper--about .outline { padding: 60px 20px 140px; } .wrapper--about .outline__box { padding: 48px 24px; } .wrapper--about .outline__title { margin-bottom: 24px; font-size: 29px; } .wrapper--about .outline-table-content { display: block; padding: 24px 0; font-size: 13px; } .wrapper--about .outline-table-content__key { width: 100%; } .wrapper--about .is-zoom { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 50px; margin: 20px auto 0; color: white; background-color: #1d2e87; } .wrapper--about .is-zoom:after { position: absolute; right: 12px; top: 0; bottom: 1px; width: 25px; height: 25px; margin: auto; background-image: url(/img/common/icon_plus.png); background-size: contain; background-position: center; background-repeat: no-repeat; content: ""; } .wrapper--about .modal { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; background-color: rgba(0, 0, 0, 0.6); z-index: 3; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .wrapper--about .modal.is-show { opacity: 1; pointer-events: auto; } .wrapper--about .modal__background { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .wrapper--about .modal__box { position: relative; width: 100%; padding: 18px 18px 12px; margin: auto; background-color: white; } .wrapper--about .modal__close { display: block; margin-left: auto; } .wrapper--about .modal__picture-container { position: relative; width: calc(100vw - 20px * 2); margin-left: -18px; padding-right: 20px; padding-left: 20px; margin-top: 20px; overflow-x: scroll; overflow-y: hidden; } .wrapper--about .modal__picture { width: auto; height: 410px; max-height: calc(100vh - 180px); max-height: calc(var(--vh, 1vh) * 100 - 180px); } .wrapper--about .modal__icon-container { display: flex; justify-content: center; align-items: center; margin-top: 16px; transition: opacity 0.3s; } .wrapper--about .modal__icon-container.is-hide { opacity: 0; } @-webkit-keyframes finger-animation { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes finger-animation { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 90% { -webkit-transform: translateX(-6px); transform: translateX(-6px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } .wrapper--about .modal__finger { -webkit-animation: finger-animation 1.2s linear 0s infinite; animation: finger-animation 1.2s linear 0s infinite; } .wrapper--about .modal__arrow { margin-left: 8px; } .wrapper--solution { padding: 0; } .wrapper--solution .feature { padding: 0 20px; } .wrapper--solution .feature__content-container { margin-top: 24px; padding: 20px 0; } .wrapper--solution .feature-content { padding: 24px; } .wrapper--solution .feature-content__main { align-items: center; } .wrapper--solution .feature-content__index { padding-right: 15px; margin-top: 0; font-size: 25px; } .wrapper--solution .feature-content__information { padding-left: 15px; } .wrapper--solution .feature-content__information:before { top: 6px; bottom: 4px; } .wrapper--solution .feature-content__title { line-height: 1.75em; font-size: 16px; } .wrapper--solution .feature-content__description { margin-top: 8px; font-size: 13px; } .wrapper--solution .solution { padding: 100px 20px 110px; } .wrapper--solution .solution__content-container-container { margin-top: 24px; } .wrapper--solution .solution__winpass-banner-container { margin-top: 48px; } .wrapper--solution .seminar__box { padding: 50px 20px 20px; } .wrapper--solution .seminar__content-container { display: block; margin-top: 24px; } .wrapper--solution-detail { padding: 0; } .wrapper--solution-detail .introduction-container { padding: 0 20px; } .wrapper--solution-detail .introduction-container .common-background { top: 50px; } .wrapper--solution-detail .introduction { padding: 12px 0; } .wrapper--solution-detail .introduction__box { padding: 28px 24px 32px; } .wrapper--solution-detail .introduction__box--single { padding-bottom: 8px; } .wrapper--solution-detail .introduction__box--single .introduction__content { line-height: 1.92em; font-size: 15px; } .wrapper--solution-detail .introduction__box--single .introduction__content:before { top: 24px; } .wrapper--solution-detail .introduction__title { font-size: 19px; } .wrapper--solution-detail .introduction__title.is-large { font-size: 21px; } .wrapper--solution-detail .introduction__content-container { margin-top: 20px; } .wrapper--solution-detail .introduction__content { padding: 18px 0 18px 32px; line-height: 2.1em; font-size: 13px; } .wrapper--solution-detail .introduction__content:before { top: 26px; width: 20px; height: 17px; } .wrapper--solution-detail .introduction__description { flex-direction: column-reverse; margin-top: 24px; font-size: 13px; } .wrapper--solution-detail .introduction__description-image { max-width: 156px; margin: 0 auto 16px; } .wrapper--solution-detail .introduction__phase-container { margin-top: -8px; padding: 0 20px 40px; } .wrapper--solution-detail .introduction-phase { display: block; padding: 15px 0 10px; text-align: center; } .wrapper--solution-detail .introduction-phase:not(:first-child) { margin-top: 20px; } .wrapper--solution-detail .introduction-phase:not(:last-child):before { bottom: calc(-19px * 0.75); right: 0; left: 0; width: calc(27px * 0.75); height: calc(19px * 0.75); margin: 0 auto; } .wrapper--solution-detail .introduction-phase__key { width: 100%; padding: 0; font-size: 12px; } .wrapper--solution-detail .introduction-phase__value { line-height: 1.5em; margin-top: 4px; padding-left: 0; font-size: 16px; } .wrapper--solution-detail .introduction-phase__value small { margin-top: 0; margin-bottom: 4px; margin-left: 0; font-size: 10px; } .wrapper--solution-detail .introduction-phase__value:before { display: none; } .wrapper--solution-detail .value { padding: 100px 20px 0; } .wrapper--solution-detail .value__content-container-container { margin-top: 28px; } .wrapper--solution-detail .value__content-container { padding: 32px 0; } .wrapper--solution-detail .value__content-container--has-padding-bottom { padding: 28px 0 48px; } .wrapper--solution-detail .value-content { padding: 20px 24px 4px; } .wrapper--solution-detail .value-content__title-container { align-items: center; min-height: 64px; background-color: #e5f1f8; } .wrapper--solution-detail .value-content__index { padding: 6px 4px 6px 8px; margin-left: 10px; font-size: 20px; } .wrapper--solution-detail .value-content__index:after { right: -10px; width: 10px; -webkit-transform: none; transform: none; } .wrapper--solution-detail .value-content__title { line-height: 1.5em; padding: 12px 12px 12px 20px; font-size: 16px; } .wrapper--solution-detail .value-content__description { margin-top: 12px; font-size: 13px; } .wrapper--solution-detail .value-content.is-large .value-content__index { padding: 6px 4px 6px 8px; } .wrapper--solution-detail .value-content.is-large .value-content__index:after { right: -10px; width: 10px; } .wrapper--solution-detail .value-content.is-large .value-content__title { padding: 12px 12px 12px 20px; } .wrapper--solution-detail .example { padding: 104px 20px 0; } .wrapper--solution-detail .example .common-section-title { font-size: 28px; letter-spacing: -0.04em; } .wrapper--solution-detail .example__content-container { margin-top: 24px; padding: 24px 0 48px; } .wrapper--solution-detail .example__caution { padding: 0 24px; margin-top: 16px; font-size: 11px; } .wrapper--solution-detail .example-content { padding: 24px 24px; } .wrapper--solution-detail .example-content--step { padding-bottom: 0; } .wrapper--solution-detail .example-content--step:not(:last-child) { padding-bottom: 48px; } .wrapper--solution-detail .example-content--step:not(:last-child):after { right: 0; bottom: 6px; left: 0; } .wrapper--solution-detail .example-content__title { line-height: 1.7em; font-size: 16px; } .wrapper--solution-detail .example-content__description { margin-top: 8px; font-size: 13px; } .wrapper--solution-detail .example-content .example__caution { line-height: 1.9em; margin-top: 20px; font-size: 12px; padding-right: 0; padding-left: 0; } .wrapper--solution-detail .example-content-client { align-items: flex-start; padding: 24px 0 20px; } .wrapper--solution-detail .example-content-client__picture { width: 76px; height: 76px; } .wrapper--solution-detail .example-content-client__information { margin-left: 15px; } .wrapper--solution-detail .example-content-client__title { font-size: 11px; } .wrapper--solution-detail .example-content-client__description { margin-top: 8px; font-size: 13px; } .wrapper--solution-detail .example-content-step { display: block; padding: 24px 0 24px 32px; } .wrapper--solution-detail .example-content-step__time { width: 100%; padding-left: 0; font-size: 12px; } .wrapper--solution-detail .example-content-step__time-line { bottom: 4px; left: 8px; } .wrapper--solution-detail .example-content-step__time-line:before { left: -7.5px; width: calc(20px * 0.8); height: calc(12px * 0.8); } .wrapper--solution-detail .example-content-step__time-line:after { top: -6px; left: -7px; width: 16px; height: 16px; } .wrapper--solution-detail .example-content-step__content-container { padding-bottom: 28px; } .wrapper--solution-detail .example-content-step__content { line-height: 2.1em; font-size: 13px; } .wrapper--solution-detail .example-content-step__content:before { left: -2px; } .wrapper--solution-detail .example-content-step:not(:first-child) { padding-top: 0; } .wrapper--solution-detail .example-content-step:not(:first-child) .example-content-step__time-line { top: 10px; } .wrapper--solution-detail .example-content-step:last-child { padding-bottom: 0; } .wrapper--solution-detail .step { padding: 100px 20px 0; } .wrapper--solution-detail .step__content-container-container { margin-top: 30px; } .wrapper--solution-detail .step__content-container { padding: 20px 0; } .wrapper--solution-detail .step__box { padding: 20px 24px; } .wrapper--solution-detail .step__title { font-size: 16px; } .wrapper--solution-detail .step__description { margin-top: 8px; font-size: 13px; } .wrapper--solution-detail .step__sub-content-container { padding: 16px 0; margin-top: 24px; } .wrapper--solution-detail .step__sub-content-container:before { left: 17px; bottom: 48px; } .wrapper--solution-detail .step__sub-content-container--has-line { margin-bottom: 0; border-bottom: none; } .wrapper--solution-detail .step--has-margin-bottom { margin-bottom: 120px; } .wrapper--solution-detail .step-sub-content { padding: 6px 0; } .wrapper--solution-detail .step-sub-content__index { top: calc(50% - 18px); width: 36px; height: 36px; } .wrapper--solution-detail .step-sub-content__title { font-size: 13px; } .wrapper--solution-detail .step-sub-content.has-height .step-sub-content__index { top: 12px; } .wrapper--solution-detail .voice { padding: 100px 20px 0; } .wrapper--solution-detail .voice__content-container-container { margin-top: 24px; } .wrapper--solution-detail .voice__content-container { padding: 50px 24px; } .wrapper--solution-detail .voice--has-padding-bottom { padding-bottom: 120px; } .wrapper--solution-detail .voice-content { display: block; padding: 30px 20px; } .wrapper--solution-detail .voice-content:not(:first-child) { margin-top: 25px; } .wrapper--solution-detail .voice-content__picture { width: 120px; height: 120px; margin: 0 auto; } .wrapper--solution-detail .voice-content__description { margin-top: 16px; margin-left: 0; font-size: 13px; } .wrapper--solution-detail .case-study { padding: 100px 20px; } .wrapper--solution-detail .case-study__content-container { margin-top: 30px; padding: 40px 24px 48px; } .wrapper--solution-detail .case-study__description { margin-bottom: 24px; font-size: 13px; } .wrapper--solution-detail .works { padding: 0 20px 120px; } .wrapper--solution-detail .works .common-background { top: 50px; } .wrapper--solution-detail .works__content-container { margin-top: 24px; padding: 20px 0; } .wrapper--solution-detail .works-content { display: block; padding: 30px 24px; } .wrapper--solution-detail .works-content__picture { display: block; width: 150px; margin: 0 auto; } .wrapper--solution-detail .works-content__information { margin-top: 28px; margin-left: 0; } .wrapper--solution-detail .works-content__title { font-size: 16px; } .wrapper--solution-detail .works-content__meta { margin-top: 20px; font-size: 13px; } .wrapper--solution-detail .works-content__subtitle { margin-top: 16px; font-size: 14px; } .wrapper--solution-detail .works-content__description { margin-top: 8px; font-size: 13px; } .wrapper--solution-detail .process { padding: 100px 20px 0; } .wrapper--solution-detail .process__content-container-container { margin-top: 24px; } .wrapper--solution-detail .process__content-container { padding: 50px 24px; } .wrapper--solution-detail .schedule { padding: 100px 0 0; } .wrapper--solution-detail .schedule .common-section-title { padding-left: 20px; } .wrapper--solution-detail .schedule__content-container-container { margin-top: 28px; } .wrapper--solution-detail .schedule__content-container-container:before { bottom: -30px; } .wrapper--solution-detail .schedule__content-container { padding: 0; } .wrapper--solution-detail .schedule__caution { margin-top: 20px; padding: 0 20px; font-size: 11px; } .wrapper--solution-detail .schedule-content { display: block; padding: 40px 20px 20px; } .wrapper--solution-detail .schedule-content:first-child { display: none; } .wrapper--solution-detail .schedule-content:not(:first-child) .schedule-content__content { padding: 0; border-top: none; } .wrapper--solution-detail .schedule-content:not(:first-child) .schedule-content__content:nth-child(n + 2) { padding: 2px 0 8px; } .wrapper--solution-detail .schedule-content:not(:first-child) .schedule-content__content:nth-child(n + 3) { padding: 10px 0; } .wrapper--solution-detail .schedule-content:nth-child(n + 3) { border-top: 1px solid #bbbbbb; } .wrapper--solution-detail .schedule-content:nth-child(n + 3) .schedule-content__content:nth-child(1) { line-height: 1.8em; } .wrapper--solution-detail .schedule-content:last-child { border-bottom: 1px solid #bbbbbb; } .wrapper--solution-detail .schedule-content:last-child .schedule-content__content { border-bottom: none; } .wrapper--solution-detail .schedule-content__content { display: block; font-size: 13px; letter-spacing: -0.02em; } .wrapper--solution-detail .schedule-content__content:nth-child(1), .wrapper--solution-detail .schedule-content__content:nth-child(2), .wrapper--solution-detail .schedule-content__content:nth-child(3), .wrapper--solution-detail .schedule-content__content:nth-child(4), .wrapper--solution-detail .schedule-content__content:nth-child(5) { width: 100%; line-height: 1.8em; } .wrapper--solution-detail .schedule-content__content:nth-child(1) { font-size: 16px; } .wrapper--solution-detail .schedule-content__content:nth-child(1) strong { font-size: 24px; } .wrapper--solution-detail .schedule-content__content:nth-child(1) br { display: none; } .wrapper--solution-detail .schedule-content__content:nth-child(2) { line-height: 1.4em; font-size: 21px; } .wrapper--solution-detail .schedule-content__content:nth-child(5) { line-height: 2.2em; } .wrapper--solution-detail .schedule-content__content:nth-child(5) strong { font-size: 17px; } .wrapper--solution-detail .schedule-content__content:not(:last-child) { border-right: none; } .wrapper--solution-detail .schedule-content__content-title { font-size: 13px; color: #0078bd; } .wrapper--recruit { padding: 0; } .wrapper--recruit .content { padding: 8px 0 50px; } .wrapper--recruit .content__picture { width: 100%; margin-left: 0; } .wrapper--recruit .content__content-container { padding: 0 20px; } .wrapper--recruit .content__content { margin-top: -50px; padding: 20px 0; } .wrapper--recruit .content-content { padding: 24px; } .wrapper--recruit .content-content__title { line-height: 1.7em; margin-bottom: -12px; font-size: 29px; } .wrapper--recruit .content-content__title.is-small { margin-bottom: 0; font-size: 21px; } .wrapper--recruit .content-content__title br { display: none; } .wrapper--recruit .content-content__description { margin-top: 16px; font-size: 13px; } .wrapper--recruit .content-content__button-container { margin-top: 32px; } .wrapper--recruit .content-content__button { height: 70px; padding-right: 24px; font-size: 14px; } .wrapper--recruit .content-content__button:not(:first-child) { margin-top: 15px; } .wrapper--recruit .content-content__button:before, .wrapper--recruit .content-content__button:after { right: 16px; width: 24px; } .wrapper--recruit .content-content__button.is-empty { line-height: 1.7em; height: auto; padding: 20px; font-size: 16px; } .wrapper--recruit .interview { padding: 40px 24px; } .wrapper--recruit .interview__title { font-size: 29px; } .wrapper--recruit .interview__description { margin-top: 8px; margin-bottom: 24px; font-size: 13px; } .wrapper--recruit .interview-box { display: block; padding-bottom: 28px; } .wrapper--recruit .interview-box__picture { width: 100%; padding-top: 56%; min-height: 0; } .wrapper--recruit .interview-box__information { padding: 24px; } .wrapper--recruit .interview-box__title { font-size: 18px; } .wrapper--recruit .interview-box__role { font-size: 13px; } .wrapper--recruit .interview-box__role:before { top: -24px; } .wrapper--recruit .interview-box__name { font-size: 15px; } .wrapper--recruit .interview-box .common-button { margin-top: 28px; } .wrapper--recruit .interview-box:not(:first-child) { margin-top: 24px; } .wrapper--recruit .message { padding-bottom: 120px; } .wrapper--recruit .message .common-background { top: 25px; } .wrapper--recruit .message__picture { width: 100%; margin-left: 0; } .wrapper--recruit .message__content-container { padding: 0 20px; } .wrapper--recruit .message__box { margin-top: -25px; padding: 48px 24px; } .wrapper--recruit .message__subtitle { font-size: 15px; } .wrapper--recruit .message__title { line-height: 1.7em; margin-top: 16px; font-size: 21px; } .wrapper--recruit .message__description { margin-top: 12px; font-size: 13px; } .wrapper--recruit .message__description small { font-size: 11px; } .wrapper--recruit .modal { padding: 80px 20px 120px; } .wrapper--recruit .modal__close { top: -44px; max-width: 36px; } .wrapper--recruit .modal__box { padding-bottom: 50px; } .wrapper--recruit .modal__title { padding: 48px 24px 28px; font-size: 34px; } .wrapper--recruit .modal__content-container-container { padding: 0 24px; } .wrapper--recruit .modal-meta { display: block; padding: 20px 0; } .wrapper--recruit .modal-meta__key { display: inline-block; padding: 8px 16px; margin-right: 0; font-size: 12px; } .wrapper--recruit .modal-meta__value { line-height: 1.5em; margin-top: 8px; font-size: 24px; } .wrapper--recruit .modal-content { display: block; padding: 16px 0; } .wrapper--recruit .modal-content__key { width: 100%; font-size: 19px; } .wrapper--recruit .modal-content__value { font-size: 13px; } .wrapper--recruit-detail .content { max-width: calc(100% - 24px * 2); margin: -48px auto 0; } .wrapper--recruit-detail .content__content { padding: 24px 24px 48px; } .wrapper--recruit-detail .faq-content { padding-bottom: 32px; } .wrapper--recruit-detail .faq-content__question { line-height: 1.7em; padding-bottom: 12px; font-size: 18px; } .wrapper--recruit-detail .faq-content__answer { margin-top: 12px; font-size: 13px; } .wrapper--recruit-detail .faq-content__answer img { display: block; width: calc(100% + 24px * 2); max-width: initial; margin: 48px 0 8px -24px; } .wrapper--recruit-detail .profile__title { font-size: 18px; } .wrapper--recruit-detail .profile__box { padding: 24px 20px; margin-top: 20px; } .wrapper--recruit-detail .profile__role { font-size: 13px; } .wrapper--recruit-detail .profile__name { padding-bottom: 16px; font-size: 15px; } .wrapper--recruit-detail .profile__description { margin-top: 16px; font-size: 13px; } .wrapper--recruit-detail .to-top-link .common-button { margin: 48px auto 72px; } .wrapper--news .content-box { margin-top: 0; margin-bottom: 80px; padding: 48px 20px; } .wrapper--news .category-container { margin-bottom: 15px; } .wrapper--news .category { padding: 6px 16px; margin-right: 10px; margin-bottom: 15px; font-size: 11px; } .wrapper--news .content { padding: 24px 40px 24px 0; } .wrapper--news .content__thumbnail-container { width: 90px; } .wrapper--news .content__information { padding-left: 12px; } .wrapper--news .content__date { margin-right: 12px; font-size: 13px; color: #1d2e87; } .wrapper--news .content__category { padding: 8px 16px; font-size: 11px; } .wrapper--news .content__title { line-height: 2em; margin-top: 8px; font-size: 13px; color: #222222; } .wrapper--news .content__description { display: none; } .wrapper--news .content__arrow-container { top: calc(50% - 10px); width: 30px; } .wrapper--news-detail .common-firstview-blue { padding-bottom: 100px; } .wrapper--news-detail .content { max-width: calc(100vw - 40px); margin: -50px auto 0; padding: 40px 25px; font-size: 13px; } .wrapper--news-detail .content__picture { margin: 0 auto 32px; } .wrapper--news-detail .content__introduction p, .wrapper--news-detail .content__content p { margin-top: 20px; } .wrapper--news-detail .content__introduction ul, .wrapper--news-detail .content__content ul { margin-top: 20px; } .wrapper--news-detail .content__introduction h1, .wrapper--news-detail .content__introduction h2, .wrapper--news-detail .content__content h1, .wrapper--news-detail .content__content h2 { line-height: 1.7em; margin-top: 40px; font-size: 18px; } .wrapper--news-detail .content__introduction h1:before, .wrapper--news-detail .content__introduction h2:before, .wrapper--news-detail .content__content h1:before, .wrapper--news-detail .content__content h2:before { top: 6px; bottom: 4px; } .wrapper--news-detail .content__introduction h3, .wrapper--news-detail .content__introduction h4, .wrapper--news-detail .content__introduction h5, .wrapper--news-detail .content__introduction h6, .wrapper--news-detail .content__content h3, .wrapper--news-detail .content__content h4, .wrapper--news-detail .content__content h5, .wrapper--news-detail .content__content h6 { margin-top: 28px; } .wrapper--news-detail .content__introduction h3, .wrapper--news-detail .content__content h3 { font-size: 17px; } .wrapper--news-detail .content__introduction h4, .wrapper--news-detail .content__content h4 { font-size: 16px; } .wrapper--news-detail .content__introduction h5, .wrapper--news-detail .content__content h5 { font-size: 15px; } .wrapper--news-detail .content__introduction h6, .wrapper--news-detail .content__content h6 { font-size: 14px; } .wrapper--news-detail .content__introduction img, .wrapper--news-detail .content__introduction iframe, .wrapper--news-detail .content__content img, .wrapper--news-detail .content__content iframe { margin: 28px auto 0; } .wrapper--news-detail .content__introduction blockquote, .wrapper--news-detail .content__content blockquote { margin: 28px auto 0; padding: 16px 20px; } .wrapper--news-detail .content__introduction hr, .wrapper--news-detail .content__content hr { margin: 28px auto 0; } .wrapper--news-detail .content__introduction table, .wrapper--news-detail .content__content table { margin: 28px auto 0; } .wrapper--news-detail .content__introduction td, .wrapper--news-detail .content__content td { padding: 6px 10px; } .wrapper--news-detail .content__introduction td:first-child, .wrapper--news-detail .content__content td:first-child { width: 60px; } .wrapper--news-detail .content .index { margin: 40px 0; } .wrapper--news-detail .content .share { margin-top: 32px; } .wrapper--news-detail .index { padding: 20px 20px 25px; } .wrapper--news-detail .index__title { padding-bottom: 14px; font-size: 18px; } .wrapper--news-detail .index__content { line-height: 1.7em; padding: 15px 0; font-size: 13px; } .wrapper--news-detail .share { padding: 36px 0 0; font-size: 13px; } .wrapper--news-detail .share__content-container { margin-top: 16px; } .wrapper--news-detail .share__content-container .share-content { margin: 0; } .wrapper--news-detail .share__content-container .share-content:nth-child(odd) { margin-right: 10px; } .wrapper--news-detail .share-content { width: calc((100% - 10px) / 2); height: 40px; } .wrapper--news-detail .share-content__icon { width: 24px; height: 24px; margin-right: 10px; } .wrapper--news-detail .share-content__title { font-size: 12px; } .wrapper--news-detail .other-contents { margin: 80px 0 112px; padding: 48px 0; } .wrapper--news-detail .other-contents__box { padding: 0 24px; } .wrapper--news-detail .other-contents__content-container { display: block; margin-top: 24px; padding-bottom: 0; border-bottom: none; } .wrapper--news-detail .to-top-link { margin-top: -16px; } .wrapper--news-detail .to-top-link .common-button { margin: 25px auto 0; } .wrapper--case .content-container { max-width: calc(100vw - 20px * 2); margin: 0 auto 80px; padding-bottom: 50px; } .wrapper--case .content-container__box { display: block; padding: 50px 24px 0; border-bottom: none; } .wrapper--case .content-container__box .common-link-card:nth-child(n + 4) { margin-top: 0; } .wrapper--case .content-container .common-pager { padding-top: 0; } .wrapper--case-detail .common-firstview-blue { padding-bottom: 72px; } .wrapper--case-detail .content { max-width: calc(100vw - 40px); margin: -36px auto 0; } .wrapper--case-detail .content__content { padding: 32px 24px 40px; font-size: 13px; } .wrapper--case-detail .content__content *:first-child { margin-top: 0; } .wrapper--case-detail .content__content h1 { margin-top: 28px; font-size: 21px; } .wrapper--case-detail .content__content h2 { margin-top: 28px; font-size: 18px; } .wrapper--case-detail .content__content h2:before { top: 14px; width: 16px; height: 1px; } .wrapper--case-detail .content__content p { margin-top: 12px; } .wrapper--case-detail .content__content img { margin: 32px auto 0; } .wrapper--case-detail .profile { line-height: 1.9em; padding: 0 24px; font-size: 14px; } .wrapper--case-detail .profile__box { display: block; padding: 40px 0 16px; } .wrapper--case-detail .profile__picture { display: block; width: 200px; margin: 0 auto; } .wrapper--case-detail .profile__information { margin-top: 0; padding: 16px 0; } .wrapper--case-detail .profile__row { display: block; } .wrapper--case-detail .profile__key { width: auto; } .wrapper--case-detail .profile__caution { font-size: 12px; } .wrapper--case-detail .other-contents { margin: 80px 0 112px; padding: 48px 0; } .wrapper--case-detail .other-contents__box { padding: 0 24px; } .wrapper--case-detail .other-contents__content-container { display: block; margin-top: 24px; padding-bottom: 0; border-bottom: none; } .wrapper--case-detail .to-top-link { margin-top: -16px; } .wrapper--case-detail .to-top-link .common-button { margin: 25px auto 0; } .wrapper--privacy .common-firstview { padding-right: 20px; padding-left: 20px; } .wrapper--privacy .common-firstview__title { letter-spacing: -0.05em; } .wrapper--privacy .content { max-width: calc(100vw - 20px * 2); margin: 0 auto 80px; padding: 40px 24px; font-size: 13px; } .wrapper--privacy .content__introduction { margin-bottom: 0; } .wrapper--privacy .content-content { padding: 32px 0 0; } .wrapper--privacy .content-content__key { line-height: 1.53em; font-size: 21px; } .wrapper--privacy .content-content__value { margin-top: 20px; } } @media (min-width: 1080px) and (max-width: 1440px) { .common-header__logo { top: 38px; left: 16px; } .common-header__logo .pixel-ratio-img { max-width: 180px; } .common-header__link-container { right: 16px; } .common-header__link { padding: 0 10px; font-size: 13px; } .common-header__external-link-container { margin-left: 6px; } .common-header__external-link-container .common-button { width: 100px; margin: 0 4px; font-size: 13px; } } @media (max-width: 1080px) { .common-header { height: 76px; } .common-header__background { display: none; } .common-header__logo { top: 20px; left: 16px; } .common-header__logo .pixel-ratio-img { max-width: 234px; } .common-header__link-container { position: relative; top: auto; right: auto; display: block; height: auto; padding: 80px 24px 48px; } .common-header__link { display: block; padding: 20px 0; border-top: 1px solid #bbbbbb; } .common-header__link.has-sublinks:not(.has-inner-links):before, .common-header__link.has-sublinks:not(.has-inner-links):after { position: absolute; top: calc(50% - 12px); right: 12px; width: 1px; height: 25px; background-color: black; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; content: ""; } .common-header__link.has-sublinks:not(.has-inner-links):after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .common-header__link.has-sublinks:not(.has-inner-links).is-open:before { -webkit-transform: scaleY(0); transform: scaleY(0); } .common-header__external-link-container { justify-content: space-between; margin-top: 32px; margin-left: 0; } .common-header__external-link-container .common-button { width: calc((100% - 16px) / 2); height: 56px; margin: 0; } .common-header__social { display: block; } .common-header__social .pixel-ratio-img { max-width: 36px; margin-left: 24px; } .common-header.is-open { -webkit-transform: none !important; transform: none !important; } .common-header.is-open .common-menu-button__line:nth-child(1) { -webkit-transform: translateY(8px) rotate(38deg) scale(1.25); transform: translateY(8px) rotate(38deg) scale(1.25); } .common-header.is-open .common-menu-button__line:nth-child(2) { -webkit-transform: scaleX(0); transform: scaleX(0); } .common-header.is-open .common-menu-button__line:nth-child(3) { -webkit-transform: translateY(-8px) rotate(-38deg) scale(1.25); transform: translateY(-8px) rotate(-38deg) scale(1.25); } .common-header.is-open .common-menu { opacity: 1; pointer-events: auto; } .common-header-sub-links { position: relative; top: auto; right: auto; left: auto; height: 0; padding: 0; font-size: 14px; background-color: transparent; opacity: 1; -webkit-transform: none; transform: none; pointer-events: auto; overflow: hidden; transition: height 0.3s; } .common-header-sub-links__box { display: block; padding: 0 0 40px 24px; } .common-header-sub-links__top { display: block; width: 100%; padding: 12px 0; } .common-header-sub-links__top-arrow { display: none; } .common-header-sub-links__content-container { display: block; padding-left: 0; } .common-header-sub-links__content-container:before { display: none; } .common-header-sub-links__sub-link { display: block; width: 100%; padding: 12px 0; border-bottom: none; } .common-header-sub-links__sub-link:not(:nth-child(3n)) { margin-right: 0; } .common-header-sub-links__sub-link:nth-child(n + 4) { margin-top: 0; } .common-header-sub-links__sub-link.is-coming-soon { padding-bottom: 0; } .common-header-sub-links__sub-link.is-coming-soon small { display: inline; margin-top: 0; margin-bottom: 0; font-size: 14px; } .common-header-sub-links__sub-link.is-coming-soon:after { display: inline-block; font-size: 11px; padding: 0; margin-left: 8px; } .common-header-sub-links__sub-link-arrow { display: none; } .common-menu-button { position: absolute; top: 0; right: 0; padding: 28px 15px; } .common-menu-button__line { width: 35px; height: 1px; background-color: #222222; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .common-menu-button__line:not(:first-child) { margin-top: 7px; } .common-menu { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding-bottom: 32px; background-color: white; opacity: 0; pointer-events: none; transition: opacity 0.3s; overflow: scroll; -webkit-overflow-scrolling: touch; } } @media (min-width: 768px) and (max-width: 1140px) { .common-footer__link-container-container { margin-left: 48px; } .wrapper--index .solution__button-container .common-button { margin-top: 24px; } .wrapper--index .news-content__arrow-container { display: none; } .wrapper--index .recruit .recruit__picture { width: 480px; } .wrapper--index .recruit .recruit__information { padding-right: 24px; margin-left: 24px; } .wrapper--index .recruit .recruit__information br { display: none; } .wrapper--about .achievement-content__main-container { padding-right: 48px; padding-left: 48px; } .wrapper--about .achievement-content-main__value { font-size: calc(48px * 0.8); } .wrapper--about .achievement-content-main__value strong { font-size: calc(80px * 0.8); } } @media (min-width: 768px) and (max-width: 960px) { .common-case-study-content-container.is-single .common-case-study-content__picture-container { width: 200px; } } @media (max-width: 360px) { .wrapper--recruit .content-content__button { padding-right: 40px; padding-left: 16px; } .wrapper--news .content__thumbnail-container { width: 70px; } } /*============================================== 2022.08.29 追加 ==============================================*/ .form__container { padding: 100px 0; text-align: center; } @media (max-width: 768px) { .form__container { padding: 20px 0; } } /*============================================== 2023.05.31 追加 ==============================================*/ .wrapper--about .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 160px 32px 234px; background-color: rgba(29, 46, 135, 0.95); z-index: 3; overflow: scroll; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .wrapper--about .modal.is-show { opacity: 1; pointer-events: auto; } .wrapper--about .modal__close { position: absolute; top: -88px; right: 0; cursor: pointer; } .wrapper--about .modal__box { position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 100px; background-color: white; } .wrapper--about .modal__title { padding: 56px 100px 32px; font-size: 44px; color: #1d2e87; border-bottom: 1px solid #bbbbbb; } .wrapper--about .modal__content-container-container { padding: 0 100px; } .wrapper--about .modal-meta { display: flex; align-items: center; padding: 48px 0 36px; border-bottom: 1px solid #bbbbbb; } .wrapper--about .modal-meta__key { display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: 8px 24px; margin-right: 18px; font-size: 13px; color: white; background-color: #0087d5; } .wrapper--about .modal-meta__value { color: #1d2e87; font-size: 32px; } .wrapper--about .modal-content { display: flex; padding: 36px 0; border-bottom: 1px solid #bbbbbb; } .wrapper--about .modal-content__key { line-height: 2em; flex-shrink: 0; width: 170px; font-size: 18px; color: #1d2e87; } .wrapper--about .modal-content__value { line-height: 2.1em; font-size: 15px; } .wrapper--about .modal-content__value p:not(:first-child) { margin-top: 28px; } .wrapper--about .modal, .wrapper--about .is-zoom { display: block; } .wrapper--about .member-content__book { line-height: 2em; margin-top: 8px; font-size: 14px; } @media (max-width: 767px) { .wrapper--about .member-content__book { margin-top: 4px; font-size: 12px; } } .wrapper--about .content-content__button.js-recruit-content-button { padding-left: 36px; font-size: 14px; padding-bottom: 16px; color: #1D2E87; cursor: pointer; position: relative; top: -22px; } @media (max-width: 767px) { .wrapper--about .content-content__button.js-recruit-content-button { padding-left: 28px; font-size: 12px; padding-bottom: 16px; top: -18px; } } .wrapper--about .works-content { display: flex; padding: 50px 100px; } .wrapper--about .works-content__picture { flex-shrink: 0; width: 200px; box-shadow: 0 0 50px 0 rgba(29, 46, 135, 0.2); } .wrapper--about .works-content__information { margin-top: -8px; margin-left: 48px; } .wrapper--about .works-content__title { line-height: 1.8em; font-size: 24px; color: #0078bd; } .wrapper--about .works-content__meta { line-height: 2em; margin-top: 20px; font-size: 13px; } .wrapper--about .works-content__subtitle { line-height: 2em; margin-top: 28px; font-size: 18px; } .wrapper--about .works-content__description { line-height: 2.1em; margin-top: 16px; font-size: 15px; } @media (max-width: 767px) { .wrapper--about .works-content { display: block; padding: 30px 24px; } .wrapper--about .works-content__picture { display: block; width: 150px; margin: 0 auto; } .wrapper--about .works-content__information { margin-top: 28px; margin-left: 0; } .wrapper--about .works-content__title { font-size: 16px; } .wrapper--about .works-content__meta { margin-top: 20px; font-size: 13px; } .wrapper--about .works-content__subtitle { margin-top: 16px; font-size: 14px; } .wrapper--about .works-content__description { margin-top: 8px; font-size: 13px; } } /*----------------------------------- 2023/07/04 追記　about pageのコンタクト位置入換 -----------------------------------*/ .about-content-wrap { padding: 220px 0 0; } @media (max-width: 767px) { .about-content-wrap { padding: 100px 0 0; } } .wrapper--about .message { padding: 110px 0 220px; } @media (max-width: 767px) { .wrapper--about .message { padding: 50px 0 100px; } } /*---------------------------------------------------------- 202307 無料相談をする ボタン ----------------------------------------------------------*/ .consultation { display: flex; justify-content: center; align-items: center; position: fixed; bottom: 250px; right: 15px; writing-mode: vertical-rl; background-color: #121e56; color: #fff; letter-spacing: 4px; font-weight: bold; padding: 64px 16px; transition: 0.3s; } .consultation:hover { background-color: #2295da; transition: 0.3s; } @media (max-width: 767px) { .consultation { font-size: 12px; padding: 32px 12px; bottom: 70px; } } /*---------------------------------------------------------- 202401 お申し込み iframe ----------------------------------------------------------*/ .wrapper--news-detail .content__content .iframe__content iframe { height: auto; } .wrapper--case .content-container .content-customer-only { font-size: 12px; line-height: 1.8; text-align: left; margin-bottom: 52px; margin-top: 40px; } /*---------------------------------------------------------- 202403 固定ページ テンプレ追加（コンテンツ幅1100px） ----------------------------------------------------------*/ .wrapper--news-detail.wrapper--siyo .content.has-margin { max-width: 1100px; } /*---------------------------------------------------------- 202404 固定ページ 資料ダウンロード – TOP ----------------------------------------------------------*/ .document__download .document__tmb--list__item { display: flex; align-items: center; background-color: #f5f5f5; padding: 32px; } @media (max-width: 767px) { .document__download .document__tmb--list__item { flex-direction: column; padding: 24px; } } .document__download .document__tmb--list__item img { width: 100%; max-width: 200px; margin: 0 auto; } @media (max-width: 767px) { .document__download .document__tmb--list__item img { max-width: 400px; } } .document__download .document--list__text { margin-left: 40px; } @media (max-width: 767px) { .document__download .document--list__text { margin-left: 0; } } .document__download .document__tmb--list__item h3 { margin-top: 0; } @media (max-width: 767px) { .document__download .document__tmb--list__item h3 { margin-top: 16px; font-size: 16px; } } .wrapper--news-detail .content__content .document__download .download__btn { background-color: #1d2e87; color: #fff; display: block; padding: 4px 0; width: 100%; max-width: 260px; text-align: center; } .wrapper--news-detail .content__introduction .document__download li:before, .wrapper--news-detail .content__content .document__download li:before { display: none; } .wrapper--news-detail .content__introduction .document__download ul, .wrapper--news-detail .content__content .document__download ul { margin-top: 0; } .document__download .document--list { display: flex; flex-wrap: wrap; } .document__download .document--list .document--list__item { display: flex; align-items: flex-start; background-color: #f5f5f5; padding: 24px; margin-top: 24px; width: 100%; max-width: 438px; } @media (max-width: 767px) { .document__download .document--list .document--list__item { flex-direction: column; } } .document__download .document--list .document--list__item:nth-child(2n) { margin-left: 24px; } @media (max-width: 767px) { .document__download .document--list .document--list__item:nth-child(2n) { margin-left: 0; } } .document__download .document--list .document--list__item h3 { font-size: 16px; margin-top: 0; } @media (max-width: 767px) { .document__download .document--list .document--list__item h3 { margin-top: 16px; } } .document__download .document--list .document--list__item .document--list__text { margin-left: 24px; } @media (max-width: 767px) { .document__download .document--list .document--list__item .document--list__text { margin-left: 0; } } .document__download .document--list .document--list__item img { width: 100%; max-width: 132px; margin: 0 auto; } @media (max-width: 767px) { .document__download .document--list .document--list__item img { max-width: 400px; } } .document__download .document--list .document--list__item p { font-size: 14px; } /*---------------------------------------------------------- 202405 ヘッダー ----------------------------------------------------------*/ .common-header-sub-links__sub-link:nth-child(7) { padding-bottom: 11px; } /*---------------------------------------------------------- 20240514 資料ダウンロード 詳細 ----------------------------------------------------------*/ .document__download.detail .document--list .document--list__item img { max-width: initial; margin: 0 auto 24px; } .document__download.detail .document--list .document--list__item { background-color: transparent; display: block; width: 50%; } @media (max-width: 1080px) { .document__download.detail .document--list .document--list__item { width: 100%; margin-left: auto; margin-right: auto; } } .document__download.detail .document--list .document--list__item:nth-child(2n) { margin-left: inherit; } @media (max-width: 1080px) { .document__download.detail .document--list .document--list__item:nth-child(2n) { margin-left: auto; } } /*---------------------------------------------------------- 202412 固定ページ 私たちについて – ABOUT Value ----------------------------------------------------------*/ .wrapper--about .introduction-content__content-container .flex { display:flex; justify-content: space-between; } @media (max-width: 1080px) { .wrapper--about .introduction-content__content-container .flex { flex-direction: column; } } .wrapper--about .introduction-content__content-container .flex .introduction-content__title-h4 { position: relative; color: #0078BD; font-size: 26px; margin-bottom: 16px; padding-left: 26px; } @media (max-width: 767px) { .wrapper--about .introduction-content__content-container .flex .introduction-content__title-h4 { font-size: 18px; } } .wrapper--about .introduction-content__content-container .flex .introduction-content__title-h4:after { position: absolute; content: ""; background-color: #0078BD; height: 1px; width: 8px; margin: auto; top: 0; bottom: 0; left: 6px; } .wrapper--about .introduction-content__content-container .flex .introduction-content__list { font-size: 24px; margin-bottom: 40px; } @media (max-width: 767px) { .wrapper--about .introduction-content__content-container .flex .introduction-content__list { font-size: 16px; } } .wrapper--about .introduction-content__content-container .flex .introduction-content__item { margin-bottom: 14px; line-height: 1.9em; padding-left: 60px; position: relative; } @media (max-width: 767px) { .wrapper--about .introduction-content__content-container .flex .introduction-content__item { padding-left: 50px; } } .wrapper--about .introduction-content__content-container .flex .introduction-content__item:after { position: absolute; content: "・"; top: 0; left: 20px; } .wrapper--about .introduction-content__content-container .flex .introduction-content__item:last-child { margin-bottom: 0; } .wrapper--about .introduction-content__content-container .flex .introduction-content__content-img { max-width: 344px; padding-top: 30px; } @media (max-width: 1080px) { .wrapper--about .introduction-content__content-container .flex .introduction-content__content-img { margin: auto; padding-top: 0; } } @media (max-width: 767px) { .wrapper--about .introduction-content__content-container .flex .introduction-content__content-img { max-width: 264px; } } /*----------------------------------------------------------------- 20250115 追加CSS ----------------------------------------------------------------- */ .container { max-width: 980px; margin: 0 auto; padding: 0 22px; } /* ============================================================ セミナーページ（/event/）スタイル ============================================================ */ /* ページ全体のラッパー */ .event-page { position: relative; z-index: 10; max-width: 1080px; margin: 0 auto; padding: 40px 20px 80px; } /* ▼ タブメニュー ▼ */ .event-tab-container { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; } .event-tab { display: inline-block; padding: 8px 32px; border: 1px solid #38b5c4; background: #fff; color: #38b5c4; font-size: 0.85rem; font-weight: bold; text-decoration: none; border-radius: 2px; transition: all 0.2s; } .event-tab:hover, .event-tab.is-active { background: #1a2b5a; border-color: #1a2b5a; color: #fff; } /* ▼ セクション ▼ */ .event-section { margin-bottom: 72px; } .event-section__title { font-size: 1.6rem; font-weight: bold; color: #1a2b5a; text-align: center; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 2px solid #1a2b5a; } .event-section__subtitle { text-align: center; color: #666; font-size: 0.9rem; margin-bottom: 32px; } .event-section__empty { text-align: center; color: #999; padding: 40px 0; } /* アーカイブセクションは背景色を少し変える */ .event-section--archive { background: #f7f9fc; border-radius: 8px; padding: 40px 32px; } /* ▼ カードグリッド ▼ */ .event-card-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .event-card-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .event-card-list { grid-template-columns: 1fr; } } /* ▼ カード1枚 ▼ */ .event-card { background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .event-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } /* サムネイル */ .event-card__thumbnail { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #e8edf5; } .event-card__thumbnail-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .event-card:hover .event-card__thumbnail-img { transform: scale(1.04); } .event-card__thumbnail-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #bbb; font-size: 0.85rem; } /* カード本文 */ .event-card__body { padding: 24px 20px 20px; flex: 1; display: flex; flex-direction: column; } /* バッジ（カテゴリーラベル） */ .event-card__badge-wrapper { margin-bottom: 12px; } .event-card__badge { display: inline-block; padding: 4px 12px; font-size: 0.72rem; font-weight: bold; border-radius: 20px; border: 1px solid currentColor; background: #fff; } .event-card__badge--live { color: #38b5c4; } .event-card__badge--archive { color: #4a90e2; } .event-card__date { font-size: 0.8rem; color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .event-card__date-label { font-weight: 700; font-size: 0.75rem; } .event-card__date-value { color: #666; } .event-card__title { font-size: 1rem; font-weight: bold; color: #1a2b5a; line-height: 1.5; margin-bottom: 16px; flex: 1; } /* 矢印アイコン */ .event-card__arrow-container { display: flex; justify-content: flex-end; padding: 0 20px 20px; margin: 0; margin-top: auto; } .event-card__arrow { width: 24px; height: auto; } /* Override: Seminar Card Updates */ .event-tab { padding: 8px 32px; border: 1px solid #38b5c4; border-radius: 2px; color: #38b5c4; transition: all 0.2s; background: #fff; } .event-tab:hover, .event-tab.is-active { background: #1a2b5a; border-color: #1a2b5a; color: #fff; } .event-card { border-radius: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.05); } .event-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .event-card__body { padding: 24px 20px 20px; display: flex; flex-direction: column; } .event-card__badge-wrapper { margin-bottom: 12px; } .event-card__badge { position: static; padding: 4px 12px; border-radius: 20px; border: 1px solid currentColor; background: #fff; } .event-card__badge--live { color: #38b5c4; background: #fff; } .event-card__badge--archive { color: #4a90e2; background: #fff; } .event-card__date { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #333; margin-bottom: 10px; } .event-card__date-label { font-weight: 700; font-size: 0.75rem; } .event-card__date-value { color: #666; } .event-card__title { font-size: 1rem; margin-bottom: 16px; flex: 1; } .event-card__arrow-container { padding: 0 20px 20px; margin-top: auto; display: flex; justify-content: flex-end; } .event-card__arrow { width: 24px; } /* Override v2: User requested changes */ .event-page { padding: 0px 20px 80px !important; } .event-tab-container { margin-bottom: 28px !important; gap: 0 !important; } .event-tab { margin-right: 20px !important; margin-bottom: 20px !important; font-size: 13px !important; padding: 8px 24px !important; } .event-section__title { margin-bottom: 48px !important; padding-bottom: 24px !important; border-bottom: 1px solid #1a2b5a !important; text-align: left !important; } .event-card { border-radius: 6px !important; } .event-section--archive { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Override v3: Tab colors and remove z-index */ .event-page { z-index: auto !important; } .event-tab.event-tab--all { border-color: #1a2b5a !important; color: #1a2b5a !important; } .event-tab.event-tab--all:hover, .event-tab.event-tab--all.is-active { background-color: #1a2b5a !important; color: #fff !important; } .event-tab.event-tab--live { border-color: #0087d5 !important; color: #0087d5 !important; } .event-tab.event-tab--live:hover, .event-tab.event-tab--live.is-active { background-color: #0087d5 !important; color: #fff !important; } .event-tab.event-tab--archive { border-color: #38b5c4 !important; color: #38b5c4 !important; } .event-tab.event-tab--archive:hover, .event-tab.event-tab--archive.is-active { background-color: #38b5c4 !important; color: #fff !important; } /* Override: event-section__title color and border */ .event-section__title { color: #1d2e87 !important; border-bottom: 1px solid #bbbbbb !important; } /* Override: Seminar detail page badge colors */ .common-firstview-blue__category.event-status-badge--live { background-color: #0087d5 !important; } .common-firstview-blue__category.event-status-badge--archive { background-color: #38b5c4 !important; } /* Override: Unified Seminar Badge Colors (Matching Tabs) */ .event-card__badge--live, .event-status-badge--live { background-color: #0087d5 !important; color: #fff !important; border: none !important; } .event-card__badge--archive, .event-status-badge--archive { background-color: #38b5c4 !important; color: #fff !important; border: none !important; } /* Override: UI fine-tuning for border-radius */ .event-tab { border-radius: 0 !important; } .event-card { border-radius: 4px !important; } /* --- Event Page White Background Settings --- */ .js-event-container { visibility: hidden; position: relative; margin-top: 28px; margin-bottom: 150px; padding: 90px 32px; background-color: white; box-sizing: content-box; } .js-event-container.is-show { visibility: visible; } .js-event-container .content-box__box { max-width: 980px; margin: 0 auto; } @media screen and (max-width: 768px) { .js-event-container { margin-top: 0; margin-bottom: 80px; padding: 48px 20px; } }