/* ========================================================================== Base / Reset ========================================================================== */ :root { --color-primary: #006336; --color-bg: #eeede9; --color-black: #000000; --color-white: #ffffff; --cap-height-ratio: 0.700; /* Noto Sans JP */ --font-noto: 'Noto Sans JP', sans-serif; --font-marcellus: 'Marcellus', serif; --font-inter: 'Inter', sans-serif; --font-zen: 'Zen Kaku Gothic New', sans-serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== 1280px基準のビューポートスケール 1280pxデザインを基準に、画面幅に応じて zoom で等比拡大する。実値は JS (assets/js/zoom-vh.js) がにインライン設定する。理由: CSS の zoom プロパティは / しか受けず、 calc(100vw / 1280) は length 値となり無効になるため。下記の @media は JS 未ロード時のフォールバック（1920px以上のみ）。 ========================================================================== */ @media (min-width: 1920px) { html.is-zoomed { zoom: 1.5; } } /* zoom 補正した「画面高さ」を design 単位で取得するための変数。 JS (assets/js/zoom-vh.js) が viewport サイズに応じて inline で設定する。非 zoom 領域や JS 未実行時は 100vh をフォールバックとして使う。 */ html { --zoom-vh: 100vh; } body { font-family: var(--font-noto); color: var(--color-black); background-color: var(--color-bg); line-height: 1.5; } h1, h2, h3, h4, h5, h6, p, span, li, dt, dd, th, td, label, caption { margin-top: calc(1em * (1 - var(--cap-height-ratio)) / -2); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } button { background: none; border: none; cursor: pointer; font: inherit; } /* ========================================================================== Scroll Reveal ========================================================================== */ .sr { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .sr--visible { opacity: 1; transform: translateY(0); } /* Sticky sections: only fade, no translateY (avoid layout shift) */ .promise__sticky.sr, .gc-feature__sticky.sr, .wwd-promise__sticky.sr, .recruit-marquee.sr, .recruit-intention.sr { transform: none; } .promise__sticky.sr--visible, .gc-feature__sticky.sr--visible, .wwd-promise__sticky.sr--visible, .recruit-marquee.sr--visible, .recruit-intention.sr--visible { transform: none; } /* ========================================================================== Utilities ========================================================================== */ .sp-br { display: none; } @media (max-width: 768px) { .sp-br { display: inline; } .pc-br { display: none; } } /* ========================================================================== Header ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 35px 48px; opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease, transform 0.8s ease; } .site-header.is-visible { opacity: 1; transform: translateY(0); } /* Front-page staged reveal. Why: top-page intro plays stroke → logo → hamburger → text as four sequential beats. Sub pages and recruit get `is-visible` from PHP and reveal the whole header at once; on the front page the header has no `is-visible`, so the parent stays fully visible here and fv.js animates `.site-header__logo` and `.site-header__nav` in separately via `is-logo-in` / `is-nav-in`. */ .site-header:not(.is-visible) { opacity: 1; transform: none; transition: none; } .site-header:not(.is-visible) .site-header__logo, .site-header:not(.is-visible) .site-header__nav { opacity: 0; transform: translateY(-10px); transition: opacity 0.8s ease, transform 0.8s ease; } .site-header.is-logo-in .site-header__logo, .site-header.is-nav-in .site-header__nav { opacity: 1; transform: translateY(0); } .site-header__inner { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1600px; margin: 0 auto; } .site-header__logo img { width: 399px; height: 85px; } .site-header__nav { display: flex; align-items: center; gap: 20px; padding-top: 11px; } /* PC: ロゴの垂直中心にナビ (テキスト + ハンバーガー) を自動で中央揃え。タブレット以下は従来の flex-start + padding-top 微調整を維持する。 */ @media (min-width: 1025px) { .site-header__inner { align-items: center; } .site-header__nav, .site-header--sub .site-header__nav { padding-top: 0; } /* トップページ専用の微調整スロット。 :has(.site-header__logo-large) で front-page のヘッダーだけに適用される。 ★ 値を増減して位置を微調整（プラスで下、マイナスで上）*/ .site-header:has(.site-header__logo-large) .site-header__nav { margin-top: 12px; } } .site-header__nav-link { font-family: var(--font-noto); font-size: 14px; font-weight: 400; color: var(--color-primary); transition: color 0.3s ease; } /* Hover roller: 既存テキストが下にスライドアウト、複製が上から入ってくるマスク高さ・子要素高さは line-height (1.5em) に揃える。 1em にすると日本語グリフの上下が見切れるため */ .site-header__nav-link-mask { display: inline-block; overflow: hidden; line-height: 1.5; height: 1.5em; vertical-align: top; } .site-header__nav-link-roller { display: block; /* roller は 2行分(3em)、mask は 1.5em。初期は -50%(=-1.5em) シフトして「2番目のテキスト」がマスク内に来るようにする。ホバー時に 0 に戻ると、roller が下に移動 → 1番目が上から登場、2番目が下に消える */ transform: translateY(-50%); transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .site-header__nav-link-roller > span { display: block; line-height: 1.5; height: 1.5em; } .site-header__nav-link:hover .site-header__nav-link-roller, .site-header__nav-link:focus-visible .site-header__nav-link-roller { transform: translateY(0); } .site-header__hamburger { display: flex; flex-direction: column; gap: 10px; width: 50px; height: 11px; padding: 0; margin-top: -4px; } .site-header__hamburger span { display: block; width: 100%; height: 1px; background-color: var(--color-primary); transition: background-color 0.3s ease; } /* ========================================================================== Dark background overrides (brand / recruit-intention) 背景が支配的なときヘッダーを白に切り替える（JS で .is-on-dark-bg を付与） ========================================================================== */ .site-header__logo img { transition: filter 0.3s ease; } .site-header__logo-suffix { transition: color 0.3s ease; } .site-header.is-on-dark-bg .site-header__logo img { filter: brightness(0) invert(1); } .site-header.is-on-dark-bg .site-header__nav-link { color: var(--color-white); } .site-header.is-on-dark-bg .site-header__hamburger span { background-color: var(--color-white); } .site-header.is-on-dark-bg .site-header__logo-suffix { color: var(--color-white); } /* ========================================================================== Drawer Menu ========================================================================== */ .drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; pointer-events: none; } .drawer.is-open { pointer-events: auto; } .drawer__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.4s ease; } .drawer.is-open .drawer__overlay { opacity: 1; } .drawer__panel { position: absolute; top: 0; right: 0; width: 340px; height: 100%; background-color: var(--color-primary); display: flex; flex-direction: column; padding: 48px; transform: translateX(100%); transition: transform 0.4s ease; } .drawer.is-open .drawer__panel { transform: translateX(0); } .drawer__logo { display: none; } .drawer__close { position: absolute; top: 40px; right: 48px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .drawer__close span { position: absolute; display: block; width: 100%; height: 1px; background-color: var(--color-white); } .drawer__close span:first-child { transform: rotate(45deg); } .drawer__close span:last-child { transform: rotate(-45deg); } .drawer__nav { display: flex; flex-direction: column; gap: 22px; margin-top: auto; margin-bottom: auto; padding: 80px 0; } .drawer__link { font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-white); transition: opacity 0.3s; } .drawer__link:first-child { font-family: var(--font-marcellus); } .drawer__link:hover { opacity: 0.7; } .drawer__copyright { font-family: var(--font-noto); font-weight: 400; font-size: 13px; color: var(--color-white); line-height: 1.6; letter-spacing: -0.02em; white-space: nowrap; margin-top: auto; } body.drawer-open { overflow: hidden; } /* ========================================================================== FV (First View) ========================================================================== */ .fv { width: 100%; position: relative; background-color: var(--color-bg); /* zoom 適用時は --zoom-vh (design単位の画面高さ) を使う。非zoom時は 100svh にフォールバック */ --fv-vh: var(--zoom-vh, 100svh); /* 高解像度モニタで calc(--fv-vh - 110) が 793px などまで伸びて視覚的に大きくなりすぎていたため、上限値で実質的なキャップを効かせる。下限 640px は低解像度のフォールバック用。 ★ サイズ微調整はこの上限値（現在 750px）を増減する: 大 ←→ 小 ※ vh ≤ 1050 の狭いブラウザでは後段の @media (max-height: 1050px) で下限 640px が撤廃され、画像が viewport にぴったり収まるよう自動縮小する。 */ --fv-right-h: max(640px, min(calc(var(--fv-vh) - 110px), 750px)); --fv-right-w: calc(var(--fv-right-h) * 535 / 690); } .fv__inner { display: flex; align-items: flex-start; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 48px; } /* Left column - scrollable text */ .fv__left { flex: 1; min-width: 0; } /* Right column - sticky image */ .fv__right { flex-shrink: 0; width: calc(var(--fv-right-w) + 65px); align-self: stretch; display: flex; justify-content: flex-end; } .fv__right-sticky { position: sticky; /* 常に viewport 下端揃え。縦長モニタでは top を下げて bottom を viewport 下端にスナップ。縦が低い／height キャップが効かない環境では 110px 以上を保証してヘッダー被りを防ぐ。*/ top: max(110px, calc(var(--fv-vh) - var(--fv-right-h))); width: var(--fv-right-w); height: var(--fv-right-h); } /* Background photo - lowest layer */ .fv__photo-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.8s ease; overflow: hidden; /* 右上の角丸は .fv__logo-svg の右上カーブ（viewBox 431x690, 横113.664 × 縦122.234）に追従させる */ border-radius: 0 0 0 120px; border-top-right-radius: calc(var(--fv-right-h) * 113.664 / 690) calc(var(--fv-right-h) * 130 / 690); } .fv__photo-wrap.is-visible { opacity: 1; } .fv__photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; } .fv__photo.is-active { opacity: 1; } /* Logo layers - shared positioning */ .fv__logo-fill-wrap, .fv__logo-stroke-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; } /* Fill layer sits between photo and stroke */ .fv__logo-fill-wrap { z-index: 2; } /* Stroke layer on top */ .fv__logo-stroke-wrap { z-index: 3; } .fv__logo-svg { width: auto; height: 100%; /* viewBox端に接するpath（右端バーx=430.731 + stroke 1.5）の外側ストロークが SVGデフォルトoverflow:hiddenで切られて細く見えるのを回避 */ overflow: visible; } /* Stroke animation paths - dasharray/dashoffset set via JS with getTotalLength(). 初期は opacity 0 で隠す。理由: は dasharray 未指定のときデフォルトで全線描画されるため、 JS が dasharray/dashoffset を設定する前の 1 フレームで完成形アウトラインがフラッシュしてしまう。 fv.js が getTotalLength() で計測 → dashoffset セット完了後に `is-prepared` を付けて可視化する。*/ .fv__logo-path { opacity: 0; transition: none; } .fv__logo-path.is-prepared { opacity: 1; } .fv__logo-path.is-drawing { transition: stroke-dashoffset 2.5s cubic-bezier(0.4, 0, 0.2, 1); stroke-dashoffset: 0 !important; } .fv__logo-path--2.is-drawing { transition-delay: 0.3s; } .fv__logo-path--3.is-drawing { transition-delay: 0.6s; } /* Stroke fades out when photo is revealed (the white silhouette is provided by .fv__logo-fill) */ .fv__logo-path.is-white { transition: opacity 1.2s ease; opacity: 0; } /* Fill paths (initially hidden, all transitions handled via transition) */ .fv__logo-fill { opacity: 0; transition: fill 1.2s ease, opacity 0.8s ease; } /* Phase 2: green fill fades in */ .fv__logo-fill.is-filling { opacity: 1; } /* Phase 3: transitions to white 20% */ .fv__logo-fill.is-white { transition: fill 1.2s ease, opacity 1.2s ease; fill: #ffffff; opacity: 0.3; } /* Text content */ .fv__content { position: relative; /* 通常時 (vh ≥ 1051) は元の挙動 = タイトル下部ぞろえ。 vh ≤ 1050 では後段の @media (max-height: 1050px) で文字間を詰めて viewport に収まるようにする。 */ padding-top: 492px; padding-left: 22px; padding-bottom: 480px; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .fv__content.is-visible { opacity: 1; transform: translateY(0); } .fv__title { font-family: var(--font-zen); font-weight: 500; font-size: 36px; line-height: 1.1; color: var(--color-black); letter-spacing: 0; font-feature-settings: 'palt' 1, 'vrt2' 1, 'kern' 0; width: 36px; float: left; margin-right: 50px; /* PC: .fv__right-sticky の上辺 + 40px の位置でピン留めし、 .fv__title-group の bottom (= .fv__btn 直前) で自動解除。 ★ 微調整は下記の "+ 40px" 部分を増減する */ position: sticky; top: calc(max(110px, calc(var(--fv-vh) - var(--fv-right-h))) + 40px); } .fv__title p { margin-top: 0; } .fv__text { font-family: var(--font-noto); font-weight: 600; font-size: 16px; line-height: 2.37; letter-spacing: 1px; color: var(--color-black); font-feature-settings: 'palt' 1; padding-top: 111px; width: 477px; margin-left: 98px; } .fv__text p { margin-top: 0; } .fv__text-spacer { height: 2.4em; } .fv__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 30px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); margin-left: 96px; margin-top: 48px; transition: background-color 0.3s, color 0.3s; } .fv__btn:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== FV - 縦幅が狭い PC 向け特別処理 (max-height: 1050px) 通常時 (vh ≥ 1051) は元の挙動を維持。vh ≤ 1050 でタイトルが切れたり画像がはみ出したりするのを防ぎ、画像・タイトル両方を viewport 下部に揃える。 ★ 境界 1050 を変えると「特別処理に入る vh」を調整できる。 ★ クライアントが普段見ている vh (例: 1080) では何も変わらない設計。 ========================================================================== */ @media (max-height: 1050px) and (min-width: 1025px) { /* 画像: 640px の下限を撤廃して viewport に収まるよう自動縮小 */ .fv { --fv-right-h: min(calc(var(--fv-vh) - 110px), 750px); } /* タイトル文字間隔 (各

の margin-bottom デフォルト 1em = 36px) を 0 にしてタイトル全体の高さを ~530px → ~280px に圧縮 */ .fv__title p { margin-bottom: 0; } /* タイトル下端を viewport 下端 ~40px 上に揃える。タイトル高さ ~280px + 余白 40px = 320px を vh から引いて padding-top に。 ★ 上限 750px / 下限 50px は安全弁 */ .fv__content { padding-top: clamp(50px, calc(var(--fv-vh) - 320px), 750px); } } /* ========================================================================== Our Promise ========================================================================== */ .promise { position: relative; height: 400vh; margin-top: 200px; } .promise__sticky { position: sticky; top: 0px; height: var(--zoom-vh, 100vh); /* zoom 補正済みの viewport 高さ */ display: flex; align-items: center; justify-content: center; overflow: hidden; } .promise__label { position: absolute; /* slide (.promise__slide) は .promise__sticky 内で margin: auto により中央配置。 slide 寸法: 高さ 710px / 幅 min(100% - 96px, 1184px)。ラベルは常に slide (= 背景画像) の上辺・左辺から +60px の位置に配置する。 100% は .promise__sticky を参照するためスクロールバー差分を含まない。*/ top: calc((100% - 710px) / 2 + 60px); left: calc(max(48px, (100% - 1184px) / 2) + 60px); z-index: 10; } .promise__label-en { font-family: var(--font-marcellus); font-size: 16px; line-height: 1.5; color: var(--color-white); } .promise__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-white); font-feature-settings: 'palt' 1, 'hwid' 1; margin-top: 10px; } /* Slide */ .promise__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: calc(100% - 96px); max-width: 1184px; height: 710px; opacity: 0; transition: opacity 1s ease; will-change: opacity; backface-visibility: hidden; /* CSS で角丸を制御 (右上・左下)。PNG 焼き込みの角丸に依存しないため、どの aspect でも角丸が欠けない */ border-radius: 0 60px 0 60px; overflow: hidden; } .promise__slide.is-active { opacity: 1; } .promise__slide:not(.is-active) .promise__content { visibility: hidden; } .promise__bg { position: absolute; inset: 0; } .promise__bg img { width: 100%; height: 100%; object-fit: cover; } /* Content layout inside slide */ .promise__content { position: relative; z-index: 2; display: flex; align-items: flex-start; height: 100%; padding: 60px; } .promise__left { padding-top: 198px; } .promise__num { font-family: var(--font-marcellus); font-size: 16px; color: var(--color-white); display: block; font-feature-settings: 'palt' 1, 'hwid' 1; margin-left: 47px; } .promise__num-line { width: 17px; height: 1.5px; background: var(--color-white); margin-top: 5px; margin-left: 48px; } .promise__heading-en { font-family: var(--font-marcellus); font-weight: 400; font-size: 52px; line-height: 1.2; color: var(--color-white); white-space: nowrap; margin-top: 20px; margin-left: 41px; } .promise__right { margin-left: auto; padding-top: 281px; width: 329px; } .promise__heading-ja { font-family: var(--font-zen); font-weight: 500; font-size: 36px; line-height: 1.5; color: var(--color-white); font-feature-settings: 'palt' 1; } .promise__text { font-family: var(--font-noto); font-weight: 600; font-size: 14px; line-height: 2; letter-spacing: 1px; color: var(--color-white); font-feature-settings: 'palt' 1; margin-top: 30px; } /* ========================================================================== Promise - PC: 背景ビジュアルを左右 48px / 上 200px / 下 48px の inset で固定 - 左右は max-width を撤廃して常に 48px の余白を確保 (端からのスペース統一) - 縦幅が狭い viewport では top/bottom を線形にシュリンクし、最小 20px ずつを保証 - 角丸はベース側で CSS border-radius により常時保持されるため、aspect が崩れても視覚的に欠けない - コンテンツ (.promise__content) は max-width:1184 で中央寄せし、scale で縦にフィット (旧 scale 挙動を踏襲) ========================================================================== */ @media (min-width: 1025px) { .promise__sticky { /* slide の inset 値を変数化 (label / content から再利用する) */ --slide-top: clamp(20px, calc(var(--zoom-vh, 100vh) * 9 / 20 - 205px), 200px); --slide-bottom: clamp(20px, calc(var(--zoom-vh, 100vh) * 7 / 100 - 15px), 48px); --slide-h: calc(var(--zoom-vh, 100vh) - var(--slide-top) - var(--slide-bottom)); } .promise__slide { /* ベースの中央寄せ指定を上書きして inset 配置に切り替え */ top: var(--slide-top); right: 48px; bottom: var(--slide-bottom); left: 48px; width: auto; max-width: none; height: auto; margin: 0; transform: none; } .promise__content { /* コンテンツは 1184px max で中央寄せ。slide が広くなっても文字は中央に集約 */ max-width: 1184px; margin: 0 auto; /* slide 高さに応じて content のみ縮小 (旧 scale 挙動の踏襲: 710 を基準) */ transform: scale(clamp(0.6, calc(var(--slide-h) / 710px), 1)); transform-origin: top center; } .promise__label { /* slide 内 60px インセット (top/left ともに) を変数で表現。 slide が縮んでも最小 20px の余白 (slide 自体の min) +60 で確保される */ top: calc(var(--slide-top) + 60px); /* 中央寄せされた content (max 1184px) の左端 + 60px に揃える */ left: calc((100% - min(1184px, calc(100% - 96px)) * clamp(0.6, calc(var(--slide-h) / 710px), 1)) / 2 + 60px); } } /* ========================================================================== Promise - MacBook 13"/14" 相当 (vw 1025-1366px) のみ bg を左右に拡張 - zoom JS は vw < 1280 で無効、1280-1920 で zoom 1.0→1.5 と線形拡大するため大きいモニタでは slide が視覚的に十分大きく表示される - 狭幅 PC ノートでは slide が小さく感じるため、bg のみ slide の外側 48px まで拡張 (コンテンツ位置は不変) - sticky に overflow:hidden があるので viewport 端できれいにクリップされる - slide の transform:scale が bg にも掛かるため、視覚上の拡張量は 48px × scale ========================================================================== */ /* @media (min-width: 1025px) and (max-width: 1366px) { .promise__bg { inset: 0 -48px; } } */ /* ========================================================================== What We Do ========================================================================== */ .whatwedo { padding: 102px 0 200px; } .whatwedo__inner { display: flex; align-items: flex-start; gap: 56px; max-width: 1280px; margin: 0 auto; padding: 0 104px 0 119px; box-sizing: border-box; } .whatwedo__left { flex: 1; min-width: 0; padding-top: 57px; } .whatwedo__label-en { font-family: var(--font-marcellus); font-size: 16px; line-height: 1.5; } .whatwedo__heading { font-family: var(--font-zen); font-weight: 500; font-size: 36px; line-height: 1.5; font-feature-settings: 'palt' 1, 'hwid' 1; margin-top: 10px; } .whatwedo__text { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 2; letter-spacing: 1px; font-feature-settings: 'palt' 1; margin-top: 48px; } .whatwedo__text p { margin-top: 0; } .whatwedo__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 29px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); margin-top: 50px; transition: background-color 0.3s, color 0.3s; } .whatwedo__btn:hover { background-color: var(--color-primary); color: var(--color-white); } /* Process chart */ .whatwedo__right { flex-shrink: 0; width: 423px; } .whatwedo__process { position: relative; width: 100%; aspect-ratio: 840 / 944; } .whatwedo__process-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: scale(1.04); } .whatwedo__process-arc { fill: none; stroke: var(--color-primary); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } .whatwedo__process-center, .whatwedo__process-icon { position: absolute; opacity: 0; } .whatwedo__process-center { left: 50%; top: 50%; width: calc(340 / 840 * 100%); height: auto; transform: translate(-50%, -50%) scale(0.85); } .whatwedo__process-icon { width: calc(240 / 840 * 100%); height: auto; transform: scale(0.85); } .whatwedo__process-icon--01 { left: calc(300 / 840 * 100%); top: 2; } .whatwedo__process-icon--02 { left: calc(599 / 840 * 100%); top: calc(184 / 944 * 100%); } .whatwedo__process-icon--03 { left: calc(599 / 840 * 100%); top: calc(523 / 944 * 100%); } .whatwedo__process-icon--04 { left: calc(302 / 840 * 100%); top: calc(704 / 944 * 100%); } .whatwedo__process-icon--05 { left: calc(3 / 840 * 100%); top: calc(523 / 944 * 100%); } .whatwedo__process-icon--06 { left: calc(3 / 840 * 100%); top: calc(184 / 944 * 100%); } /* Trigger: parent .whatwedo__right が scroll-reveal で .sr--visible になったら一連のアニメ開始 */ .whatwedo__right.sr--visible .whatwedo__process-center { animation: process-pop-center 0.7s ease-out forwards; } .whatwedo__right.sr--visible .whatwedo__process-icon { animation: process-pop-icon 0.5s ease-out forwards; } .whatwedo__right.sr--visible .whatwedo__process-arc { animation: process-arc-draw 0.55s ease-out forwards; } .whatwedo__right.sr--visible .whatwedo__process-icon--01 { animation-delay: 0.5s; } .whatwedo__right.sr--visible .whatwedo__process-icon--02 { animation-delay: 0.7s; } .whatwedo__right.sr--visible .whatwedo__process-icon--03 { animation-delay: 0.9s; } .whatwedo__right.sr--visible .whatwedo__process-icon--04 { animation-delay: 1.1s; } .whatwedo__right.sr--visible .whatwedo__process-icon--05 { animation-delay: 1.3s; } .whatwedo__right.sr--visible .whatwedo__process-icon--06 { animation-delay: 1.5s; } .whatwedo__right.sr--visible .whatwedo__process-arc--01 { animation-delay: 1.75s; } .whatwedo__right.sr--visible .whatwedo__process-arc--02 { animation-delay: 1.95s; } .whatwedo__right.sr--visible .whatwedo__process-arc--03 { animation-delay: 2.15s; } .whatwedo__right.sr--visible .whatwedo__process-arc--04 { animation-delay: 2.35s; } .whatwedo__right.sr--visible .whatwedo__process-arc--05 { animation-delay: 2.55s; } .whatwedo__right.sr--visible .whatwedo__process-arc--06 { animation-delay: 2.75s; } @keyframes process-pop-center { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } @keyframes process-pop-icon { to { opacity: 1; transform: scale(1); } } @keyframes process-arc-draw { to { stroke-dashoffset: 0; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { .whatwedo__process-center, .whatwedo__process-icon { opacity: 1; transform: translate(0, 0) scale(1); animation: none !important; } .whatwedo__process-center { transform: translate(-50%, -50%); } .whatwedo__process-arc { stroke-dashoffset: 0; animation: none !important; } } /* ========================================================================== Our Brand ========================================================================== */ .brand { position: relative; width: 100%; min-height: 800px; padding: 200px 0; } .brand__bg { position: fixed; inset: 0; z-index: 0; opacity: 0; pointer-events: none; } .brand__bg img { width: 100%; height: 100%; object-fit: cover; } .brand__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; min-height: 800px; } .brand__left { position: absolute; left: 175px; top: 117px; flex-shrink: 0; } .brand__vertical-text { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 15px; } .brand__vertical-col { writing-mode: vertical-rl; font-family: var(--font-zen); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: 5px; color: var(--color-white); font-feature-settings: 'vrt2' 1; } .brand__vertical-col:nth-child(2) { padding-top: 58px; } .brand__right { position: absolute; left: 652px; top: 234px; } .brand__label-en { font-family: var(--font-marcellus); font-size: 16px; line-height: 1.5; color: var(--color-white); } .brand__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-white); font-feature-settings: 'palt' 1, 'hwid' 1; margin-top: 10px; } .brand__logo { margin-top: 60px; } .brand__logo img { width: 363px; height: auto; } .brand__text { font-family: var(--font-noto); font-weight: 600; font-size: 14px; line-height: 2.2; color: var(--color-white); font-feature-settings: 'palt' 1; text-align: justify; width: 477px; margin-top: 50px; } .brand__text p { margin-top: 0; } .brand__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 29px; border: 1px solid var(--color-white); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-white); margin-top: 40px; transition: background-color 0.3s, color 0.3s; } .brand__btn:hover { background-color: var(--color-white); color: var(--color-black); } /* ========================================================================== Information ========================================================================== */ .info { padding: 198px 0 200px; } .info__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; column-gap: 217px; align-items: start; } .info__header { margin-bottom: 30px; } .info__list { grid-column: 2; grid-row: 1; } .info__label-en { font-family: var(--font-marcellus); font-size: 16px; line-height: 1.5; } .info__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 20px; line-height: 1.5; font-feature-settings: 'palt' 1, 'hwid' 1; margin-top: 10px; } .info__list { border-top: 1px solid #ccc; } .info__item { display: flex; align-items: center; padding: 50px 0; border-bottom: 1px solid #ccc; transition: opacity 0.3s; gap: 80px; } .info__item:hover { opacity: 0.7; } .info__date { font-family: var(--font-noto); font-weight: 500; font-size: 16px; flex-shrink: 0; width: 120px; } .info__title { font-family: var(--font-noto); font-weight: 400; font-size: 16px; flex: 1; min-width: 0; } .info__arrow { width: 11px; height: 14px; flex-shrink: 0; margin-left: 20px; margin-right: 44px; background-image: url('../images/info__arrow.png'); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; text-indent: -9999px; overflow: hidden; } .info__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 29px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); grid-column: 2; grid-row: 2; justify-self: end; float: right; margin-top: 50px; transition: background-color 0.3s, color 0.3s, opacity 0.8s ease, transform 0.8s ease; } .info__btn:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Join Us ========================================================================== */ .joinus { position: relative; width: 100%; min-height: 800px; } .joinus__bg { position: absolute; inset: 0; } .joinus__bg img { width: 100%; height: 100%; object-fit: cover; } .joinus__bg-sp { display: none; } .joinus__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 60px; min-height: 800px; } .joinus__header { margin-bottom: 120px; } .joinus__label-en { font-family: var(--font-marcellus); font-size: 16px; line-height: 1.5; color: var(--color-white); } .joinus__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 26px; color: var(--color-white); margin-top: 3px; } .joinus__title { padding-top: 33px; padding-left: 89px; } .joinus__heading-en { font-family: var(--font-marcellus); font-weight: 400; font-size: 52px; line-height: 1.2; color: var(--color-white); position: relative; } .joinus__heading-ja { font-family: var(--font-zen); font-weight: 500; font-size: 24px; line-height: 1.5; letter-spacing: 2px; color: var(--color-white); margin-top: 8px; } .joinus__comma { letter-spacing: -8px; } .joinus__text { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 2; color: var(--color-white); font-feature-settings: 'palt' 1; text-align: justify; width: 477px; margin-left: auto; margin-top: 91px; margin-right: 89px; } .joinus__text p { margin-top: 0; } .joinus__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 30px; border: 1px solid var(--color-white); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-white); margin-left: auto; display: flex; width: fit-content; margin-top: 49px; margin-left: auto; margin-right: 393px; transition: background-color 0.3s, color 0.3s, opacity 0.8s ease, transform 0.8s ease; } .joinus__btn:hover { background-color: var(--color-white); color: var(--color-black); } /* ========================================================================== CTA ========================================================================== */ .cta { display: flex; justify-content: center; gap: 28px; margin-top: 223px; } body:not(.home) .cta { margin-top: 100px; } body.page-template-page-grancomfort .cta { margin-top: 140px; } .cta__item { flex: 0 0 578px; width: 578px; box-sizing: border-box; position: relative; padding: 62px 0px 25px; border-bottom: 1px solid #ccc; transition: opacity 0.3s, transform 0.8s ease; } .cta__item:hover { opacity: 0.7; } .cta__heading-en { font-family: var(--font-marcellus); font-size: 36px; line-height: 1.5; } .cta__heading-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; margin-top: 2px; } .cta__arrow { position: absolute; right: 40px; bottom: 53px; width: 11px; height: 14px; background-image: url(../images/info__arrow.png); background-size: contain; background-repeat: no-repeat; background-position: center; font-size: 0; text-indent: -9999px; overflow: hidden; } /* Hover-only: arrow loop animation exit right → brief gap (arrow fully gone) → enter from left */ @media (hover: hover) { .info__arrow { position: relative; } .info__arrow, .cta__arrow { background-image: none; } .info__arrow::before, .info__arrow::after, .cta__arrow::before, .cta__arrow::after { content: ''; position: absolute; inset: 0; background-image: url('../images/info__arrow.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* Default: no transition (hover-off snaps back instantly) */ .info__arrow::after, .cta__arrow::after { transform: translateX(-100%); } /* Hover-on: ::before exits first, then brief gap, then ::after enters */ .info__item:hover .info__arrow::before, .cta__item:hover .cta__arrow::before { transform: translateX(100%); transition: transform 0.2s ease 0s; } .info__item:hover .info__arrow::after, .cta__item:hover .cta__arrow::after { transform: translateX(0); transition: transform 0.2s ease 0.3s; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding: 107px 55px 40px 48px; max-width: 1280px; margin: 0 auto; } .site-footer__inner { display: flex; align-items: flex-start; justify-content: flex-start; gap: 234px; } .site-footer__logo img { width: 524px; height: auto; } .site-footer__nav { display: flex; gap: 60px; } .site-footer__nav-col { display: flex; flex-direction: column; gap: 19px; } .site-footer__nav-col a { font-family: var(--font-noto); font-weight: 400; font-size: 14px; color: var(--color-primary); transition: opacity 0.3s; } .site-footer__nav-col a:hover { opacity: 0.7; } .site-footer__copyright { font-family: var(--font-noto); font-weight: 400; font-size: 13px; color: var(--color-black); text-align: right; margin-top: 58px; } /* ========================================================================== Sub-page Header ========================================================================== */ .site-header--sub { background-color: transparent; position: fixed; padding: 30px 48px; } .site-header--sub .site-header__logo img { width: 228px; height: auto; } .site-header--sub .site-header__nav { padding-top: 12px; } /* トップページのロゴ: スクロール量に応じて大→小へ連続的にスケール変化 header-scroll.js が --logo-scroll-progress (0→1) を CSS 変数で渡す */ .site-header__logo { position: relative; display: inline-block; } .site-header__logo .site-header__logo-large { display: block; transform-origin: top left; } /* 旧クロスフェード用の小ロゴはサイズ駆動方式で不要 */ .site-header__logo .site-header__logo-small { display: none; } @media (min-width: 1025px) { /* PC: 399px → 228px (scale 1 → 0.5714) */ .site-header__logo .site-header__logo-large { transform: scale(calc(1 - 0.4286 * var(--logo-scroll-progress, 0))); } /* トップページのロゴコンテナを「スクロール後の縮小サイズ (228 × 48.57px)」に固定。 transform: scale はレイアウト寸法を変えないため、コンテナ自体を最終サイズで確保しておかないと align-items: center が大きいコンテナ基準になりナビがズレる。大きい状態のロゴ画像は absolute でコンテナを越えてオーバーフロー表示される。 */ .site-header__logo:has(.site-header__logo-large) { width: 228px; aspect-ratio: 399 / 85; } .site-header__logo:has(.site-header__logo-large) .site-header__logo-large { position: absolute; top: 0; left: 0; /* グローバル `img { max-width: 100% }` が親 (228px) で画像幅をキャップしてしまうため、明示的に解除して 399px の本来サイズで描画させる */ max-width: none; } } @media (min-width: 769px) and (max-width: 1024px) { /* タブレット: 280px → 228px (scale 1 → 0.8143) */ .site-header__logo .site-header__logo-large { transform: scale(calc(1 - 0.1857 * var(--logo-scroll-progress, 0))); } } .site-header__logo-sub { width: 228px; height: auto; } /* ========================================================================== Page Header (shared) ========================================================================== */ .page-header { padding: 235px 0 0; } .page-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } /* page-header はファーストビュー内にあるためJS適用前の一瞬の表示を防ぐ初期hidden状態 */ .page-header__label:not(.sr--visible), .page-header__heading:not(.sr--visible), .page-header__logo:not(.sr--visible), .page-header__line:not(.sr--visible), .page-header__text:not(.sr--visible) { opacity: 0; transform: translateY(30px); } /* ファーストビュー内に位置するセクションのFOUC対策: JS適用前の一瞬の表示を防ぐ */ .gc-hero__photo:not(.sr--visible), .spirit__label:not(.sr--visible), .spirit__symbol:not(.sr--visible), .spirit__heading:not(.sr--visible), .spirit__text:not(.sr--visible), .requirement__dept:not(.sr--visible), .entry__intro:not(.sr--visible), .entry__form:not(.sr--visible), .thanks__message:not(.sr--visible), .thanks__button-wrap:not(.sr--visible), .news-archive__tags:not(.sr--visible), .news-archive__item:not(.sr--visible), .news-archive__empty:not(.sr--visible), .news-archive__pagination:not(.sr--visible), .privacy__intro:not(.sr--visible), .privacy__article:not(.sr--visible), .recruit-hero__title:not(.sr--visible), .recruit-hero__sub:not(.sr--visible), .recruit-hero__photos:not(.sr--visible), .ph-header__label:not(.sr--visible), .ph-header__heading:not(.sr--visible), .ph-header__line:not(.sr--visible), .ph-intro__left:not(.sr--visible), .ph-intro__right:not(.sr--visible), .biz-intro__heading:not(.sr--visible), .biz-intro__text:not(.sr--visible), .msg-content__heading:not(.sr--visible), .msg-content__body:not(.sr--visible) { opacity: 0; transform: translateY(30px); } /* wwd-promise__sticky は既存ルールで transform: none 指定があるため opacity のみ */ .wwd-promise__sticky:not(.sr--visible) { opacity: 0; } .page-header__label { font-family: var(--font-noto); font-weight: 400; font-size: 16px; letter-spacing: 2px; font-feature-settings: 'palt' 1; } .page-header__heading { font-family: var(--font-marcellus); font-weight: 400; font-size: 60px; line-height: 1.2; margin-top: 10px; } .page-header__line { width: 100%; height: 1px; background-color: var(--color-primary); margin-top: -5px; } .page-header__text { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 2; letter-spacing: 1px; font-feature-settings: 'palt' 1; text-align: justify; max-width: 679px; margin-left: auto; margin-top: 49px; margin-right: 101px; } .page-header__text p { margin-top: 0; } /* ========================================================================== Spirit ========================================================================== */ .spirit { padding: 192px 0 228px; max-width: 1280px; margin: 0 auto; position: relative; } .spirit::after { content: ''; position: absolute; left: 48px; right: 48px; bottom: 0; border-bottom: 1px solid #ccc; } .spirit__inner { padding: 0 48px; } .spirit__label { margin-bottom: 54px; } .spirit__label-en { font-family: var(--font-marcellus); font-size: 16px; } .spirit__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 1.6; margin-top: 1px; } .spirit__symbol { display: flex; justify-content: center; margin-bottom: 65px; } .spirit__symbol-img { width: auto; height: 215px; } .spirit__heading { font-family: var(--font-zen); font-weight: 500; font-size: 30px; line-height: 1.8; text-align: center; letter-spacing: 2px; } .spirit__text { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 2.2; text-align: center; letter-spacing: 1px; font-feature-settings: 'palt' 1; margin-top: 32px; } .spirit__text p { margin-top: 0; } /* ========================================================================== Outline (Company Info) ========================================================================== */ .outline { padding: 221px 0 182px; } .outline__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .outline__section-header { margin-bottom: 78px; } .outline__label-en { font-family: var(--font-marcellus); font-size: 16px; } .outline__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 26px; margin-top: 13px; } .outline__company { margin-bottom: 180px; } .outline__company:last-child { margin-bottom: 0; } .outline__company-body { display: flex; align-items: flex-start; gap: 51px; } .outline__company-photo { width: 477px; height: 318px; background-color: transparent; flex-shrink: 0; } .outline__company-detail { flex: 1; min-width: 0; } .outline__company-logo { margin-bottom: 35px; } .outline__company-logo img { height: 80px; width: auto; } .outline__table { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 71px; } .outline__row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; padding: 9px 0 10px; border-bottom: 1px solid #ccc; font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 1.8; } .outline__row dt { color: #848484; } .outline__row dd { min-width: 0; } /* ========================================================================== Company Map ========================================================================== */ .company-map { width: 100%; height: 800px; } .company-map iframe { display: block; } /* ========================================================================== History ========================================================================== */ .history { padding: 182px 0 94px; position: relative; } .history::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 96px); max-width: calc(1280px - 96px); border-top: 1px solid #ccc; } .history__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; display: flex; align-items: flex-start; gap: 251px; } .history__section-header { flex-shrink: 0; } .history__label-en { font-family: var(--font-marcellus); font-size: 16px; } .history__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 26px; margin-top: 13px; } .history__timeline { position: relative; flex: 1; min-width: 0; margin-top: -5px; } .history__line { position: absolute; left: 3px; top: 20px; bottom: 40px; width: 1px; background-color: #ccc; } .history__item { position: relative; display: flex; align-items: baseline; gap: 30px; padding: 2px 0 31px 28px; font-family: var(--font-noto); font-weight: 400; font-size: 14px; } .history__year { color: #848484; white-space: nowrap; flex-shrink: 0; } .history__dot { position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background-color: #848484; border-radius: 50%; } .history__month { color: #848484; width: 36px; flex-shrink: 0; } .history__desc { flex: 1; margin-left: -24px; line-height: 2; } /* ========================================================================== Gran Comfort Page - Page Header Logo ========================================================================== */ .page-header__logo { margin-top: 12px; } .page-header__logo img { height: 96px; width: auto; } /* Gran Comfort Page - Page Header layout override (logo on left; right column: horizontal green line vertically centered with logo, text below) */ .page-header--grancomfort .page-header__inner { display: grid; grid-template-columns: auto 1fr; column-gap: 32px; row-gap: 0; } .page-header--grancomfort .page-header__label { grid-column: 1 / -1; grid-row: 1; margin-bottom: 26px; } .page-header--grancomfort .page-header__logo { grid-column: 1; grid-row: 2; margin-top: 0; } .page-header--grancomfort .page-header__line { grid-column: 2; grid-row: 2; width: 100%; height: 1px; margin: 0; align-self: center; } .page-header--grancomfort .page-header__text { grid-column: 2; grid-row: 3; margin-top: 28px; margin-left: -104px; max-width: none; } /* ========================================================================== Gran Comfort - Hero Photos ========================================================================== */ .gc-hero { padding: 131px 0 0; } .gc-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 48px; min-height: 700px; } .gc-hero__photo { overflow: hidden; transition: opacity 0.8s ease; /* .sr の transform transition を上書き(JS制御を妨げないため) */ } .gc-hero__photo img { width: 100%; height: auto; display: block; transform: scale(1.50) translate3d(0, 0, 0); transform-origin: center 50%; will-change: transform; } .gc-hero__photo--1 { width: 578px; } .gc-hero__photo--2 { position: absolute; right: 48px; top: 439px; width: 705px; } /* ========================================================================== Gran Comfort - Concept Block ========================================================================== */ .gc-concept { padding: 280px 0 162px; } .gc-concept ~ .gc-concept { padding: 37px 0 200px; } .gc-concept__inner { max-width: 1280px; margin: 0 auto; padding: 0 89px; display: flex; align-items: flex-start; gap: 60px; } .gc-concept__heading { font-family: var(--font-zen); font-weight: 500; font-size: 28px; line-height: 1.8; flex-shrink: 0; padding-left: 60px; } .gc-concept__text { font-family: var(--font-noto); font-weight: 400; font-size: 18px; line-height: 2.2; font-feature-settings: 'palt' 1; text-align: justify; margin-left: 8px; margin-top: 69px; } .gc-concept ~ .gc-concept .gc-concept__text { margin-left: 95px; margin-top: 83px; } .gc-concept__text p { margin-top: 0; } /* ========================================================================== Gran Comfort - Photo Section with BG ========================================================================== */ .gc-photos__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 56px; min-height: 500px; } .gc-photos__photo { overflow: hidden; transition: opacity 0.8s ease; /* .sr の transform transition を上書き(JS制御を妨げないため) */ } .gc-photos__photo img { width: 100%; height: auto; display: block; transform: scale(1.50) translate3d(0, 0, 0); transform-origin: center 50%; will-change: transform; } .gc-photos__photo--1 { width: 669px; } .gc-photos__photo--2 { position: absolute; right: 149px; top: 150px; width: 323px; } /* ========================================================================== Gran Comfort - Divider ========================================================================== */ .gc-divider { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .gc-divider__line { width: 100%; height: 1px; background-color: #ccc; } /* ========================================================================== Gran Comfort - Feature (sticky fade) ========================================================================== */ .gc-feature { position: relative; height: 400vh; margin-top: 47px; } .gc-feature__sticky { position: sticky; /* ヘッダーとの間隔を 60px 開ける。中身のスライドは absolute inset:0 + flex center で配置されているため、 top を下げると視覚中心も 60px 下にシフトする。 ★ 間隔の微調整はこの 60px を増減する */ top: 60px; height: var(--zoom-vh, 100vh); /* zoom 補正済みの viewport 高さ */ overflow: hidden; } .gc-feature__heading-sp { display: none; } .gc-feature__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; will-change: opacity; backface-visibility: hidden; } .gc-feature__slide:first-child { opacity: 1; } .gc-feature__content { display: flex; align-items: flex-start; gap: 40px; max-width: 1280px; margin: 0 auto; padding: 0 48px; width: 100%; } .gc-feature__left { flex: 1; min-width: 0; } .gc-feature__label-en { font-family: var(--font-marcellus); font-size: 16px; } .gc-feature__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 1.6; margin-top: 8px; } .gc-feature__category { font-family: var(--font-marcellus); font-size: 14px; margin-top: 78px; } .gc-feature__heading { font-family: var(--font-zen); font-weight: 500; font-size: 28px; line-height: 1.8; margin-top: 8px; } .gc-feature__text { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 2; font-feature-settings: 'palt' 1; text-align: justify; max-width: 578px; margin-top: 40px; } .gc-feature__text p { margin-top: 0; } .gc-feature__right { flex-shrink: 0; width: 477px; display: flex; flex-direction: column; } .gc-feature__right img { width: 100%; height: auto; } /* Progress bar */ .gc-feature__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; margin-top: 34px; } .gc-feature__progress-num { font-family: var(--font-marcellus); font-size: 12px; } .gc-feature__progress-num--sp { display: none; } .gc-feature__progress-bar { width: 174px; height: 2px; background-color: #c1c1c1; } .gc-feature__progress-fill { height: 100%; background-color: var(--color-primary); } /* ========================================================================== Info Badge (Top Page) ========================================================================== */ .info__badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; background-color: var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 500; font-size: 13px; color: var(--color-white); letter-spacing: 1px; line-height: 1; flex-shrink: 0; } /* ========================================================================== News Archive ========================================================================== */ .news-archive { padding: 101px 0 120px; } .news-archive__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .news-archive__tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; } .news-archive__tag { display: inline-flex; align-items: center; justify-content: center; padding: 0px 15px; border: 1px solid #848484; border-radius: 4px; font-family: var(--font-noto); font-weight: 500; font-size: 16px; color: #848484; letter-spacing: 1px; line-height: 2; transition: border-color 0.3s, color 0.3s; } .news-archive__tag:hover { border-color: var(--color-primary); color: var(--color-primary); } .news-archive__tag.is-active { border-color: var(--color-primary); color: var(--color-primary); } .news-archive__list { border-top: 1px solid #ccc; display: grid; grid-template-columns: auto 1fr; column-gap: 72px; } .news-archive__item { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; row-gap: 8px; padding: 24px 0 50px; border-bottom: 1px solid #ccc; transition: opacity 0.3s; } .news-archive__item .news-archive__badge { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: start; } .news-archive__item .news-archive__date { grid-column: 2; grid-row: 1; margin-top: 9px; } .news-archive__item .news-archive__title { grid-column: 2; grid-row: 2; margin-top: 5px; } .news-archive__item:hover { opacity: 0.7; } .news-archive__badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; background-color: var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 500; font-size: 13px; color: var(--color-white); letter-spacing: 1px; line-height: 1; flex-shrink: 0; min-width: 100px; text-align: center; } .news-archive__date { font-family: var(--font-inter); font-weight: 500; font-size: 16px; flex-shrink: 0; } .news-archive__title { font-family: var(--font-noto); font-weight: 400; font-size: 16px; flex: 1; min-width: 0; } .news-archive__empty { padding: 60px 0; text-align: center; font-size: 16px; color: #848484; } .news-archive__pagination { display: flex; align-items: center; justify-content: center; gap: 23px; margin-top: 111px; } .news-archive__page-num { font-family: var(--font-inter); font-weight: 500; font-size: 24px; color: #848484; line-height: 2; letter-spacing: 1px; transition: color 0.3s; } .news-archive__page-num:hover { color: var(--color-primary); } .news-archive__page-num.is-current { color: var(--color-primary); text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 1px; } .news-archive__page-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--color-primary); border-radius: 4px; color: var(--color-primary); transition: background-color 0.3s, color 0.3s; } .news-archive__page-arrow:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== News Single ========================================================================== */ .news-single { padding: 160px 0 50px; } .news-single__inner { max-width: 1280px; margin: 0 auto; padding: 81px 48px; display: flex; flex-direction: column; } .news-single__meta { display: flex; align-items: center; gap: 17px; order: 1; } .news-single__badge { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; background-color: var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 500; font-size: 13px; color: var(--color-white); letter-spacing: 1px; line-height: 1; } .news-single__date { font-family: var(--font-inter); font-weight: 500; font-size: 16px; } .news-single__title { font-family: var(--font-noto); font-weight: 700; font-size: 26px; line-height: 1.5; margin-top: 58px; order: 3; } .news-single__line { width: 100%; height: 1px; background-color: var(--color-primary); margin-top: 30px; order: 2; } .news-single__content { max-width: 780px; margin: 100px auto 0; width: 100%; order: 4; } .news-single__content h2 { font-family: var(--font-noto); font-weight: 700; font-size: 24px; line-height: 1.5; margin-top: 60px; } .news-single__content h3 { font-family: var(--font-noto); font-weight: 700; font-size: 18px; line-height: 1.5; margin-top: 32px; } .news-single__content p { font-family: var(--font-noto); font-weight: 500; font-size: 14px; line-height: 1.8; letter-spacing: 1.5px; text-align: justify; font-feature-settings: 'palt' 1; margin-top: 4px; } .news-single__content img { width: 100%; height: auto; margin-top: 30px; } .news-single__back { text-align: center; margin-top: 118px; order: 5; } .news-single__back-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 29px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); transition: background-color 0.3s, color 0.3s; } .news-single__back-btn:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Recruit Entry (採用応募フォーム) ========================================================================== */ .entry { padding: 0 0 0px; } .entry__inner { max-width: 982px; margin: 0 auto; } .entry__intro { padding-left: 303px; margin-top: 49px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 2; color: var(--color-black); } .entry__form { margin-top: 116px; } /* Row layout (ラベル左 / 入力欄右) */ .entry__row { display: flex; align-items: flex-start; gap: 0; margin-bottom: 55px; } .entry__label { flex-shrink: 0; width: 303px; padding-top: 18px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-black); letter-spacing: 1px; } .entry__req { color: red; font-size: 12px; margin-left: 8px; } .entry__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; } /* CF7 form-control wrapper inside our field column should fill width */ .entry .wpcf7-form-control-wrap { display: block; width: 100%; } /* Inputs / select / textarea */ .entry input[type="text"], .entry input[type="email"], .entry input[type="tel"], .entry input[type="number"], .entry input[type="url"], .entry input[type="password"], .entry select, .entry textarea { width: 100%; height: 60px; padding: 0 16px; background-color: transparent; border: 1px solid #848484; border-radius: 6px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-black); letter-spacing: 1px; appearance: none; -webkit-appearance: none; box-sizing: border-box; } .entry textarea { height: auto; min-height: 160px; padding: 16px; line-height: 1.8; resize: vertical; } .entry input::placeholder, .entry textarea::placeholder { color: #848484; } .entry input:focus, .entry select:focus, .entry textarea:focus { outline: none; border-color: var(--color-primary); } /* Custom select arrow */ .entry select { display: block; min-width: 100%; background-image: url("data:image/svg+xml;charset=utf-8,"); background-repeat: no-repeat; background-position: right 20px center; padding-right: 50px; cursor: pointer; } /* 住所行: 〒 + 短い郵便番号入力（〒は入力欄の内側に absolute 配置） */ .entry__field-line--postal { position: relative; width: 376px; max-width: 100%; } .entry__field-line--postal .wpcf7-form-control-wrap { display: block; width: 100%; } .entry__field-line--postal input[type="text"] { width: 100%; padding-left: 50px; } .entry__prefix { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 1; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); } /* File upload (ネイティブ input を隠し、独自UIで表示) */ .entry__row--file .entry__label { padding-top: 8px; } .entry__file { display: inline-flex; align-items: center; gap: 16px; cursor: pointer; position: relative; } .entry__file-button { display: inline-block; height: 40px; line-height: 40px; padding: 0 16px; background-color: #dedede; border-radius: 4px; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); flex-shrink: 0; } .entry__file-name { font-family: var(--font-noto); font-size: 16px; color: var(--color-black); word-break: break-all; } .entry__file .wpcf7-form-control-wrap { display: inline; width: auto; } .entry__file input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Consent (利用規約に同意) */ .entry__consent { margin-top:101px; text-align: center; font-family: var(--font-noto); font-size: 16px; letter-spacing: 1px; } .entry__consent .wpcf7-list-item { margin: 0; display: inline-block; } .entry__consent label { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; } .entry__consent input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid #848484; border-radius: 50%; background-color: transparent; margin: 0; cursor: pointer; flex-shrink: 0; position: relative; } .entry__consent input[type="checkbox"]:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .entry__consent input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 4px; background-color: var(--color-white); border-radius: 50%; } .entry__consent a { text-decoration: underline; text-underline-offset: 3px; color: var(--color-black); transition: color 0.3s; } .entry__consent a:hover { color: var(--color-primary); } /* Submit button (ENTRY) */ .entry__submit-wrap { margin-top: 45px; margin-left: 70px; text-align: center; } .entry input[type="submit"], .entry .wpcf7-submit { display: inline-block; width: 578px; max-width: 100%; height: 80px; padding: 0 60px 0 30px; background-color: var(--color-primary); border: none; border-radius: 10px; font-family: var(--font-marcellus); font-weight: 400; font-size: 24px; line-height: 1.6; color: var(--color-white); letter-spacing: 2px; cursor: pointer; transition: opacity 0.3s; /* 3層: マスク2(右) / マスク2(左) / 矢印画像。マスクはボタン背景色で矢印を隠す */ background-image: linear-gradient(var(--color-primary), var(--color-primary)), linear-gradient(var(--color-primary), var(--color-primary)), url("../images/recruit-intention-arrow.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: right 15px center, right 45px center, right 30px center; background-size: 11px 14px, 11px 14px, 11px 14px; } .entry input[type="submit"]:hover, .entry .wpcf7-submit:hover { opacity: 0.85; } /* CF7 response & validation */ .entry .wpcf7-response-output { margin: 30px auto 0; max-width: 679px; padding: 12px 16px; border-radius: 6px; font-family: var(--font-noto); font-size: 14px; text-align: center; } .entry .wpcf7-not-valid-tip { color: red; font-size: 13px; margin-top: 6px; } .entry .wpcf7-not-valid { border-color: red !important; } /* CF7のデフォルトの

マージン除去 (フォームエディタで

が混ざる場合に備えて) */ .entry .wpcf7-form > p { margin: 0; } /* CF7 file input - ネイティブ「ファイルを選択」ボタンのスタイリング (お問い合わせページ用) */ .wpcf7 input[type="file"] { width: 100%; max-width: 100%; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); } .wpcf7 input[type="file"]::file-selector-button { width: 142px; height: 40px; padding: 0; margin-right: 16px; background-color: #dedede; border: none; border-radius: 4px; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); cursor: pointer; transition: opacity 0.2s ease; } .wpcf7 input[type="file"]::file-selector-button:hover { opacity: 0.85; } .wpcf7 input[type="file"]::-webkit-file-upload-button { width: 142px; height: 40px; padding: 0; margin-right: 16px; background-color: #dedede; border: none; border-radius: 4px; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); cursor: pointer; } /* ========================================================================== Recruit Entry Thanks (送信完了ページ) ========================================================================== */ .thanks { padding: 0 0 0px; } .thanks__inner { max-width: 982px; margin: 0 auto; padding: 0 20px; } .thanks__message { margin-top: 89px; text-align: center; font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 2; letter-spacing: 1px; color: var(--color-black); font-feature-settings: 'palt' 1; } .thanks__message p { margin: 0; } .thanks__button-wrap { margin-top: 92px; text-align: center; } .thanks__button { display: inline-flex; align-items: center; justify-content: center; width: 578px; max-width: 100%; height: 80px; padding: 0 60px 0 30px; background-color: var(--color-primary); border-radius: 10px; font-family: var(--font-noto); font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--color-white); letter-spacing: 1px; text-decoration: none; transition: opacity 0.3s; /* 3層: マスク2(右) / マスク2(左) / 矢印画像。マスクはボタン背景色で矢印を隠す */ background-image: linear-gradient(var(--color-primary), var(--color-primary)), linear-gradient(var(--color-primary), var(--color-primary)), url("../images/recruit-intention-arrow.png"); background-repeat: no-repeat, no-repeat, no-repeat; background-position: right 15px center, right 45px center, right 30px center; background-size: 11px 14px, 11px 14px, 11px 14px; } .thanks__button:hover { opacity: 0.85; color: var(--color-white); } /* Entry/Thanks button arrow hover loop (mirrors info__arrow animation) 3層背景: 右マスク / 左マスク / 矢印。矢印のみアニメーション、マスクは固定でカモフラージュ */ @keyframes recruit-btn-arrow-loop { 0% { background-position: right 15px center, right 45px center, right 30px center; } 30% { background-position: right 15px center, right 45px center, right 15px center; } /* 矢印が右マスクに隠れる（15pxスライド） */ 30.01% { background-position: right 15px center, right 45px center, right 45px center; } /* 左マスクの位置へテレポート（不可視） */ 100% { background-position: right 15px center, right 45px center, right 30px center; } /* 元位置へ15pxスライド */ } @media (hover: hover) { .entry .wpcf7-submit:hover, .thanks__button:hover { animation: recruit-btn-arrow-loop 0.5s ease; } } /* ========================================================================== Recruit Requirement (募集要項) ========================================================================== */ .requirement { padding: 125px 0 0px; } .requirement__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .requirement__empty { text-align: center; font-family: var(--font-noto); font-size: 16px; color: var(--color-black); } .requirement__dept { max-width: 978px; margin: 0 auto 125px; } .requirement__dept:last-child { margin-bottom: 0; } .requirement__dept-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 0 17px; background: transparent; border: none; border-bottom: 2px solid var(--color-primary); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: opacity 0.2s; } .requirement__dept-header:hover { opacity: 0.8; } .requirement__dept-name { font-family: var(--font-noto); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--color-black); letter-spacing: 1px; } .requirement__dept-toggle { position: relative; width: 22px; height: 22px; flex-shrink: 0; } .requirement__dept-toggle::before, .requirement__dept-toggle::after { content: ''; position: absolute; background-color: var(--color-primary); } .requirement__dept-toggle::before { top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%); } .requirement__dept-toggle::after { left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); transition: opacity 0.25s, transform 0.25s; } .requirement__dept-header[aria-expanded="true"] .requirement__dept-toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); } .requirement__dept-body { overflow: hidden; max-height: 0; transition: max-height 0.45s ease; } .requirement__dept-header[aria-expanded="true"] + .requirement__dept-body { max-height: 9000px; } .requirement__items { padding-top: 19px; } .requirement__item { display: flex; gap: 22px; padding: 18px 0; border-bottom: 1px solid #cccccc; font-family: var(--font-noto); font-size: 14px; } .requirement__item-label { width: 178px; flex-shrink: 0; color: #848484; margin: 0; letter-spacing: 1px; line-height: 1.6; } .requirement__item-content { flex: 1; color: var(--color-black); margin: 0; line-height: 1.8; letter-spacing: 1px; } .requirement__cta-wrap { margin-top: 50px; text-align: center; } .requirement__cta { display: inline-block; padding: 8px 33px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); letter-spacing: 1px; text-decoration: none; transition: background-color 0.3s, color 0.3s; } .requirement__cta:hover { background-color: var(--color-primary); color: var(--color-white); } /* ========================================================================== Responsive - Tablet (1024px) ========================================================================== */ @media (max-width: 1024px) { .site-header { padding: 24px 32px; } .site-header__logo img { width: 280px; height: auto; } .site-header--sub .site-header__logo img { width: 135px; height: auto; } .site-header--sub .site-header__nav { padding-top: 8px; } .fv__inner { padding: 0 32px; } .fv__right { width: 400px; padding-top: 100px; } .fv__right-sticky { top: 100px; width: 400px; height: 550px; } .fv__logo-svg { width: 300px; height: 480px; } .fv__content { padding-top: 380px; } .fv__title { font-size: 28px; } .fv__text { font-size: 14px; width: 380px; padding-top: 80px; margin-left: 100px; } .fv__btn { margin-left: 100px; } /* Promise - Tablet */ .promise__label { left: 72px; } .promise__slide { height: 600px; } .promise__content { padding: 40px; } .promise__left { padding-top: 150px; } .promise__heading-en { font-size: 40px; } .promise__right { padding-top: 220px; width: 260px; } .promise__heading-ja { font-size: 28px; } /* What We Do - Tablet */ .whatwedo__inner { flex-direction: column; padding: 0 32px; } .whatwedo__right { width: 100%; max-width: 480px; margin: 0 auto; } /* Brand - Tablet */ .brand__inner { display: flex; align-items: flex-start; padding: 80px 32px; } .brand__left { position: static; } .brand__vertical-col:nth-child(2) { padding-top: 0; } .brand__right { position: static; margin-left: auto; padding-top: 40px; } .brand__text { width: 100%; } .brand__logo img { width: 280px; } /* Info - Tablet */ .info__inner { padding: 0 32px; display: block; } /* Join Us - Tablet */ .joinus__inner { padding: 60px 32px; } .joinus__heading-en { font-size: 40px; } .joinus__text { width: 100%; } /* CTA - Tablet */ .cta__heading-en { font-size: 28px; } /* Footer - Tablet */ .site-footer { padding: 40px 32px 30px; } .site-footer__nav { gap: 40px; } /* News Archive - Tablet */ .news-archive__inner { padding: 0 32px; } .news-single__inner { padding: 0 32px; } /* Sub-page Header - Tablet */ .site-header--sub { padding: 20px 32px; } /* Page Header - Tablet */ .page-header { padding: 100px 0 0; } .page-header__inner { padding: 0 32px; } .page-header__heading { font-size: 44px; } /* Spirit - Tablet */ .spirit__heading { font-size: 24px; } .spirit__text { font-size: 14px; } /* Outline - Tablet */ .outline__company-body { flex-direction: column; gap: 32px; } .outline__company-photo { width: 100%; height: 240px; } /* History - Tablet */ .history__timeline { padding-left: 260px; } .history__line { left: 211px; } .history__year { left: -80px; } .history__dot { left: -42px; } /* Gran Comfort Page - Tablet */ .page-header__logo img { height: 70px; } .page-header--grancomfort .page-header__inner { column-gap: 24px; } .page-header--grancomfort .page-header__label { margin-bottom: 28px; } .page-header--grancomfort .page-header__text { margin-top: 28px; } .gc-hero__inner { min-height: 500px; padding: 0 32px; } .gc-hero__photo--1 { width: 50%; } .gc-hero__photo--2 { width: 55%; right: 32px; top: 200px; } .gc-concept__inner { flex-direction: column; gap: 30px; padding: 0 32px; } .gc-concept__heading { padding-left: 0; font-size: 24px; } .gc-concept__text { font-size: 16px; } .gc-photos__inner { padding: 0 32px; min-height: 400px; } .gc-photos__photo--1 { width: 55%; } .gc-photos__photo--2 { width: 35%; right: 32px; top: 100px; } .gc-divider { padding: 0 32px; } /* Feature - Tablet */ .gc-feature__content { padding: 0 32px; } .gc-feature__right { width: 360px; } .gc-feature__heading { font-size: 24px; } .gc-feature__progress { right: 32px; } } /* ========================================================================== What We Do - Promise (3 slides sticky scroll, same animation as gc-feature) ========================================================================== */ .wwd-promise { position: relative; height: 400vh; margin-top: 109px; } .wwd-promise__sticky { position: sticky; /* ヘッダーとの間隔を 60px 開ける。中身のスライドは absolute inset:0 + flex center で配置されているため、 top を下げると視覚中心も 60px 下にシフトする。 ★ 間隔の微調整はこの 60px を増減する */ top: 60px; height: var(--zoom-vh, 100vh); /* zoom 補正済みの viewport 高さ */ overflow: hidden; } /* Shared label (PC: hidden; SP: shown via media query as a sticky-level overlay) */ .wwd-promise__sticky-label { display: none; } .wwd-promise__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; will-change: opacity; backface-visibility: hidden; } .wwd-promise__slide:first-child { opacity: 1; } .wwd-promise__content { display: flex; align-items: flex-start; max-width: 1280px; margin: 0 auto; padding: 0 48px; width: 100%; } .wwd-promise__meta { flex-shrink: 0; width: 240px; margin-right: 63px; } .wwd-promise__label-en { font-family: var(--font-marcellus); font-size: 16px; } .wwd-promise__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 16px; line-height: 1.6; margin-top: 40px; } .wwd-promise__num { font-family: var(--font-marcellus); font-size: 12px; margin-top: 14px; } .wwd-promise__progress { width: 174px; height: 2px; background-color: #c1c1c1; margin-top: 18px; } .wwd-promise__progress-fill { height: 100%; background-color: var(--color-primary); } .wwd-promise__body { flex: 1; min-width: 0; } .wwd-promise__heading { font-family: var(--font-zen); font-weight: 500; font-size: 28px; line-height: 1.8; margin-top: -18px; } .wwd-promise__text { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 2; font-feature-settings: 'palt' 1; text-align: justify; max-width: 354px; margin-top: 37px; } .wwd-promise__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 29px; border: 1px solid var(--color-primary); border-radius: 4px; font-family: var(--font-noto); font-weight: 400; font-size: 16px; color: var(--color-primary); margin-top: 49px; transition: background-color 0.3s, color 0.3s; } .wwd-promise__btn:hover { background-color: var(--color-primary); color: var(--color-white); } .wwd-promise__photo { flex-shrink: 0; width: 477px; height: 605px; overflow: hidden; margin-left: 56px; margin-right: -1px; } .wwd-promise__photo img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== What We Do - Service ========================================================================== */ .wwd-service { padding: 63px 0 129px; } .wwd-service__inner { max-width: 1280px; margin: 0 auto; padding: 0 48px; } .wwd-service__header { margin-bottom: 0; } .wwd-service__label-en { font-family: var(--font-marcellus); font-size: 16px; } .wwd-service__label-ja { font-family: var(--font-noto); font-weight: 400; font-size: 26px; margin-top: 5px; } .wwd-service__grid { display: grid; grid-template-columns: repeat(2, 420px); gap: 40px 41px; justify-content: end; margin-top: -70px; } .wwd-service__card { background-color: var(--color-white); padding: 42px 40px 53px; border-radius: 0 30px 0 20px; } .wwd-service__card-num { display: block; font-family: var(--font-marcellus); font-size: 20px; color: var(--color-primary); } .wwd-service__card-photo { width: 100%; height: 220px; overflow: hidden; margin-top: 17px; } .wwd-service__card-photo img { width: 100%; height: 100%; object-fit: cover; } .wwd-service__card-title { font-family: var(--font-noto); font-weight: 700; font-size: 18px; letter-spacing: 2px; margin-top: 21px; } .wwd-service__card-text { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 2; font-feature-settings: 'palt' 1; text-align: justify; margin-top: 14px; } /* ========================================================================== Privacy Policy (/privacy/) ========================================================================== */ .privacy { padding: 122px 0 131px; } .privacy__inner { max-width: 1280px; margin: 0 auto; padding: 0 152px; } .privacy__intro { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 1.8; color: var(--color-black); } .privacy__intro p + p { margin-top: 1.8em; } .privacy__article { margin-top: 84px; } .privacy__article-heading { font-family: var(--font-noto); font-weight: 700; font-size: 20px; line-height: 1.4; color: var(--color-black); } .privacy__article-line { width: 100%; height: 1px; background-color: var(--color-primary); margin-top: 19px; } .privacy__article-body { font-family: var(--font-noto); font-weight: 400; font-size: 14px; line-height: 1.8; color: var(--color-black); margin-top: 22px; } .privacy__article-body p + p { margin-top: 1.7em; } /* ========================================================================== Responsive - Mobile (768px) ========================================================================== */ @media (max-width: 768px) { .site-header { padding: 20px; } .site-header__inner { align-items: center; } .site-header__logo img { width: 135px; height: auto; } .site-header__nav { gap: 16px; padding-top: 0; margin-top: -4px; } .site-header__nav-link { font-size: 12px; color: var(--color-primary); margin-top: 11px; } .site-header__hamburger span { background-color: var(--color-primary); } .site-header__hamburger { width: 37px !important; margin-bottom: -9px; } .drawer__panel { width: 100%; padding: 20px; } .drawer__logo { display: block; position: absolute; top: 20px; left: 20px; width: 135px; } .drawer__logo img { width: 100%; height: auto; } .drawer__close { top: 24px; right: 20px; } .drawer__nav { align-items: center; text-align: center; gap: 32px; padding: 80px 0; } .drawer__link { font-size: 15px; } .drawer__copyright { align-self: center; text-align: center; font-size: 12px; white-space: normal; } /* FV - Mobile */ .fv__inner { flex-direction: column-reverse; padding: 0; position: relative; } .fv__left { width: 100%; position: relative; z-index: 2; padding-bottom: 350px; } .fv__right { width: 100%; padding: 170px 20px 0; display: flex; justify-content: flex-end; position: sticky; top: 0; z-index: 1; /* iOS Safari: sticky 解除時の JS transform をコンポジタ層で処理し、メインスレッドの再ペイントを介さずスクロールに追従させる */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* Scroll-driven white fade over the photo (opacity controlled by JS via --fv-fade) */ .fv__photo-wrap::after { content: ''; position: absolute; inset: 0; background-color: #ffffff; opacity: var(--fv-fade, 0); pointer-events: none; /* opacity 変更も GPU 合成層で処理させる */ will-change: opacity; } .fv__right-sticky { position: relative; top: 0; width: 270px; max-width: calc(100% - 20px); height: 385px; margin-left: auto; } .fv__photo-wrap { border-radius: 0 65px 0 65px; } .fv__logo-svg { width: 100%; height: 100%; max-width: 240px; max-height: 385px; } .fv__content { position: static; padding: 60px 24px 64px; } .fv__title { position: absolute; bottom: 100%; /* .fv__content の上端 = 写真の下端に底を揃える */ left: 31px; margin: 0; float: none; width: 30px; font-size: 28px; line-height: 1.1; z-index: 5; top: auto; } /* 「。」の位置を iOS Safari / Chrome で揃える iOS Safariは vrt2 (font-feature-settings) を horizontal 文脈で適用しないため、「。」グリフの点位置が左寄りになる。この一文字だけ writing-mode を縦書きに切り替え、フォント本来の縦書きグリフ（点が右上）を呼び出す。 margin-bottom: 0 → ブラウザデフォルトの 1em (= 28px) を除去し、「。」境界 = 写真下端の整列を成立させる */ .fv__title p:last-child { writing-mode: vertical-rl; margin-bottom: 0; } .fv__text { font-size: 13px; width: 280px; padding-top: 3px; margin-left: -3px; line-height: 2.06; } .fv__btn { margin-left: -4px; margin-top: 40px; font-size: 14px; padding: 9px 19px; } /* Promise - Mobile */ .promise { --promise-slide-h: 635px; height: 300vh; /* PC側で600vhに伸ばしたが、SPは現状維持 */ margin-top: 200px; } .promise__label { left: 40px; top: calc((100vh - var(--promise-slide-h)) / 2 + 30px); } .promise__label-en { font-size: 16px; } .promise__label-ja { font-size: 13px; } .promise__slide { width: calc(100% - 40px); max-width: 350px; height: var(--promise-slide-h); } .promise__bg { border-radius: 0 30px 0 30px; overflow: hidden; } .promise__content { flex-direction: column; padding: 70px 30px 40px; justify-content: space-between; } .promise__left { padding-top: 57px; } .promise__num { font-size: 14px; margin-left: -9px; } .promise__num-line { margin-top: 1px; margin-left: -9px; } .promise__heading-en { font-size: 32px; white-space: normal; margin-top: 20px; margin-left: -9px; } .promise__right { margin-left: -9px; padding-top: 0; width: 100%; } .promise__heading-ja { font-size: 24px; line-height: 1.5; } .promise__text { font-size: 12px; line-height: 1.9; margin-top: 28px; } /* What We Do - Mobile */ .whatwedo { padding: 96px 0 160px; } .whatwedo__inner { flex-direction: column; gap: 0; padding: 0 20px; } .whatwedo__left { display: contents; } .whatwedo__label-en { order: 1; font-size: 16px; } .whatwedo__heading { order: 2; font-size: 25px; margin-top: 8px; } .whatwedo__right { order: 3; width: 100%; max-width: 350px; margin: 30px auto; } .whatwedo__text { order: 4; font-size: 13px; line-height: 1.78; margin-top: 10px; } .whatwedo__btn { order: 5; font-size: 14px; align-self: flex-end; margin-top: 40px; padding: 9px 20px; } /* Brand - Mobile */ .brand { min-height: 700px; padding: 100px 0; } .brand__inner { flex-direction: column; padding: 40px 22px; min-height: 700px; position: relative; } .brand__left { position: absolute; top: 40px; right: 28px; margin: 0; } .brand__vertical-text { writing-mode: horizontal-tb; /* 親はflex主軸を確定させるため通常書字に */ flex-direction: row-reverse; /* DOM順 col1→col2 を視覚的に col2(左)/col1(右) に */ align-items: flex-start; /* 上ぞろえ */ gap: 8px; } .brand__vertical-col { writing-mode: vertical-rl; /* 各列の本文は縦書きに */ font-size: 18px; letter-spacing: 2px; } .brand__right { margin-left: 0; padding-top: 181px; width: 100%; } .brand__label-en { font-size: 16px; } .brand__label-ja { font-size: 16px; margin-top: 13px; } .brand__logo { margin-top: 34px; } .brand__logo img { width: 259px; } .brand__text { font-size: 13px; font-weight: 400; width: 259px; margin-top: 33px; line-height: 1.8; } .brand__btn { font-size: 14px; margin-top: 32px; padding: 9px 19px; } /* Info - Mobile */ .info { padding: 162px 0 240px; } .info__inner { padding: 0 20px; display: block; } .info__header { margin-bottom: 53px; } .info__label-en { font-size: 16px; } .info__label-ja { font-size: 20px; margin-top: 12px; } .info__item { flex-wrap: wrap; gap: 8px; padding: 33px 0 32px; align-items: center; } .info__date { font-size: 14px; width: 100%; } .info__title { flex: 1; font-size: 16px; line-height: 1.8; } .info__arrow { font-size: 13px; margin-left: 35px; margin-right: -1px; margin-top: -30px; } .info__btn { font-size: 14px; margin-top: 40px; padding: 8px 18px; } /* Join Us - Mobile (Figma 390x702 仕様に合わせて作り直し) */ .joinus { min-height: 700px; position: relative; } .joinus__bg { display: none; } .joinus__bg-sp { display: block; position: absolute; inset: 0; z-index: 1; } .joinus__bg-sp img { width: 100%; height: 100%; object-fit: cover; display: block; } .joinus__inner { width: 100%; max-width: 100%; margin: 0; padding: 40px 20px; min-height: 700px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; box-sizing: border-box; } .joinus__header { display: none; } .joinus__title { align-self: flex-start; margin: 0; padding-top: 0px; padding-left: 2px; } .joinus__heading-en { font-size: 34px; line-height: 1.2; } .joinus__heading-ja { font-size: 16px; margin-top: 0px; letter-spacing: 2px; } .joinus__body { align-self: flex-end; width: 259px; max-width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 50px; margin-top: 230px; } .joinus__text { font-size: 13px; line-height: 1.8; width: auto; margin: 0; text-align: justify; } .joinus__btn { align-self: flex-end; font-size: 14px; padding: 9px 18px; margin: 0; display: inline-flex; width: fit-content; white-space: nowrap; margin-bottom: -2px; } /* CTA - Mobile */ .cta { flex-direction: column; gap: 0; margin-top: 196px; } .cta__item { flex: 0 0 auto; width: 100%; padding: 40px 23px 18px; border-bottom: none; } .cta__item::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #ccc; } .cta__heading-en { font-size: 29px; } .cta__heading-ja { font-family: var(--font-noto); font-weight: 400; font-size: 12px; margin-top: 2px; } .cta__arrow { right: 39px; bottom: 38px; } /* Footer - Mobile */ .site-footer { padding: 84px 22px 30px; } .site-footer__inner { flex-direction: column; gap: 78px; } .site-footer__logo img { width: 279px; } .site-footer__nav { gap: 40px; } .site-footer__nav-col { gap: 20px; } .site-footer__nav-col a { font-size: 13px; } .site-footer__copyright { text-align: left; margin-top: 79px; font-size: 13px; } /* News Archive - Mobile (Figma 390px準拠) */ .news-archive { padding: 78px 0 97px; } .news-archive__inner { padding: 0 20px; } .news-archive__tags { gap: 8px; margin-bottom: 30px; } .news-archive__tag { font-size: 13px; padding: 0px 11px; line-height: 2; letter-spacing: 1px; } .news-archive__item { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 12px; padding: 41px 0 31px; } .news-archive__item .news-archive__badge { align-self: flex-start; justify-self: flex-start; } .news-archive__badge { font-size: 13px; min-width: auto; padding: 0px 16px; line-height: 2; letter-spacing: 1px; } .news-archive__date { font-size: 13px; margin-top: 3px !important; } .news-archive__title { width: 100%; font-size: 16px; line-height: 1.8; margin-top: -7px !important; } .news-archive__pagination { gap: 12px; margin-top: 80px; } .news-archive__page-num { font-size: 16px; letter-spacing: 1px; } /* News Single - Mobile (Figma 390px準拠: 区切り線をタイトル前に移動) */ .news-single { padding: 153px 0 97px; } .news-single__badge { padding: 7px 12px; } .news-single__date { font-weight: 500; font-size: 14px; } .news-single__inner { padding: 0 20px; display: flex; flex-direction: column; } .news-single__meta { order: 1; gap: 19px;} .news-single__line { order: 2; } .news-single__title { order: 3; } .news-single__content { order: 4; } .news-single__back { order: 5; } .news-single__line { background-color: var(--color-primary); margin-top: 18px; } .news-single__title { font-size: 18px; line-height: 1.8; margin-top: 60px; } .news-single__content { margin-top: 40px; } .news-single__content h2 { font-size: 20px; } .news-single__content h3 { font-size: 16px; } .news-single__content p { font-size: 13px; font-weight: 400; line-height: 1.8; letter-spacing: 1px; } .news-single__back { margin-top: 74px; } .news-single__back-btn { padding: 9px 20px; font-size: 14px; } /* Sub-page Header - Mobile */ .site-header--sub { padding: 20px; } .site-header__logo-sub { width: 135px; } /* Page Header - Mobile */ .page-header { padding: 136px 0 0; } .page-header__label { font-size: 13px; } .page-header__inner { padding: 0 20px; } .page-header__heading { font-size: 32px; } .page-header__text { font-size: 13px; max-width: 100%; margin-left: 91px; margin-top: 55px; margin-right: 0px; line-height: 1.74; } /* Spirit - Mobile */ .spirit { padding: 154px 0 151px; } .spirit::after { left: 20px; right: 20px; } .spirit__inner { padding: 0 21px; } .spirit__label-ja { margin-top: 11px; } .spirit__symbol-img { height: 123px; } .spirit__symbol { margin-bottom: 42px; } .spirit__heading { font-size: 22px; line-height: 1.5; } .spirit__label { margin-bottom: 74px; } .spirit__text { font-size: 13px; margin-top: 35px; line-height: 1.8; } /* Outline - Mobile */ .outline { padding: 163px 0 158px; } .outline__inner { padding: 0 21px; } .outline__label-ja { font-size: 20px; margin-top: 9px; } .outline__section-header { margin-bottom: 53px; } .outline__company-photo { height: 232px; } .outline__company-logo img { height: 48px; } .outline__table { display: block; } .outline__row { display: block; text-align: left; padding: 9px 0 5px; } .outline__company { margin-bottom: 77px; } .outline__company-logo { margin-bottom: 17px; } .outline__row dt, .outline__row dd { display: block; width: 100%; } .outline__row dd { margin-top: 4px; } /* Map - Mobile */ .company-map { height: 400px; } /* History - Mobile (Figma 390px仕様：年/月/説明文を1行に並べる) */ .history { padding: 161px 0 62px; } .history::before { width: calc(100% - 40px); } .history__inner { padding: 0 20px; flex-direction: column; gap: 54px; } .history__label-ja { font-size: 20px; margin-top: 10px; } .history__timeline { padding-left: 0; position: relative; } .history__line { left: 3px; top: 7px; bottom: 59px; } .history__item { position: relative; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 21px; padding: 0 0 26px 27px; font-size: 13px; } .history__year { position: static; left: auto; width: auto; flex-shrink: 0; white-space: nowrap; } .history__dot { left: 0; top: 8px; width: 7px; height: 7px; } .history__month { width: auto; flex-shrink: 0; white-space: nowrap; } .history__desc { flex: 1; width: auto; line-height: 1.8; margin-left: -1px; } /* Gran Comfort Page - Mobile */ .page-header__logo img { height: 53px; } .page-header--grancomfort .page-header__inner { grid-template-columns: auto 77px; column-gap: 14px; } .page-header--grancomfort .page-header__label { margin-bottom: 15px; } .page-header--grancomfort .page-header__line { width: 77px; } .page-header--grancomfort .page-header__text { grid-column: 1 / -1; grid-row: 3; margin-top: 30px; margin-left: auto; margin-right: 0; width: 259px; max-width: 100%; justify-self: end; } .gc-hero { padding: 60px 0 0; } .gc-hero__inner { min-height: auto; padding: 55px 21px; } .gc-hero__photo--1 { width: 48%; } .gc-hero__photo--2 { position: relative; right: auto; top: auto; width: 63%; margin-left: auto; margin-top: -66px; } .gc-concept { padding: 36px 0; } .gc-concept__inner { padding: 0 21px; } .gc-concept__heading { font-size: 22px; line-height: 1.6; letter-spacing: 1.9px; } .gc-concept__text { font-size: 13px; margin-left: 0px; margin-top: -8px; letter-spacing: 1px; line-height: 1.8; } .gc-photos__inner { min-height: auto; padding: 57px 21px; } .gc-photos__photo--1 { width: 74%; } .gc-photos__photo--2 { position: relative; right: auto; top: auto; width: 41%; margin-left: auto; margin-top: -40px; } .gc-divider { padding: 0 24px; } .gc-concept ~ .gc-concept .gc-concept__text { margin-left: 0px; margin-top: -9px; } .gc-concept ~ .gc-concept { padding: 37px 0 150px; } /* SP は PC のヘッダー間隔調整 (top: 60px) を解除して上端に貼り付け */ .gc-feature__sticky { top: 0; } .gc-feature { margin-top: 152px; height: 450vh; /* スライドをじっくり見せるため300vh→450vh */ } /* Feature - Mobile (sticky-fade preserved; only inner slide layout adjusted for Figma SP) */ .gc-feature__heading-sp { display: block; padding: 0 20px 30px; } .gc-feature__slide .gc-feature__label-en, .gc-feature__slide .gc-feature__label-ja { display: none; } .gc-feature__slide { justify-content: flex-start; padding: 45px 0 9px; } .gc-feature__content { flex-direction: column; padding: 0 20px; gap: 0; align-items: stretch; } .gc-feature__right { width: 100%; margin-top: 30px; } .gc-feature__right img { width: 100%; height: auto; aspect-ratio: 350 / 233; object-fit: cover; } .gc-feature__label-en { font-size: 16px; } .gc-feature__label-ja { font-size: 14px; line-height: 1.6; margin-top: 9px; } .gc-feature__category { font-size: 14px; margin-top: 20px; } .gc-feature__heading { font-size: 22px; line-height: 1.5; letter-spacing: -0.9px; margin-top: 8px; } .gc-feature__text { font-size: 13px; line-height: 1.8; margin-top: 20px; max-width: none; } .gc-feature__progress { display: none; } .gc-feature__progress-num--sp { display: block; margin-top: 25px; } .gc-feature__progress-bar { width: 120px; } body.page-template-page-grancomfort .cta { margin-top: 77px; } .wwd-promise { margin-top: 151px; } /* SP は PC のヘッダー間隔調整 (top: 60px) を解除して上端に貼り付け */ .wwd-promise__sticky { top: 0; } /* What We Do - Promise - Mobile (sticky scrollは維持、スライド内レイアウトのみFigma準拠の縦積みに) SP: labels are moved outside .wwd-promise__sticky, so slide starts tight against the pin top */ .wwd-promise { height: 450vh; /* スライドをじっくり見せるため300vh→450vh */ } .wwd-promise__slide { padding: 0; justify-content: flex-start; } .wwd-promise__content { flex-direction: column; padding: 0 20px; gap: 0; height: 100%; } .wwd-promise__meta { width: 100%; margin-right: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* Shared label (visible only on SP). Sits OUTSIDE .wwd-promise__sticky so it scrolls past normally, and sticky pinning starts at .wwd-promise__num instead of here. */ .wwd-promise__sticky-label { display: block; padding: 0 20px; } /* Hide per-slide labels on SP (the shared sticky-label replaces them) */ .wwd-promise__meta .wwd-promise__label-en, .wwd-promise__meta .wwd-promise__label-ja { display: none; } .wwd-promise__label-en { font-size: 16px; line-height: 1.5; } .wwd-promise__label-ja { font-size: 14px; line-height: 1.6; margin-top: 8px; } .wwd-promise__num { font-size: 13px; margin-top: 70px; } .wwd-promise__progress { display: none; } .wwd-promise__body { width: 100%; margin-top: 0; flex: 0 0 auto; } .wwd-promise__heading { font-size: 22px; line-height: 1.5; margin-top: 7px; } .wwd-promise__text { font-size: 13px; line-height: 1.8; letter-spacing: -0.5px; margin-top: 30px; max-width: 100%; } .wwd-promise__btn { font-size: 14px; padding: 9px 19px; margin: 27px 0 0 auto; display: flex; width: fit-content; } .wwd-promise__photo { width: 100%; height: 238px; margin-top: 24px; margin-left: 0; flex-shrink: 0; } /* What We Do - Service - Mobile */ .wwd-service { padding: 0px 0 95px; } .wwd-service__inner { padding: 0 21px; } .wwd-service__label-ja { font-size: 20px; margin-top: 11px; } .wwd-service__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 50px; } .wwd-service__card { padding: 21px 20px 29px 20px; } .wwd-service__card-photo { height: auto; aspect-ratio: 17 / 11; /* 元画像 680/440 = 1.545 に合わせ上下トリミングを防ぐ */ } .wwd-service__card-title { font-family: var(--font-noto); font-weight: 700; font-size: 16px; letter-spacing: 2px; margin-top: 16px; } .wwd-service__card-text { font-size: 13px; margin-top: 15px; line-height: 1.54; letter-spacing: 0.6px; } /* Recruit Entry - Mobile */ .entry { padding: 0 0 0px; } .entry__inner { padding: 0 20px; } .entry__intro { max-width: 259px; margin: 54px 0 0 auto; padding-left: 0; font-size: 13px; line-height: 1.8; } .entry__form { margin-top: 48px; } .entry__row { flex-direction: column; gap: 13px; margin-bottom: 37px; } .entry__label { width: 100%; padding-top: 0; font-size: 13px; } .entry__field { width: 100%; max-width: 100%; } .entry .wpcf7-form-control-wrap { width: 100%; } .entry input[type="text"], .entry input[type="email"], .entry input[type="tel"], .entry input[type="number"], .entry input[type="url"], .entry input[type="password"], .entry select, .entry textarea { height: 40px; font-size: 13px; } .entry select { width: 100%; min-width: 100%; max-width: 100%; display: block; box-sizing: border-box; } .entry textarea { height: auto; min-height: 120px; } .entry__prefix { left: 20px; font-size: 13px; } .entry__field-line--postal { width: 259px; } .entry__field-line--postal input[type="text"] { padding-left: 40px; } .entry__file-button, .entry__file-name { font-size: 13px; } .entry__consent { margin-top: 78px; font-size: 13px; } .entry__submit-wrap { margin-top: 25px; margin-left: 0px; } .entry input[type="submit"], .entry .wpcf7-submit { width: 100%; height: 60px; font-size: 20px; } /* Recruit Entry Thanks - Mobile */ .thanks { padding: 0 0 0px; } .thanks__inner { padding: 0 19px; } .thanks__message { margin-top: 53px; font-size: 13px; line-height: 1.8; } .thanks__button-wrap { margin-top: 53px; } .thanks__button { width: 100%; height: 60px; padding: 0 50px 0 20px; font-size: 18px; background-position: right 20px center; } /* Recruit Requirement - Mobile */ .requirement { padding: 62px 0 0px; } .requirement__inner { padding: 0 20px; } .requirement__dept { margin-bottom: 104px; } .requirement__dept-header { padding-bottom: 19px; } .requirement__dept-name { font-size: 16px; letter-spacing: 0.5px; } .requirement__items { padding-top: 12px; } .requirement__item { flex-direction: column; gap: 5px; padding: 16px 0 9px; font-size: 13px; } .requirement__item-label { width: 100%; font-size: 13px; } .requirement__item-content { font-size: 13px; line-height: 1.8; } .requirement__cta-wrap { margin-top: 60px; } .requirement__cta { padding: 9px 23px; font-size: 14px; } /* Privacy Policy - SP */ .privacy { padding: 62px 0 94px; } .privacy__intro p + p { margin-top: 1.7em; } .privacy__inner { padding: 0 20px; } .privacy__intro { font-size: 13px; } .privacy__article { margin-top: 61px; } .privacy__article-heading { font-size: 16px; } .privacy__article-line { margin-top: 18px; } .privacy__article-body { font-size: 13px; margin-top: 23px; line-height: 1.78; } }