:root { /* ====================================== 1. プライマリーカラー（主要色） ====================================== */ --color-primary: #212121; /* ブランドの濃い色 */ --color-primary-light: #5c6276; /* プライマリーの軽い色 (ホバー時など) */ --color-primary-accent: #208ed1; /* プライマリーの濃い色 (ホバー時など) */ /* ====================================== 2. セカンダリーカラー（補助色） ====================================== */ --color-secondary: #6c757d; /* 控えめなグレーや緑など */ /* ====================================== 3. テキストカラー（文字色） ====================================== */ --color-text-base: #212121; /* 本文の基本色 (濃いグレー/ほぼ黒) */ --color-text-light: #5c6276; /* 控えめな文字色 (サブテキストなど) */ --color-text-accent: #00979c; /* 控えめな文字色2 (サブテキストなど) */ --color-text-accent: #00979c; /* アクセントになる文字色 (サブ見出しなど) */ /* ====================================== 4. 背景色 ====================================== */ --color-background-body: #ffffff; /* 要素の背景色 (白) */ --color-background-base: #f2f8f8; /* メインの背景色 (セクションの区切りなど) */ --color-background-light: #f5f7f8; /* 薄い背景色 (セクションの区切りなど) */ } body { font-family: YuGothic, 游ゴシック, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } .u-desktop { display: block; } .u-mobile { display: none; } /* リキッドレイアウト対応 */ html { font-size: 16px; } *, *::before, *::after { box-sizing: border-box; } /* Remove default padding */ ul, ol { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } /* Set core root defaults */ /* Set core body defaults */ body { counter-reset: number 0; font-weight: 400; line-height: 1.5; min-height: 100vh; text-rendering: optimizeLegibility; color: var(--color-text-base); } /* Remove list styles on ul, ol elements with a class attribute */ ul, ol { list-style: none; } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } img { display: block; max-width: 100%; width: 100%; } input, button, textarea, select { font: inherit; } img:not([alt]) { filter: blur(10px); } /* フォームリセット */ input, button, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; } textarea { resize: vertical; } input[type=checkbox], input[type=radio] { display: none; } input[type=submit], input[type=button], label, button, select { cursor: pointer; } select::-ms-expand { display: none; } a { -webkit-text-decoration: none; color: inherit; text-decoration: none; transition: opacity 0.3s ease-in-out; } a:hover { opacity: 0.7; } a[href^="tel:"] { pointer-events: none; } .block-flex { display: flex; } .mv { height: calc(100vh - 5rem); margin-top: 5rem; min-height: 43.75rem; position: relative; z-index: 1; /* background-size: cover; background-position: unset; padding-top: 80px; background-attachment: fixed; background-color: var(--middle_color); display: flex; align-items: center; justify-content: center; position: relative; margin: 0px; */ } .mv__inner { height: inherit; min-height: inherit; /* width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; position: relative; */ } .mv__swiper, .mv__swiper picture, .mv__swiper .swiper-img, .mv__swiper .swiper-img img { height: inherit; min-height: inherit; } .mv__swiper .swiper-img img { -o-object-fit: cover; object-fit: cover; width: 100%; object-position: center center; } .mv__inner .mv__title-wrap { width: fit-content; z-index: 50; color: #fff; position: absolute; top: 24vh; bottom: auto; left: 10%; animation: slideIn 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .mv__inner .mv__title p { font-size: 3.25em; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; line-height: 1.5; margin: 0; letter-spacing: 0.08em; color: #fff; font-weight: 400; font-style: normal; font-family: "Sawarabi Gothic", sans-serif; } .mv__inner .mv__title__caption { font-size: 1em; margin-top: 1em; margin-bottom: 0px; line-height: 1.75; font-family: YuGothic, 游ゴシック, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif; } .mv__inner .mv__title__caption p { margin: 0; font-weight: normal; } .mv__inner .mv__title-wrap:after { content: ""; display: block; width: 100%; height: 100%; opacity: 0.8; position: absolute; top: 0; left: 0; z-index: -1; } .container_01 { margin: 0; padding: 0; height: 300px; display: flex; justify-content: end; align-items: center; overflow: hidden; -webkit-animation: shakeVertical 5s infinite; position: absolute; top: calc(100% - 300px); right: 31px; z-index: 900; } .scroll-down_01 { position: relative; width: 200px; height: 200px; color: #fff; font-family: serif; text-decoration: none; } .circle-text_01 { cursor: default; position: absolute; width: 100%; height: 100%; animation: rotate 20s linear infinite; } .circle-text_01 span { position: absolute; left: 50%; font-size: 16px; transform-origin: 0 100px; } .arrow_01 { position: absolute; top: 50%; left: 50%; width: 30px; height: 50px; transform: translate(-50%, -50%); animation: scroll_01 3s infinite; } .arrow_01::before { content: ""; position: absolute; top: 0; left: 50%; height: 100%; width: 1px; background-color: #fff; transform: translateX(-50%); } .arrow_01::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 12px; height: 12px; border-bottom: 1px solid #fff; transform: translateX(-50%) rotate(-45deg); } .concept { background-color: var(--color-background-base); } .concept__inner { display: flex; justify-content: space-between; } .concept__title { flex-shrink: 0; width: 16.75rem; } .concept__section { display: flex; flex-direction: column; gap: 5rem; margin-top: 2.6875rem; } .concept__heading { font-size: 2.25rem; font-weight: bold; letter-spacing: 0.1em; } .concept__subheading { color: var(--color-text-accent); font-size: 1.25rem; font-weight: bold; letter-spacing: 0.1em; margin-top: 0.625rem; text-transform: uppercase; font-family: "Archivo", sans-serif; } .concept__text { background-color: #fff; font-size: 1.125rem; font-weight: 500; line-height: 1.6; margin-top: 1.5rem; padding: 2.5rem 1.875rem; } .concept__list-item { font-size: 1.125rem; font-weight: 500; line-height: 1.6; padding-left: 1.875rem; position: relative; } .concept__list-item:not(:first-child) { margin-top: 0.5rem; } .concept__list-item::before { color: var(--color-text-accent); content: counter(number); counter-increment: number 1; font-size: 1.375rem; font-weight: bold; left: 0; position: absolute; top: -0.05rem; font-family: "Archivo", sans-serif; } .greeting { background-color: #fff; } .greeting__content { margin-top: 5rem; display: flex; } .greeting__image { max-width: 25rem; margin-right: 3rem; } .greeting__image img { -o-object-fit: cover; aspect-ratio: 500 / 610; object-fit: cover; width: 100%; height: auto; display: block; } .greeting__text-content { margin-left: auto; } .greeting__text { line-height: 1.8; } .greeting__name { font-size: 1.25rem; font-weight: bold; margin-top: 2.5rem; text-align: right; } .history { background-color: var(--color-background-base); } .history__content { display: flex; gap: 2.375rem; justify-content: space-between; margin-top: 5rem; } .history__text-content { width: 53.5714%; } .history__para { line-height: 1.8; margin: 5rem 0 3rem; } .history__table { width: 100%; /* border-collapse: separate!important; */ max-width: 100%; } .history__table tr:last-child { border: none; } .history__table td:first-child { padding: 30px 0 30px 20px; line-height: 1.6; width: 11.5rem; border: none; color: var(--color-primary-accent); font-weight: 700; } .history__table td:nth-child(2n) { width: calc(100% - 200px); padding-left: 20px; border: none; } .history__table tr { border-bottom: 1px solid #d8d8d8; } .history__img-div { justify-content: center; gap: 40px; text-align: center; margin: 4rem 0; } .history__img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; } .history__img-label { line-height: 1.6; margin-top: 10px; } .company-info { background-color: var(--color-background-base); overflow: hidden; } .company-info__inner { background-color: #fff; margin: 0 auto; max-width: 70rem; padding: 7.5rem 8.125rem 6.25rem; position: relative; } .company-info__inner::after { background-color: #fff; content: ""; height: 100%; left: calc(50% + 35rem); position: absolute; top: 0; width: 100vw; } .company-info__inner table { margin-top: 5rem; } .company-info__inner tr { align-items: flex-start; border-top: 1px solid #d8d8d8; display: flex; padding: 1.25rem 1.25rem 1.25rem 0; } .company-info__inner td:first-child { flex-shrink: 0; font-weight: bold; padding-left: 0.3125rem; position: relative; width: 7.5rem; } .company-info__inner td:first-child::before { background-color: var(--color-primary-accent); content: ""; height: 0.1875rem; left: 0; position: absolute; top: -1.375rem; width: 100%; } .company-info__inner td:nth-child(2) { display: flex; justify-content: space-between; line-height: 1.6; padding-left: 3.75rem; width: 100%; } .access { position: relative; } .access::before { background-color: var(--color-background-base); content: ""; height: 100%; left: 0; position: absolute; right: calc(50% + 50vw); top: 0; width: 50vw; z-index: -1; } .access__inner { background-color: var(--color-background-base); margin: 0 auto; max-width: 70rem; padding: 7.5rem 8.125rem 7.5rem 0; width: 100%; } .access__info { color: #212121; display: flex; flex-direction: column; gap: 1rem; gap: 1.875rem; margin-top: 5rem; } .access__block { line-height: 1.8; } .access__heading { font-weight: bold; } .access__text { font-size: 0.875rem; line-height: 1.6; } .access__map { height: 0; margin-top: 5rem; padding-top: 45.1515%; position: relative; width: 100%; } .access__map iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .producer { background-color: var(--color-background-base); } .producer__title { font-size: 2.5rem; font-weight: bold; text-align: center; } .producer__list { grid-gap: 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); margin-top: 5rem; } .producer__item a { background-color: #fff; box-shadow: 0 3px 6px 0 rgba(0, 30, 75, 0.16); display: block; font-size: 1.25rem; font-weight: bold; padding: 1.5625rem 0 1.5625rem 4.125rem; position: relative; } .producer__item a:hover { opacity: 1; } .producer__item a:hover::after { top: 60%; } .producer__item span { position: relative; } .producer__item a::before { color: var(--color-text-accent); content: "0" counter(number); counter-increment: number 1; font-family: "Archivo", sans-serif; font-size: 1.875rem; font-weight: bold; left: 1.25rem; position: absolute; top: 52%; transform: translateY(-50%); } .producer__item a::after { background: url(../images/business/yajirushi.svg) no-repeat center center/cover; content: ""; height: 0.75rem; position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); transition: top 0.2s ease-in; width: 0.625rem; } .process { overflow: hidden; } .section.process__step-item--g { background-color: var(--color-background-light); position: relative; } section.top_page_section:nth-child(2n) { background-color: var(--color-background-base); } .process__content { display: flex; gap: 3.8125rem; justify-content: space-between; margin-top: 5rem; } .process__inner:nth-child(odd) { background-color: var(--color-background-base); } .lower-page__wrap { width: 76%; } .process__image { -o-object-fit: cover; aspect-ratio: 491/276; object-fit: cover; width: 43.8393%; } .process__list { display: flex; flex-direction: column; gap: 3rem; margin-top: 5rem; } .process__item { border-bottom: 1px solid #707070; display: flex; gap: 2.5625rem; padding-bottom: 3rem; } .process__item-content { padding: 0 0.3125rem; } .process__title { color: #fff; font-size: 1.25rem; font-weight: bold; } .process__text { color: #fff; line-height: 1.8; margin-top: 1.25rem; } .process__item-image { -o-object-fit: cover; aspect-ratio: 378/213; max-width: 23.625rem; object-fit: cover; width: 100%; } .process__step-img { left: calc(50% + 8.1875rem); position: absolute; top: -6.25rem; width: 50vw; } .process__step-img img { -o-object-fit: cover; aspect-ratio: 589/867; height: 66.4375rem; object-fit: cover; width: 100%; } .section-btn.section-btn--b.process__btn { margin-top: 3.75rem; max-width: 28.1875rem; } .consultation__description { line-height: 1.8; margin-top: 5rem; } .consultation__list { display: flex; flex-direction: column; gap: 2.375rem; margin-top: 3.9375rem; } .consultation__item { border-radius: 0.625rem; background-color: #fff; box-shadow: 0 0 20px 0 rgba(0, 30, 75, 0.16); padding: 1.8125rem 1.875rem; position: relative; text-align: center; } .consultation__item:not(:last-child)::after { bottom: -1.5rem; content: ""; left: 50%; position: absolute; transform: translateX(-50%); width: 1.75rem; background: var(--color-primary-accent); height: calc(tan(60deg) * 15px / 2); clip-path: polygon(0 0, 100% 0, 50% 100%); } .consultation__step { font-size: 1.375rem; font-weight: bold; } .consultation__text { line-height: 1.8; margin-top: 0.9375rem; } .breadcrumb { align-items: center; background-color: #fff; display: flex; height: 2.75rem; justify-content: center; margin-top: 4.9375rem; } .breadcrumb__link { display: inline-block; font-size: 0.875rem; position: relative; transition: color 0.3s ease-in; } .breadcrumb__link:hover { color: var(--color-text-accent); opacity: 1; } .breadcrumb__link:not(:first-child) { margin-left: 2.375rem; } .breadcrumb__link:not(:first-child)::before { content: ''; width: 0.375rem; height: 0.375rem; border: 0; border-top: solid 0.125rem var(--color-primary-accent); border-right: solid 0.125rem var(--color-primary-accent); position: absolute; left: -1.375rem; top: 51%; transform: translateY(-50%) rotate(45deg); } .breadcrumb__link__current { pointer-events: none; } .breadcrumb__link__current:hover { color: var(--color-text-base); opacity: 1; } .page-header { background-color: #fff; /* overflow: hidden; */ padding-top: 3.8125rem; position: relative; } .page-header__article-subtitle { color: #fff; display: flex; font-family: "Antonio", sans-serif; font-size: 9.9375rem; font-weight: bold; justify-content: end; line-height: 1; margin-top: -12.5rem; text-transform: uppercase; } .page-header__title { font-size: 3.75rem; font-weight: bold; line-height: 1.5; z-index: 2; position: relative; } .page-header__subtitle { color: var(--color-text-accent); font-family: sans-serif; font-size: 1rem; font-weight: bold; margin-top: 0.375rem; text-transform: uppercase; } .page-header__background { margin-left: auto; margin-top: 4.5rem; position: relative; margin-right: calc(50% - 50vw); z-index: 1; } .page-header__background::before { background-color: var(--color-background-base); bottom: 0; content: ""; height: 47%; position: absolute; right: 50%; width: 100vw; } .page-header__background--d::before { background-color: #d4dae4; } .page-header__background--d::after { background-color: #d4dae4; bottom: -88%; content: ""; height: 50rem; left: calc(50% - 16.3125rem); position: absolute; transform: translateX(-50%); width: 100vw; width: 160vw; z-index: -1; } .page-header__image { -o-object-fit: cover; aspect-ratio: 1325/603; object-fit: cover; position: relative; width: 100%; } article { margin-top: 10px; } .page__title { font-size: 3rem; font-weight: bold; padding-top: 1.25rem; position: relative; } .page__title::before { background-color: var(--color-primary-light); content: ""; height: 0.125rem; left: 0; position: absolute; top: 0; width: 3.75rem; } .page__title--r { color: #fff; } .page__title--r::before { background-color: #fff; } .footer-btn-section { background-color: #fff; border-bottom: 0.0625rem solid #d1d5dd; padding: 5rem 0; } .footer-btn-section__inner { margin: 0 auto; max-width: 56.875rem; padding: 0 1.5625rem; width: 100%; } .footer-btn-section__list { display: flex; gap: 1.5625rem; justify-content: center; } .footer-btn-section__item { max-width: 16.875rem; width: 100%; } .footer-btn-section__link { border: 0.0625rem solid var(--color-primary-light); display: block; font-weight: 500; padding: 1.4375rem 0 1.4375rem 1.25rem; position: relative; } .footer-btn-section__link::before { content: ''; width: 1.0625rem; height: 1.0625rem; background: var(--color-primary); border-radius: 50%; position: absolute; right: 10%; top: 50%; margin: auto; transform: translateY(-50%); transition: right 0.2s ease-in; } .footer-btn-section__link::after { content: ''; width: 0.375rem; height: 0.375rem; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; position: absolute; right: 12.5%; top: 46%; margin: auto; transform: rotate(45deg); transition: right 0.2s ease-in; } .footer-btn-section__link:hover::before { right: 5%; } .footer-btn-section__link:hover::after { right: 7.5%; } .lower-page__heading { align-items: center; display: flex; gap: 2.5625rem; line-height: 1.25; } .lower-page__heading--c { display: flex; justify-content: center; } .lower-page__number { color: var(--color-text-accent); display: block; font-family: "Archivo", sans-serif; font-size: 3.125rem; font-weight: bold; margin-top: 0.3125rem; position: relative; } .lower-page__number::before { background-color: var(--color-text-accent); content: ""; height: 3.1875rem; position: absolute; right: -1.25rem; top: 50%; transform: translateY(-50%); width: 0.0625rem; } .lower-page__number--r { color: #fff; } .lower-page__number--r::before { background-color: #fff; } .lower-page__title { display: block; font-size: 3rem; font-weight: bold; } .lower-page__title--r { color: #fff; } .lower-page__text { color: var(--color-text-accent); font-size: 1.25rem; font-weight: bold; line-height: 1.6; } .lower-page__description { line-height: 1.8; margin-top: 1.875rem; } .process__step-item--g2 .lower-page__description { margin-top: 1.25rem; } .process__step-item--g2 .lower-page__annotation { font-size: 0.875rem; margin-top: 1.25rem; } body.is-scroll { overflow: hidden; } .wrap { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; } .section { padding: 7.5rem 0; } .inner-n { margin: 0 auto; max-width: 73.125rem; padding: 0 1.5625rem; width: 100%; } .inner-dn { margin: 0 auto; max-width: 56.875rem; padding: 0 1.5625rem; width: 100%; } .section-title { font-family: "Archivo", sans-serif; font-size: 4.25rem; font-weight: bold; line-height: 1; text-transform: uppercase; } .section-subtitle { color: var(--color-text-light); font-size: 1.25rem; font-weight: bold; line-height: 1.6; margin-top: 0.9375rem; } .section-title--r { color: #fff; } .section-subtitle--r { color: #fff; } .section-text { line-height: 1.8; } .section-btn, .section-btn--b { max-width: 22.5rem; width: 100%; } .section-btn a { background-color: #fff; border: 0.0625rem solid #fff; display: block; font-size: 1.125rem; font-weight: bold; padding: 1.6875rem 0 1.6875rem 1.875rem; position: relative; transition: 0.2s ease-in background-color, 0.2s ease-in color; } .section-btn a::before { content: ''; width: 1.875rem; height: 1.875rem; background: var(--color-primary-accent); border-radius: 50%; position: absolute; right: 9%; top: 50%; transform: translateY(-50%) translateX(0); transition: right 0.2s ease-in; } .section-btn a::after { content: ''; width: 0.625rem; height: 0.625rem; border: 0; border-top: solid 0.125rem #fff; border-right: solid 0.125rem #fff; position: absolute; right: 12.4%; top: 50%; transform: translateY(-50%) rotate(45deg); transition: right 0.2s ease-in; } .section-btn a:hover { /* background-color: transparent; border: 0.0625rem solid #fff; color: #212121; */ opacity: 1; } .section-btn a:hover::before { right: 4%; } .section-btn a:hover::after { right: 7.1%; } .section-btn--b a { background-color: var(--color-background-base); border: 0.0625rem solid var(--color-background-base); color: #212121; } .section-btn--b a:hover { /* background-color: transparent; */ /* border: 0.0625rem solid var(--color-primary); color: var(--color-text-base); */ } .recruit .section-btn--b a:hover { /* border: 0.0625rem solid #fff; color: #fff; */ } .interview .section-btn--b a:hover { /* background-color: transparent; border: 0.0625rem solid var(--color-primary); color: var(--color-text-base); */ } .interview { background-color: var(--color-background-light); overflow-x: clip; } .interview .producer__list { max-width: 64%; margin: 0 auto 5rem; grid-template-columns: repeat(2, 1fr); } .intervie__btn { margin-top: 2.5rem; } .interview__list { display: flex; flex-direction: column; gap: 4.6875rem; } .interview__item { margin-top: 5rem; align-items: center; display: flex; position: relative; } .interview__item:nth-child(even) { flex-direction: row-reverse; } .interview__content { background-color: #fff; position: relative; width: 58%; z-index: 1; } .interview__content::after { background-color: #fff; content: ""; height: 100%; position: absolute; top: 0; width: 100vw; z-index: -1; } .interview__item:nth-child(even) .interview__content { padding: 7.1875rem 9.25rem 7.1875rem 4.5625rem; } .interview__item:nth-child(even) .interview__content::after { left: calc(50% - 33.125rem); } .interview__item:nth-child(odd) .interview__content { padding: 7.1875rem 4.5625rem 7.1875rem 9.25rem; } .interview__item:nth-child(odd) .interview__content::after { right: calc(50% - 33.125rem); } .interview__title { color: var(--color-text-light); font-size: 1.25rem; font-weight: 700; } .interview__position { font-size: 1.125rem; font-weight: 500; line-height: 1.6; margin-top: 1.25rem; } .interview__text { font-size: 1rem; line-height: 1.8; margin-top: 1.5625rem; } .interview__image { box-shadow: 1.25rem 1.25rem 0 0 rgba(92, 98, 118, 0.15); margin-right: 0.9375rem; max-width: 27.5rem; position: relative; width: 100%; z-index: 1; } .interview__image img { -o-object-fit: cover; aspect-ratio: 440/500; object-fit: cover; width: 100%; } .recruit--interview { background: url(../images/top/parallax.webp) no-repeat center center/cover; } .contact-annotation, .contact-complete { background-color: var(--color-background-base); margin-top: 4.5625rem; } .contact-annotation__inner, .contact-complete__inner { margin: 0 auto; max-width: 50.4375rem; } .contact-annotation__lead { line-height: 1.8; text-align: center; } .contact-annotation__box { background-color: #fff; margin-top: 3.75rem; padding: 3.4375rem 0 3.125rem; } .contact-title { font-size: 1.5rem; font-weight: bold; line-height: 1.6; } .contact-title--phone { text-align: center; } .contact-annotation__phone-time { line-height: 1.8; margin-top: 0.9375rem; text-align: center; } .contact-annotation__phone-number { display: block; font-family: "Archivo", sans-serif; font-size: 3.75rem; font-weight: bold; margin-top: 0.9375rem; text-align: center; } .contact-complete p { line-height: 1.8; margin-top: 2.5rem; } .contact { background-color: #fff; } .contact__inner { margin: 0 auto; max-width: 56.875rem; padding: 0 1.5625rem; width: 100%; } .contact__form-wrapper { margin-top: 3.75rem; } .contact__form-wrap { margin-top: 3.4375rem; } .contact__form-wrap-list { margin-top: 2.625rem; } .contact__form-label-required { background-color: #d60808; border-radius: 0.125rem; color: #fff; display: inline-block; font-size: 0.8125rem; font-weight: 500; margin-left: 0.4375rem; padding: 0 0.3125rem; } .contact__form-input { display: flex; gap: 2.5rem; margin-top: 1.25rem; } .contact__form-input input[name=your-code], .contact__form-input input[name=your-prefecture] { margin-top: 1.25rem; width: 18.75rem; } .contact__form-input-label { display: block; } .contact__form-input input { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fafafa; border: 0.0625rem solid #bfc8d3; border-radius: 0.25rem; font-size: 1rem; line-height: 1; padding: 1rem; width: 100%; } .contact__form-input input:focus { outline: none; } .contact__form-radio { display: flex; gap: 1.875rem; margin-top: 1.875rem; } .contact__form-radio label { display: block; } .contact__form-radio input { display: none; } .contact__form-radio input + span { cursor: pointer; display: inline-block; font-size: 1rem; font-weight: 400; line-height: 1; padding: 0 0 0 2.125rem; position: relative; } .contact__form-radio input + span::before { background: #fafafa; border: 1px solid #bfc8d3; border-radius: 50%; content: ""; display: block; height: 1.5rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 1.5rem; } .contact__form-radio input + span::after { background: var(--color-primary-accent); border: 1px solid transparent; border-radius: 50%; content: ""; height: 1rem; left: 0.25rem; opacity: 0; padding: 0.125rem; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.3s; width: 1rem; } .contact__form-radio input:checked + span::before { border: 1px solid #16459a; } .contact__form-radio input:checked + span::after { opacity: 1; } .contact__form-textarea { margin-top: 1.25rem; } .contact__form-textarea textarea { -webkit-appearance: none; -moz-appearance: none; field-sizing: content; appearance: none; background-color: #fafafa; border: 0.0625rem solid #bfc8d3; border-radius: 0.25rem; font-size: 1rem; min-height: 13.1875rem; padding: 1rem; resize: none; width: 100%; } .contact__form-textarea textarea:focus { box-shadow: none; outline: none; } .contact__form-privacy { margin-top: 5rem; text-align: center; } .contact__form-privacy input { display: none; } .contact__form-privacy input + span { cursor: pointer; display: inline-block; font-size: 1rem; letter-spacing: 0.08em; line-height: 1.5; padding: 0 0 0 2rem; position: relative; } .contact__form-privacy input + span::before { background: #fff; border: 1px solid #bfc8d3; border-radius: 0.25rem; content: ""; display: block; height: 1.5rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 1.5rem; } .contact__form-privacy input + span::after { border-bottom: 0.1875rem solid #fff; border-left: 0.1875rem solid #fff; content: ""; display: block; height: 0.5rem; left: 0.3125rem; margin-top: -0.125rem; opacity: 0; position: absolute; top: 0.5rem; transform: rotate(-45deg); transition: 0.3s; width: 0.9375rem; } .contact__form-privacy input + span a { -webkit-text-decoration: underline; color: #3a87e2; font-weight: 500; text-decoration: underline; } .contact__form-privacy input:checked + span::before { background-color: var(--color-primary-accent); border: 1px solid var(--color-primary-accent); } .contact__form-privacy input:checked + span::after { opacity: 1; } .contact__form-submit { margin: 5rem auto 0; max-width: 22.5rem; position: relative; width: 100%; } .contact__form-submit:hover::after { right: 0.9375rem; } .contact__form-submit::after { background: url(../images/common/arrow-b.svg) no-repeat center center/cover; content: ""; height: 1.875rem; position: absolute; right: 1.875rem; top: 50%; transform: translateY(-50%); transition: 0.2s ease-in right; width: 1.875rem; } .contact__form-submit input { background-color: var(--color-background-base); border: 0.0625rem solid var(--color-primary); color: #fff; font-size: 1.125rem; font-weight: bold; max-width: 22.5rem; padding: 1.6875rem 0 1.6875rem 1.875rem; text-align: left; transition: 0.2s ease-in background-color, 0.2s ease-in color; width: 100%; } .contact__form-submit input:hover { background-color: transparent; border: 0.0625rem solid var(--color-primary); color: var(--color-text-base); opacity: 1; } .contact-complete-div .title { font-size: 24px; s font-weight: bold; margin-bottom: 60px; text-align: center; } .contact-complete-div .tel { padding: 1.1875rem 2.0625rem; width: 100%; margin: 3rem auto 0; border-top: 1px solid; text-align: center; } .cta-buttons__inner { display: flex; gap: 2.75rem; } .cta-buttons__item { max-width: 540px; margin: 5rem auto; width: 100%; } .cta-buttons__item--contact .cta-buttons__link { background-color: var(--color-primary-accent); color: #fff; transition: background-color 0.2s ease-in, border 0.2s ease-in; } .news-detail .cta-buttons__item--contact .cta-buttons__link { text-decoration: none; } .cta-buttons__link { display: block; font-size: 1.375rem; font-weight: bold; padding: 4rem 0 4rem 2.5rem; position: relative; } .cta-buttons__link::before { content: ''; width: 1.875rem; height: 1.875rem; background: #fff; border-radius: 50%; position: absolute; right: 6%; top: 50%; transform: translateY(-50%) translateX(0); transition: right 0.2s ease-in; } .cta-buttons__link::after { content: ''; width: 0.625rem; height: 0.625rem; border: 0; border-top: solid 0.125rem var(--color-primary-accent); border-right: solid 0.125rem var(--color-primary-accent); position: absolute; right: 8.2%; top: 50%; transform: translateY(-50%) rotate(45deg); transition: right 0.2s ease-in; } .footer { overflow-x: clip; } .footer__inner { position: relative; } .footer__nav-wrap { display: flex; margin-left: calc(50% - 50vw); width: 100vw; } .footer__company-info { background-color: var(--color-background-light); padding: 3.75rem 4.8125rem 2.0625rem 4.6875rem; position: relative; width: 36%; } .footer__logo { max-width: 20.375rem; width: 100%; } .footer__address { line-height: 1.8; margin-top: 2.5rem; } .footer__contact-btn { margin-top: 2.5rem; } .footer__contact-btn a { background-color: #fff; color: #212121; display: block; padding: 1.125rem 0; text-align: center; } .footer__nav-wrapper { background-color: var(--color-background-light); padding: 3.125rem 3.6875rem 1.9375rem 3.75rem; position: relative; width: 64%; } .footer__nav { display: flex; gap: 3.5rem; max-width: 50.0625rem; position: relative; width: 100%; } .footer__nav-item a { display: block; font-size: 1rem; line-height: 1.6; padding: 0.5625rem 0; padding-left: 0.9375rem; position: relative; } .footer__nav-item a::before { content: ''; width: 0; height: 0; position: absolute; top: 0; left: 0.25rem; bottom: 0; margin: auto; background: var(--color-primary-accent); height: calc(tan(60deg) * 10px / 2); width: 5px; clip-path: polygon(0 0, 100% 50%, 0 100%); } .footer__nav-item.upper a::before { background: none; content: ""; height: 0.5rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 0.3125rem; } .footer__nav-item.lower a::before { background: url(../images/common/keisen-bk.svg) no-repeat center center / cover; content: ""; height: 0.5rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 0.5rem; } .footer__nav-list-wrap { display: flex; gap: 3.5rem; } .footer__bottom { align-items: center; display: flex; gap: 3.125rem; justify-content: start; margin-top: 15.25rem; } .footer__privacy-policy { color: var(--color-text-accent); font-size: 0.875rem; line-height: 1.6; } .footer__copyright { font-size: 0.875rem; line-height: 1.6; } .footer__scroll-top { border-radius: 50%; bottom: 3.75rem; box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.4); opacity: 0; pointer-events: none; position: fixed; right: 2.875rem; transition: opacity 0.3s ease-in-out, bottom 0.3s ease-in-out; transition: opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s ease; visibility: hidden; z-index: 10; } .footer__scroll-top.is-visible { opacity: 1; pointer-events: auto; visibility: visible; } .footer__scroll-top img { width: 3.75rem; } .footer__socials { display: flex; gap: 1rem; margin-top: 1.5rem; justify-content: center; } .layout-header { left: 0; position: fixed; right: 0; top: 0; z-index: 1000; } .header { background-color: #fff; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1); height: 5rem; } .header::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent); bottom: -0.25rem; content: ""; height: 0.25rem; left: 0; pointer-events: none; position: absolute; width: 100%; z-index: 1000; } .header__inner { display: flex; height: inherit; justify-content: space-between; padding-left: 2.375rem; } .header__logo { height: inherit; max-width: 18rem; width: 100%; } .header__logo a { align-items: center; display: flex; height: inherit; } .header__logo img { -o-object-fit: contain; height: 100%; object-fit: contain; width: 100%; } .header__nav { height: inherit; margin-left: auto; position: relative; } .header__nav-list { display: flex; height: inherit; } .header__nav-item, .header__nav-modal-wrap { height: inherit; } .header__nav-modal-wrap { position: relative; } .header__nav-modal-wrap::after { background: url(../images/common/header-arrow.svg) no-repeat center center/cover; bottom: 0.625rem; content: ""; height: 0.3125rem; left: 50%; position: absolute; transform: translateX(-50%); width: 0.5rem; } .header__nav-item.header__nav-item--contact { align-items: center; display: flex; } .header__nav-item > a, .header__nav-modal-wrap > .header__nav-modal-wrap-link { align-items: center; color: #333; display: flex; flex-direction: column; font-size: 0.9375rem; font-weight: 500; height: inherit; justify-content: center; line-height: 1; position: relative; padding: 0 2rem; } .header__nav-item > a::after, .header__nav-modal-wrap > .header__nav-modal-wrap-link::after { background: #00979c; bottom: 0; content: ""; height: 0.25rem; left: 0; position: absolute; transform: scale(0, 1); transform-origin: center bottom; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/ transition: transform 0.2s ease-in; /*変形の時間*/ width: 100%; } .header__nav-item > a:hover, .header__nav-modal-wrap > .header__nav-modal-wrap-link:hover { opacity: 1; } .header__nav-item > a:hover::after, .header__nav-modal-wrap > .header__nav-modal-wrap-link:hover::after { transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/ } .header__nav-modal-wrap > p { transition: 0.3s; } .header__nav-item-en { display: block; font-family: sans-serif; font-weight: bold; text-transform: uppercase; } .header__nav-item-en.is-blue { color: var(--color-text-accent); } .header__nav-item-ja { color: var(--color-text-light); display: block; font-size: 0.75rem; margin-top: 0.375rem; } .header__nav-modal { background-color: var(--color-primary); left: 0; opacity: 0; position: absolute; top: 5rem; transition: opacity 0.2s ease-in, visibility 0.2s ease-in; visibility: hidden; width: 11.875rem; } .header__nav-modal-wrap:hover > .header__nav-modal { opacity: 1; visibility: visible; } .header__nav-modal-item a { color: #fff; display: block; font-size: 0.875rem; font-weight: bold; padding: 0.75rem 0 0.75rem 1.5rem; position: relative; } .header__nav-modal-item a::before { background: url(../images/common/keisen.svg) no-repeat center center/cover; content: ""; height: 0.375rem; left: 0.6875rem; position: absolute; top: 50%; transform: translateY(-50%); width: 0.375rem; } .header__nav-item.header__nav-item--contact a { background-color: #00979c; color: #fff; text-align: center; transition: 0.2s background-color ease-in, 0.2s color ease-in; } .header__nav-item.header__nav-item--contact a:hover { background-color: var(--color-primary-accent); } .header__nav-item.header__nav-item--contact a:hover::after { display: none; } .header__nav-item.header__nav-item--contact a .header__nav-item-ja { color: #fff; transition: 0.2s color ease-in; } .header__hamburger { display: none; } .header__drawer { display: none; } .header__drawer-contact-ja { font-size: 0.625rem; margin-top: 0.25rem; } .page-news { overflow-x: clip; padding-bottom: 7.5rem; } .article__categories-wrap { background-color: var(--color-background-base); margin-left: calc(-50vw + 50%); padding: 0.8125rem 0 3.9375rem; width: 100vw; } .page-news .article__categories, .page-works .article__categories { max-width: 70rem; } .page-news .article__list, .page-works .article__list { grid-row-gap: 5rem; margin-top: 5rem; } .page-recruit .article__list { grid-row-gap: 5rem; margin-top: 5rem; } .page-header--r { background-color: var(--color-background-base); } .page-news .article__category, .page-works .article__category, .page-recruit .article__category { font-size: 1rem; padding: 0.9375rem 1.875rem; } .page-news .article__category.article__category--r, .page-works .article__category.article__category--r, .page-recruit .article__category.article__category--r { height: 3.375rem; } .page-header__content-wrap { align-items: center; display: flex; } .page-header__date { color: #8e8e8e; font-size: 0.875rem; line-height: 1.6; } .page-header__category { border-bottom: 1px solid #b7cceb; border-top: 1px solid #b7cceb; color: var(--color-text-accent); font-size: 0.8125rem; line-height: 1.7230769231; margin-left: 0.625rem; padding: 0.0625rem 0.5rem; } .page-header__news-title { font-size: 2.75rem; font-weight: bold; line-height: 1.25; padding-bottom: 1.5rem; margin-top: 1.25rem; position: relative; z-index: 1; } .page-header--news, .page-header--works, .page-header--recruit { padding-top: 3.8125rem; padding-bottom: 4.5625rem; } .news-detail { padding: 2.5rem 0 7.5rem; } .news-detail__inner { margin: 0 auto; max-width: 56.875rem; } .news-detail__content img { margin-top: 3rem; height: auto; } .news-detail__content p { line-height: 1.8; margin-top: 2rem; } .news-detail__content p + p { margin-top: 1rem; } .news-detail__content pre { word-wrap: break-word; font-family: inherit; font-size: 1rem; line-height: 1.8; margin-top: 5rem; padding: 0; white-space: pre-wrap; word-break: break-word; } .news-detail__content h1 { border-bottom: 1px solid #677386; font-size: 1.875rem; font-weight: bold; line-height: 1.6; margin-top: 6.5rem; padding: 0 0.9375rem 1.125rem; } .news-detail__content h2 { border-bottom: 1px solid #677386; font-size: 1.875rem; font-weight: bold; line-height: 1.6; margin-top: 6.5rem; padding: 0 0.625rem 1.125rem 0; } .news-detail__content .h2_sub { font-size: 1.25rem; font-weight: bold; color: #f7931e; } .news-detail__content .works-client_info { background-color: #fff0df; padding: 1.5rem; margin-top: 2rem; } .news-detail__content h3 { font-size: 1.75rem; font-weight: bold; line-height: 1.6; margin-top: 6.5rem; padding-left: 1.4375rem; position: relative; } .news-detail__content h3::before { background-color: var(--color-primary-accent); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 0.5rem; } .news-detail__content h4 { background-color: #eff4f6; font-size: 1.25rem; font-weight: bold; line-height: 1.6; margin-top: 3.25rem; padding: 0.5rem 0; padding-left: 1.4375rem; position: relative; } .news-detail__content h4.bg-orange { background-color: #fff0df; } .news-detail__content h4::before { background-color: #a7d7f4; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 0.5rem; } .news-detail__content h4.bg-orange::before { background-color: #ffc480; } .news-detail__content h5 { border: 1px solid var(--color-primary-accent); border-radius: 0.25rem; color: var(--color-text-light); font-size: 1.125rem; font-weight: bold; line-height: 1.6; margin-bottom: 0; margin-top: 2.5rem; padding: 0.625rem 1.25rem; } .news-detail__content h6 { font-size: 1rem; font-weight: bold; line-height: 1.8; margin-bottom: 0; margin-top: 2.5rem; } .news-detail__content a { -webkit-text-decoration: underline; color: #3a87e2; text-decoration: underline; } .news-detail__content .btn-section__btn a { color: #fff; text-decoration: none; } .news-detail__content .btn-section__btn a:hover { background-color: transparent; border: 0.0625rem solid var(--color-primary); color: var(--color-text-base); } .layout-pagination { margin-top: 3.625rem; } .pagination__inner { align-items: center; display: flex; gap: 1.875rem; justify-content: space-between; margin: 0 auto; max-width: 17.375rem; width: 100%; } .pagination__button { position: relative; text-align: center; } .pagination__icon { background-color: var(--color-primary); border: 0.0625rem solid var(--color-primary); color: #fff; display: block; padding: 1.125rem 0; transition: background-color 0.2s ease-in, color 0.2s ease-in; width: 7.75rem; } .pagination__icon:hover { background-color: #fff; color: var(--color-text-base); opacity: 1; } .pagination__button.pagination__button--prev { margin-right: auto; } .pagination__button.pagination__button--next { margin-left: auto; } .privacy-policy { background-color: var(--color-background-light); } .privacy-policy__inner { margin: 0 auto; max-width: 56.875rem; padding: 0 1.5625rem; width: 100%; } .privacy-policy__title { font-size: 1.75rem; font-weight: bold; line-height: 1.6; } .privacy-policy__info { line-height: 1.8; margin-top: 1.875rem; } .privacy-policy__item { margin-top: 3.75rem; } .privacy-policy__item-title { font-size: 1.25rem; font-weight: bold; line-height: 1.6; } .privacy-policy__text { line-height: 1.8; margin-top: 1.25rem; } .privacy-policy__text a { -webkit-text-decoration: underline; color: #3a87e2; text-decoration: underline; } .privacy-policy__list { line-height: 1.8; margin-top: 1.25rem; } .privacy-policy__list-item { padding-left: 1rem; position: relative; } .privacy-policy__list-item::before { background-color: var(--color-primary); border-radius: 50%; content: ""; height: 0.1875rem; left: 0.4375rem; position: absolute; top: 0.8125rem; width: 0.1875rem; } .page-message { background-color: var(--color-background-light); margin: 0 auto; margin-top: 7.5rem; max-width: 70rem; position: relative; width: 100%; z-index: 2; } .page-message__inner { margin: 0 auto; max-width: 73.125rem; padding: 0 8.125rem 0 0; } .page-message::after { background-color: var(--color-background-light); content: ""; height: 100%; position: absolute; right: calc(50% + 34.375rem); top: 0; width: 50vw; z-index: -1; } .page-message__image-box { margin-top: 5rem; max-width: 61.875rem; width: 100%; } .page-message__image img { -o-object-fit: cover; aspect-ratio: 990/467; object-fit: cover; width: 100%; } .page-message__lead-text { font-size: 2.5rem; font-weight: 500; line-height: 1.5; margin-top: 5rem; } .page-message__text { font-weight: 400; line-height: 1.8; margin-top: 5rem; } .page-recruit .article__categories { display: flex; gap: 1.25rem; margin-top: 5rem; width: auto; width: initial; } .article__list-wrap { margin-top: 4.375rem; } .page-recruit .article__list { grid-row-gap: 4.375rem; } .page-recruit .article__link:hover .article__link-text::after { right: 0; } .article__link-wrap { margin-left: auto; margin-top: auto; max-width: 8.75rem; width: 100%; } .article__link-text { border-bottom: 1px solid var(--color-primary); display: block; font-size: 0.875rem; padding: 0.625rem 0 0.625rem 0.625rem; position: relative; } .article__link-text::after { background: url(../images/recruit/arrow.svg) no-repeat center center/cover; content: ""; height: 0.5rem; position: absolute; right: 0.625rem; top: 50%; transform: translateY(-50%); transition: right 0.2s ease-in; width: 0.625rem; } .recruit-detail { margin: 0 auto; max-width: 56.875rem; } .recruit-detail__image { margin: 0 auto; max-width: 53.75rem; width: 100%; } .recruit-detail__image img { margin-left: auto; margin-right: auto; max-width: 100%; width: auto; } .recruit-detail__content { margin-top: 4rem; } .recruit-detail__block { } .recruit-detail__title { border-bottom: 1px solid #677386; font-size: 1.875rem; font-weight: bold; line-height: 1.4; padding: 0 0.9375rem 1.125rem; } .recruit-detail h2 { border-bottom: 1px solid #677386; font-size: 1.875rem; font-weight: bold; line-height: 1.4; padding: 5rem 0.9375rem 1.125rem; } .recruit-detail__text { font-weight: 400; line-height: 1.8; margin-top: 2.5rem; } .recruit-detail p { font-weight: 400; line-height: 1.8; margin-top: 2.5rem; font-size: 1rem; } .recruit-detail__list { border-bottom: 1px solid #bcbcbc; border-left: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc; margin-top: 2.5rem; } .recruit-detail__item { border-top: 1px solid #bcbcbc; display: flex; } .recruit-detail__term { align-items: center; background-color: #f8f8f8; border-right: 1px solid #bcbcbc; display: flex; flex-shrink: 0; font-weight: bold; line-height: 1.8; padding: 1.1875rem 1.25rem; width: 10.1875rem; } .recruit-detail__description { padding: 1.1875rem 1.25rem; } .recruit-detail__cta { margin-top: 7.5rem; } .recruit-detail__cta-title { font-size: 1.5rem; font-weight: bold; line-height: 1.6; margin: 0 auto; max-width: 43rem; position: relative; text-align: center; width: 100%; } .recruit-detail__cta-title::before { background-color: #bcbcbc; content: ""; height: 0.0625rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 12.875rem; } .recruit-detail__cta-title::after { background-color: #bcbcbc; content: ""; height: 0.0625rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12.875rem; } .recruit-detail__cta-btn { margin: 3.75rem auto 0; max-width: 43rem; width: 100%; } .recruit-detail__cta-btn a { background-color: #effbff; border: 0.125rem solid #1dade5; border-radius: 0.625rem; display: block; padding: 2.5rem 0; position: relative; } .recruit-detail__cta-btn a::after { background: url(../images/recruit/square.svg) no-repeat center center/cover; content: ""; height: 15px; position: absolute; right: 1.875rem; top: 50%; transform: translateY(-50%); width: 20px; } .recruit-detail__cta-btn img { margin: 0 auto; width: 13.8125rem; } .recruit-detail__culture { background-color: var(--color-background-light); } .recruit-detail__culture-items { grid-gap: 2.75rem; display: grid; gap: 2.75rem; grid-template-columns: repeat(2, 1fr); margin-top: 1.875rem; } .recruit-detail__culture-image { max-width: 33.625rem; width: 100%; } .recruit-detail__culture-image img { -o-object-fit: cover; aspect-ratio: 538/303; object-fit: cover; width: 100%; } .recruit-detail__culture-content { background-color: #fff; padding: 1.875rem; } .recruit-detail__culture-heading { font-size: 1.25rem; font-weight: bold; line-height: 1.6; } .recruit-detail__culture-text { font-size: 1rem; font-weight: 400; line-height: 1.8; margin-top: 1.25rem; } .page-content__title { font-size: 1.75rem; font-weight: bold; padding-left: 1.625rem; position: relative; } .page-content__title::before { background-color: var(--color-primary-light); content: ""; height: 2.75rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 0.5rem; } .page-content__title--r { color: #fff; } .page-content__title--r::before { background-color: #fff; } .training-content__category { background-color: #fff; padding: 3.75rem 5.625rem 5rem; } .page-content__category-label { background-color: #d5dae2; font-size: 1.5rem; font-size: 1.5rem; font-weight: bold; padding: 0.78125rem 0 0.78125rem 2.5rem; } .features-section { grid-gap: 1.25rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, 1fr); margin-top: 5rem; } .features-section__item { background-color: #fff; padding: 1.75rem 1.25rem; } .features-section__title { font-size: 1.25rem; font-weight: bold; line-height: 1.6; padding-bottom: 1.25rem; position: relative; text-align: center; } .features-section__title::before { background-color: var(--color-primary-accent); bottom: 0; content: ""; height: 0.125rem; left: 50%; position: absolute; transform: translateX(-50%); width: 6.25rem; } .features-section__text { line-height: 1.8; margin-top: 1.25rem; } .service { overflow-x: hidden; } .service__inner { margin: auto; max-width: 37.5rem; padding: 0 1.25rem; width: 100%; } .service__swiper { margin-right: calc(50% - 50vw); width: 100vw; } .service-card a { background-color: #fff9ee; display: block; height: 100%; padding: 0.9375rem 0.9375rem 2.1875rem; } .service-card a:hover { opacity: 1; } .service-card__img { overflow: hidden; width: 100%; } .service-card__img img { -o-object-fit: cover; aspect-ratio: 300/186; object-fit: cover; transition: 0.6s; width: 100%; } .service-card:hover .service-card__img img { transform: scale(1.2); } .service-card__text { font-size: 0.9375rem; line-height: 1; margin-top: 0.9375rem; } .hero { padding-bottom: 5rem; position: relative; } .hero::before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .hero__content { position: relative; z-index: 1; } .hero__text { color: #212121; font-size: 3rem; font-weight: bold; line-height: 1.25; width: 70.5659%; } .hero__description { color: #212121; font-size: max(1.125rem,14px); font-weight: 500; line-height: 1.6; margin-top: 3.75rem; } .hero__btn { margin-top: 3.75rem; } .features { margin-top: 7.6875rem; position: relative; z-index: 1; } .features__title { color: #212121; font-size: 2.25rem; font-weight: bold; text-align: center; } .features .block-flex { display: flex; gap: 0.875rem; justify-content: space-between; margin: 10rem auto 0; max-width: 69.375rem; width: 100%; } .features .block-flex-col { margin: 0 auto; /* max-width: 11.25rem; */ position: relative; width: 100%; } .features .block-flex-col::after { border-radius: 50%; content: ""; height: 22.5625rem; left: 50%; position: absolute; top: 40%; transform: translate(-50%, -50%); width: 22.5625rem; z-index: -1; } .features .block-flex-col.point1::after { border: none; background-color: #00979c; } .features .block-flex-col.point2::after { border: none; background-color: #208ed1; } .features .block-flex-col.point3::after { border: none; background-color: #f7931e; } .features .block-img { margin: 2.75rem auto 0; width: 6rem; } .features .block-flex-txt { color: #fff; font-size: 2rem; font-weight: bold; /* margin-top: -3.125rem; */ text-align: center; } .business__title, .newsarea__title, .works__title { font-size: 4.25rem; font-weight: bold; line-height: 1; text-transform: uppercase; margin-bottom: 1.5rem; } .business__process { margin-top: 6.5rem; } .business__content { display: grid !important; grid-template-columns: 3fr 2.5fr; gap: 50px; } .business__description { margin-top: 14%; } .business__item-image { object-fit: cover; } .works__title { color: #212121; text-align: center; } .newsarea__title { color: #222; text-align: center; } .newsarea .article__category { border: 1px solid #222; color: #222; } .newsarea .article__list { display: block; margin: 3.125rem auto; max-width: 58.125rem; width: 100%; } .newsarea .article__description { color: #222; } .article__date { color: #8e8e8e; font-size: 0.875rem; line-height: 1.6; margin-right: 0.625rem; } .article__categories { margin: 3.75rem auto 0; } .article { padding: 7.5rem 0; } .article--r { background-color: #fff; padding: 7.5rem 0; } .article__header { margin: 0 auto; width: -moz-fit-content; width: fit-content; } .article__title { text-align: center; } .article__subtitle { text-align: center; } .article__categories { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: flex-start; margin: 3.75rem auto 0; width: -moz-fit-content; width: fit-content; } .article__category { align-items: center; background-color: transparent; border: 1px solid #e0e0e0; color: #e0e0e0; cursor: pointer; display: flex; font-size: 0.875rem; height: 3.5625rem; justify-content: center; line-height: 1.2; margin-bottom: 0.625rem; padding: 0 1.25rem; text-align: center; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .article__category:hover { background-color: #fff; color: var(--color-text-light); opacity: 1; } .article__category.article__category--r { background-color: #fff; border: var(--color-primary-light) solid 1px; color: var(--color-text-light); height: 2.5rem; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .article__category.article__category--r:hover { background-color: var(--color-primary-light); color: #fff; opacity: 1; } .article__category.article__category--active { background-color: #fff; color: var(--color-text-light); } .article__category--r.article__category--active { background-color: var(--color-primary-light); color: #fff; } .article__list { grid-gap: 2.5rem; display: grid; gap: 2.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 3.125rem; } .article__link { display: flex; flex-direction: column; height: 100%; } .article__image { -o-object-fit: cover; aspect-ratio: 347/200; object-fit: cover; width: 100%; border: 1px solid var(--color-background-light); } .article__info { display: flex; flex-direction: column; height: 100%; margin: 1rem 0; } .article__info-wrap { align-items: flex-start; display: flex; flex-wrap: wrap; } .article__date { color: #8e8e8e; font-size: 0.875rem; line-height: 1.6; margin-right: 0.625rem; } .article__label { border-bottom: 1px solid #fff; border-top: 1px solid #fff; color: #fff; font-size: 0.8125rem; font-weight: 500; line-height: 1.7230769231; margin-bottom: 0.625rem; margin-right: 0.625rem; padding: 0 0.3125rem; } .article__label--r { border-bottom: 1px solid #b7cceb; border-top: 1px solid #b7cceb; color: var(--color-text-accent); } .article__description { color: #fff; font-size: 0.875rem; font-weight: bold; line-height: 1.6; } .article__description--r { color: var(--color-text-base); } .container_01, .article__btn { margin: 2.5rem auto 0; } .newsarea .article__item:not(:first-child) a, .page-news .article__item:not(:first-child) a { border-top: 1px solid #abb9bc; } .btn-section.recruit { background: url(../images/top/recruit.jpg) no-repeat center center/cover; height: 44.625rem; position: relative; width: 100%; } .recruit .btn-section__content { bottom: 19%; left: 50%; position: absolute; transform: translateX(-50%); } .btn-section__title { text-align: center; } .btn-section__subtitle { text-align: center; } .btn-section__btn { margin: 3.75rem auto 0; } .inner { margin-left: auto; margin-right: auto; max-width: 1340px; padding-left: 25px; padding-right: 25px; width: 100%; } .contact-header, .privacypolicy-header { padding-bottom: 4.5625rem; } @media screen and (max-width: 1330px) { .process__step-item--g .lower-page__heading, .process__step-item--g .process__content { margin-left: auto; } } @media (max-width: 1290px) { html { font-size: 1.2403100775vw; } } @media screen and (max-width: 767px) { .u-desktop { display: none; } .u-mobile { display: block; } html { font-size: 16px; } a[href^="tel:"] { pointer-events: auto; } .mv { height: calc(100dvh - 3.5rem); margin-top: 3.5rem; min-height: 38.125rem; } .mv__inner .mv__title-wrap { top: 17vh; } .mv__inner .mv__title p { font-size: 2em; } .mv__inner .mv__title__caption p { font-size: 0.875em; } .business__title, .newsarea__title, .works__title { font-size: 2.5rem; } .container_01 { display: none; } .concept__inner { display: block; } .concept__section { gap: 2.5rem; margin-top: 2.5rem; } .concept__heading { font-size: 1.125rem; line-height: 1.6; } .concept__subheading { font-size: 0.75rem; margin-top: 0; } .concept__text { font-size: 0.875rem; line-height: 1.7; } .concept__list-item { font-size: 0.875rem; line-height: 1.8; padding-left: 1.25rem; } .concept__list-item::before { font-size: 1.125rem; } .greeting__content { margin-top: 2.5rem; display: block; } .greeting__image { width: 100%; } .greeting__image img { aspect-ratio: 343/364; } .greeting__text-content { margin-top: 2.5rem; width: 100%; } .greeting__text { font-size: 0.875rem; line-height: 1.8; } .greeting__name { font-size: 1rem; line-height: 1.8; margin-right: 0.4375rem; margin-top: 0.875rem; } .history__content { display: block; margin-top: 1.875rem; } .history__text-content { width: 100%; } .history__para, .history-table table tr, .history__table td, .history__img-label { font-size: 0.875rem; } .history__para { line-height: 1.8; margin: 2.5rem 0 1.5rem; } .history__table { max-width: 860px; width: 100%; margin: 0 auto; } .history-table table tr { display: block; border-bottom: unset; } .history__table td, .history__table td:first-child { display: block; width: 100%; padding: 4px 10px 0 10px; } .history__table td:first-child { padding-top: 20px; } .history__table td:nth-child(2n) { width: 100%; padding-left: 10px; padding-bottom: 20px; } .history__img-div { flex-direction: column; gap: 20px; margin: 20px 0 0; } .history__images { gap: 0.9375rem; margin-top: 2.5rem; max-width: none; max-width: initial; } .history__image img { aspect-ratio: 8/5; } .history__img-label { line-height: 1.8; margin-top: 0.5rem; } .company-info { background-color: #fff; padding: 3.75rem 0; } .company-info__inner { max-width: 37.5rem; padding: 0 1rem; } .company-info__inner table { margin-top: 2.5rem; } .company-info__inner tr { display: block; padding: 0.625rem 0 1.125rem; } .company-info__inner tr:last-child { padding-bottom: 0; } .company-info__inner td:first-child { font-size: 0.875rem; line-height: 1.6; width: auto; } .company-info__inner td:first-child::before { top: -0.75rem; width: 5rem; } .company-info__inner td:nth-child(2) { display: block; font-size: 0.875rem; line-height: 1.6; margin-top: 0.625rem; padding-left: 0.3125rem; } .access::before { width: 100vw; } .access__inner { max-width: 37.5rem; padding: 3.75rem 1rem; } .access__block { font-size: 0.875rem; } .access__info { margin-top: 2.5rem; } .access__heading { font-size: 0.875rem; line-height: 1.6; } .access__map { margin-top: 2.5rem; padding-top: 45.1895%; } .producer__title { font-size: 1.5rem; } .producer__list { gap: 0.625rem; grid-template-columns: repeat(1, 1fr); margin-top: 0; } .producer__item a { font-size: 0.875rem; padding: 0.71875rem 0; text-align: center; } .producer__item span { padding-left: 1.75rem; } .producer__item span::before { color: var(--color-text-light); content: "0" counter(number); counter-increment: number 1; font-family: "Archivo", sans-serif; font-size: 1.125rem; font-weight: bold; left: 0; position: absolute; top: 56%; transform: translateY(-50%); } .producer__item a::before { margin-top: 0.1875rem; font-size: 1.25rem; top: 46%; } .producer__item a::after { right: 0.625rem; } .process__content { display: block; margin-top: 2.5rem; } .lower-page__wrap { margin-top: 2.5rem; width: 100%; } .process__image { width: 100%; } .process__list { gap: 1.5625rem; margin-top: 2.1875rem; } .process__item { display: block; padding-bottom: 1.5625rem; } .process__title { font-size: 1rem; line-height: 1.8; } .process__text { font-size: 0.875rem; line-height: 1.8; margin-top: 0.625rem; } .section-btn.section-btn--b.process__btn { margin-top: 2.5rem; } .consultation__description { font-size: 0.875rem; line-height: 1.8; margin-top: 2.5rem; } .consultation__list { gap: 2.125rem; margin-top: 2.5rem; } .consultation__item { border-radius: 0.25rem; padding: 1.0625rem 1.25rem; } .consultation__step { font-size: 1.125rem; } .consultation__text { font-size: 0.875rem; line-height: 1.6; margin-top: 0.3125rem; } .breadcrumb { display: none; } .page-header { margin-top: 3.5rem; padding-top: 3.125rem; } .page-header__article-subtitle { font-size: 3.75rem; top: 7.5rem; } .page-header__title { font-size: 2em; } .page-header__subtitle { font-size: 1rem; line-height: 1.6; margin-top: 0.125rem; } .page-header__background { margin-left: -1rem; margin-right: 0; margin-top: 2.8125rem; width: 100vw; } .page-header__background--d::before { background-color: var(--color-background-light); } .page-header__background--d::after { display: none; } article { margin-top: 0; } .page-header__image { aspect-ratio: 375/176; width: 100%; } .page__title { font-size: 1.75rem; line-height: 1.6; padding-top: 0.9375rem; } .page__title::before { width: 2.5rem; } .footer-btn-section { padding: 3.75rem 0; } .footer-btn-section__inner { max-width: 37.5rem; padding: 0 1.25rem; } .footer-btn-section__list { flex-direction: column; gap: 1.25rem; } .footer-btn-section__item { margin: 0 auto; max-width: 18.4375rem; } .footer-btn-section__link:hover::after { right: 0.625rem; } .footer-btn-section__link { padding: 1.0625rem 0 1.0625rem 0.9375rem; } .footer-btn-section__link::after { height: 0.375rem; right: 2.25rem; top: 1.625rem; width: 0.375rem; } .lower-page__heading { align-items: flex-start; gap: 1.375rem; } .lower-page__number { font-size: 1.875rem; } .lower-page__number::before { height: 1.6875rem; right: -0.6875rem; } .lower-page__title { font-size: 1.75rem; line-height: 1.6; } .lower-page__text { font-size: 1.125rem; line-height: 1.6; } .lower-page__description { font-size: 0.875rem; line-height: 1.8; margin-top: 0.625rem; } .section { padding: 3.75rem 0; } .inner { max-width: 37.5rem; } .inner-n { max-width: 37.5rem; padding: 0 1rem; } .inner-dn { max-width: 37.5rem; padding: 0 1rem; } .section-title { font-size: 2.5rem; } .section-subtitle { font-size: 1rem; margin-top: 0.5rem; } .section-text { font-size: 0.875rem; line-height: 1.8; } .section-btn, .section-btn--b { max-width: 18.5rem; margin: 0 auto; } .section-btn a::before { height: 1.75rem; right: 0.9375rem; width: 1.75rem; } .section-btn a::after { height: 0.6375rem; right: 1.625rem; width: 0.6375rem; } .section-btn a { font-size: 1rem; padding: 1.125rem 0 1.125rem 0.9375rem; } .intervie__btn { margin-top: 2.375rem; } .interview .producer__list { max-width: 100%; margin-top: 2.5rem; grid-template-columns: repeat(1, 1fr); } .interview__list { gap: 2.3125rem; } .interview__item { margin-top: 2.5rem; flex-direction: column-reverse; } .interview__item::after { background-color: #fff; content: ""; height: 60%; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 100%; z-index: 0; } .interview__item:nth-child(even) { flex-direction: column-reverse; } .interview__content::after { display: none; } .interview__content { width: 100%; } .interview__item:nth-child(even) .interview__content { padding: 1.875rem 1.25rem; } .interview__item:nth-child(odd) .interview__content { padding: 1.875rem 1.25rem; } .interview__title { font-size: 1rem; line-height: 1.8; } .interview__position { font-size: 0.875rem; margin-top: 0.9375rem; } .interview__text { font-size: 0.875rem; line-height: 1.8; margin-top: 1.25rem; } .interview__image { box-shadow: 0.6875rem 0.6875rem 0 0 rgba(92, 98, 118, 0.15); margin-right: 0.625rem; margin-top: 1.875rem; width: 72%; } .contact-annotation { margin-top: 2.5rem; } .contact-annotation__lead { font-size: 0.875rem; line-height: 1.8; text-align: center; } .contact-annotation__box { margin-top: 1.5625rem; padding: 1.5rem 0; } .contact-title { font-size: 18px; line-height: 1.6; } .contact-annotation__phone-time { font-size: 0.875rem; line-height: 1.6; margin-top: 0.625rem; } .contact-annotation__phone-number { font-size: 1.875rem; margin-top: 0.625rem; } .contact-complete p { font-size: 0.875rem; line-height: 1.8; margin-top: 1.25rem; } .contact__inner { max-width: 37.5rem; padding: 0; } .contact__form { margin: auto; max-width: 50rem; width: 100%; } .contact__form-wrapper { margin-top: 2.5rem; } .contact__form-wrap { margin-top: 1.875rem; } .contact__form-wrap-list { margin-top: 1.375rem; } .contact__form-input { gap: 1.25rem; } .contact__form-input input[name=your-code], .contact__form-input input[name=your-prefecture] { width: 10rem; } .contact__form-input input { padding: 0.625rem; } .contact__form-radio { flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; } .contact__form-textarea { margin-top: 0.625rem; } .contact__form-textarea textarea { min-height: 11.25rem; padding: 0.625rem; } .contact__form-privacy { margin-top: 2.5rem; } .contact__form-privacy input + span { font-size: 0.875rem; } .contact__form-submit::after { height: 0.9375rem; right: 0.9375rem; width: 0.9375rem; } .contact__form-submit { margin: 2.5rem auto 0; max-width: 18.5rem; } .contact__form-submit input { font-size: 1rem; padding: 1.125rem 0 1.125rem 0.9375rem; } .contact-complete-div .title { font-size: 18px; text-align: center; } .contact-complete-div .tel { padding: 1rem 0; } .cta-buttons__inner { flex-direction: column; gap: 1.25rem; } .cta-buttons__item { margin: 3rem auto 2rem; } .cta-buttons__link { font-size: 1.125rem; padding: 3rem 0 3rem 1.5rem; } .cta-buttons__link::after { right: 9.2%; } .footer__nav-wrap { display: block; } .footer__company-info { padding: 2.5rem 1rem 2.5rem; width: 100%; } .footer__logo { margin: 0 auto; max-width: 16.8125rem; } .footer__address { font-size: 0.875rem; line-height: 1.8; margin: 1.5625rem auto 0; width: -moz-fit-content; width: fit-content; } .footer__contact-btn { margin: 2.25rem auto 0; max-width: 18.5rem; } .footer__nav-wrapper { padding: 1.875rem 0; width: 100%; } .footer__nav { gap: 2.5rem; justify-content: center; } .footer__nav-item a { font-size: 0.875rem; padding: 0.4375rem 0; padding-left: 0.6875rem; } .footer__nav-list-wrap { display: block; } .footer__bottom { display: block; margin-top: 1.625rem; text-align: center; } .footer__copyright { font-size: 0.75rem; margin-top: 1.25rem; } .footer__scroll-top { bottom: 1.875rem; height: 2.5rem; right: 1rem; width: 2.5rem; } .header { height: 3.5rem; } .header__inner { padding-left: 1rem; } .header__logo { max-width: 14rem; } .header__nav { display: none; } .header__hamburger { background-color: #00979c; border: none; cursor: pointer; display: block; height: inherit; margin: 0; outline: none; padding: 0; position: relative; transition: 0.3s; width: 3.5rem; z-index: 999; } .header__hamburger .header__hamburger-line { background-color: #fff; display: block; height: 0.1875rem; left: 50%; position: relative; transform: translateX(-50%); transition: 0.5s; width: 1.5625rem; } .header__hamburger .header__hamburger-menu { color: #fff; display: flex; font-size: 0.6875rem; font-weight: bold; justify-content: center; margin-top: 0.75rem; text-transform: uppercase; } .header__hamburger .header__hamburger-line:nth-of-type(1) { top: 0.0625rem; } .header__hamburger .header__hamburger-line:nth-of-type(2) { top: 0.375rem; } .header__hamburger .header__hamburger-line:nth-of-type(3) { top: 0.6875rem; } .header__hamburger.is-open .header__hamburger-line:nth-of-type(1) { top: 0.5625rem; transform: translateX(-50%) rotate(45deg); } .header__hamburger.is-open .header__hamburger-line:nth-of-type(2) { opacity: 0; } .header__hamburger.is-open .header__hamburger-line:nth-of-type(3) { top: 0.1875rem; transform: translateX(-50%) rotate(-45deg); } .header__drawer { background-color: #fff; bottom: 0; display: block; height: 100vh; left: 0; margin-top: 3.5rem; overflow-y: scroll; padding-bottom: 6.4375rem; position: absolute; right: 0; scrollbar-width: none; top: 0; transform: translateX(100%); transition: transform 0.3s ease-in-out; width: 100%; z-index: 800; } .header__drawer-nav { overflow: scroll; padding-bottom: 100px; height: 100vh; } .header__drawer.is-open { transform: translateX(0); } .header__drawer::-webkit-scrollbar { display: none; } .header__drawer-item { border-bottom: 1px solid var(--color-primary); } .header__drawer-item.header__drawer-item--contact { border-bottom: none; margin: 2.5rem auto 0; max-width: 21.4375rem; width: 100%; } .header__drawer-item a { position: relative; } .header__drawer-item a::before { background: url(../images/common/footer-arrow-b.svg) no-repeat center center/cover; content: ""; height: 0.5rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 0.3125rem; } .header__drawer-item > a, .header__drawer-accordion-title { align-items: center; color: var(--color-text-base); cursor: pointer; display: flex; font-size: 0.875rem; letter-spacing: 0.05em; line-height: 1; padding: 1.25rem 1rem; } .header__drawer-item-en { display: block; font-family: "Archivo", sans-serif; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; } .header__drawer-item-ja { color: var(--color-text-light); display: block; font-size: 0.625rem; margin-left: 0.75rem; } .header__drawer-item.header__drawer-item--contact a { background-color: #00979c; color: #fff; display: flex; flex-direction: column; padding: 1.5rem 0; text-align: center; } .header__drawer-contact-en { font-family: "Archivo", sans-serif; font-size: 1.125rem; font-weight: bold; text-transform: uppercase; } .header__drawer-accordion-title { position: relative; } .header__drawer-accordion-title::before, .header__drawer-accordion-title::after { background: #333; content: ""; display: block; height: 0.125rem; position: absolute; right: 1.25rem; top: 50%; transition: 0.3s; width: 0.75rem; } .header__drawer-accordion-title::before { transform: translateY(-50%); } .header__drawer-accordion-title::after { transform: translateY(-50%) rotate(90deg); } .header__drawer-accordion-title.is-open::after { transform: translateY(-50%); } .header__drawer-accordion-item { border-top: 1px solid #d4dae4; } .header__drawer-accordion-item a { background-color: var(--color-background-light); display: block; font-size: 0.875rem; font-weight: bold; padding: 0.75rem 0 0.75rem 2.5rem; position: relative; } .header__drawer-accordion-item a::before { background: url(../images/common/keisen-b.svg) no-repeat center center/cover; content: ""; height: 0.375rem; left: 1.625rem; position: absolute; top: 50%; transform: translateY(-50%); width: 0.375rem; } .page-news { padding-bottom: 0rem; } .article__categories-wrap { padding: 0.8125rem 0 1.5rem; } .page-news .article__categories, .page-works .article__categories { flex-direction: row; margin-top: 1.0625rem; width: 92%; } .page-news .article__list, .page-works .article__list { grid-column-gap: 1.4375rem; grid-row-gap: 0.625rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; } .page-recruit .article__list { grid-column-gap: 1.4375rem; grid-row-gap: 0.5625rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; } .page-header--news, .page-header--works, .page-header--recruit { margin-top: 3.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; } .page-news .article__category, .page-works .article__category, .page-recruit .article__category { font-size: 0.8125rem; line-height: 1.7230769231; margin-right: 0.625rem; padding: 0.625rem; padding-bottom: 0.625rem; } .page-news .article__category.article__category--r, .page-works .article__category.article__category--r, .page-recruit .article__category.article__category--r { height: 2.4375rem; } .page-news .article__date { font-size: 0.75rem; line-height: 1.8666666667; } .page-news .article__info, .page-recruit .article__info { margin-top: 0.625rem; } .page-news .article__label, .page-recruit .article__label { font-size: 0.625rem; line-height: 1.6; margin-bottom: 0.3125rem; } .page-news .article__description, .page-recruit .article__description { font-size: 0.75rem; line-height: 1.6; } .page-header__date { font-size: 0.75rem; line-height: 1.8666666667; } .page-header__category { display: flex; font-size: 0.625rem; font-weight: normal; line-height: 1.6; margin-left: 0; margin-right: 0.625rem; padding: 0 0.3125rem; } .page-header__news-title { font-size: 1.375rem; line-height: 1.6; margin-top: 0.25rem; } .news-detail { padding: 1.25rem 0 3.75rem; } .news-detail__content img { margin-top: 2.5rem; } .news-detail__content p { font-size: 0.875rem; line-height: 1.8; margin-top: 1.25rem; } .news-detail__content pre { font-size: 0.875rem; line-height: 1.8; margin: 1.25rem 0 0; } .news-detail__content h1 { font-size: 1.125rem; line-height: 1.6; margin-top: 3.75rem; padding: 0 0.3125rem 0.75rem; } .news-detail__content h2 { font-size: 1.125rem; line-height: 1.6; margin-top: 3.75rem; padding: 0 0.3125rem 0.75rem; } .news-detail__content .h2_sub { font-size: 1rem; } .news-detail__content .works-client_info { padding: 1rem; margin-top: 1.5rem; } .news-detail__content h3 { font-size: 1rem; line-height: 1.6; margin-top: 2.5rem; } .news-detail__content h3::before { width: 0.3125rem; } .news-detail__content h4 { font-size: 0.875rem; line-height: 1.6; margin-top: 2.5rem; padding-left: 0.8125rem; } .news-detail__content h4::before { width: 0.3125rem; } .news-detail__content h5 { font-size: 0.875rem; line-height: 1.6; margin-top: 1.875rem; padding: 0.5rem 0.625rem; } .news-detail__content h6 { font-size: 0.875rem; line-height: 1.6; margin-top: 1.875rem; } .layout-pagination { margin-top: 1.25rem; } .pagination__inner { gap: 1.25rem; max-width: 16.875rem; } .pagination__icon { font-size: 0.875rem; padding: 0.75rem 0; } .privacy-policy__inner { max-width: 37.5rem; padding: 0 1rem; } .privacy-policy__title { font-size: 1.125rem; line-height: 1.6; } .privacy-policy__info { font-size: 0.875rem; line-height: 1.8; margin-top: 1.25rem; } .privacy-policy__item { margin-top: 1.875rem; } .privacy-policy__item-title { font-size: 1rem; line-height: 1.6; } .privacy-policy__text { font-size: 0.875rem; line-height: 1.8; margin-top: 0.9375rem; } .privacy-policy__list { font-size: 0.875rem; line-height: 1.8; margin-top: 0.9375rem; } .privacy-policy__list-item { padding-left: 0.875rem; } .page-message { margin-top: 0; } .page-message__inner { max-width: 37.5rem; padding: 0 1rem; } .page-message__image-box { margin-top: 2.5rem; } .page-message__image img { aspect-ratio: 343/162; } .page-message__lead-text { font-size: 1.25rem; line-height: 1.6; margin-top: 2.5rem; } .page-message__text { font-size: 0.875rem; line-height: 1.8; margin-top: 1.875rem; } .page-recruit .article__categories { flex-direction: row; gap: 0; margin-top: 2.5rem; width: 100%; } .article__list-wrap { margin-top: 1.875rem; } .page-recruit .article__list { grid-column-gap: 1.4375rem; grid-row-gap: 0.5625rem; grid-template-columns: repeat(2, 1fr); } .article__link-wrap { display: none; } .recruit-detail h2 { font-size: 1.275rem; padding: 2.5rem 0.9375rem 0.725rem 0.5375rem; } .recruit-detail p { margin-top: 1.5rem; font-size: 0.875rem; } .recruit-detail__title { font-size: 1.125rem; padding: 0 0.3125rem 0.5625rem; } .recruit-detail__text { font-size: 0.875rem; line-height: 1.8; margin-top: 1.25rem; } .recruit-detail__list { margin-top: 1.25rem; } .recruit-detail__item { display: block; } .recruit-detail__term { border-bottom: 1px solid #bcbcbc; border-right: none; font-size: 0.875rem; line-height: 1.6; padding: 0.3625rem 0.9375rem; width: auto; width: initial; } .recruit-detail__description { font-size: 0.875rem; line-height: 1.6; padding: 0.3625rem 0.9375rem; } .recruit-detail__cta { margin-top: 3.75rem; } .recruit-detail__cta-title { font-size: 1rem; } .recruit-detail__cta-title::before { width: 5.625rem; } .recruit-detail__cta-title::after { width: 5.625rem; } .recruit-detail__cta-btn { margin: 1.875rem auto 0; } .recruit-detail__cta-btn a { padding: 1.125rem 0; } .recruit-detail__cta-btn a::after { height: 15px; right: 1.4375rem; width: 20px; } .recruit-detail__cta-btn img { width: 10.8125rem; } .recruit-detail__culture .page-content__title { font-size: 1rem; } .recruit-detail__culture .page-content__title::before { background-color: var(--color-primary-light); height: 1.875rem; padding-left: 0.3125rem; width: 0.3125rem; } .recruit-detail__culture-items { gap: 1.875rem; grid-template-columns: repeat(1, 1fr); } .recruit-detail__culture-content { padding: 0.9375rem; } .recruit-detail__culture-heading { font-size: 1rem; line-height: 1; } .recruit-detail__culture-text { font-size: 0.875rem; line-height: 1.8; margin-top: 0.625rem; } .process__lists { grid-template-columns: repeat(1, 1fr); margin-top: 2.5rem; padding-bottom: 0; } .process__items img { max-width: 11.25rem; } .process__items-text { font-size: 1rem; margin-top: 0.625rem; } .page-content__title { font-size: 1.25rem; line-height: 1.6; padding-left: 1.4375rem; } .page-content__category-label { font-size: 1.125rem; padding: 0.5rem 0; text-align: center; } .features-section { grid-template-columns: repeat(1, 1fr); margin-top: 2.375rem; } .features-section__item { padding: 1.0625rem 1.25rem; } .features-section__title { font-size: 1rem; padding-bottom: 0.625rem; } .features-section__title::before { bottom: -0.3125rem; } .features-section__text { font-size: 0.875rem; line-height: 1.8; margin-top: 0.625rem; } .service__inner { max-width: 75rem; padding: 0 1.5625rem; } .service-card__text { font-size: 1.25rem; } .hero { padding-bottom: 2.275rem; } .hero__text { font-size: 1.25rem; line-height: 1.6; width: 100%; } .hero__description { font-size: 0.875rem; font-weight: 400; line-height: 2; margin-top: 1.5rem; width: 100%; } .hero__btn { margin: 2.1875rem auto 0; } .features { margin-top: 3.75rem; } .features__title { font-size: 1.25rem; } .features .block-flex { flex-direction: column; gap: 7.5rem; margin: 6rem auto 0; } .features .block-flex-col { margin: 0.5rem auto; } .features .block-flex-col::before { height: 10.375rem; width: 10.375rem; } .features .block-flex-col::after { display: block; height: 15rem; width: 15rem; } .features .block-flex-txt { font-size: 1.375rem; margin-top: 0; } .features .block-img { margin: 1rem auto 0; width: 4rem; } .features__list { flex-direction: column; gap: 6.125rem; margin: 4.375rem auto 0; } .features__item::before { height: 9.375rem; width: 9.375rem; } .features__icon { margin: 0.4375rem auto 0; width: 2.4375rem; } .features__text { font-size: 0.875rem; margin-top: 0; } .business { padding-top: 5rem; } .business__process { margin-top: 3.5rem; } .business__content.block-flex { display: block!important; margin-top: 2.5rem; } .business__item-image { width: 100%; } .business-page__wrap { margin-bottom: 30px; } .article { padding: 5rem 0; } .article--r { padding: 5rem 0; } .article__categories { flex-direction: column; gap: 0; margin: 1.875rem auto 0; width: 80%; } .article__category { font-size: 0.8125rem; height: auto; margin-bottom: 0.5rem; padding: 0.6875rem 0; } .article__list { gap: 2.25rem; grid-template-columns: repeat(1, 1fr); margin-top: 1.875rem; } .article__label { font-size: 0.75rem; } .article__btn { margin: 2.375rem auto 0; } .btn-section.interview { background: url(../images/top/interview-sp.webp) no-repeat center center/cover; height: 20.8125rem; } .btn-section.recruit { height: 20.9375rem; } .btn-section__title-wrap { margin: 0 auto; width: -moz-fit-content; width: fit-content; } .recruit .btn-section__content { bottom: 24%; width: 100%; } .btn-section__btn { margin: 2.375rem auto 0; } .inner { padding-left: 16px; padding-right: 16px; } } @media (max-width: 375px) { html { font-size: 4.2666666667vw; } } /*# sourceMappingURL=style.css.map */ .tab-panel { display: none!important; } .tab-panel.active { display: grid!important; } .article__category--r.active { background-color: var(--color-primary-light); color: #fff; } @media screen and (min-width: 768px) { .header__nav .header__nav-list > li > a.active::after { content: ""; background: #00979c; display: block; width: 100%; height: 0.25rem; left: 0; bottom: 0; position: absolute; transform: none; transition: unset; } } .page-header.compl::after { top: auto; bottom: -2.5rem; } @media screen and (max-width: 767px) { .page-header.compl::after { top: auto; bottom: -1.1rem; } .page-header.compl .page-header__title { font-size: 1.875rem; } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes scroll_01 { 0% { transform: translate(-50%, -50%) translateY(-10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) translateY(10px); opacity: 0; } } /* //////////movie////////// */ .video { width: 100%; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-fit: cover; z-index: -1; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } @media screen and (min-width: 768px) { .sp { display: none !important; } } @media screen and (max-width: 767px) { .pc { display: none !important; } }