/** * TOPページ（page-top.php）専用CSS。 * 外注デザイン一式（TOP追加文/assets/css/index.css、および同フォルダの * assets/css/style.css のうちTOPページが実際に使っているユーティリティ） * を移植。既存の css/styles.css・css/site-header-footer.css は一切変更せず、 * このファイルとpage-top.php側のenqueue条件だけで完結させている。 * 画像パスは images/top/（TOP専用）・images/business/（共通/流用アイコン） * に合わせて書き換えている。 */ /* TOP追加文/assets/css/style.css より移植。視覚的に隠しつつスクリーンリーダーには読ませるユーティリティ。ヒーロー見出し(h1.sr-only等)が使用 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); } /* TOP追加文/assets/css/style.css より移植。幅を最大1300pxに制限して中央寄せする汎用コンテナ。RECRUITセクションが使用 */ .container { max-width: 1300px; margin-inline: auto; } /* 外注デザインの元HTMLではが直接付与されていたが、 WordPress側はbody_class()が自動生成する body.page-template-page-top-php を使う(company-page.cssと同じ方式) */ body.page-template-page-top-php .l-main { min-height: 0; } /* 実際にスクロールしているのはではなく要素なので、 :has()で間接的にTOPページだけへ絞り込んでいる */ html:has(body.page-template-page-top-php) { overscroll-behavior-y: none; } body.page-template-page-top-php { overscroll-behavior-y: none; } body.page-template-page-top-php .l-footer-contact { margin-top: 0; } .p-top { color: var(--color-black); background: var(--color-white); overflow: hidden; } .p-top-hero { position: relative; } /* sr-only見出しのラッパー。中身は.sr-onlyでposition:absoluteになるため、このラッパー自体に見た目上のサイズは不要（KVアニメーション側でヒーローの高さが決まる） */ /* ==================================================================== ヒーローKVアニメーション（kv_anime/style.css より移植）出典: kv_anime/style.css（reset・.page-shell・.menu-bar等、デモページ自身のヘッダー/リセット部分は除外し、アニメーション本体のルールのみ移植している）。 ==================================================================== */ :root { --kv-width: 800px; --kv-height: 300px; } /* * KVは横幅100%で表示し、 * 元の800:300の比率を維持します。 */ .kv { position: relative; width: 100%; aspect-ratio: var(--kv-width) / var(--kv-height); overflow: hidden; isolation: isolate; } .kv-pattern:first-child { position: relative; } .kv-pattern:not(:first-child) { position: absolute; inset: 0; } .kv-pattern { width: 100%; opacity: 0; visibility: hidden; transform: scale(1); transform-origin: 50% 50%; backface-visibility: hidden; pointer-events: none; will-change: opacity, transform, filter; } .kv-pattern.is-active { opacity: 1; visibility: visible; } .stage { display: block; width: 100%; } /* * 各パターンのベース画像。 */ .kv-pattern__image { position: relative; z-index: 0; display: block; width: 100%; height: auto; } /* * 光の玉を表示するSVG。 */ .kv-svg, .stage svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .kv-path, .kv-path-to-rise { pointer-events: none; } /* * cut4は横線から上下へ開くため、 * clip-pathを使用します。 */ .kv-static { transform: none !important; transform-origin: 50% 50%; backface-visibility: hidden; clip-path: inset(50% 0 50% 0); will-change: opacity, clip-path; } /* * 合流地点から広がる発光体。 */ .kv-whiteout { position: absolute; top: 50%; left: 50%; z-index: 30; width: 96px; height: 96px; border-radius: 50%; opacity: 0; visibility: hidden; pointer-events: none; background: radial-gradient( circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 0.98) 23%, rgba(255, 255, 255, 0.9) 36%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.38) 64%, rgba(255, 255, 255, 0.14) 76%, rgba(255, 255, 255, 0) 88% ); transform: translate(-50%, -50%) scale(0.08); transform-origin: 50% 50%; filter: blur(5px) drop-shadow( 0 0 12px rgba(255, 255, 255, 1) ) drop-shadow( 0 0 30px rgba(255, 255, 255, 0.95) ) drop-shadow( 0 0 65px rgba(255, 255, 255, 0.82) ) drop-shadow( 0 0 110px rgba(255, 255, 255, 0.58) ); will-change: opacity, transform; } /* * mainobject画像の共通設定。 * * サイズと位置は各パターンごとの * width / top / left / rightで直接調整します。 * * 上下中央揃えは、 * top: 50%; * transform: translateY(-50%); * の組み合わせで行います。 */ .kv-pattern__mainobject { position: absolute; z-index: 1; display: block; max-width: none; height: auto; opacity: 0; visibility: hidden; pointer-events: none; filter: blur(12px); transform-origin: 50% 50%; will-change: opacity, filter, transform; } .kv-pattern__mainobject.is-mainobject-visible { visibility: visible; } /* * コピー画像の共通設定。 * * mainobject画像と同じく、 * ぼかし・フェード・わずかな拡大を使って表示します。 */ .kv-pattern__copy { position: absolute; z-index: 2; display: block; max-width: none; height: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 4px, 0) scale(0.985); filter: blur(12px); transform-origin: 50% 50%; will-change: opacity, filter, transform; } .kv-pattern__copy.is-copy-visible { visibility: visible; } /* * ======================================== * パターン1 * ======================================== */ /* * cut1_mainobject.png * * サイズ・位置はここで個別調整します。 * 現在はベース画像と同じ全面表示です。 */ [data-pattern="1"] .kv-pattern__mainobject { top: 52%; right: 0; left: auto; width: 92.875%; height: auto; transform: translate3d(0, -50%, 0) scale(1); } /* * 01_copy.png */ [data-pattern="1"] .kv-pattern__copy { top: 12.5%; right: 8.625%; width: 21%; } /* * ======================================== * パターン2 * ======================================== */ /* * cut2_mainobject.png * * サイズ・位置はここで個別調整します。 * 現在はベース画像と同じ全面表示です。 */ [data-pattern="2"] .kv-pattern__mainobject { top: 52%; right: auto; bottom: auto; left: 0; width: 96.4%; height: auto; transform: translate3d(0, -50%, 0) scale(1); } /* * 02_copy.png */ [data-pattern="2"] .kv-pattern__copy { top: 12.5%; left: 7.5%; width: 25.56%; } /* * ======================================== * パターン3 * ======================================== */ /* * cut3_mainobject.png * * サイズ・位置はここで個別調整します。 * 現在はベース画像と同じ全面表示です。 */ [data-pattern="3"] .kv-pattern__mainobject { top: 9.2%; right: 0; left: 0; width: 90.125%; height: auto; margin-right: auto; margin-left: auto; transform: translate3d(0, 0, 0) scale(1); } /* * 03_copy.png * * widthが25%なので、 * left: 37.5%で左右中央になります。 */ [data-pattern="3"] .kv-pattern__copy { top: auto; right: auto; top: 62.8%; left: 29.375%; width: 41.25%; } /* * パターン3中央の独立ロゴ。 * * パターン3への切り替え後にボワッと表示し、 * 光が中央で合流したときに発光します。 */ [data-pattern="3"] .kv-pattern__logo { position: absolute; top: 40%; left: 49%; z-index: 2; display: block; width: 9.5%; max-width: none; height: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(1); filter: blur(12px) brightness(1) drop-shadow( 0 0 0 rgba(255, 255, 255, 0) ); transform-origin: 50% 50%; will-change: opacity, filter, transform; } [data-pattern="3"] .kv-pattern__logo.is-logo-visible { visibility: visible; } /* * レイヤーの順番 * * ベース画像：0 * mainobject画像：1 * コピー・ロゴ：2 * 光の玉：3 */ .kv-pattern__mainobject { z-index: 1; } .kv-pattern__copy, .kv-pattern__logo { z-index: 2; } .kv-svg, .stage > .kv-svg { z-index: 3; } @media (prefers-reduced-motion: reduce) { .kv-pattern, .kv-whiteout, .kv-pattern__mainobject, .kv-pattern__copy, .kv-pattern__logo { will-change: auto; } .kv-pattern__mainobject, .kv-pattern__copy { opacity: 1; visibility: visible; transform: none; filter: none; } } /* * パターン3が収縮したあとに残る、 * 中央の薄紫色の横線です。 */ .kv-transition-line { position: absolute; top: 50%; left: 0; z-index: 20; width: 100%; height: 1px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) scaleX(0.15); transform-origin: 50% 50%; background: #7ecbff; box-shadow: 0 0 3px rgba(126, 203, 255, 0.95), 0 0 9px rgba(86, 180, 255, 0.6); will-change: opacity, transform; } .kv-transition-line.is-visible { visibility: visible; } /* * ======================================== * パターン4 * ======================================== */ [data-pattern="4"] .kv-pattern__image { position: relative; z-index: 0; } /* * パターン4追加画像の共通設定。 */ .kv-static__object { position: absolute; z-index: 2; display: block; max-width: none; height: auto; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 4px, 0) scale(0.985); filter: blur(12px); transform-origin: 50% 50%; will-change: opacity, filter, transform; } .kv-static__object.is-cut4-object-visible { visibility: visible; } /* * cut4_copy1.png * top / right / bottom / left：表示位置 * width：サイズ */ [data-pattern="4"] [data-cut4-object="copy1"] { top: 6.25%; right: 0; left: 0; width: 73.25%; margin-right: auto; margin-left: auto; } /* * cut4_copy2.png */ [data-pattern="4"] [data-cut4-object="copy2"] { top: 25.4%; right: 0; left: 0; width: 23%; margin-right: auto; margin-left: auto; } /* * cut4_logo.png */ [data-pattern="4"] [data-cut4-object="logo"] { top: 42.8%; right: 0; left: 0; width: 19.25%; margin-right: auto; margin-left: auto; } @media (prefers-reduced-motion: reduce) { .kv-static__object { opacity: 1; visibility: visible; transform: none; filter: none; will-change: auto; } } /* * ======================================== * SP版（767px以下） * * PC版のCSSはそのまま残し、 * このメディアクエリ内だけで * SP専用の配置を上書きします。 * ======================================== */ @media (max-width: 767px) { :root { --kv-width: 750px; --kv-height: 997px; } /* * SP版のmainobjectは、 * bg画像と同じ左上原点で * 幅100%（等倍）で重ねます。 * * パターンごとにサイズ・位置を * 個別調整できるよう、 * ルールを分けています。 */ [data-pattern="1"] .kv-pattern__mainobject { top: 8.5vw; right: auto; bottom: auto; left: 0; width: 100%; margin-right: 0; margin-left: 0; transform: translate3d(0, 0, 0) scale(1); } [data-pattern="2"] .kv-pattern__mainobject { top: 8.5vw; right: 0; bottom: auto; left: auto; width: 100%; margin-right: 0; margin-left: 0; transform: translate3d(0, 0, 0) scale(1); } [data-pattern="3"] .kv-pattern__mainobject { top: 17.3vw; bottom: auto; left: 0; transform: translateX(-50%); width: 100%; margin-right: 0; margin-left: 0; transform: translate3d(0, 0, 0) scale(1); } /* * 01_copy.png（「欲しい」を） */ [data-pattern="1"] .kv-pattern__copy { top: 13.3vw; right: 10w; left: auto; width: 34vw; } /* * 02_copy.png（「届けたい」を） */ [data-pattern="2"] .kv-pattern__copy { top: 13.3vw; right: auto; left: 7.5vw; width: 41.2vw; } /* * 03_copy.png（見出しコピー） */ [data-pattern="3"] .kv-pattern__copy { top: 81.3vw; right: 0; left: 0; margin-right: auto; margin-left: auto; width: 85.9vw; } /* * パターン3中央の独立ロゴ */ [data-pattern="3"] .kv-pattern__logo { top: 45vw; bottom: auto; right: auto; left: 50%; width: 14.8vw; } /* * cut4_copy1_sp.png * （Consumer Intelligence Agency） * * cut4_bg_sp.png内の白い角丸ボックスに * 合わせた実測値です。 */ [data-pattern="4"] [data-cut4-object="copy1"] { top: 10.3vw; right: 0; left: 0; margin-right: auto; margin-left: auto; width: 93.6vw; } /* * cut4_copy2_sp.png（縦書きコピー） */ [data-pattern="4"] [data-cut4-object="copy2"] { top: 29vw; right: 0; left: 0; margin-right: auto; margin-left: auto; width: 10.7vw; } /* * cut4_logo_sp.png（DATA ONEロゴ） */ [data-pattern="4"] [data-cut4-object="logo"] { top: 76.2vw; right: 0; left: 0; margin-right: auto; margin-left: auto; width: 33.3vw; } } .p-top-heading { font-family: var(--font-en); font-size: min(80px, 5.9701492537vw); font-weight: 700; line-height: 1; letter-spacing: 0.03em; } @media (max-width: 767px) { .p-top-heading { font-size: 9.0666666667vw; font-size: 10.6666666667vw; } } .p-top-section-header { text-align: center; } .p-top-section-header__label { margin-top: min(6px, 0.447761194vw); font-size: min(30px, 2.2388059701vw); font-weight: 700; line-height: 1; letter-spacing: 0.08em; } @media (max-width: 767px) { .p-top-section-header__label { margin-top: 1.0666666667vw; font-size: 5.3333333333vw; } } .p-top-section-header__line { display: block; width: min(80px, 5.9701492537vw); height: min(6px, 0.447761194vw); margin: min(20px, 1.4925373134vw) auto 0; background: var(--color-primary); } @media (max-width: 767px) { .p-top-section-header__line { width: 10.6666666667vw; height: 0.8vw; margin-top: 5.3333333333vw; } } .p-top-circle-arrow, .p-top-circle-blank { display: -ms-inline-grid; display: inline-grid; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: min(30px, 2.2388059701vw); height: min(30px, 2.2388059701vw); place-items: center; border-radius: 50%; background: var(--color-black); transition: filter 0.3s ease; } @media (max-width: 767px) { .p-top-circle-arrow, .p-top-circle-blank { width: 5.3333333333vw; height: 5.3333333333vw; } } .p-top-circle-arrow::before { display: block; width: min(12px, 0.8955223881vw); height: min(12px, 0.8955223881vw); content: ""; background: url("../images/business/icon_arrow_white.webp") center/contain no-repeat; } @media (max-width: 767px) { .p-top-circle-arrow::before { width: 2.1333333333vw; height: 2.1333333333vw; } } .p-top-circle-blank:before { display: block; width: min(14px, 1.0447761194vw); height: min(14px, 1.0447761194vw); content: ""; background: url("../images/common/outlink.png") center/contain no-repeat; } @media (max-width: 767px) { .p-top-circle-blank:before { width: 2.4vw; height: 2.4vw; } } .p-top-outline-button { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: min(300px, 22.3880597015vw); min-height: min(60px, 4.4776119403vw); padding: 0 min(70px, 5.223880597vw); color: var(--color-black); font-size: min(16px, 1.1940298507vw); font-weight: 500; line-height: 1; border: 1px solid var(--color-black); background: var(--color-white); -webkit-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } @media (max-width: 767px) { .p-top-outline-button { min-width: 60vw; min-height: 12vw; padding: 0 12vw; font-size: 3.4666666667vw; } } /* ホバー挙動はcontactページの.top-back-btnに合わせている（背景・枠線が黒に反転、文字が白に反転） */ .p-top-outline-button:hover { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); } /* アイコンも.top-back-btn(filter:invert(1))と同じ手法で反転させる */ .p-top-outline-button:hover .p-top-circle-arrow, .p-top-outline-button:hover .p-top-circle-blank { filter: invert(1); } .p-top-outline-button .p-top-circle-arrow, .p-top-outline-button .p-top-circle-blank { position: absolute; top: 50%; right: min(22px, 1.6417910448vw); -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 767px) { .p-top-outline-button .p-top-circle-arrow, .p-top-outline-button .p-top-circle-blank { right: 3.4666666667vw; } } .p-top-dark-button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: min(250px, 18.6567164179vw); height: min(50px, 3.7313432836vw); color: var(--color-white); font-size: min(16px, 1.1940298507vw); font-weight: 800; line-height: 1; background: var(--color-black); -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } @media (max-width: 767px) { .p-top-dark-button { width: 34.6666666667vw; height: 8vw; font-size: 2.9333333333vw; } } .p-top-dark-button:hover { opacity: 0.75; } .p-top-cta { padding: min(80px, 5.9701492537vw) min(40px, 2.9850746269vw) min(100px, 7.4626865672vw); background: var(--color-white); } @media (max-width: 767px) { .p-top-cta { padding: 10.6666666667vw 5.3333333333vw 10.9333333333vw; } } .p-top-cta__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: min(44px, 3.2835820896vw); } @media (max-width: 767px) { .p-top-cta__inner { gap: 2.6666666667vw; } } .p-top-cta__button { width: min(480px, 35.8208955224vw); height: min(80px, 5.9701492537vw); letter-spacing: 0.025em; } @media (max-width: 767px) { .p-top-cta__button { gap: 2.4vw; width: 43.3333333333vw; height: 16vw; font-size: 3.4666666667vw; font-weight: 400; } } @media (max-width: 767px) { .p-top-cta__button::before { left: 5.6vw; width: 4.2666666667vw; height: 4.2666666667vw; background-size: 3.0666666667vw; position: static; -webkit-transform: none; transform: none; } } @media (max-width: 767px) { .p-top-cta__button--contact::before { background-size: 4vw; } } @media (max-width: 767px) { .p-top-cta__button::after { display: none; } } .p-top-news { padding-inline: min(40px, 2.9850746269vw); background: var(--color-white); } @media (max-width: 767px) { .p-top-news { padding: 0 5.3333333333vw 13.3333333333vw; } } .p-top-news__inner { display: -ms-grid; display: grid; -ms-grid-columns: min(280px, 20.8955223881vw) min(64px, 4.776119403vw) 1fr; grid-template-columns: min(280px, 20.8955223881vw) 1fr; gap: min(64px, 4.776119403vw); max-width: min(1300px, 97.0149253731vw); margin-inline: auto; } @media (max-width: 767px) { .p-top-news__inner { display: block; width: 100%; } } .p-top-news__heading-area { padding-top: min(14px, 1.0447761194vw); } @media (max-width: 767px) { .p-top-news__heading-area { padding-top: 0; text-align: center; } } .p-top-news__title { font-size: min(70px, 5.223880597vw); letter-spacing: 0em; margin-left: max(-4px, -0.2985074627vw); } @media (max-width: 767px) { .p-top-news__title { font-size: 9.3333333333vw; text-align: left; } } @media (max-width: 767px) { .p-top-news__body { margin-top: 3.2vw; } } .p-top-news__more { margin-top: min(22px, 1.6417910448vw); } @media (max-width: 767px) { .p-top-news__more { margin-top: 5.0666666667vw; text-align: center; } } .p-top-news__more-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: min(230px, 17.1641791045vw); height: min(60px, 4.4776119403vw); color: var(--color-black); border: 1px solid var(--color-black); background: var(--color-white); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; } /* ホバー挙動はcontactページの.top-back-btnに合わせている（背景・枠線が黒に反転、文字が白に反転） */ .p-top-news__more-button:hover { color: var(--color-white); background: var(--color-black); border-color: var(--color-black); } .p-top-news__list { border-top: 1px solid #d9d9d9; } /* 公開済みの投稿が0件の場合の表示（page-top.php側で追加した分岐） */ .p-top-news__empty { padding-block: min(28px, 2.0895522388vw); border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } .p-top-news__item { border-bottom: 1px solid #d9d9d9; } @media (max-width: 767px) { .p-top-news__item { padding-inline: 3.0666666667vw; } } .p-top-news__link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(31px, 2.3134328358vw); padding-block: min(28px, 2.0895522388vw); padding-left: min(3px, 0.223880597vw); padding-right: min(60px, 4.4776119403vw); position: relative; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } @media (max-width: 767px) { .p-top-news__link { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 1.0666666667vw; min-height: auto; padding: 5.6vw 0 4.2666666667vw; padding-right: 16vw; } } .p-top-news__link:hover { opacity: 0.7; } .p-top-news__meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(22px, 1.6417910448vw); } @media (max-width: 767px) { .p-top-news__meta { gap: 2.5333333333vw; } } .p-top-news__date { color: #898989; font-family: var(--font-poppins); font-size: min(14px, 1.0447761194vw); font-weight: 600; line-height: 1; } @media (max-width: 767px) { .p-top-news__date { font-size: 3.2vw; } } .p-top-news__category { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: min(120px, 8.9552238806vw); height: min(28px, 2.0895522388vw); color: #c9b000; font-size: min(14px, 1.0447761194vw); line-height: 1; border: 1px solid #d8c400; } @media (max-width: 767px) { .p-top-news__category { width: 24vw; height: 5.3333333333vw; font-size: 3.2vw; } } /* カテゴリーの色は、ニュース一覧(page-news.php)の .p-news-archive__tag--info/--press/--media と同じ配色に揃える。 page-top.phpがdataone_news_tag_class()で同じクラスを併用出力している。色を変える場合は styles.css 側の値と一緒に直すこと */ .p-top-news__category.p-news-archive__tag--info { color: #f1b300; border-color: #f1b300; } .p-top-news__category.p-news-archive__tag--press { color: #1fa4ca; border-color: #1fa4ca; } .p-top-news__category.p-news-archive__tag--media { color: #fb5085; border-color: #fb5085; } .p-top-news__text { font-size: min(18px, 1.3432835821vw); font-weight: 700; line-height: 1; letter-spacing: 0.05em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; max-height: 1em; } @media (max-width: 767px) { .p-top-news__text { font-size: 3.7333333333vw; line-height: 6.1333333333vw; -webkit-line-clamp: 2; line-clamp: 2; max-height: none; } } .p-top-news__link .p-top-circle-arrow { width: min(30px, 2.2388059701vw); height: min(30px, 2.2388059701vw); position: absolute; top: 50%; right: min(20px, 1.4925373134vw); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } @media (max-width: 767px) { .p-top-news__link .p-top-circle-arrow { width: 5.3333333333vw; height: 5.3333333333vw; right: 0vw; } } @media (max-width: 767px) { .p-top-news__link .p-top-circle-arrow::before { width: 1.8666666667vw; height: 1.8666666667vw; } } .p-top-about { position: relative; padding: min(105px, 7.8358208955vw) min(40px, 2.9850746269vw) min(100px, 7.4626865672vw); background: #f4f4f5; margin-top: min(100px, 7.4626865672vw); overflow: hidden; } @media (max-width: 767px) { .p-top-about { padding: 13.0666666667vw 5.3333333333vw 12.8vw; margin-top: 0; } } .p-top-about::after { content: none; } .p-top-about__inner { position: relative; z-index: 1; width: min(100%, min(1300px, 97.0149253731vw)); margin-inline: auto; } @media (max-width: 767px) { .p-top-about .p-top-heading { font-size: 10vw; line-height: 12vw; } } @media (max-width: 767px) { .p-top-about .p-top-section-header__label { font-size: 5.3333333333vw; margin-top: 0; } } @media (max-width: 767px) { .p-top-about .p-top-section-header__line { margin-top: 4.5333333333vw; } } .p-top-about-concept_img{ display:block; width:min(850px,63.43283vw) !important; margin:min(40px,2.985vw) auto; } @media (max-width: 767px) { .p-top-about-concept_img{ width:88.8vw !important; margin:5.33333333vw auto 2.5vw; } } .p-top-about__lead { margin-top: min(28px, 2.0895522388vw); font-size: min(24px, 1.7910447761vw); font-weight: 700; line-height: min(44px, 3.2835820896vw); text-align: center; letter-spacing: 0.04em; } @media (max-width: 767px) { .p-top-about__lead { margin-top: 0; font-size: 4.5333333333vw; line-height: 7.2vw; letter-spacing: 0; } } .p-top-about__list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr min(36px, 2.6865671642vw) 1fr min(36px, 2.6865671642vw) 1fr; grid-template-columns: repeat(3, 1fr); gap: min(36px, 2.6865671642vw); margin-top: min(32px, 2.3880597015vw); } @media (max-width: 767px) { .p-top-about__list { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 5.3333333333vw; margin-top: 8.266666vw; } } .p-top-about-card { min-height: min(580px, 43.2835820896vw); padding: min(56px, 4.1791044776vw) min(35px, 2.6119402985vw) min(48px, 3.5820895522vw); text-align: center; background: var(--color-white); } @media (max-width: 767px) { .p-top-about-card { min-height: auto; padding: 8vw 5.3333333333vw 6.6666666667vw; } } .p-top-about-card__title { line-height: 1; } .p-top-about-card__name { display: block; color: var(--color-secondary); font-family: var(--font-en); font-size: min(38px, 2.8358208955vw); font-weight: 700; letter-spacing: 0.1em; } @media (max-width: 767px) { .p-top-about-card__name { font-size: 6.6666666667vw; letter-spacing: 0.05em; } } .p-top-about-card__label { display: block; margin-top: min(4px, 0.2985074627vw); font-size: min(18px, 1.3432835821vw); font-weight: 500; letter-spacing: 0.05em; } @media (max-width: 767px) { .p-top-about-card__label { margin-top: 0.8vw; font-size: 3.7333333333vw; } } .p-top-about-card .p-top-about-card__icon { width: min(152px, 11.3432835821vw); margin: min(26px, 1.9402985075vw) auto 0; } @media (max-width: 767px) { .p-top-about-card .p-top-about-card__icon { width: 26.6666666667vw; margin-top: 4vw; } } /* .p-top-about-card__icon { width: min(152px, 11.3432835821vw); margin: min(26px, 1.9402985075vw) auto 0; } @media (max-width: 767px) { .p-top-about-card__icon { width: 26.6666666667vw; margin-top: 4vw; } } */ .p-top-about-card__catch { height: min(140px, 10.447761194vw); padding-top: min(40px, 2.9850746269vw); font-size: min(24px, 1.7910447761vw); font-weight: 700; line-height: min(34px, 2.5373134328vw); position: relative; } @media (max-width: 767px) { .p-top-about-card__catch { height: auto; font-size: 4.5333333333vw; line-height: 7.2vw; padding-top: 2.1333333333vw; letter-spacing: 0.05em; } } .p-top-about-card__catch:before { content: ""; display: block; width: min(80px, 5.9701492537vw); height: min(4px, 0.2985074627vw); background-image: -webkit-gradient(linear, left top, right top, from(#f0e00c), to(#f1b300)); background-image: linear-gradient(90deg, #f0e00c, #f1b300); position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } @media (max-width: 767px) { .p-top-about-card__catch:before { width: 13.3333333333vw; height: 0.6666666667vw; bottom: -2.9333333333vw; } } .p-top-about-card--data .p-top-about-card__catch { padding-top: min(14px, 1.0447761194vw); } @media (max-width: 767px) { .p-top-about-card--data .p-top-about-card__catch { padding-top: 0.8vw; } } @media (max-width: 767px) { .p-top-about-card--data .p-top-about-card__catch:before { bottom: -2.6666666667vw; } } .p-top-about-card__catch-number { display: inline-block; font-family: var(--font-en); font-size: min(60px, 4.4776119403vw); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin-top: min(12px, 0.8955223881vw); } @media (max-width: 767px) { .p-top-about-card__catch-number { font-size: 9.0666666667vw; } } .p-top-about-card__catch-small { font-size: min(18px, 1.3432835821vw); font-weight: 500; -webkit-font-feature-settings: normal; font-feature-settings: normal; letter-spacing: 0; } @media (max-width: 767px) { .p-top-about-card__catch-small { font-size: 3.7333333333vw; } } .p-top-about-card__catch-big { font-size: min(30px, 2.2388059701vw); vertical-align: 0.1em; } @media (max-width: 767px) { .p-top-about-card__catch-big { font-size: 5.3333333333vw; margin-left: 0.8vw; } } .p-top-about-card__text { margin-top: min(25px, 1.8656716418vw); font-size: min(16px, 1.1940298507vw); font-weight: 300; line-height: 1.5; text-align: left; } @media (max-width: 767px) { .p-top-about-card__text { margin-top: 5.3333333333vw; font-size: 3.4666666667vw; line-height: 6.1333333333vw; } } .p-top-about__button { display: -webkit-box; display: -ms-flexbox; display: flex; width: min(300px, 22.3880597015vw); margin: min(40px, 2.9850746269vw) auto 0; } @media (max-width: 767px) { .p-top-about__button { width: 60vw; margin-top: 6.4vw; } } .p-top-about__loop-text { position: absolute; z-index: 0; left: 0; bottom: max(-55px, -4.1044776119vw); width: 100%; color: var(--color-white); font-family: var(--font-en); font-size: min(210px, 15.671641791vw); font-weight: 700; line-height: 1; letter-spacing: 0.1em; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } @media (max-width: 767px) { .p-top-about__loop-text { bottom: -5.3333333333vw; font-size: 20vw; } } .p-top-product { padding: min(100px, 7.4626865672vw) min(40px, 2.9850746269vw) 0; background: var(--color-white); } @media (max-width: 767px) { .p-top-product { padding: 13.8666666667vw 5.3333333333vw 14.4vw; } } .p-top-product__inner { width: min(100%, min(1300px, 97.0149253731vw)); margin-inline: auto; } .p-top-product__list { margin-top: min(40px, 2.9850746269vw); border-top: 1px solid #d9d9d9; } @media (max-width: 767px) { .p-top-product__list { margin-top: 6.9333333333vw; } } .p-top-product__item { display: -ms-grid; display: grid; -ms-grid-columns: min(500px, 37.3134328358vw) min(66px, 4.9253731343vw) 1fr; grid-template-columns: min(500px, 37.3134328358vw) 1fr; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(66px, 4.9253731343vw); padding: min(40px, 2.9850746269vw) 0; border-bottom: 1px solid #d9d9d9; } @media (max-width: 767px) { .p-top-product__item { display: block; padding: 5.3333333333vw 5.3333333333vw 7.7333333333vw; } } .p-top-product__logo { display: -ms-grid; display: grid; height: min(300px, 22.3880597015vw); place-items: center; border: 1px solid #e0e0e0; } @media (max-width: 767px) { .p-top-product__logo { height: 47.0666666667vw; } } .p-top-product__logo img { max-width: min(350px, 26.1194029851vw); max-height: min(190px, 14.1791044776vw); } @media (max-width: 767px) { .p-top-product__logo img { width: 61.86%; max-width: none; height: auto; max-height: none; margin:auto; } } .p-top-product__content { /* padding-right: min(20px, 1.4925373134vw); */ } @media (max-width: 767px) { .p-top-product__content { padding-right: 0; margin-top: 3.7333333333vw; } } .p-top-product__title { font-size: min(24px, 1.7910447761vw); font-weight: 800; line-height: 1.45; } @media (max-width: 767px) { .p-top-product__title { font-size: 4.5333333333vw; line-height: 7.2vw; } } .p-top-product__text { margin-top: min(15px, 1.1194029851vw); font-size: min(15px, 1.1194029851vw); font-weight: 500; line-height: 1.8; } @media (max-width: 767px) { .p-top-product__text { margin-top: 0.8vw; font-size: 3.4666666667vw; line-height: 6.1333333333vw; } } .p-top-product__content .p-top-dark-button { margin-top: min(24px, 1.7910447761vw); } @media (max-width: 767px) { .p-top-product__content .p-top-dark-button { display: -webkit-box; display: -ms-flexbox; display: flex; width: 53.3333333333vw; height: 10.6666666667vw; font-size: 3.4666666667vw; margin-inline: auto; margin-top: 3.7333333333vw; } } .p-top-usecase { padding: min(100px, 7.4626865672vw) 0; background: #f4f4f5; } @media (max-width: 767px) { .p-top-usecase { padding: 13.3333333333vw 0 13.0666666667vw; } } .p-top-usecase__inner { width: min(100% - min(80px, 5.9701492537vw), min(1300px, 97.0149253731vw)); margin-inline: auto; } @media (max-width: 767px) { .p-top-usecase__inner { width: calc(100% - 10.6666666667vw); } } .p-top-usecase-logo { margin-top: min(74px, 5.5223880597vw); overflow: hidden; } @media (max-width: 767px) { .p-top-usecase-logo { margin-top: 6.6666666667vw; overflow-x: auto; scrollbar-width: none; } } /* ==================================================================== 連携小売企業ロゴのマーキー（.p-business-logo-slider） businessページ（css/business.css）と同一クラスを再利用。途切れなく無限ループさせる修正版はJS駆動（js/business-logo-slider.js をこのページでも読み込む）のため、ここではCSSのサイズ・余白定義のみを business.cssと同じ内容で複製している。business.css側の値を変えた場合はここも合わせて修正すること。 ==================================================================== */ .p-business-logo-slider { overflow: hidden; background: var(--color-white); margin-top: min(80px, 5.9701492537vw); margin-bottom: min(80px, 5.9701492537vw); } @media (max-width: 767px) { .p-business-logo-slider { margin-block: 17.6vw; } } .p-business-logo-slider__track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; -webkit-animation: business-logo-loop 50s linear infinite; animation: business-logo-loop 50s linear infinite; will-change: transform; } .p-business-logo-slider__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: min(50px, 3.125vw); margin: 0; margin-right: min(50px, 3.125vw); } @media (max-width: 767px) { .p-business-logo-slider__list { gap: 4vw; margin-right: 4vw; } } .p-business-logo-slider__item { width: min(260px, 19.4029850746vw); display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .p-business-logo-slider__item { width: 34.6666666667vw; } } .p-business-logo-slider__item img { width: 100%; height: auto; object-fit: contain; } @keyframes business-logo-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } } .p-top-usecase-logo::-webkit-scrollbar { display: none; } .p-top-usecase-logo__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: min(54px, 4.0298507463vw); min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; padding-inline: min(40px, 2.9850746269vw); } @media (max-width: 767px) { .p-top-usecase-logo__list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 5.3333333333vw; padding-inline: 5.3333333333vw; } } .p-top-usecase-logo__item img { width: auto; max-width: min(230px, 17.1641791045vw); max-height: min(68px, 5.0746268657vw); } @media (max-width: 767px) { .p-top-usecase-logo__item img { max-width: 26.6666666667vw; max-height: 9.3333333333vw; } } .p-top-usecase-cards { --top-usecase-slide-gap: min(35px, 2.6119402985vw); position: relative; margin-top: min(78px, 5.8208955224vw); overflow: hidden; visibility: hidden; } @media (max-width: 767px) { .p-top-usecase-cards { --top-usecase-slide-gap: 5.3333333333vw; margin-top: 10.2666666667vw; } } .p-top-usecase-cards.is-initialized, .p-top-usecase-cards.is-rendered { visibility: visible; } .p-top-usecase-cards::-webkit-scrollbar { display: none; } .p-top-usecase-cards__track { position: relative; z-index: 0; overflow: hidden; } .p-top-usecase-cards__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; height: 100%; padding: 0 !important; margin: 0 !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .p-top-usecase-cards:not(.is-initialized) { overflow-x: auto; scrollbar-width: none; } .p-top-usecase-cards:not(.is-initialized) .p-top-usecase-cards__list { width: -webkit-max-content; width: -moz-max-content; width: max-content; gap: var(--top-usecase-slide-gap); padding-inline: max(min(40px, 2.9850746269vw), (100vw - min(1300px, 97.0149253731vw)) / 2); } @media (max-width: 767px) { .p-top-usecase-cards:not(.is-initialized) .p-top-usecase-cards__list { padding-inline: 5.3333333333vw; } } .p-top-usecase-cards .splide__sr { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .p-top-usecase-cards .splide__track--draggable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .p-top-usecase-card { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; width: min(410px, 30.5970149254vw); margin: 0; position: relative; list-style-type: none !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--color-white); } @media (max-width: 767px) { .p-top-usecase-card { width: 78.6666666667vw; } } .p-top-usecase-card__link { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: min(565px, 42.1641791045vw); padding: min(20px, 1.4925373134vw); padding-bottom: min(30px, 2.2388059701vw); -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } @media (max-width: 767px) { .p-top-usecase-card__link { min-height: 82.6666666667vw; padding: 4.2666666667vw 4vw 13.3333333333vw; } } .p-top-usecase-card__link:hover { opacity: 0.78; } .p-top-usecase-card__thumb { display: block; } .p-top-usecase-card__image { width: 100%; aspect-ratio: 370/262; -o-object-fit: cover; object-fit: cover; } @media (max-width: 767px) { .p-top-usecase-card__image { aspect-ratio: 530/374; } } .p-top-usecase-card__detail { padding-inline: min(13px, 0.9701492537vw); } @media (max-width: 767px) { .p-top-usecase-card__detail { padding-inline: 0; } } .p-top-usecase-card__company { display: block; margin-top: min(30px, 2.2388059701vw); color: #898989; font-size: min(14px, 1.0447761194vw); line-height: 1; } @media (max-width: 767px) { .p-top-usecase-card__company { margin-top: 5.3333333333vw; font-size: 3.2vw; } } .p-top-usecase-card__title { display: block; min-height: min(120px, 8.9552238806vw); margin-top: min(12px, 0.8955223881vw); font-size: min(20px, 1.4925373134vw); font-weight: 700; line-height: 2; } @media (max-width: 767px) { .p-top-usecase-card__title { margin-top: 2.4vw; padding-right: 2.4vw; font-size: 4vw; line-height: 6.6666666667vw; letter-spacing: 0.05em; } } .p-top-usecase-card__tags { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: min(8px, 0.5970149254vw); margin-top: min(8px, 0.5970149254vw); } @media (max-width: 767px) { .p-top-usecase-card__tags { gap: 1.3333333333vw; margin-top: 2.6666666667vw; } } .p-top-usecase-card__tag { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: min(76px, 5.671641791vw); padding: min(6px, 0.447761194vw) min(12px, 0.8955223881vw); font-size: min(13px, 0.9701492537vw); font-weight: 500; line-height: 1; text-align: center; } @media (max-width: 767px) { .p-top-usecase-card__tag { min-width: 19.4666666667vw; padding: 0.9333333333vw 1.0666666667vw; font-size: 3.2vw; } } .p-top-usecase-card__tag--cobuy { color: #c9b000; border: 1px solid #d8c400; } .p-top-usecase-card__tag--famima { --famima-tag-gradient: linear-gradient(90deg, #48b673 0%, #54aee0 100%); color: #48b673; border: 1px solid transparent; -o-border-image: var(--famima-tag-gradient) 1; border-image: var(--famima-tag-gradient) 1; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .p-top-usecase-card__tag--famima { color: transparent; background-image: var(--famima-tag-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .p-top-usecase-card__arrow { width: min(50px, 3.7313432836vw); height: min(50px, 3.7313432836vw); position: absolute; right: min(30px, 2.2388059701vw); bottom: min(30px, 2.2388059701vw); } @media (max-width: 767px) { .p-top-usecase-card__arrow { right: 4vw; bottom: 5.3333333333vw; width: 8vw; height: 8vw; } } .p-top-usecase-card__arrow::before { width: min(16px, 1.1940298507vw); height: min(16px, 1.1940298507vw); } @media (max-width: 767px) { .p-top-usecase-card__arrow::before { width: 2.6666666667vw; height: 2.6666666667vw; } } .p-top-usecase__button { display: -webkit-box; display: -ms-flexbox; display: flex; width: min(300px, 22.3880597015vw); margin: min(42px, 3.1343283582vw) auto 0; } @media (max-width: 767px) { .p-top-usecase__button { width: 60vw; margin-top: 5.6vw; } } .p-top-recruit { padding-inline: min(40px, 2.9850746269vw); background: var(--color-white); border-bottom: 1px solid var(--color-black); } .p-top-recruit__inner { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: min(583px, 43.5074626866vw); margin-inline: auto; } @media (max-width: 767px) { .p-top-recruit__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; min-height: 0; padding: 13.3333333333vw 0 0; align-items:center; } } .p-top-recruit__visual { -ms-flex-negative: 0; flex-shrink: 0; width: min(610px, 45.5223880597vw); } @media (max-width: 767px) { .p-top-recruit__visual { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 5.3333333333vw; width: 81.3333333333vw; } } .p-top-recruit__visual img{ width:100%; height:100%; object-fit:cover; } .p-top-recruit__content { width: min(530px, 39.552238806vw); padding-top: min(100px, 7.4626865672vw); margin-left: auto; } @media (max-width: 767px) { .p-top-recruit__content { width: auto; padding-top: 0; text-align: center; margin-left: 0; } } .p-top-recruit__header { text-align: left; } @media (max-width: 767px) { .p-top-recruit__header { text-align: center; } } .p-top-recruit .p-top-section-header__line { margin-inline: 0; } @media (max-width: 767px) { .p-top-recruit .p-top-section-header__line { margin-inline: auto; } } .p-top-recruit__text { margin-top: min(28px, 2.0895522388vw); font-size: min(24px, 1.7910447761vw); font-weight: 700; line-height: min(44px, 3.2835820896vw); letter-spacing: 0.04em; } @media (max-width: 767px) { .p-top-recruit__text { margin-top: 5.0666666667vw; font-size: 4.5333333333vw; line-height: 7.2vw; letter-spacing: 0.05em; } } .p-top-recruit__button { width: min(350px, 26.1194029851vw); margin-top: min(28px, 2.0895522388vw); } @media (max-width: 767px) { .p-top-recruit__button { width: 60vw; margin-top: 4.5333333333vw; } }