/* ============================================================ * WPMK front styles（theme.json で表現できない最小限のみ） * ============================================================ */ /* ------------------------------------------------------------ * 汎用LPファクトリー: ブランドトークン・ブリッジ（design-lp.md / brand-presets.md） * --lp-* = 意味的ロール変数。値は theme.json のロールパレット slug（= プリセット）から供給。 * FSE スタイルバリエーション（styles/.json）が slug を上書きすると、 * .mmlp-* 全体の色/フォントがプリセットごと入れ替わる（構造は不変）。 * 第一プリセット = メイクミークラウド（theme.json ベース値）。 * ------------------------------------------------------------ */ :root { --lp-brand: var(--wp--preset--color--brand); --lp-brand-hover: var(--wp--preset--color--brand-hover); --lp-brand-soft: var(--wp--preset--color--brand-soft); --lp-brand-strong: var(--wp--preset--color--brand-strong); --lp-on-brand: var(--wp--preset--color--on-brand); --lp-gold: var(--wp--preset--color--accent-gold); --lp-text-strong: var(--wp--preset--color--text-strong); --lp-text-mid: var(--wp--preset--color--text-mid); --lp-text-weak: var(--wp--preset--color--text-weak); --lp-text-faint: var(--wp--preset--color--text-faint); --lp-surface: var(--wp--preset--color--surface); --lp-sec-hero: var(--wp--preset--color--sec-hero); --lp-sec-intro: var(--wp--preset--color--sec-intro); --lp-sec-feature: var(--wp--preset--color--sec-feature); --lp-sec-message: var(--wp--preset--color--sec-message); --lp-sec-warm: var(--wp--preset--color--sec-warm); --lp-sec-footer: var(--wp--preset--color--sec-footer); --lp-font-display: var(--wp--preset--font-family--display); --lp-font-text: var(--wp--preset--font-family--text); } /* スキップリンク（A11y） */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 0.5rem 1rem; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } .skip-link:focus { left: 0; } /* フォーカスの視認性（A11y / WCAG 2.1） */ a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; } /* 画像はレイアウトシフトを防ぐ（CLS対策） */ img { height: auto; max-width: 100%; } /* ============================================================ * LP（画像LP） * ============================================================ */ /* 縦長LP画像は中央寄せ・最大幅を抑えて高速描画 */ .wpmk-lp-image img { display: block; margin-inline: auto; width: 100%; max-width: 720px; } /* デバイス別画像LP（ 出し分け） */ .wpmk-respimg__note { font-size: 0.8rem; color: var(--wp--preset--color--muted); text-align: center; } .wpmk-respimg-out { margin: 0; } .wpmk-respimg-out img, .wpmk-respimg-out picture { display: block; width: 100%; height: auto; margin-inline: auto; max-width: 1280px; } /* 追従CTAバー（モバイルで画面下部に固定。LP本文の下に余白を確保） */ .wpmk-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; margin: 0; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(6px); border-top: 1px solid var(--wp--preset--color--border); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } /* 固定バーが本文末尾に被らないよう、LPページ全体に下余白 */ .wpmk-lp { padding-bottom: 88px; } /* デスクトップでは追従を解除して通常配置 */ @media (min-width: 782px) { .wpmk-sticky-cta { position: static; background: transparent; backdrop-filter: none; border-top: 0; box-shadow: none; padding-block: var(--wp--preset--spacing--40); } .wpmk-lp { padding-bottom: 0; } } /* ============================================================ * Make Me Cloud LP section patterns（ノーコード編集用） * ============================================================ */ .mmlp-section { margin-block-start: 0; padding-block: clamp(3rem, 7vw, 5.5rem); } .mmlp-section + .mmlp-section { margin-block-start: 0; } .mmlp-inner { max-width: 1120px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--30); } .mmlp-eyebrow { color: var(--lp-brand); font-weight: 700; letter-spacing: 0; } .mmlp-lead { color: var(--wp--preset--color--muted); } .mmlp-hero { min-height: min(760px, 84vh); display: grid; align-items: center; background: linear-gradient(180deg, #fff, var(--wp--preset--color--makeme-pink-soft)); } .mmlp-hero .wp-block-cover__inner-container { width: min(860px, calc(100% - 2rem)); } .mmlp-hero-logo img { max-width: 180px; } .mmlp-pill-button .wp-block-button__link, .wp-block-button.mmlp-pill-button .wp-block-button__link { background: var(--lp-brand); border: 3px solid var(--lp-brand); border-radius: 999px; box-shadow: 0 5px 0 var(--wp--preset--color--makeme-pink-dark); color: #fff; font-weight: 700; line-height: 1.4; padding: 0.9rem 2.1rem; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease; } .mmlp-pill-button .wp-block-button__link:hover, .wp-block-button.mmlp-pill-button .wp-block-button__link:hover { background: var(--wp--preset--color--makeme-pink-dark); border-color: var(--wp--preset--color--makeme-pink-dark); box-shadow: 0 3px 0 var(--wp--preset--color--makeme-pink-dark); transform: translateY(2px); } .mmlp-card { border: 1px solid var(--wp--preset--color--makeme-line); border-radius: 16px; background: #fff; padding: 1.25rem; } .mmlp-card .wp-block-image { margin-bottom: 0.75rem; } .mmlp-card img { border-radius: 12px; } .mmlp-point-label, .mmlp-step-label { color: var(--lp-brand); font-size: var(--wp--preset--font-size--small); font-weight: 800; } .mmlp-step-label { display: inline-block; background: var(--lp-brand); border-radius: 999px; color: #fff; padding: 0.15rem 0.85rem; } .mmlp-voice { background: var(--lp-sec-feature); border-radius: 12px; padding: 1.1rem; } .mmlp-voice img { aspect-ratio: 1; border-radius: 999px; object-fit: cover; } .mmlp-faq details { border-bottom: 1px solid var(--wp--preset--color--makeme-line); padding-block: 0.5rem; } .mmlp-faq summary { color: var(--wp--preset--color--contrast); cursor: pointer; font-weight: 700; } .mmlp-footer-band { min-height: 360px; } @media (max-width: 781px) { .mmlp-section { padding-block: 2.75rem; } .mmlp-hero { min-height: 70vh; } .mmlp-pill-button .wp-block-button__link, .wp-block-button.mmlp-pill-button .wp-block-button__link { width: 100%; } } /* ===== Make Me フッター（メイクミーキャリア） ===== */ .wpmk-foot{ background:#eceae6; border-radius:24px 24px 0 0; padding:52px clamp(20px,5vw,72px) 28px; margin-top:48px; } .wpmk-foot__inner{max-width:1180px;margin:0 auto} .wpmk-foot__top{ display:flex;justify-content:space-between;align-items:flex-start; gap:32px;flex-wrap:wrap; } .wpmk-foot__brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none} .wpmk-foot__bars{display:inline-flex;align-items:flex-end;gap:5px;height:40px} .wpmk-foot__bars i{display:block;width:8px;border-radius:6px} .wpmk-foot__name{ display:block;font-weight:700;font-size:clamp(22px,2.4vw,30px); color:#3a3a3a;line-height:1;letter-spacing:.01em; } .wpmk-foot__sub{display:block;font-size:12px;color:#6f6f6f;letter-spacing:.18em;margin-top:7px} .wpmk-foot__menu{min-width:180px} .wpmk-foot__menuhead{ font-size:18px;letter-spacing:.18em;color:#3a3a3a;margin:0 0 16px;font-weight:400; } .wpmk-foot__menu a{ display:block;color:#3a3a3a;text-decoration:none;font-size:14px; line-height:1.4;margin-bottom:12px;transition:opacity .2s; } .wpmk-foot__menu a:hover{opacity:.55} .wpmk-foot__copy{text-align:center;color:#7a7a7a;font-size:13px;margin:40px 0 0} @media(max-width:600px){ .wpmk-foot__top{flex-direction:column;gap:28px} .wpmk-foot__copy{margin-top:32px} } /* ===== ブログ一覧（マガジン型） ===== */ .wpmk-blog-hero{background:#f3f1ec} .wpmk-blog-hero__title{font-weight:800;letter-spacing:.02em} .wpmk-blog-layout{align-items:flex-start} /* サイドバー */ .wpmk-side__head{font-weight:400;letter-spacing:.16em;color:#3a3a3a;border-bottom:1px solid var(--wp--preset--color--border);padding-bottom:8px;margin:28px 0 14px} .wpmk-side__head:first-child{margin-top:0} .wpmk-side__cats{list-style:none;margin:0;padding:0} .wpmk-side__cats li{margin:0} .wpmk-side__cats a{display:inline-block;color:#3a3a3a;text-decoration:none;font-size:14px;padding:7px 0} .wpmk-side__cats a:hover{opacity:.6} .wpmk-side__cats li{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dotted var(--wp--preset--color--border)} /* 新着グリッド */ .wpmk-sec__head{font-weight:800;letter-spacing:.12em;font-size:22px;margin:0 0 20px} .wpmk-grid__tpl{gap:24px 20px!important} .wpmk-grid__tpl > li{margin:0} .wpmk-grid__tpl .wp-block-post-featured-image{margin:0 0 10px} .wpmk-grid__tpl .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover} .wpmk-card__cat{display:inline-block;background:#f3f1ec;color:#7a6a55;border-radius:4px;padding:2px 8px;margin:0 0 6px;font-size:12px} .wpmk-card__cat a{color:inherit;text-decoration:none} .wpmk-grid__tpl .wp-block-post-title{margin:0} .wpmk-grid__tpl .wp-block-post-title a{color:#2a2a2a;text-decoration:none} .wpmk-grid__tpl .wp-block-post-title a:hover{opacity:.65} @media(max-width:781px){ .wpmk-blog-layout{flex-direction:column} .wpmk-blog-side,.wpmk-blog-main{flex-basis:100%!important;width:100%} } /* ===== ヘッダー（Make Me） ===== */ .wpmk-head{border-bottom:1px solid #f0eceb} .wpmk-head__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(20px,5vw,40px)} .wpmk-head__brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none} .wpmk-head__brand .wpmk-foot__name{font-size:clamp(20px,2vw,26px)} .wpmk-head__nav{display:flex;gap:28px;flex-wrap:wrap} .wpmk-head__nav a{color:#3a3a3a;text-decoration:none;font-size:14px} .wpmk-head__nav a:hover{opacity:.6} @media(max-width:600px){.wpmk-head__nav{gap:16px;font-size:13px}} /* ===== カテゴリナビ ===== */ .wpmk-catnav{display:flex;flex-wrap:wrap;gap:28px;align-items:center;max-width:1180px;margin:0 auto;padding:26px clamp(20px,5vw,40px)} .wpmk-catnav a{color:#3a3a3a;text-decoration:none;font-size:15px} .wpmk-catnav a:hover{opacity:.6} .wpmk-catnav__home{font-weight:700} .wpmk-catnav__more{color:#6f6f6f} /* ===== 記事カード ===== */ .wpmk-article{ border:1px solid #f1d6da;border-radius:14px; padding:clamp(28px,5vw,80px); max-width:920px;margin-left:auto;margin-right:auto; } /* テーマのルート余白(has-global-padding)が左右paddingを0上書きするため、詳細度を上げて確保 */ .wp-block-group.wpmk-article{padding-left:clamp(28px,5vw,80px);padding-right:clamp(28px,5vw,80px)} .wpmk-article > *{margin-left:auto;margin-right:auto} .wpmk-article__title{font-weight:800;line-height:1.4;letter-spacing:.01em;margin:.4em 0 .5em;font-size:clamp(26px,3.4vw,38px)} .wpmk-article__lead{font-weight:700;font-size:clamp(15px,1.6vw,18px);line-height:1.9;color:#2a2a2a} .wpmk-article__lead .wp-block-post-excerpt__more-link{display:none} .wpmk-article__hero{margin-top:28px} .wpmk-article__hero img{width:100%;height:auto;border-radius:6px} .wpmk-article .wp-block-post-content{margin-top:36px;line-height:1.95} .wpmk-article .wp-block-post-content h2{margin-top:1.8em;font-weight:800} .wpmk-article .wp-block-post-content h3{margin-top:1.6em;font-weight:700;position:relative;padding-left:1.5em} .wpmk-article .wp-block-post-content h3::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:#1a1a1a} .wpmk-article .wp-block-image{margin:1.6em auto} .wpmk-article .wp-block-image img{border-radius:6px} /* ===== ブログ専用ヘッダー/フッターのロゴ画像 + カテゴリナビ ドロップダウン ===== */ .wpmk-head__logo{height:46px;width:auto;display:block} .wpmk-foot__logo{height:56px;width:auto;display:block} .wpmk-catnav__more{cursor:pointer;color:#6f6f6f} .wpmk-more-wrap{position:relative;display:inline-block} .wpmk-dropdown{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid #ececec;box-shadow:0 10px 30px rgba(0,0,0,.10);min-width:240px;padding:4px 0;display:none;z-index:50;border-radius:4px} .wpmk-more-wrap:hover .wpmk-dropdown,.wpmk-more-wrap:focus-within .wpmk-dropdown{display:block} .wpmk-dropdown a{display:block;padding:16px 26px;font-size:15px;border-bottom:1px solid #f1f1f1;color:#3a3a3a;text-decoration:none} .wpmk-dropdown a:last-child{border-bottom:none} .wpmk-dropdown a:hover{background:#faf7f7} /* ===== ブログトップ（Beauty Media）追加スタイル ===== */ /* ヒーロー（画像差し替え可: assets/images/blog-hero.jpg を置けば自動反映） */ .wpmk-blog-hero{position:relative;min-height:clamp(240px,36vw,420px);display:flex;align-items:flex-end;margin:0;border:0;background:#b9c2c4 url(/wp-content/themes/wpmk/assets/images/blog-hero.jpg) center/cover no-repeat} .wpmk-blog-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.32))} .wpmk-blog-hero__title{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;color:#fff;font-weight:800;font-size:clamp(28px,5vw,62px);letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.28);padding:0 clamp(20px,6vw,90px) clamp(18px,4vw,46px)} /* カテゴリ（枠付き・件数右寄せ） */ .wpmk-side__cats{list-style:none;margin:0 0 8px;padding:2px 14px;border:1px solid #f1d6da;border-radius:4px} .wpmk-side__cats li{display:block;border-bottom:1px dotted #ead7da} .wpmk-side__cats li:last-child{border-bottom:0} .wpmk-side__cats a{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#3a3a3a;text-decoration:none;font-size:13px;padding:10px 2px} .wpmk-side__cats a:hover{opacity:.6} .wpmk-side__cats .c{color:#9a9a9a;font-size:12px;white-space:nowrap} /* PICK UP（画像オーバーレイ） */ .wpmk-pickup{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px} .wpmk-pickup__item{position:relative;aspect-ratio:16/11;background:#cfd3d4 center/cover no-repeat;border-radius:3px;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none} .wpmk-pickup__item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(0,0,0,.64))} .wpmk-pickup__title{position:relative;z-index:1;color:#fff;font-size:12.5px;font-weight:700;line-height:1.55;padding:12px 14px} /* NEW カード（枠付き） */ .wpmk-sec__head--new{color:#cf8d95;margin-top:52px} .wpmk-grid__tpl{gap:22px 18px!important} .wpmk-grid__tpl>li{margin:0} .wpmk-newcard{border:1px solid #f1d6da;border-radius:6px;overflow:hidden;background:#fff;height:100%} .wpmk-newcard__thumb{margin:0} .wpmk-newcard__thumb img{width:100%;height:100%;object-fit:cover;display:block} .wpmk-newcard__body{padding:14px 16px 18px} /* has-global-padding が左右paddingを0上書きするため詳細度を上げて確保（カテゴリ左の余白） */ .wp-block-group.wpmk-newcard__body{padding-left:16px;padding-right:16px} .wpmk-newcard .wp-block-post-title{margin:0} .wpmk-newcard .wp-block-post-title a{color:#2a2a2a;text-decoration:none} .wpmk-newcard .wp-block-post-title a:hover{opacity:.65} /* カテゴリピル（NEW/関連 共通・参照デザインのローズ） */ .wpmk-card__cat{display:inline-block!important;background:#dca7ad!important;color:#fff!important;border-radius:3px;padding:2px 9px;margin:0 0 8px;font-size:11px;line-height:1.7} .wpmk-card__cat a{color:#fff;text-decoration:none} /* 関連記事 */ .wpmk-related-wrap{max-width:920px;margin:52px auto 0;padding:0 clamp(16px,4vw,24px)} .wpmk-related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .wpmk-card{display:flex;flex-direction:column;border:1px solid #f1d6da;border-radius:6px;overflow:hidden;text-decoration:none;background:#fff} .wpmk-card__thumb{display:block;aspect-ratio:16/10;background:#eee} .wpmk-card__thumb img{width:100%;height:100%;object-fit:cover;display:block} .wpmk-card__body{padding:14px} .wpmk-card__title{display:block;color:#2a2a2a;font-size:14px;font-weight:700;line-height:1.5} .wpmk-card:hover .wpmk-card__title{opacity:.7} /* 記事下CTA */ .wpmk-cta{margin:48px auto 0;max-width:760px;text-align:center;background:#faf3f4;border:1px solid #f1d6da;border-radius:12px;padding:34px 24px} .wpmk-cta__lead{font-size:13px;color:#a06a72;margin:0 0 8px;font-weight:700} .wpmk-cta__title{font-size:clamp(18px,2.4vw,22px);font-weight:800;color:#2a2a2a;margin:0 0 22px;line-height:1.6} .wpmk-cta__btn{display:inline-block;background:#cc8484;color:#fff;text-decoration:none;font-weight:700;padding:14px 44px;border-radius:999px;font-size:15px;will-change:transform;animation:wpmk-cta-pulse 2.4s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease} .wpmk-cta__btn:hover{transform:scale(1.06);background:#bf6f76;box-shadow:0 10px 26px rgba(191,111,118,.35);animation-play-state:paused} @keyframes wpmk-cta-pulse{0%,100%{transform:scale(1);box-shadow:0 4px 10px rgba(204,132,132,.20)}50%{transform:scale(1.04);box-shadow:0 10px 26px rgba(204,132,132,.45)}} @media(prefers-reduced-motion:reduce){.wpmk-cta__btn{animation:none}} /* Instagram */ .wpmk-insta{padding:40px clamp(20px,5vw,40px) 64px} .wpmk-insta__head{font-weight:400;letter-spacing:.14em;color:#6f6f6f;font-size:clamp(18px,2.4vw,26px);margin:0 0 28px} .wpmk-insta__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1180px;margin:0 auto} .wpmk-insta__tile{aspect-ratio:1/1;background:linear-gradient(135deg,#e8eded,#d6dede);border-radius:2px;display:block;overflow:hidden} /* 実投稿を入れたタイル。取得できない間は上のプレースホルダーのまま出る。 */ .wpmk-insta__tile--photo{position:relative;transition:opacity .2s} .wpmk-insta__tile--photo:hover{opacity:.82} .wpmk-insta__tile--photo img{width:100%;height:100%;object-fit:cover;display:block} .wpmk-insta__grid{grid-auto-rows:1fr} .wpmk-insta__more{text-align:center;margin:22px 0 0} .wpmk-insta__more a{font-size:13px;letter-spacing:.08em;color:#6f6f6f;text-decoration:none;border-bottom:1px solid #d8d2d0;padding-bottom:3px} .wpmk-insta__more a:hover{color:#894D4E;border-color:#894D4E} @media(max-width:781px){ .wpmk-pickup,.wpmk-related__grid,.wpmk-insta__grid{grid-template-columns:repeat(2,1fr)} } /* ============================================================ * MakeMe LP ヒーロー（lp-makeme-hero / Figma 722:5 ピクセル忠実再現） * PC=原本フレーム1512×697を比例スケール（コンテナクエリ cqw）。写真は contain（両端#e8e9e5余白）。 * SP=中央リフロー（読みやすさ優先）。 * ============================================================ */ .mmlp-fv { padding: 0; background: var(--lp-sec-hero); } /* 原本フレーム：1512×697 の比率を保ち幅にフィット。1cqw = ステージ幅の1%（最大15.12px） */ .mmlp-fv__stage { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--lp-sec-hero); overflow: hidden; } /* 背景写真：ヒーロー全体を cover で充填（幅いっぱい＝グレー余白なし） */ .mmlp-fv__photo { position: absolute; inset: 0; margin: 0; z-index: 1; } .mmlp-fv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 左＝コンテンツ可読用の白グラデ＋上＝中央ロゴ可読用の白グラデ */ .mmlp-fv__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.58) 30%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 16%); } /* ロゴ：上部中央 */ .mmlp-fv__logo { position: absolute; top: clamp(12px, 1.8vw, 26px); left: 50%; transform: translateX(-50%); width: clamp(168px, 17vw, 252px); margin: 0; z-index: 4; } .mmlp-fv__logo img { width: 100%; height: auto; } /* 左コンテンツ：通常フローで写真に重ねる（高さ追従＝CTAが見切れない） */ .mmlp-fv__content { position: relative; z-index: 3; width: min(46%, 540px); /* 中央寄せ1040pxコンテナの左端に揃える（ワイドでも左端に張り付かずセンター寄り）。 実サイトは1900pxでコンテンツ左端≒436px = (1900-1040)/2 とほぼ一致。 */ margin-left: max(24px, calc((100% - 1040px) / 2)); padding-block: clamp(90px, 12vw, 152px) clamp(28px, 5vw, 56px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.7vw, 26px); } /* 特化チップ */ .mmlp-fv__chip { margin: 0; display: inline-flex; align-items: center; border: 2px solid var(--lp-brand); background: rgba(255, 255, 255, 0.88); color: var(--lp-brand); font-weight: 700; border-radius: 9999px; padding: 0.35em 1.15em; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.3; white-space: nowrap; } /* 見出し（実寸35px） */ .mmlp-fv__title { margin: 0; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(21px, 2.34vw, 36px); line-height: 1.34; } /* 3 バッジ（半透明ローズ＋白インセットリング・実寸160px） */ .mmlp-fv__badges { gap: clamp(6px, 0.55vw, 9px); flex-wrap: nowrap; } .mmlp-fv__badge { margin: 0; flex: 0 0 auto; width: clamp(82px, 10.6vw, 160px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 9999px; background: rgba(203, 133, 133, 0.92); /* fallback（color-mix 非対応ブラウザ）*/ background: color-mix(in srgb, var(--lp-brand) 92%, transparent); color: var(--lp-on-brand); font-weight: 700; line-height: 1.2; font-size: clamp(13px, 1.62vw, 24px); box-shadow: inset 0 0 0 max(2px, 0.2vw) rgba(255, 255, 255, 0.55); } /* CTA：ゴールドタブ＋二重リングボタン（実寸400px） */ .mmlp-fv__cta { position: relative; width: clamp(280px, 26.5vw, 400px); margin-top: clamp(6px, 0.7vw, 11px); } .mmlp-fv__tab { position: absolute; top: clamp(-13px, -0.8vw, -8px); left: clamp(18px, 1.85vw, 28px); z-index: 3; display: inline-flex; align-items: center; gap: 0.4em; background: var(--lp-gold); color: #fff; font-size: clamp(11px, 0.93vw, 14px); font-weight: 700; padding: 0.3em 0.95em; border-radius: 9999px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); white-space: nowrap; margin: 0; } /* メールアイコンは CSS mask（data-URI）で描画。wp:html を使わないため ブロックエディタの canvas でもフロントと同一に表示される。 */ .mmlp-fv__tab::after { content: ""; flex: 0 0 auto; width: 1em; height: 1em; background-color: #fff; -webkit-mask: url("data:image/svg+xml,") center / contain no-repeat; mask: url("data:image/svg+xml,") center / contain no-repeat; } .mmlp-fv__cta .wp-block-button__link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: clamp(50px, 4.3vw, 64px); margin-top: clamp(8px, 0.93vw, 14px); background: #fff; color: var(--lp-brand); border: 2px solid var(--lp-brand); border-radius: 9999px; font-weight: 700; font-size: clamp(15px, 1.28vw, 19px); box-shadow: 0 4px 12px rgba(203, 133, 133, 0.3); /* fallback */ box-shadow: 0 4px 12px color-mix(in srgb, var(--lp-brand) 30%, transparent); transition: background-color 0.18s ease, color 0.18s ease; } .mmlp-fv__cta .wp-block-button__link::after { content: ""; position: absolute; inset: clamp(4px, 0.33vw, 5px); border-radius: 9999px; border: 1px solid var(--lp-brand); pointer-events: none; } .mmlp-fv__cta .wp-block-button__link:hover, .mmlp-fv__cta .wp-block-button__link:focus-visible { background: var(--lp-brand); color: #fff; } .mmlp-fv__cta .wp-block-button__link:hover::after, .mmlp-fv__cta .wp-block-button__link:focus-visible::after { border-color: rgba(255, 255, 255, 0.6); } /* モバイル：中央寄せリフロー（読みやすさ優先・固定フレーム解除） */ @media (max-width: 781px) { .mmlp-fv__stage { aspect-ratio: auto; container-type: normal; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4vw, 24px); padding: clamp(20px, 6vw, 36px) 16px clamp(24px, 7vw, 40px); overflow: visible; } .mmlp-fv__stage::before { display: none; } /* 実サイト準拠：写真はフルブリードの cover バナー（角丸内包をやめ画面端まで） */ .mmlp-fv__photo { position: static; order: 2; width: auto; margin: 0 -16px; } .mmlp-fv__photo img { width: 100%; height: clamp(220px, 58vw, 300px); object-fit: cover; object-position: 62% 30%; border-radius: 0 0 18px 18px; } .mmlp-fv__logo { position: static; order: 1; transform: none; width: clamp(170px, 42vw, 230px); } .mmlp-fv__content { position: static; order: 3; inset: auto; width: 100%; max-width: 480px; margin-left: 0; padding-block: 0; align-items: flex-start; text-align: left; gap: clamp(12px, 3.5vw, 20px); } .mmlp-fv__chip { font-size: clamp(13px, 3.6vw, 16px); white-space: normal; } .mmlp-fv__title { font-size: clamp(20px, 5.6vw, 26px); text-align: left; } .mmlp-fv__badges { gap: clamp(6px, 2vw, 8px); justify-content: flex-start; } .mmlp-fv__badge { width: clamp(84px, 25vw, 112px); font-size: clamp(14px, 4.2vw, 18px); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5); } .mmlp-fv__cta { width: min(360px, 100%); margin-top: 0; } .mmlp-fv__tab { top: -12px; left: 24px; font-size: 13px; gap: 6px; } .mmlp-fv__cta .wp-block-button__link { min-height: 56px; margin-top: 14px; font-size: clamp(15px, 4vw, 18px); } .mmlp-fv__cta .wp-block-button__link::after { inset: 5px; } } /* ============================================================ * MakeMe LP FEATURE（lp-makeme-feature / feature-a.html 準拠） * 白カードに番号・見出し・本文・スマホ画像。左右交互×3。SPは縦積みリフロー。 * ============================================================ */ .mmlp-feat { background: var(--lp-sec-feature); padding-block: clamp(3rem, 7vw, 5.5rem); } .mmlp-feat__eyebrow { position: relative; margin: 1.4rem 0 0.4rem; color: var(--lp-brand); font-weight: 800; letter-spacing: 0.14em; font-size: var(--wp--preset--font-size--small); } .mmlp-feat__eyebrow::before { content: ""; position: absolute; top: -19px; left: 50%; transform: translateX(-50%); width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-feat__title { margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.4; } /* カード（白・影のみ／背景に大きなゴースト数字） */ .mmlp-feat__card { position: relative; max-width: 650px; margin-inline: auto; background: #fff; border-radius: 22px; box-shadow: 0 10px 28px rgba(204, 179, 179, 0.18); padding: clamp(2rem, 3.4vw, 2.8rem) clamp(1.6rem, 3vw, 2.4rem); overflow: hidden; } .mmlp-feat__card + .mmlp-feat__card { margin-top: clamp(1.5rem, 3vw, 2.2rem); } .mmlp-feat__row { position: relative; z-index: 1; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center; justify-content: center; flex-wrap: nowrap; } .mmlp-feat__card.is-rev .mmlp-feat__row { flex-direction: row-reverse; } .mmlp-feat__text { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } /* 反転カードは見出し/本文を外側（右）へ寄せ、原本の鏡像に */ .mmlp-feat__card.is-rev .mmlp-feat__text { align-items: flex-end; } /* 番号（背景に大きく透かす＝ゴースト数字。アウトラインのみ・コンテンツ背面） */ .mmlp-feat__num { position: absolute; top: clamp(-36px, -2.6vw, -22px); left: clamp(-10px, -0.6vw, -6px); margin: 0; font-weight: 800; font-size: clamp(112px, 16vw, 196px); line-height: 1; color: transparent; -webkit-text-stroke: 2px #f1dada; text-stroke: 2px #f1dada; z-index: 0; pointer-events: none; user-select: none; } .mmlp-feat__card.is-rev .mmlp-feat__num { left: auto; right: clamp(-10px, -0.6vw, -6px); } /* 見出し（var(--lp-text-strong) 26） */ .mmlp-feat__h { margin: 0.6rem 0 0.5rem; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; } /* 本文（var(--lp-text-mid) 15 / 行間175% / 幅330） */ .mmlp-feat__body { margin: 0; max-width: 330px; color: var(--lp-text-mid); font-size: 15px; line-height: 1.75; } /* スマホ画像（214×286・角丸8） */ .mmlp-feat__phone { flex: 0 0 auto; margin: 0; } .mmlp-feat__phone img { width: clamp(150px, 18vw, 214px); height: auto; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } /* モバイル：カード内を縦積み（テキスト→画像・中央寄せ） */ @media (max-width: 781px) { .mmlp-feat__row, .mmlp-feat__card.is-rev .mmlp-feat__row { flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .mmlp-feat__text, .mmlp-feat__card.is-rev .mmlp-feat__text { display: flex; flex-direction: column; align-items: center; } .mmlp-feat__num, .mmlp-feat__card.is-rev .mmlp-feat__num { left: 50%; right: auto; transform: translateX(-50%); } .mmlp-feat__body { max-width: none; text-align: center; } .mmlp-feat__phone img { width: clamp(170px, 55vw, 214px); } } /* ============================================================ * MakeMe LP 最終CTA（lp-makeme-final-cta） * ============================================================ */ .mmlp-final { padding: 0; } .mmlp-final__banner { min-height: clamp(220px, 26vw, 360px); } .mmlp-final__banner > .wp-block-cover__image-background { object-fit: cover; object-position: 58% 32%; } .mmlp-final__banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.45) 28%, rgba(255, 255, 255, 0) 55%); } .mmlp-final__banner .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin-inline: auto; } .mmlp-final__bannerText { margin: 0; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.4; } .mmlp-final__panel { background: var(--lp-sec-message); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .mmlp-final__msg { margin: 0 auto 1.4rem; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.6; } .mmlp-final__consent { margin: 1.2rem auto 0; color: var(--lp-text-mid); font-size: 13px; } /* マスター準拠：同意行の先頭にチェック済みチェックボックス */ .mmlp-final__consent::before { content: ""; display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-right: 7px; border-radius: 3px; background: var(--lp-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center no-repeat; } .mmlp-final__consent a { color: var(--lp-brand); text-decoration: underline; } /* ============================================================ * MakeMe LP フッター（lp-makeme-footer / ローズ帯） * ============================================================ */ .mmlp-footer { background: var(--lp-brand); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .mmlp-footer__logo { margin: 0 auto 0.7rem; } .mmlp-footer__logo img { width: clamp(150px, 18vw, 200px); height: auto; } .mmlp-footer__tagline { margin: 0; color: #fff; font-size: 0.85rem; letter-spacing: 0.04em; } .mmlp-footer__copy { max-width: 560px; margin: 1.4rem auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); font-size: 0.7rem; letter-spacing: 0.02em; } /* ============================================================ * MakeMe LP 共通CTA（複数セクションで再利用） * ============================================================ */ .mmlp-cta-free { margin: 0 0 0.6rem; color: var(--lp-brand); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; } .mmlp-cta-pill .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 1rem 2.4rem; background: var(--lp-brand); color: var(--lp-on-brand); font-weight: 700; border-radius: 9999px; box-shadow: 0 6px 16px rgba(203, 133, 133, 0.35); /* fallback */ box-shadow: 0 6px 16px color-mix(in srgb, var(--lp-brand) 35%, transparent); transition: background-color 0.18s ease, transform 0.12s ease; } .mmlp-cta-pill .wp-block-button__link:hover, .mmlp-cta-pill .wp-block-button__link:focus-visible { background: var(--wp--preset--color--makeme-pink-dark); transform: translateY(-1px); } /* ============================================================ * MakeMe LP ABOUT（lp-makeme-about） * ============================================================ */ .mmlp-about { background: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); } .mmlp-about__eyebrow { position: relative; margin: 0 0 0.4rem; color: var(--lp-brand); font-weight: 800; letter-spacing: 0.18em; font-size: 0.85rem; } .mmlp-about__eyebrow::before { content: ""; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-about__title { margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.5; } .mmlp-about__row { max-width: 1040px; margin-inline: auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; flex-wrap: nowrap; } .mmlp-about__text { flex: 1 1 50%; min-width: 0; color: var(--lp-text-mid); text-align: center; } .mmlp-about__text p { margin: 0 0 1rem; font-size: 15px; line-height: 1.9; } .mmlp-about__lead { color: var(--lp-text-strong) !important; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important; } .mmlp-about__note { color: var(--lp-text-weak) !important; font-size: 13px !important; margin-bottom: 0 !important; } .mmlp-about__photo { flex: 0 0 48%; align-self: stretch; margin: 0; } .mmlp-about__photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 16px; } /* 実サイト準拠：ABOUT は見出し・本文とも中央寄せ（パターンの has-text-align-center と base の ::before left:50% がそのまま効くため、ここでの上書きは不要）。 */ /* ============================================================ * MakeMe LP Intro（lp-makeme-intro / あなたにぴったりな） * ============================================================ */ .mmlp-intro { background: var(--lp-sec-intro); padding-block: clamp(2.5rem, 6vw, 4.5rem); } .mmlp-intro__row { max-width: 1040px; margin-inline: auto; gap: clamp(1rem, 2.5vw, 2.5rem); align-items: center; flex-wrap: nowrap; } .mmlp-intro__app { flex: 0 0 auto; margin: 0; } .mmlp-intro__app img { width: clamp(120px, 15vw, 200px); height: auto; } .mmlp-intro__center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .mmlp-intro__lead { position: relative; margin: 1.4rem 0 0; color: var(--lp-text-mid); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); } .mmlp-intro__lead::before { content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 42px; height: 19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-intro__checks { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; } .mmlp-intro__checks li { position: relative; display: inline-block; margin: 0.3rem 0; padding-left: 1.85em; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.5; } .mmlp-intro__checks li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.32em; height: 1.32em; border-radius: 9999px; background: var(--lp-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/0.9em no-repeat; } .mmlp-intro__illust { margin: 0.4rem auto 0; } .mmlp-intro__illust img { width: clamp(220px, 26vw, 360px); height: auto; } @media (max-width: 781px) { .mmlp-about__row { flex-direction: column; } .mmlp-about__text { flex: 1 1 auto; } .mmlp-about__photo { flex: 0 0 auto; width: 100%; max-width: 420px; } /* スマホ：実サイト準拠の順序＝テキスト→CTA→スマホ2枚（最下段に左右並び）。 __row を display:contents で平坦化し、セクションを2列グリッドで配置（CSSのみ・再ベイク不要）。 */ .mmlp-intro { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "cta cta" "btn btn" "appl appr"; column-gap: 12px; row-gap: clamp(12px, 3.2vw, 18px); align-items: start; justify-items: center; } /* WP per-container の display:flex(0,1,0) に勝つため 0,2,0 で contents 確定 */ .mmlp-intro > .mmlp-intro__row { display: contents; } .mmlp-intro__center { grid-area: center; width: 100%; max-width: none; } .mmlp-intro__cta-free, .mmlp-cta-free { grid-area: cta; margin: 0; } .mmlp-intro .wp-block-buttons { grid-area: btn; margin: 0; display: flex; justify-content: center; width: 100%; } .mmlp-intro__app:first-of-type { grid-area: appl; } .mmlp-intro__app:last-of-type { grid-area: appr; } .mmlp-intro__app { margin: 0; } .mmlp-intro__app img { width: 100%; max-width: 180px; } } /* ── constrained レイアウトの contentSize(720px) 制限の是正 ── テーマ既定 contentSize=720px（ブログ本文向け）が、alignfull＋内部 constrained の LPセクションの内側ラッパーも 720px に潰し、横並び要素の語中改行や 4枚カードの 3+1 折返しを起こしていた。横方向に要素が多い intro/about/flow/recommend のみ この変数を広げ、各 __row/__steps を設計幅で表示する（feature/voices等は 720px のまま）。 */ .mmlp-intro, .mmlp-about, .mmlp-flow, .mmlp-recommend { --wp--style--global--content-size: 1120px; } /* ============================================================ * MakeMe LP メッセージ（lp-makeme-message） * ============================================================ */ .mmlp-message { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--lp-sec-feature) 0, var(--lp-sec-feature) 322px, var(--lp-sec-message) 322px); padding-top: 350px; padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); } /* マスター準拠：タグライン（手書き風・実画像）＋キャラクターイラスト（実画像）をピンク帯の上に */ .mmlp-message::before { content: ""; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 344px; aspect-ratio: 420 / 101; background: url("images/makeme/message-tagline.webp") center / contain no-repeat; z-index: 1; } .mmlp-message::after { content: ""; position: absolute; top: 128px; left: 50%; transform: translateX(-50%); width: 196px; height: 211px; background: url("images/makeme/message-illust.webp") center bottom / contain no-repeat; z-index: 1; } .mmlp-message__title { margin: 0 0 0.8rem; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.15rem, 2.1vw, 1.65rem); line-height: 1.6; } .mmlp-message__sub { margin: 0 0 1.6rem; color: var(--lp-text-mid); font-size: clamp(0.95rem, 1.5vw, 1.1rem); line-height: 1.7; } /* ============================================================ * MakeMe LP 登録フロー（lp-makeme-flow） * ============================================================ */ .mmlp-flow { background: var(--lp-sec-warm); padding-block: clamp(3rem, 7vw, 5rem); } .mmlp-flow__title { position: relative; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); padding-top: 2.7rem; color: #5a5a5a; font-weight: 500; font-size: clamp(1.2rem, 2.1vw, 1.6rem); } /* FLOW エンブレム（キラ装飾＋FLOW）をタイトル上に付与（マスター準拠） */ .mmlp-flow__title::before { content: "FLOW"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding-top: 26px; color: var(--lp-brand); font-weight: 800; letter-spacing: 0.18em; font-size: 1rem; line-height: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") top center no-repeat; } .mmlp-flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1120px; margin-inline: auto; gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; } /* WP の flex レイアウト（.wp-container-* / display:flex・align-items, 詳細度0,1,0）に勝つため、 display と align-items を親子セレクタ（0,2,0）で確定させる（カードを等高に揃える）。 */ .mmlp-flow > .mmlp-flow__steps { display: grid; align-items: stretch; } .mmlp-flow__card { max-width: none; background: #fff; border-radius: 18px; box-shadow: 0 6px 18px rgba(180, 150, 120, 0.12); padding: clamp(1.5rem, 2vw, 2rem) 1.25rem; } .mmlp-flow__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 9999px; background: var(--lp-brand); color: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1; } .mmlp-flow__badge span { font-size: 0.6rem; letter-spacing: 0.08em; margin-bottom: 0.1rem; } .mmlp-flow__h { margin: 0 0 0.5rem; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.4; } .mmlp-flow__desc { margin: 0; color: var(--lp-text-mid); font-size: 13px; line-height: 1.7; } .mmlp-flow__il { margin: 1rem auto 0; max-width: 150px; } .mmlp-flow__il img { width: 100%; height: 130px; object-fit: contain; } /* flow グリッドのレスポンシブ：~900px=2列、~480px=1列 */ @media (max-width: 900px) { .mmlp-flow__steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mmlp-flow__steps { grid-template-columns: 1fr; max-width: 360px; } } /* カード間の矢印（実サイト準拠＝ソリッドなローズの三角）。 4列(PC)=右向き、1列(スマホ)=下向き。 */ .mmlp-flow__card { position: relative; } @media (min-width: 901px) { .mmlp-flow__card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent #d99a9a; } } @media (max-width: 480px) { .mmlp-flow__card:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 11px 8px 0 8px; border-color: #d99a9a transparent transparent transparent; } } /* ============================================================ * MakeMe LP こんな人におすすめ（lp-makeme-recommend） * ============================================================ */ .mmlp-recommend { background: #fff; padding-block: clamp(3rem, 7vw, 5rem); } .mmlp-recommend__eyebrow { position: relative; margin: 20px 0 0; color: var(--lp-brand); font-weight: 700; font-size: 0.95rem; } .mmlp-recommend__eyebrow::before { content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-recommend__title { margin: 0.25rem auto clamp(2rem, 4vw, 3rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); } .mmlp-recommend__row { max-width: 1120px; margin-inline: auto; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; flex-wrap: nowrap; } .mmlp-recommend__photo { flex: 0 0 40%; margin: 0; } .mmlp-recommend__photo img { width: 100%; height: auto; border-radius: 16px; } .mmlp-recommend__items { flex: 1 1 auto; gap: clamp(0.6rem, 1.2vw, 0.9rem); align-content: center; } .mmlp-recommend__item { flex: 1 1 calc(50% - 0.9rem); min-width: 0; gap: 0.75rem; align-items: center; background: var(--lp-sec-feature); border-radius: 9999px; padding: 0.5rem 1.1rem 0.5rem 0.5rem; } .mmlp-recommend__icon { flex: 0 0 auto; margin: 0; } .mmlp-recommend__icon img { width: clamp(40px, 4vw, 52px); height: auto; } .mmlp-recommend__text { margin: 0; color: var(--lp-text-strong); font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; line-height: 1.45; } .mmlp-hl { background: linear-gradient(transparent 60%, #fbe6a2 60%); color: inherit; font-weight: 700; padding: 0 0.05em; } @media (max-width: 781px) { .mmlp-recommend__row { flex-direction: column; } .mmlp-recommend__photo { flex: 0 0 auto; width: 100%; max-width: 420px; order: 2; /* 実サイト準拠：スマホは写真をチップの下に */ margin-top: 0.5rem; } .mmlp-recommend__item { flex: 1 1 100%; } } /* ============================================================ * MakeMe LP お客様の声（lp-makeme-voices） * ============================================================ */ .mmlp-voices { background: #fff; padding-block: clamp(3rem, 7vw, 5rem); } .mmlp-voices__title { position: relative; margin: 1.6rem auto 0.3rem; color: var(--lp-text-strong); font-weight: 800; letter-spacing: 0.06em; font-size: clamp(1.6rem, 3.6vw, 2.6rem); } .mmlp-voices__title::before { content: ""; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-voices__sub { margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--lp-text-mid); font-size: clamp(1rem, 1.6vw, 1.2rem); } .mmlp-voices__grid { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin-inline: auto; gap: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem); } /* 実サイト準拠の横並び：左カラム(アバター＋年代) + 右カラム(タイトル＋本文・左寄せ)。 アバター/年代は左カラムに絶対配置、本文は padding-left でクリア。 */ .mmlp-voice { flex: 1 1 calc(50% - 1.75rem); min-width: 260px; max-width: 480px; position: relative; min-height: 132px; padding: 1.7rem 1.7rem 1.7rem 116px; background: var(--lp-sec-feature); border-radius: 18px; text-align: left; } /* アバター（左カラム上部）。実サイトのキャラクターイラストを切り出した WebP を カードごと（nth-child）に背景表示。画像自体にローズ円枠を含むため枠は付けない。 */ .mmlp-voice::before { content: ""; position: absolute; left: 24px; top: 1.7rem; width: 66px; height: 66px; border-radius: 9999px; background-position: center; background-size: cover; background-repeat: no-repeat; } .mmlp-voices__grid .mmlp-voice:nth-child(1)::before { background-image: url("images/makeme/voice-1.webp"); } .mmlp-voices__grid .mmlp-voice:nth-child(2)::before { background-image: url("images/makeme/voice-2.webp"); } .mmlp-voices__grid .mmlp-voice:nth-child(3)::before { background-image: url("images/makeme/voice-3.webp"); } .mmlp-voices__grid .mmlp-voice:nth-child(4)::before { background-image: url("images/makeme/voice-4.webp"); } .mmlp-voice__age { position: absolute; left: 8px; top: calc(1.7rem + 70px); width: 96px; margin: 0; text-align: center; color: var(--lp-brand); font-size: 11px; font-weight: 700; } /* パターンの has-text-align-center(0,1,0) に勝つため 0,2,0 で左寄せ確定。 */ .mmlp-voice .mmlp-voice__title { margin: 0 0 0.55rem; color: var(--lp-brand); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; text-align: left; } .mmlp-voice__body { margin: 0; color: var(--lp-text-mid); font-size: 14px; line-height: 1.85; text-align: left; } /* ============================================================ * MakeMe LP FAQ（lp-makeme-faq） * ============================================================ */ .mmlp-faq { background: var(--lp-sec-message); padding-block: clamp(3rem, 7vw, 5rem); } .mmlp-faq__title { position: relative; margin: 1.6rem auto 0.3rem; color: var(--lp-text-strong); font-weight: 800; letter-spacing: 0.04em; font-size: clamp(1.8rem, 4vw, 2.8rem); } .mmlp-faq__title::before { content: ""; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 48px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23CB8585' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 22V11'/%3E%3Cpath d='M14 23l-3-10'/%3E%3Cpath d='M34 23l3-10'/%3E%3Cpath d='M6 24l-4-9'/%3E%3Cpath d='M42 24l4-9'/%3E%3C/svg%3E") center no-repeat; } .mmlp-faq__sub { margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); color: var(--lp-text-mid); font-size: clamp(1rem, 1.6vw, 1.2rem); } /* 白カード（タブ＋アコーディオンを内包） */ .mmlp-faq__card { position: relative; max-width: 900px; margin-inline: auto; background: #fff; border-radius: 18px; padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.4rem) clamp(0.5rem, 1.4vw, 1rem); } /* カテゴリタブ行 */ .mmlp-faq__tabs { display: flex; flex-wrap: nowrap; gap: clamp(0.75rem, 2.2vw, 2.4rem); border-bottom: 1px solid #ecdede; margin-bottom: 0.4rem; overflow-x: auto; scrollbar-width: none; } .mmlp-faq__tabs::-webkit-scrollbar { display: none; } /* タブ（button）。ネイティブボタンスタイルをリセット */ .mmlp-faq__tab { flex: 0 0 auto; margin-bottom: -1px; padding: 0.55rem 0.15rem 0.85rem; background: none; border: 0; border-bottom: 2px solid transparent; color: #8a8a8a; font: inherit; font-weight: 500; font-size: clamp(0.8rem, 1.25vw, 0.95rem); white-space: nowrap; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .mmlp-faq__tab:hover { color: var(--lp-brand); } /* アクティブタブ（Interactivity の is-active クラス／SSR 初期値） */ .mmlp-faq__tab.is-active { color: var(--lp-brand); font-weight: 700; border-bottom-color: var(--lp-brand); } /* パネル（既定で表示・非アクティブは hidden 属性で非表示） */ .mmlp-faq__accordion { margin: 0; } .mmlp-faq__panel[hidden] { display: none; } /* アコーディオン項目（区切り線＝ローズ）。core/details = details.mmlp-faq__item */ .mmlp-faq__card .mmlp-faq__item { border-bottom: 1px solid #ecc9cf; padding: 0.3rem 0; margin: 0; } .mmlp-faq__card .mmlp-faq__panel .mmlp-faq__item:last-child { border-bottom: 0; } /* 質問（core/details の summary） */ .mmlp-faq__card .mmlp-faq__item > summary { position: relative; list-style: none; cursor: pointer; padding: 1rem 2.2rem 1rem 0; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(0.95rem, 1.4vw, 1.05rem); line-height: 1.5; } .mmlp-faq__card .mmlp-faq__item > summary::-webkit-details-marker { display: none; } .mmlp-faq__card .mmlp-faq__item > summary::marker { content: ""; } .mmlp-faq__card .mmlp-faq__item > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 11px; height: 11px; border-right: 2px solid #b3b3b3; border-bottom: 2px solid #b3b3b3; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } .mmlp-faq__card .mmlp-faq__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); } /* 回答（core/paragraph .mmlp-faq__a） */ .mmlp-faq__card .mmlp-faq__a { margin: 0.2rem 0 1.1rem; color: var(--lp-text-mid); font-size: 14px; line-height: 1.9; } /* ── 移行期間の後方互換: 旧 wp:html 版 FAQ（radio 制御）。新ブロック版(faq-tabs)は data-p を 持たず [hidden]/is-active で制御するため非干渉。全ページ移行後にこのブロックは削除可。 ── */ .mmlp-faq__radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .mmlp-faq__panel[data-p] { display: none; } #mmlp-ft-0:checked ~ .mmlp-faq__panels .mmlp-faq__panel[data-p="0"], #mmlp-ft-1:checked ~ .mmlp-faq__panels .mmlp-faq__panel[data-p="1"], #mmlp-ft-2:checked ~ .mmlp-faq__panels .mmlp-faq__panel[data-p="2"], #mmlp-ft-3:checked ~ .mmlp-faq__panels .mmlp-faq__panel[data-p="3"] { display: block; } #mmlp-ft-0:checked ~ .mmlp-faq__tabs label[for="mmlp-ft-0"], #mmlp-ft-1:checked ~ .mmlp-faq__tabs label[for="mmlp-ft-1"], #mmlp-ft-2:checked ~ .mmlp-faq__tabs label[for="mmlp-ft-2"], #mmlp-ft-3:checked ~ .mmlp-faq__tabs label[for="mmlp-ft-3"] { color: var(--lp-brand); font-weight: 700; border-bottom-color: var(--lp-brand); } /* スマホ：マスター準拠でカルーセル＋縦型カード（アバター上中央／本文中央寄せ）。 横スクロール＋scroll-snap でスワイプ切替。 */ @media (max-width: 781px) { /* WP per-container の flex-wrap:wrap(0,1,0) に勝つため 0,2,0 で nowrap 確定 */ .mmlp-voices .mmlp-voices__grid { max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 16px 10px; margin-inline: -16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mmlp-voices .mmlp-voices__grid::-webkit-scrollbar { display: none; } .mmlp-voices__grid::-webkit-scrollbar { display: none; } .mmlp-voice { flex: 0 0 84%; min-width: 0; max-width: 84%; min-height: 0; scroll-snap-align: center; padding: calc(1.6rem + 64px + 1.6rem) 1.4rem 1.6rem; text-align: center; } .mmlp-voice::before { left: 50%; top: 1.6rem; transform: translateX(-50%); width: 64px; height: 64px; } .mmlp-voice__age { left: 0; right: 0; width: auto; top: calc(1.6rem + 64px + 4px); text-align: center; } .mmlp-voice .mmlp-voice__title { text-align: center; } .mmlp-voice__body { text-align: center; } } /* ============================================================ * 汎用カルーセル（wpmk/carousel）— ドット/矢印（モバイルのみ表示） * トラックは各用途のクラス（例 .mmlp-voices__grid）が scroll-snap を担う。 * デスクトップ（2x2グリッド等）では操作子を出さない＝ゼロ回帰。 * ============================================================ */ .wpmk-carousel { position: relative; } .wpmk-carousel__controls { display: none; } @media (max-width: 781px) { .wpmk-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; } .wpmk-carousel__dots { display: flex; align-items: center; gap: 8px; } .wpmk-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 9999px; background: #dcc8c8; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .wpmk-carousel__dot.is-active { background: var(--lp-brand); transform: scale(1.3); } .wpmk-carousel__arrow { position: relative; flex: 0 0 auto; width: 32px; height: 32px; padding: 0; border: 1px solid #ecd9d9; border-radius: 9999px; background: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } .wpmk-carousel__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--lp-brand); border-bottom: 2px solid var(--lp-brand); } .wpmk-carousel__arrow--prev::before { transform: translate(-30%, -50%) rotate(135deg); } .wpmk-carousel__arrow--next::before { transform: translate(-70%, -50%) rotate(-45deg); } } /* ============================================================ * セクション間余白の圧縮（マスター準拠のコンパクト感・iter4） * 各セクションの padding-block を一括で詰める（末尾＝source-order勝ち）。 * ============================================================ */ .mmlp-intro, .mmlp-about, .mmlp-feat, .mmlp-flow, .mmlp-recommend, .mmlp-voices, .mmlp-faq, .mmlp-final { padding-block: clamp(2rem, 4vw, 3.25rem); } /* message はイラスト用に上余白を確保するため base 側で個別指定（ここでは触らない） */ /* ============================================================ * セクション間の継ぎ目をシームレスに（loop8） * 全LPセクションは blockGap 由来の margin(24px) で白地の隙間ができていた。 * 隣接する色帯が直接接するよう上下マージンを0にする。 * ============================================================ */ .mmlp-fv, .mmlp-intro, .mmlp-about, .mmlp-feat, .mmlp-message, .mmlp-flow, .mmlp-recommend, .mmlp-voices, .mmlp-faq, .mmlp-final, .mmlp-footer { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* final セクション内部もシームレスに：写真バナー→ピンク帯→フッターが直接接する （final の padding と、写真→ピンク帯間の blockGap を除去）。 */ .mmlp-final { padding-block: 0 !important; } .mmlp-final__panel { margin-block-start: 0 !important; } /* ===== ヘルプセンター ===== */ .wpmk-help-hero{background:var(--wp--preset--color--surface);padding:56px 24px;text-align:center} .wpmk-help-hero__placeholder{width:100%;max-width:640px;height:160px;margin:0 auto 24px;background:var(--wp--preset--color--border);border-radius:12px} .wpmk-help-hero__title{font-weight:800;margin-bottom:20px} .wpmk-help-search{display:flex;max-width:560px;margin:0 auto;gap:8px} .wpmk-help-search__input{flex:1;padding:12px 16px;border:1px solid var(--wp--preset--color--border);border-radius:8px;font-size:15px} .wpmk-help-search__btn{padding:12px 20px;border:0;border-radius:8px;background:var(--wp--preset--color--primary);color:#fff;font-weight:700;cursor:pointer} .wpmk-help-section{padding:32px 24px;max-width:1040px;margin:0 auto} .wpmk-help-pickup__list{list-style:none;margin:0;padding:0;border:1px solid var(--wp--preset--color--border);border-radius:8px;overflow:hidden} .wpmk-help-pickup__item{border-bottom:1px solid var(--wp--preset--color--border)} .wpmk-help-pickup__item:last-child{border-bottom:0} .wpmk-help-pickup__item a{display:block;padding:14px 18px;color:var(--wp--preset--color--contrast);text-decoration:none} .wpmk-help-pickup__item a:hover{background:var(--wp--preset--color--surface)} .wpmk-help-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media (max-width:640px){.wpmk-help-cats{grid-template-columns:1fr}} .wpmk-help-cat{display:flex;align-items:center;justify-content:center;padding:28px 16px;border:1px solid var(--wp--preset--color--border);border-radius:10px;font-weight:700;color:var(--wp--preset--color--contrast);text-decoration:none;text-align:center} .wpmk-help-cat:hover{background:var(--wp--preset--color--surface)} .wpmk-help-crumbs{font-size:13px;color:var(--wp--preset--color--muted);margin-bottom:16px} .wpmk-help-crumbs a{color:inherit;text-decoration:underline} .wpmk-help-crumbs__sep{margin:0 6px} .wpmk-help-cat-page__title{margin:8px 0 24px;font-weight:800} .wpmk-help-cat-list{list-style:none;margin:0;padding:0} .wpmk-help-cat-list__item{display:block;padding:14px 0;border-bottom:1px solid var(--wp--preset--color--border);font-weight:600} .wpmk-help-cat-list__item a{color:var(--wp--preset--color--contrast);text-decoration:none} /* ============================================================ * Task 7: Help article detail template * ============================================================ */ .wpmk-help-article__title{font-weight:800;line-height:1.4;margin:.4em 0 .6em;font-size:clamp(22px,2.6vw,30px)} .wpmk-help-article__date{display:block;margin-bottom:.6em} .wpmk-help-article__thumb-placeholder{background:var(--wp--preset--color--border);border-radius:8px;min-height:200px;margin:16px 0 28px;overflow:hidden} .wpmk-help-article__thumb-placeholder img{width:100%;height:auto;display:block} .wpmk-help-article .wp-block-post-content{line-height:1.95} .wpmk-help-article .wp-block-post-content h2{margin-top:1.8em;font-weight:800} .wpmk-help-article .wp-block-post-content h3{margin-top:1.6em;font-weight:700} /* ============================================================ * Task 8: Auto-generated table of contents (TOC) * ============================================================ */ .wpmk-help-toc{margin:0 0 32px} .wpmk-help-toc__list{list-style:none;margin:0;padding:0} .wpmk-help-toc__item{padding:4px 0} .wpmk-help-toc__item--sub{margin-left:1.2em} .wpmk-help-toc a{color:var(--wp--preset--color--primary);text-decoration:none} /* ============================================================ * Task 9: Related articles (same-category latest 3) * ============================================================ */ .wpmk-help-related__list{list-style:none;margin:0;padding:0} .wpmk-help-related__item{border-bottom:1px solid var(--wp--preset--color--border)} .wpmk-help-related__item a{display:block;padding:12px 4px;color:var(--wp--preset--color--primary);text-decoration:none} /* ============================================================ * Task 10: Helpful vote widget * ============================================================ */ .wpmk-help-vote{border-top:1px solid var(--wp--preset--color--border);border-bottom:1px solid var(--wp--preset--color--border);padding:24px 0;margin:32px 0;text-align:center} .wpmk-help-vote__q{font-weight:700;margin:0 0 12px} .wpmk-help-vote__btns{display:flex;gap:12px;justify-content:center} .wpmk-help-vote__btn{padding:8px 24px;border:1px solid var(--wp--preset--color--border);border-radius:6px;background:#fff;cursor:pointer;font-weight:700} .wpmk-help-vote__btn:hover{background:var(--wp--preset--color--surface)} .wpmk-help-vote__result{color:var(--wp--preset--color--muted);font-size:14px} /* ============================================================ * カテゴリページ: セクション分け（子カテゴリがある場合のTimee風の箱表示） * ============================================================ */ .wpmk-help-cat-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px} @media (max-width:640px){.wpmk-help-cat-sections{grid-template-columns:1fr}} .wpmk-help-cat-section{border:1px solid var(--wp--preset--color--border);border-radius:10px;overflow:hidden} .wpmk-help-cat-section__title{margin:0;padding:14px 18px;background:var(--wp--preset--color--surface);font-size:16px;font-weight:800} .wpmk-help-cat-section__list{list-style:none;margin:0;padding:8px 18px} .wpmk-help-cat-section__list li{border-bottom:1px solid var(--wp--preset--color--border)} .wpmk-help-cat-section__list li:last-child{border-bottom:0} .wpmk-help-cat-section__list a{display:block;padding:10px 0;color:var(--wp--preset--color--contrast);text-decoration:none} .wpmk-help-cat-section__more{display:block;padding:10px 18px 14px;text-align:right;color:var(--wp--preset--color--primary);text-decoration:none;font-size:13px} /* ============================================================ * 記事詳細ページ: 左サイドバー「このセクションの記事」 * ============================================================ */ .wpmk-help-article-cols{align-items:flex-start} /* 兄弟記事が無くサイドバーが空の時は、260px分の空白を残さず本文を全幅にする */ .wpmk-help-article-side:not(:has(*)){display:none} @media (max-width:640px){.wpmk-help-article-cols{flex-direction:column}} .wpmk-help-section-nav{border:1px solid var(--wp--preset--color--border);border-radius:10px;padding:14px;position:sticky;top:24px} .wpmk-help-section-nav__label{margin:0 0 10px;font-weight:800;font-size:14px} .wpmk-help-section-nav__list{list-style:none;margin:0;padding:0} .wpmk-help-section-nav__item a{display:block;padding:10px 12px;border-radius:6px;color:var(--wp--preset--color--contrast);text-decoration:none;font-size:14px} .wpmk-help-section-nav__item a:hover{background:var(--wp--preset--color--surface)} .wpmk-help-section-nav__item--current a{background:var(--wp--preset--color--surface);border:1px solid var(--wp--preset--color--primary);font-weight:700} /* ============================================================ * Timeeレイアウト踏襲: 汎用ボックス（アクセントバー見出し） * ピックアップ/目次/関連記事/よく見られているページで共用 * ============================================================ */ .wpmk-help-box{border:1px solid var(--wp--preset--color--border);border-radius:10px;padding:20px 22px;margin:0 0 24px;background:var(--wp--preset--color--base)} .wpmk-help-box__head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;margin:0 0 14px} .wpmk-help-box__head::before{content:"";display:inline-block;width:4px;align-self:stretch;min-height:1.1em;background:var(--wp--preset--color--primary);border-radius:2px} /* サブヘッダー行（パンくず + 検索窓）*/ .wpmk-help-subheader{gap:16px;margin-bottom:20px} .wpmk-help-search--compact{max-width:280px} .wpmk-help-search--compact .wpmk-help-search__input{padding:8px 12px;font-size:13px} .wpmk-help-search--compact .wpmk-help-search__btn{padding:8px 16px;font-size:13px} /* カテゴリカード: Timeeの「チップボタン」風に太枠+ドロップシャドウ */ .wpmk-help-cat{padding:30px 16px;border:2px solid var(--wp--preset--color--primary);border-radius:12px;font-weight:800;font-size:16px;box-shadow:4px 4px 0 var(--wp--preset--color--border);transition:transform .1s ease} .wpmk-help-cat:hover{background:var(--wp--preset--color--surface);transform:translate(2px,2px);box-shadow:2px 2px 0 var(--wp--preset--color--border)} /* カテゴリタイトルにアクセントバー */ .wpmk-help-cat-page__title{display:flex;align-items:center;gap:14px} .wpmk-help-cat-page__title::before{content:"";display:inline-block;width:5px;align-self:stretch;background:var(--wp--preset--color--primary);border-radius:2px} /* よく見られているページ */ .wpmk-help-recommended{text-align:center} .wpmk-help-recommended .wpmk-help-box__head{justify-content:center} .wpmk-help-recommended .wpmk-help-box__head::before{display:none} .wpmk-help-recommended__list{list-style:none;margin:0;padding:0} .wpmk-help-recommended__list li{padding:6px 0} .wpmk-help-recommended__list a{color:var(--wp--preset--color--primary);text-decoration:underline} /* ============================================================ * トンマナ: 実際のメイクミークラウド（lp.makeme-cloud.com）に合わせる。 * ヘルプセンター配下のページだけ、アクセント系トークンをMakeMeブランドカラー/フォントに差し替える。 * 本文色(contrast)はLP同様ダーク基調のまま維持し、ボーダー/背景/リンクなどのアクセントのみピンクにする。 * ============================================================ */ body.post-type-archive-help_article, body.tax-help_category, body.single-help_article { --wp--preset--color--primary: var(--wp--preset--color--makeme-pink); --wp--preset--color--primary-hover: var(--wp--preset--color--makeme-pink-dark); --wp--preset--color--surface: var(--wp--preset--color--makeme-pink-soft); --wp--preset--color--border: var(--wp--preset--color--makeme-pink-soft); font-family: var(--wp--preset--font-family--wix-text); } body.post-type-archive-help_article h1, body.post-type-archive-help_article h2, body.post-type-archive-help_article h3, body.tax-help_category h1, body.tax-help_category h2, body.tax-help_category h3, body.single-help_article h1, body.single-help_article h2, body.single-help_article h3 { font-family: var(--wp--preset--font-family--wix-display); } /* トップページのヒーローだけは実LP同様、ピンク→ゴールドの斜めグラデーションにする */ body.post-type-archive-help_article .wpmk-help-hero { background: linear-gradient(135deg, var(--wp--preset--color--makeme-pink-soft) 0%, var(--wp--preset--color--makeme-bg) 45%, var(--wp--preset--color--makeme-gold) 100%); } body.post-type-archive-help_article .wpmk-help-hero__placeholder { background: rgba(255, 255, 255, .55); } /* ============================================================ * 共通ヘッダー/フッター: MakeMeロゴ + フッターのリンク一覧（Timeeのフッター構成に準拠） * ============================================================ */ .wpmk-head__brand{display:inline-flex;align-items:center} .wpmk-head__logo{height:32px;width:auto;display:block} .wpmk-foot__logo{height:32px;width:auto;display:block} .wpmk-foot__links{list-style:disc;padding-left:1.2em;margin:0} .wpmk-foot__links a{color:inherit;text-decoration:none} .wpmk-foot__links a:hover{text-decoration:underline} /* ============================================================ * Client(B2B) LP — .clp-*（lp.makeme-cloud.com/client 準拠・ブランド共通） * ブランド色は makeme と同一（--lp-* トークン流用）。固有レイアウトのみ新規。 * ============================================================ */ /* セクション背景グラデ（マスター colorUnderlay / inner-box の computed 実値を移植）。 hero と fee は同一の暖色radial（金#E0B35A＋ロゼ#CB8585＋白中心）。service はロゼ基調。 */ :root { --clp-grad-warm: radial-gradient(circle at 52.6937% 100%, rgb(224, 179, 90) 0%, 7.5%, rgba(224, 179, 90, 0) 25%), radial-gradient(circle at 96.8945% 3.16081%, rgb(224, 179, 90) 0%, 14.725%, rgba(224, 179, 90, 0) 31%), radial-gradient(circle at 28.2389% 7.41211%, rgb(203, 133, 133) 0%, 41.514%, rgba(203, 133, 133, 0) 66%), radial-gradient(circle at 0.63151% 0%, rgb(224, 179, 90) 0%, 10.556%, rgba(224, 179, 90, 0) 28%), radial-gradient(circle at 100% 100%, rgb(203, 133, 133) 0%, 25.047%, rgba(203, 133, 133, 0) 69%), radial-gradient(circle at 1.22884% 100%, rgba(203, 133, 133, 0.99) 0%, 6.9%, rgba(203, 133, 133, 0) 23%), radial-gradient(circle at 48.9014% 49.5215%, rgb(255, 255, 255) 0%, 100%, rgba(255, 255, 255, 0) 100%); /* hero の SP は Wix が別グラデ（ブレークポイント別 colorUnderlay 実値）を使う。 ロゼが下方(22.9% 67.7%)＝SPのテキスト帯に来るため中央が白飛びせず白文字のコントラストが出る。 デスクトップ版(--clp-grad-warm)を全幅流用すると SP でテキスト帯が白くなるため分離。 */ --clp-grad-warm-sp: radial-gradient(circle at 75.651% 100%, rgb(224, 179, 90) 0%, 14.898%, rgba(224, 179, 90, 0) 26%), radial-gradient(circle at 22.9443% 67.6628%, rgb(203, 133, 133) 0%, 41.514%, rgba(203, 133, 133, 0) 66%), radial-gradient(circle at 0.63151% 0%, rgb(224, 179, 90) 0%, 10.556%, rgba(224, 179, 90, 0) 28%), radial-gradient(circle at 99.9919% 17.7897%, rgb(203, 133, 133) 0%, 36.3%, rgba(203, 133, 133, 0) 100%), radial-gradient(circle at 0% 100%, rgba(203, 133, 133, 0.99) 0%, 17.4%, rgba(203, 133, 133, 0) 58%), radial-gradient(circle at 48.9014% 49.5215%, rgb(255, 255, 255) 0%, 100%, rgba(255, 255, 255, 0) 100%); --clp-grad-service: radial-gradient(circle at 65.7308% 38.9746%, rgb(203, 133, 133) 0%, 30%, rgba(203, 133, 133, 0) 100%), radial-gradient(circle at 99.5312% 0%, rgb(203, 133, 133) 0%, 10.5%, rgba(203, 133, 133, 0) 35%), radial-gradient(circle at 100% 76.2435%, rgb(224, 179, 90) 0%, 14.4%, rgba(224, 179, 90, 0) 48%), radial-gradient(circle at 32.7311% 0%, rgb(203, 133, 133) 0%, 23.4%, rgba(203, 133, 133, 0) 78%), radial-gradient(circle at 0% 31.1556%, rgb(224, 179, 90) 0%, 27.898%, rgba(224, 179, 90, 0) 74%), radial-gradient(circle at 77.0833% 100%, rgb(203, 133, 133) 0%, 28.314%, rgba(203, 133, 133, 0) 78%), radial-gradient(circle at 1.53971% 100%, rgba(203, 133, 133, 0.99) 0%, 30%, rgba(203, 133, 133, 0) 100%), radial-gradient(circle at 48.9014% 49.5215%, rgb(255, 255, 255) 0%, 100%, rgba(255, 255, 255, 0) 100%); } /* ── Client LP タイポグラフィスケール ── 端数だらけの個別 clamp をやめ、各レベルを1トークンに統一（clean rem・16px基準）。 endpoint は必ず整数px相当（SP→PC）。中間は fluid だが「使う値」は各レベル1つに固定。 */ :root { --clp-fs-h1: clamp(1.6875rem, 0.9rem + 3.3vw, 2.25rem); /* 27 → 36 ヒーロー見出し（マスター準拠） */ --clp-fs-h2: clamp(1.375rem, 0.55rem + 2.75vw, 2.25rem);/* 22 → 36 節見出し */ --clp-fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); /* 20 → 26 カード/行見出し */ --clp-fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16 → 18 リード文 */ --clp-fs-body: 1rem; /* 16 本文 */ --clp-fs-small: 0.875rem; /* 14 補助/ラベル */ --clp-fs-eyebrow: 0.875rem; /* 14 eyebrow */ } /* 全 client セクションは blockGap 由来の 24px マージンで色帯間に白い隙間ができる。 makeme(.mmlp-*) と同様、隣接する帯が直接接するよう上下マージンを 0 にする。 */ .clp-head, .clp-hero, .clp-problem, .clp-onestop, .clp-feature, .clp-service, .clp-flow, .clp-fee, .clp-faq, .clp-form, .clp-footer { margin-block-start: 0 !important; margin-block-end: 0 !important; } /* wpmk-cta（ブログ記事CTAカード）の装飾を button 上では無効化。 .wpmk-cta は計測用クラスだが #faf3f4 背景・padding34px・角丸の「カード」CSSを持つため、 LPの CTA ボタンに付くと薄ピンクの箱になる。button では中身（pill リンク）のみ見せる。 */ .wp-block-button.wpmk-cta { margin: 0; max-width: none; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; animation: none; text-align: initial; } /* ── ヘッダー（nav・page-lpはテーマヘッダ無しのためページ内実装） ── */ .clp-head { background: #fff; padding: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); position: relative; z-index: 10; } .clp-head__inner { max-width: 1200px; margin-inline: auto; padding: 18px clamp(16px, 3vw, 36px); gap: clamp(24px, 3vw, 42px); align-items: center; } .clp-head__logo { margin: 0; flex: 0 0 auto; } .clp-head__logo img { height: 38px; width: auto; } /* logo は左単独、nav+cta を右にグループ（マスター準拠）。WP flex の blockGap(24px) に勝つ 0,2,0 */ .clp-head .clp-head__nav { gap: clamp(28px, 4vw, 56px); align-items: center; margin-left: auto; } .clp-head__navlink { margin: 0; font-size: 15px; font-weight: 400; } .clp-head__navlink a { color: var(--lp-text-strong); text-decoration: none; } .clp-head__navlink a:hover { color: var(--lp-brand); } .clp-head__ctawrap { margin: 0; flex: 0 0 auto; } .clp-head__cta .wp-block-button__link { background: var(--lp-brand); color: var(--lp-on-brand); border-radius: 9999px; font-weight: 700; font-size: 15px; padding: 0.92em 2.5em; line-height: 1.3; } .clp-head__cta .wp-block-button__link:hover { background: var(--lp-brand-hover); } /* ── ヒーロー（暖色グラデ・左右分割） ── */ .clp-hero { background-color: #fff; background-image: var(--clp-grad-warm); padding: 0; overflow: hidden; } .clp-hero__inner { max-width: 1400px; margin-inline: auto; padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 64px) clamp(28px, 10vw, 151px); gap: clamp(10px, 1.4vw, 20px); align-items: center; flex-wrap: nowrap; } .clp-hero__text { flex: 1 1 42%; min-width: 0; } .clp-hero__title { margin: 0 0 0.9rem; color: #fff; font-weight: 700; font-size: var(--clp-fs-h1); /* 27→36 型スケール(H1)。SPは min=27で従来26.9とほぼ同一 */ line-height: 1.42; letter-spacing: 0.01em; } .clp-hero__sub { margin: 0 0 1.6rem; color: rgba(255, 255, 255, 0.95); font-size: clamp(0.9rem, 1.3vw, 1.125rem); line-height: 1.45; } .clp-hero__cta .wp-block-button__link { background: #666; color: #fff; border-radius: 9999px; font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.06rem); padding: 0.68em 3.8em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); transition: background-color 0.15s ease; } .clp-hero__cta .wp-block-button__link:hover { background: #4d4d4d; } .clp-hero__mock { flex: 1 1 58%; margin: 0; min-width: 0; } .clp-hero__mock img { width: 100%; height: auto; display: block; } @media (max-width: 781px) { .clp-head__inner { flex-wrap: nowrap; gap: 8px; padding: 10px 14px; } /* WP の .wp-block-group-is-layout-flex{display:flex} に同一詳細度で負けるため 0,2,0 で確実に隠す */ .clp-head .clp-head__nav { display: none; } .clp-head__logo img { height: 26px; } .clp-head__cta .wp-block-button__link { font-size: 11px; padding: 0.6em 1em; } /* SP はマスター準拠のロゼ主体グラデに差し替え（テキスト帯の白飛び解消・白文字コントラスト確保） */ .clp-hero { background-image: var(--clp-grad-warm-sp); } /* SP(KCSP担当)＝マスター準拠: モックを上・テキストを下、テキストは左寄せ */ /* 6vwの左インセットは inner に置く（モックが text の兄弟でも、ページ編集で text 内に ネストされても、常に inner のコンテンツ左端=6vw に揃うため x≈24 が構造非依存で成立） */ .clp-hero__inner { flex-direction: column-reverse; padding: clamp(14px, 4vw, 24px) clamp(20px, 6vw, 28px) clamp(28px, 7vw, 40px); gap: clamp(16px, 4.5vw, 24px); text-align: left; align-items: stretch; } .clp-hero__text { flex: 1 1 auto; width: 100%; } .clp-hero__text .wp-block-buttons { justify-content: flex-start; } /* SP: マスター(lp.makeme-cloud.com/client)にピクセル合わせ 見出しは型スケール --clp-fs-h1(min=27px≈26.8) が担うため個別 SP override は撤去 CTA全幅 / モックは右へブリード(468≈120vw・左inset6vw=inner padding) */ .clp-hero__cta { flex: 1 0 100%; } .clp-hero__cta .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 0.85em 1em; } .clp-hero__mock { flex: 0 0 auto; align-self: flex-start; width: 120vw; max-width: none; } } /* ── 共通: ブランド色ハイライト ── */ .clp-hl { color: var(--lp-brand); font-weight: inherit; white-space: nowrap; } /* ── 3つの課題 ── */ .clp-problem { background: #f7f7f7; padding-block: clamp(2.5rem, 5vw, 4rem); /* constrained 既定 contentSize(720px) を広げ3列を1行に（makeme と同方針）。 マスターのカード幅(~379px)に合わせ 1180px（バッジ「採用・教育コストの課題」を1行に収める） */ --wp--style--global--content-size: 1180px; } .clp-problem__title { margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.25rem); line-height: 1.5; } .clp-problem__grid { max-width: 1180px; margin-inline: auto; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .clp-problem__card { position: relative; flex: 1 1 300px; max-width: 380px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.4vw, 2rem); } /* 右上の渦巻き装飾（マスター準拠・「課題/もやもや」の手描きドゥードル＝竜巻状の薄グレー渦巻き） */ .clp-problem__card::after { content: ""; position: absolute; top: 14px; right: 16px; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23606060' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.65 17.888c1.7.613 5.826 1.49 6.02.494.367-1.882-4.308-4.536-5.975-4.974-.097-.025-.728.157-.823.324-.997 1.766 9.32 5.255 10.156 3.458 1.18-2.547-7.413-7.095-9.483-7.475-.204-.037-.947-.38-1.31.27-1.062 1.908 11.742 7.41 13.695 4.505 1.908-2.839-7.72-7.111-9.102-7.73-1.37-.613-3.764-1.283-4.31-.386-1.203 1.976 8.66 5.496 13.374 6.353 1.324.242 3.881.392 4.48-1.598 1.062-3.543-9.427-9.084-12.459-9.88C5.356.842 1.463-.18.598 1.197-.27 2.578 4.789 5.61 8.966 6.768'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0.9; } .clp-problem__badge { display: block; box-sizing: border-box; width: fit-content; max-width: 100%; margin: 0 auto 1.1rem; background: #adadad; color: #fff; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.4rem); border-radius: 9999px; padding: 0.45em 1.15em; } .clp-problem__list { margin: 0; padding-left: 1.1em; color: var(--lp-text-mid); font-size: clamp(0.85rem, 1.1vw, 0.96rem); line-height: 2; } .clp-problem__list li { margin: 0.35em 0; } @media (max-width: 781px) { .clp-problem__card { flex: 1 1 100%; max-width: 420px; } } /* ── 共通 eyebrow（● ラベル） ── */ .clp-eyebrow { margin: 0 0 0.4rem; color: #606060; font-weight: 500; letter-spacing: 0.02em; font-size: clamp(1.1rem, 1.7vw, 1.44rem); } .clp-eyebrow::before { content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-right: 0.5em; border-radius: 9999px; background: var(--lp-brand); vertical-align: 0.18em; } .clp-eyebrow--light { color: #fff; } .clp-eyebrow--light::before { background: #fff; } /* ── 導入の流れ（Flow・5ステップ） ── */ .clp-flow { background: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 1160px; } .clp-flow__title { margin: 0 auto 0.3rem; color: #666; font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.25rem); } .clp-flow__sub { margin: 0 auto clamp(2rem, 3.5vw, 2.75rem); color: var(--lp-text-mid); font-size: clamp(0.9rem, 1.2vw, 1.05rem); } .clp-flow__steps { display: flex; gap: 3px; max-width: 1180px; margin-inline: auto; align-items: flex-start; } .clp-flow__step { flex: 1 1 0; min-width: 0; box-sizing: border-box; } /* マスター準拠: シェブロン（ピンク）内はアイコン＋ラベルのみ。右尖り＋左ノッチで連結リボン化 */ .clp-flow__chev { background: #fdeaef; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); min-height: 190px; padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; text-align: center; } .clp-flow__step:first-child .clp-flow__chev { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); padding-left: 1.4rem; } .clp-flow__step:last-child .clp-flow__chev { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 26px 50%); padding-right: 1.4rem; } .clp-flow__icon { width: 46px; height: 46px; color: var(--lp-text-strong); } .clp-flow__icon svg { width: 100%; height: 100%; display: block; } .clp-flow__h { margin: 0; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(0.85rem, 1.05vw, 1rem); line-height: 1.35; } /* 箇条書きはシェブロンの外（下の白地）に */ .clp-flow__list { list-style: disc; margin: 1.1rem 0 0; padding-left: 1.35em; text-align: left; color: var(--lp-text-mid); font-size: clamp(0.8rem, 1vw, 0.9rem); line-height: 1.7; } .clp-flow__list li { margin: 0; } @media (max-width: 781px) { /* SP(KCSP担当)＝マスター lp.makeme-cloud.com/client 準拠: 縦積みの「下向きシェブロン連結カード」。各カード内は2カラム （左: アイコン＋ラベル ／ 右: 箇条書きをカード内に内包）。 */ .clp-flow__steps { flex-direction: column; gap: 7px; max-width: 460px; } /* step 自体をピンクの下向きシェブロンカードにする（旧: chev だけがピンク） */ .clp-flow__step { width: 100%; background: #fdeaef; display: grid; grid-template-columns: minmax(96px, 45%) 1fr; align-items: center; column-gap: clamp(8px, 2.4vw, 14px); padding: clamp(1rem, 4vw, 1.3rem) clamp(0.9rem, 3.5vw, 1.2rem); padding-bottom: calc(clamp(1rem, 4vw, 1.3rem) + 14px); clip-path: polygon(0 0, 50% 14px, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); } .clp-flow__step:first-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 50% 100%, 0 calc(100% - 14px)); padding-top: clamp(1rem, 4vw, 1.3rem); } .clp-flow__step:last-child { clip-path: polygon(0 0, 50% 14px, 100% 0, 100% 100%, 0 100%); padding-bottom: clamp(1rem, 4vw, 1.3rem); } /* chev は左列の中身コンテナへ（自前のピンク背景・シェブロンは解除） */ .clp-flow__chev, .clp-flow__step:first-child .clp-flow__chev, .clp-flow__step:last-child .clp-flow__chev { grid-column: 1; background: transparent; clip-path: none; min-height: 0; flex-direction: column; justify-content: center; gap: 0.4rem; padding: 0; border-radius: 0; } .clp-flow__icon { width: 40px; height: 40px; } .clp-flow__h { text-align: center; font-size: clamp(0.85rem, 3.4vw, 0.96rem); } /* 箇条書きは右列・カード内 */ .clp-flow__list { grid-column: 2; margin: 0; font-size: clamp(0.78rem, 3vw, 0.9rem); line-height: 1.7; } } /* ── 料金体系（FEE） ── */ .clp-fee { background-color: #fff; background-image: var(--clp-grad-warm); padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 1000px; } .clp-fee__title { margin: 0 auto 0.3rem; color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3.3vw, 2.55rem); } .clp-fee__sub { margin: 0 auto clamp(1.5rem, 3vw, 2.2rem); color: rgba(255, 255, 255, 0.95); font-size: clamp(0.9rem, 1.2vw, 1.05rem); } .clp-fee__card { max-width: 920px; margin-inline: auto; background: #fff; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); } .clp-fee__campaign { margin: 0 0 0.5rem; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2rem); } .clp-fee__note { margin: 0 0 1.6rem; color: var(--lp-text-mid); font-size: clamp(0.85rem, 1.1vw, 0.95rem); } .clp-fee__chips { gap: 0.7rem; margin-bottom: 1.9rem; } .clp-fee__chip { position: relative; margin: 0; background: #f7f7f7; border-radius: 9999px; padding: 0.5rem 1.1rem 0.5rem 2.15rem; color: var(--lp-text-strong); font-size: clamp(0.72rem, 0.95vw, 0.82rem); font-weight: 600; } .clp-fee__chip::before { content: ""; position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 9999px; background: var(--lp-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.7em no-repeat; } .clp-fee__cta .wp-block-button__link { background: var(--lp-brand); color: var(--lp-on-brand); border-radius: 9999px; font-weight: 700; padding: 0.95em 2.8em; font-size: clamp(0.95rem, 1.2vw, 1.05rem); } .clp-fee__cta .wp-block-button__link:hover { background: var(--lp-brand-hover); } @media (max-width: 781px) { /* SP(KCSP担当)＝マスター準拠: チェックチップを全幅・左寄せの行に（PCは折返しピルのまま） */ .clp-fee__chips { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0.6rem; } .clp-fee__chip { width: 100%; box-sizing: border-box; text-align: left; background: #fff; border: 1px solid #f0e6e6; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04); border-radius: 12px; padding: 0.75rem 1rem 0.75rem 2.5rem; font-size: clamp(0.82rem, 3.4vw, 0.94rem); } .clp-fee__chip::before { left: 1rem; width: 17px; height: 17px; } } /* ── FAQ（フラット accordion） ── */ .clp-faq { background: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 880px; } .clp-faq__title { margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); } .clp-faq__list { max-width: 880px; margin-inline: auto; } .clp-faq__item { border-bottom: 1px solid #e8e8e8; margin: 0; } .clp-faq__item > summary { position: relative; list-style: none; cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; color: var(--lp-text-strong); font-weight: 700; font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.5; } .clp-faq__item > summary::-webkit-details-marker { display: none; } .clp-faq__item > summary::marker { content: ""; } .clp-faq__item > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid #bbb; border-bottom: 2px solid #bbb; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } .clp-faq__item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); } /* 開いたときは質問の下paddingを詰めて回答を上へ寄せる */ .clp-faq__item[open] > summary { padding-bottom: 0.5rem; } /* 下クリアランスは margin だと reset で消えるため、開いた item の padding-bottom で確保 */ .clp-faq__item[open] { padding-bottom: 1.7rem; } /* 詳細度0,2,0でWPのblockGap(margin-block-start:24px)を上書き: 回答を上へ詰める */ .clp-faq__item > .clp-faq__a { margin-block: 0.2rem 0; color: var(--lp-text-mid); font-size: 14px; line-height: 1.9; } /* ── 資料請求フォーム（仮・送信無効） ── */ .clp-form { background: #f7f7f7; padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 880px; } .clp-form__title { margin: 0 auto 0.6rem; color: var(--lp-brand); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: 0.04em; } .clp-form__sub { margin: 0 auto clamp(1.5rem, 3vw, 2.2rem); color: var(--lp-text-mid); font-size: clamp(0.9rem, 1.2vw, 1.05rem); } .clp-form__card { max-width: 760px; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06); padding: clamp(1.75rem, 3.5vw, 2.75rem); } .clp-form__cardhead { margin: 0 0 1.5rem; color: var(--lp-text-weak); font-size: 11px; } .clp-form__field { display: block; margin-bottom: 1.1rem; } .clp-form__label { display: block; margin-bottom: 0.4rem; color: var(--lp-text-strong); font-weight: 700; font-size: 14px; } .clp-form__label em { color: var(--lp-brand); font-style: normal; } .clp-form__field input, .clp-form__field select, .clp-form__field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--lp-brand); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 14px; background: #fff; color: var(--lp-text-strong); font-family: inherit; } .clp-form__field input::placeholder, .clp-form__field textarea::placeholder { color: var(--lp-text-faint); } .clp-form__field input:disabled, .clp-form__field select:disabled, .clp-form__field textarea:disabled { opacity: 1; cursor: not-allowed; } .clp-form__tel { display: block; } .clp-form__notice { margin: 0.5rem 0 1.3rem; color: var(--lp-brand-strong); font-size: 12px; line-height: 1.7; background: var(--lp-brand-soft); border-radius: 8px; padding: 0.7rem 1rem; } .clp-form__notice a { color: var(--lp-brand); } .clp-form__submitwrap { text-align: center; } .clp-form__submit { background: var(--lp-brand); color: #fff; border: 0; border-radius: 9999px; padding: 0.9rem 4rem; font-size: 1rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; } .clp-form__submit:hover { background: var(--lp-brand-hover); } .clp-form__submit:disabled { cursor: not-allowed; opacity: 0.6; } /* フォーム検証エラー（PRG差し戻し時に表示） */ .clp-form__err { display: block; margin-top: 0.35rem; color: #c0392b; font-size: 12px; line-height: 1.5; } .clp-form__err--top { background: #fdecea; border: 1px solid #f5c6c2; border-radius: 8px; padding: 0.7rem 1rem; margin: 0 0 1rem; } .clp-form__field input:required:invalid, .clp-form__field select:required:invalid { /* 見た目は既存のまま。無効値のみ薄いヒント */ } /* ── サンクスページ ── */ .clp-thanks { --wp--style--global--content-size: 820px; /* カード幅(constrained上書き・横に広げる) */ background: var(--clp-grad-warm); background-color: #fff; padding-block: clamp(3.5rem, 9vw, 7rem); padding-inline: 1.25rem; text-align: center; } /* 視認性: コンテンツを白カードに載せ、グラデはフレームに */ .clp-thanks__card { max-width: 860px; margin-inline: auto; background: #fff; border-radius: 24px; padding: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 5vw, 4.5rem); box-shadow: 0 24px 60px rgba(203, 133, 133, 0.20), 0 4px 14px rgba(0, 0, 0, 0.05); } .clp-thanks__title { font-size: var(--clp-fs-h1); line-height: 1.5; color: var(--lp-text-strong); margin: 0 0 1.6rem; text-wrap: balance; } .clp-thanks__lead { color: var(--lp-text); font-size: var(--clp-fs-lead); line-height: 2.1; max-width: 640px; margin: 0 auto 2.6rem; } .clp-thanks__dl { margin: 0 0 1.8rem; } .clp-thanks__dlbtn, .clp-thanks__dlbtn:link, .clp-thanks__dlbtn:visited, .clp-thanks__dlbtn:hover, .clp-thanks__dlbtn:focus, .clp-thanks__dlbtn:active { color: #fff; /* ホバー等でも文字は白のまま（a:hoverの青を上書き） */ text-decoration: none; } .clp-thanks__dlbtn { display: inline-block; background: var(--lp-brand); border-radius: 9999px; padding: 1rem 3rem; font-weight: 700; transition: background 0.15s ease; } .clp-thanks__dlbtn:hover { background: var(--lp-brand-hover); } .clp-thanks__back { margin-top: 0.4rem; } .clp-thanks__back a { color: var(--lp-sub); font-size: 0.9rem; } @media (max-width: 781px) { /* SP(KCSP担当): サブ文をマスター同様1行に収める（14.4pxだと358px幅で2行折返し） */ .clp-form__sub { font-size: 0.82rem; } } /* ── フッター ── */ .clp-footer { background: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); } .clp-footer__logo { margin: 0 auto 1.4rem; } .clp-footer__logo img { height: 44px; width: auto; } .clp-footer__links { gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 1.4rem; } .clp-footer__link { margin: 0; font-size: 14px; } .clp-footer__link a { color: var(--lp-text-mid); text-decoration: underline; text-underline-offset: 3px; } .clp-footer__link a:hover { color: var(--lp-brand); } .clp-footer__copy { margin: 0; color: #666; font-size: 13px; } @media (max-width: 781px) { /* SP(KCSP担当)＝マスター準拠: フッター3リンクを縦積み中央に（PCは横並び）。 WP の .wp-block-group-is-layout-flex に負けないよう 0,2,0 で指定。 */ .clp-footer .clp-footer__links { flex-direction: column; gap: 0.75rem; align-items: center; } } /* ── ワンストップサービス（3カラム・イラスト） ── */ .clp-onestop { background: #fff; padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 1080px; } .clp-onestop__title { margin: 0 auto clamp(2rem, 4vw, 3rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.25rem); line-height: 1.5; } .clp-onestop__grid { max-width: 1040px; margin-inline: auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: flex-start; } .clp-onestop__col { flex: 1 1 240px; max-width: 320px; } .clp-onestop__ill { margin: 0 auto 1.2rem; } .clp-onestop__ill img { height: clamp(150px, 16vw, 210px); width: auto; } .clp-onestop__h { margin: 0 0 0.7rem; color: var(--lp-brand); font-weight: 700; font-size: var(--clp-fs-h3); /* 20→26 型スケール(H3・カード/行見出し) */ text-align: center; } .clp-onestop__body { margin: 0; color: var(--lp-text-mid); font-size: clamp(1rem, 1.45vw, 1.13rem); line-height: 1.78; text-align: justify; } @media (max-width: 781px) { .clp-onestop__col { flex: 1 1 100%; max-width: 360px; text-align: center; } .clp-onestop__body { text-align: left; } } /* ── 選ばれる3つの理由（Feature・左右交互） ── */ .clp-feature { background: #f7f7f7; padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 1120px; } .clp-feature__title { margin: 0 auto clamp(2rem, 4vw, 3.25rem); color: var(--lp-text-strong); font-weight: 700; font-size: clamp(1.5rem, 2.9vw, 2.25rem); } .clp-feature__row { max-width: 1080px; margin: 0 auto clamp(1.5rem, 3vw, 2.5rem); gap: clamp(1.25rem, 3vw, 3rem); align-items: center; } .clp-feature__row.is-rev { flex-direction: row-reverse; } .clp-feature__text { flex: 1 1 42%; min-width: 0; } .clp-feature__num { margin: 0; color: var(--lp-brand); font-weight: 800; font-size: clamp(2.8rem, 5.4vw, 4.4rem); line-height: 1; } .clp-feature__h { margin: 0.4rem 0 0.9rem; color: var(--lp-text-strong); font-weight: 700; font-size: var(--clp-fs-h3); /* 20→26 型スケール(H3・カード/行見出し) */ line-height: 1.45; } .clp-feature__body { margin: 0; color: var(--lp-text-mid); font-size: clamp(1rem, 1.45vw, 1.13rem); line-height: 1.65; } .clp-feature__img { flex: 1 1 52%; margin: 0; min-width: 0; } .clp-feature__img img { width: 100%; height: auto; display: block; } @media (max-width: 781px) { /* SP(KCSP担当)＝マスター準拠: 全理由で画像を上・テキストを下に統一（PCの交互配置に関わらず） */ .clp-feature__row, .clp-feature__row.is-rev { flex-direction: column-reverse; text-align: left; } .clp-feature__text { flex: 1 1 auto; width: 100%; } .clp-feature__img { flex: 1 1 auto; width: 100%; max-width: 460px; margin-inline: auto; } } /* ── 充実なサービス内容（Our Service・ローズ帯） ── */ .clp-service { background-color: #fff; background-image: var(--clp-grad-service); padding-block: clamp(2.5rem, 5vw, 4rem); --wp--style--global--content-size: 1120px; } .clp-service__title { margin: 0 auto 0.15rem; color: #fff; font-weight: 700; font-size: clamp(1.6rem, 3.3vw, 2.55rem); } /* マスター準拠: Service ヘッダーはタイトル上・eyebrow下(サブ)・左寄せ・ドット無 （白系の eyebrow上・中央・ドット有 とは別扱い。.clp-service にスコープ） */ .clp-service__title, .clp-service > .clp-eyebrow { text-align: left; max-width: 1120px; margin-inline: auto; } .clp-service > .clp-eyebrow { margin-top: 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .clp-service > .clp-eyebrow::before { display: none; } /* ── 節見出し(H2)を型スケール1トークンに統一（サイズ/行間/改行バランス） ── 個別の clamp(2.55rem/2.4rem/2.2rem…) 端数をやめ、全節見出しを --clp-fs-h2 に。 個別ルールより後方に置き、同詳細度のソース順で font-size を上書きする。 text-wrap: balance で改行を均等化（例: 「〜が / 選ばれる"3つの理由"」）。 */ .clp-problem__title, .clp-onestop__title, .clp-feature__title, .clp-service__title, .clp-flow__title, .clp-fee__title, .clp-faq__title, .clp-form__title { font-size: var(--clp-fs-h2); line-height: 1.3; text-wrap: balance; } /* マスター準拠: 各アイテムは左寄せ（番号→見出し→本文→全幅モック/チップ） */ .clp-service__inner { max-width: 1120px; margin-inline: auto; } .clp-service__item { margin: 0 0 clamp(2.5rem, 5vw, 4rem); text-align: left; } .clp-service__photos { margin: 0 0 1.6rem; } .clp-service__photos img { width: 100%; border-radius: 16px; display: block; } .clp-service__num { margin: 0; color: #fff; font-weight: 800; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1; opacity: 0.95; } .clp-service__h { margin: 0.2rem 0 0.7rem; color: #fff; font-weight: 700; font-size: var(--clp-fs-h3); /* 20→26 型スケール(H3・カード/行見出し) */ } .clp-service__body { margin: 0 0 1.5rem; max-width: 980px; color: rgba(255, 255, 255, 0.95); font-size: clamp(1rem, 1.45vw, 1.13rem); line-height: 1.7; } /* 職種チップ: 白ピル＋ピンク線画アイコンの4列グリッド（左寄せ） */ .clp-service__jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; } .clp-service__job { display: flex; align-items: center; gap: 0.6rem; margin: 0; background: #fff; color: var(--lp-text-strong); border-radius: 12px; padding: 0.7rem 0.95rem; font-size: clamp(0.78rem, 0.95vw, 0.88rem); font-weight: 600; line-height: 1.35; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .clp-service__jobicon { flex: 0 0 auto; display: inline-flex; color: var(--lp-brand); } .clp-service__jobicon svg { width: 20px; height: 20px; display: block; } .clp-service__joblabel { min-width: 0; } .clp-service__mock { margin: 0; } .clp-service__mock img { width: 100%; border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16); display: block; } /* 04/05 は2カラム（各カード左寄せ・本文 justify） */ .clp-service__cards { display: flex; flex-wrap: wrap; margin: 0; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; } .clp-service__card { flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, 0.14); border-radius: 18px; padding: clamp(1.5rem, 2.4vw, 2rem); text-align: left; } .clp-service__card .clp-service__h { font-size: clamp(1.2rem, 1.9vw, 1.55rem); } .clp-service__card .clp-service__body { color: rgba(255, 255, 255, 0.95); text-align: justify; } .clp-service__card .clp-service__mock { margin-top: 1.1rem; } @media (max-width: 781px) { /* 職種チップ: マスターSP準拠で3列。長ラベルは折返し前提でコンパクト化（KCSP/SP担当） */ .clp-service__jobs { grid-template-columns: repeat(3, 1fr); gap: 6px; } .clp-service__job { padding: 0.5rem 0.5rem; gap: 0.3rem; font-size: clamp(0.6rem, 2.5vw, 0.72rem); border-radius: 10px; } .clp-service__jobicon svg { width: 16px; height: 16px; } .clp-service__cards { flex-direction: column; } .clp-service__card { flex: 1 1 100%; } } /* ============================================================ * client LP v2（新デザイン・/lp/client-v2/）— .cv2-* * ユーザー支給デザインの忠実実装。ブランド色流用。PC/SP レスポンシブは KanCode4 が両方担当。 * 既存 .clp-* / .mmlp-* とは完全別 namespace（非干渉）。 * ============================================================ */ :root { --cv2-pink: #e8617f; --cv2-pink-strong: #d94b6c; --cv2-pink-soft: #fbe9ee; --cv2-pink-tint: #fdf4f6; --cv2-gold: #e0b35a; --cv2-ink: #3b3b3b; --cv2-sub: #6e6e6e; --cv2-line: #ededed; } .cv2 { color: var(--cv2-ink); font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } .cv2 * { box-sizing: border-box; } .cv2 img { max-width: 100%; height: auto; display: block; } /* page-lp の constrained main(720px) を全セクションで全幅化（alignfull グループ＋この保険） */ .wpmk-lp .cv2 { max-width: none; } .cv2__inner { max-width: 1140px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); } .cv2__inner--wide { max-width: 1240px; } .cv2-section { padding-block: clamp(2.75rem, 5.5vw, 5rem); } /* 見出し（セクションタイトル） */ .cv2-h2 { margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); text-align: center; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.15rem); line-height: 1.4; color: var(--cv2-ink); letter-spacing: 0.01em; } .cv2-h2 .cv2-mark { color: var(--cv2-pink); } /* CTAピル（塗り／枠線） */ .cv2-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 54px; padding: 0 1.9em; border-radius: 9999px; font-weight: 700; font-size: clamp(0.95rem, 1.15vw, 1.02rem); text-decoration: none; line-height: 1.2; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .cv2-cta::after { content: "›"; font-size: 1.25em; line-height: 1; margin-left: 0.1em; } .cv2-cta--fill { background: var(--cv2-pink); color: #fff; box-shadow: 0 8px 18px rgba(232, 97, 127, 0.28); } .cv2-cta--fill:hover { background: var(--cv2-pink-strong); } .cv2-cta--ghost { background: #fff; color: var(--cv2-pink); border: 1.5px solid var(--cv2-pink); } .cv2-cta--ghost:hover { background: var(--cv2-pink-soft); } .cv2-ctas { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.5vw, 1.1rem); justify-content: center; } /* チェック項目（掲載課金なし 等） */ .cv2-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; } .cv2-check { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: clamp(0.9rem, 1.1vw, 1rem); color: var(--cv2-ink); } .cv2-check::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 9999px; background: var(--cv2-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; } /* ── v2 ヘッダー（sticky・PC横並び / SPハンバーガー） ── */ .cv2-head { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); } .cv2-head__inner { max-width: 1240px; margin-inline: auto; padding: 10px clamp(14px, 3vw, 26px); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cv2-head__logo { flex: 0 0 auto; display: block; } .cv2-head__logo img { height: 36px; width: auto; } .cv2-head__toggle { display: none; } .cv2-head__nav { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); } .cv2-head__navlink { color: var(--cv2-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; } .cv2-head__navlink:hover { color: var(--cv2-pink); } .cv2-head__navctas { display: none; } .cv2-head__actions { display: flex; align-items: center; gap: 10px; } .cv2-head__cta.cv2-head__cta--pc { min-height: 42px; padding: 0 1.15em; font-size: 0.82rem; box-shadow: none; } .cv2-head__cta.cv2-head__cta--pc.cv2-cta--fill { box-shadow: 0 4px 10px rgba(232,97,127,0.25); } .cv2-head__burger { display: none; } @media (max-width: 900px) { /* タブレット以下: nav をドロップダウン化 */ .cv2-head__cta--pc { display: none !important; } .cv2-head__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; } .cv2-head__burger span { display: block; width: 24px; height: 2px; background: var(--cv2-ink); margin-inline: auto; transition: transform 0.2s, opacity 0.2s; } .cv2-head__nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: 0 12px 24px rgba(0,0,0,0.1); max-height: 0; overflow: hidden; transition: max-height 0.28s ease; padding-inline: 20px; } .cv2-head__toggle:checked ~ .cv2-head__nav { max-height: 80vh; padding-block: 12px; overflow-y: auto; } .cv2-head__navlink { padding: 14px 4px; border-bottom: 1px solid var(--cv2-line); font-size: 1rem; } .cv2-head__navctas { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; } .cv2-head__navctas .cv2-cta { width: 100%; } /* バーガー✕化 */ .cv2-head__toggle:checked ~ .cv2-head__actions .cv2-head__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cv2-head__toggle:checked ~ .cv2-head__actions .cv2-head__burger span:nth-child(2) { opacity: 0; } .cv2-head__toggle:checked ~ .cv2-head__actions .cv2-head__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ── v2 ヒーロー ── */ .cv2-hero { background: linear-gradient(180deg, #ffffff 0%, #fdf2f5 100%); padding-block: clamp(2rem, 4vw, 3.5rem); overflow: hidden; } .cv2-hero__inner { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); } .cv2-hero__text { flex: 1 1 44%; min-width: 0; } .cv2-hero__eyebrow { margin: 0 0 0.3rem; font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--cv2-ink); } .cv2-hero__title { margin: 0 0 1rem; font-weight: 800; font-size: clamp(1.85rem, 3.3vw, 2.7rem); line-height: 1.28; letter-spacing: 0.01em; white-space: nowrap; } .cv2-hero__lead { margin: 0 0 1.4rem; font-size: clamp(0.95rem, 1.3vw, 1.1rem); color: var(--cv2-sub); } .cv2-hero__lead b { color: var(--cv2-ink); } .cv2-hero__checks { margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(2, max-content); gap: 0.7rem 1.6rem; } .cv2-hero__ctas { justify-content: flex-start; } /* ビジュアル: バブル上／イラスト左＋スコア右 */ .cv2-hero__visual { flex: 1 1 56%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bubble bubble" "illust score"; gap: 0.6rem 0.9rem; align-items: center; } .cv2-hero__bubble { grid-area: bubble; justify-self: center; position: relative; background: #fff; border: 2px solid var(--cv2-pink); color: var(--cv2-ink); font-weight: 700; font-size: clamp(0.72rem, 1vw, 0.85rem); text-align: center; line-height: 1.5; padding: 0.5rem 1.1rem; border-radius: 9999px; box-shadow: 0 4px 12px rgba(232,97,127,0.12); } .cv2-hero__bubble b { color: var(--cv2-pink); font-size: 1.15em; } .cv2-hero__bubble::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--cv2-pink); } .cv2-hero__illust { grid-area: illust; margin: 0; } .cv2-hero__illust svg { width: 100%; height: auto; } /* スコアカード */ .cv2-hero__score { grid-area: score; width: clamp(190px, 20vw, 230px); background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.1); padding: 1rem; } .cv2-hero__score-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .cv2-hero__score-ava { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9999px; background: #fbe9ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9899a'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E") center/24px no-repeat; } .cv2-hero__score-cap { margin: 0; font-size: 0.72rem; font-weight: 700; line-height: 1.4; color: var(--cv2-sub); } .cv2-hero__score-num { display: flex; align-items: baseline; justify-content: center; gap: 0.3rem; padding: 0.5rem 0; border-block: 1px solid var(--cv2-line); margin-bottom: 0.7rem; } .cv2-hero__score-num span { font-size: 0.72rem; font-weight: 700; color: var(--cv2-sub); } .cv2-hero__score-num strong { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--cv2-pink); } .cv2-hero__score-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .cv2-hero__score-tags li { background: #fbe9ee; color: var(--cv2-pink-strong); font-size: 0.66rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 9999px; } @media (max-width: 900px) { .cv2-hero__inner { flex-direction: column; } .cv2-hero__text { flex: 1 1 auto; width: 100%; text-align: center; } .cv2-hero__checks { justify-content: center; display: inline-grid; margin-inline: auto; } .cv2-hero__ctas { justify-content: center; } .cv2-hero__visual { width: 100%; grid-template-columns: 1fr; grid-template-areas: "bubble" "illust" "score"; justify-items: center; gap: 1rem; } .cv2-hero__illust { max-width: 380px; } .cv2-hero__score { width: 100%; max-width: 340px; } } @media (max-width: 480px) { .cv2-hero__checks { grid-template-columns: 1fr; text-align: left; } .cv2-hero__ctas .cv2-cta { width: 100%; } } /* ── v2 ロゴ帯（導入ブランド・暫定テキスト） ── */ .cv2-logos { background: #fff; padding-block: clamp(1.5rem, 3vw, 2.25rem); } .cv2-logos__inner { max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); text-align: center; } .cv2-logos__list { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.6rem); } .cv2-logos__item { color: #9a9a9a; font-weight: 700; font-size: clamp(0.95rem, 1.6vw, 1.25rem); letter-spacing: 0.04em; font-family: Georgia, "Times New Roman", serif; white-space: nowrap; } .cv2-logos__note { margin: 0; text-align: right; max-width: 1120px; font-size: 0.72rem; color: #b5b5b5; } /* ── v2 統計帯 ── */ .cv2-stats { background: var(--cv2-pink-soft); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); } .cv2-stats__inner { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.25rem, 3vw, 3rem); } .cv2-stats__item { flex: 1 1 240px; max-width: 340px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; } .cv2-stats__icon { width: 46px; height: 46px; border-radius: 9999px; background: #fff; color: var(--cv2-pink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(232,97,127,0.15); } .cv2-stats__icon svg { width: 26px; height: 26px; } .cv2-stats__label { margin: 0; font-weight: 700; font-size: clamp(0.9rem, 1.2vw, 1.02rem); color: var(--cv2-ink); line-height: 1.5; } .cv2-stats__num { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 0.2rem; } .cv2-stats__num strong { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; color: var(--cv2-pink); line-height: 1; } .cv2-stats__num span { font-weight: 700; font-size: clamp(0.85rem, 1.1vw, 1rem); color: var(--cv2-ink); } /* ── v2 お悩み3課題 ── */ .cv2-problem { background: #fff; padding-block: clamp(2.75rem, 5.5vw, 5rem); } .cv2-problem__inner { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 28px); } .cv2-problem__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .cv2-problem__card { background: #fff; border: 1px solid #f1e3e6; border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,0.05); padding: clamp(1.5rem, 2.4vw, 2rem) clamp(1.25rem, 2vw, 1.75rem); text-align: center; } .cv2-problem__ill { width: 76px; height: 76px; margin: 0 auto 1rem; border-radius: 9999px; background: var(--cv2-pink-soft); color: var(--cv2-pink); display: flex; align-items: center; justify-content: center; } .cv2-problem__ill svg { width: 40px; height: 40px; } .cv2-problem__h { margin: 0 0 0.9rem; font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cv2-pink-strong); } .cv2-problem__list { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: 0.55rem; } .cv2-problem__list li { position: relative; padding-left: 1.3em; font-size: clamp(0.85rem, 1.1vw, 0.95rem); color: var(--cv2-sub); line-height: 1.5; } .cv2-problem__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 9999px; background: var(--cv2-pink); } .cv2-problem__solve { margin: clamp(2rem, 4vw, 3rem) 0 1.5rem; text-align: center; font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--cv2-ink); } /* ============================================================ * リリースノート（.wpmk-rn-*）— CPT release の一覧（ショートコード [wpmk_release_notes]） * ブランド準拠のクリーンなタイムライン。固定ページ /release-notes/ に表示。 * ============================================================ */ .wpmk-rn { max-width: 860px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(16px, 4vw, 28px) clamp(3rem, 6vw, 5rem); color: #333; } .wpmk-rn__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .wpmk-rn__eyebrow { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; color: #cb8585; text-transform: uppercase; } .wpmk-rn__pagetitle { margin: 0 0 0.6rem; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; color: #333; } .wpmk-rn__sub { margin: 0; color: #808080; font-size: clamp(0.9rem, 1.2vw, 1rem); } .wpmk-rn__list { list-style: none; margin: 0; padding: 0; } .wpmk-rn__item { display: grid; grid-template-columns: 150px 1fr; gap: clamp(1rem, 2.5vw, 2.2rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); position: relative; } /* タイムラインの縦線＋ドット（左カラム右端） */ .wpmk-rn__item::before { content: ""; position: absolute; left: 150px; top: 0.55rem; width: 11px; height: 11px; border-radius: 9999px; background: #cb8585; box-shadow: 0 0 0 4px #f3e3e3; transform: translateX(-50%); } .wpmk-rn__item::after { content: ""; position: absolute; left: 150px; top: 1.4rem; bottom: 0; width: 2px; background: #eee; transform: translateX(-50%); } .wpmk-rn__item:last-child::after { display: none; } .wpmk-rn__meta { text-align: right; padding-right: clamp(1rem, 2.5vw, 2.2rem); padding-top: 0.15rem; } .wpmk-rn__date { display: block; font-weight: 700; font-size: 0.95rem; color: #555; font-variant-numeric: tabular-nums; } .wpmk-rn__ver { display: inline-block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #999; background: #f4f4f4; border-radius: 9999px; padding: 0.15rem 0.6rem; } .wpmk-rn__body { min-width: 0; } .wpmk-rn__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .wpmk-rn__badge { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #fff; border-radius: 9999px; padding: 0.2rem 0.7rem; line-height: 1.4; } .wpmk-rn__badge.is-new { background: #cb8585; } .wpmk-rn__badge.is-improve { background: #5a9fb0; } .wpmk-rn__badge.is-fix { background: #9b9b9b; } .wpmk-rn__badge.is-info { background: #e0b35a; } .wpmk-rn__title { margin: 0 0 0.4rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 700; color: #333; line-height: 1.5; } .wpmk-rn__desc { color: #666; font-size: clamp(0.9rem, 1.1vw, 0.96rem); line-height: 1.8; } .wpmk-rn__desc p { margin: 0 0 0.6rem; } .wpmk-rn__desc :last-child { margin-bottom: 0; } .wpmk-rn__empty { text-align: center; color: #999; padding: 3rem 0; } @media (max-width: 640px) { .wpmk-rn__item { grid-template-columns: 1fr; gap: 0.5rem; padding-left: 1.1rem; } .wpmk-rn__item::before { left: 0; top: 0.4rem; } .wpmk-rn__item::after { left: 0; top: 1.3rem; } .wpmk-rn__meta { text-align: left; padding-right: 0; display: flex; align-items: center; gap: 0.6rem; } .wpmk-rn__ver { margin-top: 0; } } /* ============================================================ TOP（メイクミークラウド求人ポータル）— makeme-marketing 移植 ============================================================ */ .lp-top { --mm-primary: #cb8585; --mm-primary-hover: #bd7777; --mm-secondary: #e0b35a; --mm-tertiary: #a8c8e4; --mm-paper: #f9f9f9; --mm-ink: #1a1c1c; --mm-muted: #524343; --mm-blush: #fdf5f5; --mm-shadow-soft: 0 18px 45px rgba(82, 67, 67, 0.10); --mm-shadow-card: 0 8px 26px rgba(82, 67, 67, 0.08); --mm-rc: 2rem; --mm-rctrl: 1rem; --mm-max: 1280px; margin-block: 0 !important; /* 全幅セクション間の blockGap 由来ギャップを除去 */ color: var(--mm-ink); } .lp-top * { box-sizing: border-box; } .lp-top img { max-width: 100%; height: auto; display: block; } /* ── Header ── */ .lp-top-head { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(203, 133, 133, 0.10); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); } .lp-top-head__inner { max-width: var(--mm-max); margin-inline: auto; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-inline: clamp(1rem, 3vw, 1.5rem); } .lp-top-head__logo img { height: 34px; width: auto; } .lp-top-head .lp-top-head__nav { display: flex; align-items: center; gap: 2rem; font-size: 0.875rem; font-weight: 500; color: var(--mm-muted); } .lp-top-head__nav a { color: inherit; text-decoration: none; transition: color 0.15s ease; } .lp-top-head__nav a:hover { color: var(--mm-primary); } .lp-top-head__cta { background: var(--mm-primary); color: #fff; text-decoration: none; border-radius: 9999px; padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; white-space: nowrap; box-shadow: var(--mm-shadow-card); transition: background 0.15s ease, transform 0.15s ease; } .lp-top-head__cta:hover { background: var(--mm-primary-hover); transform: translateY(-2px); } /* ── Hero ── */ .lp-top-hero { position: relative; background: var(--mm-paper); overflow: hidden; } .lp-top-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.15; filter: blur(4px); } .lp-top-hero__inner { position: relative; max-width: var(--mm-max); margin-inline: auto; display: grid; grid-template-columns: 1fr 1.06fr; gap: 2.5rem; align-items: center; padding: 3rem clamp(1rem, 3vw, 1.5rem) 4rem; } .lp-top-hero__text { padding-block: 2rem; } .lp-top-hero__title { margin: 0; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; line-height: 1.45; color: var(--mm-muted); } .lp-top-hero__mark { color: var(--mm-primary); } .lp-top-hero__lead { margin: 1.5rem 0 0; font-size: 1.125rem; line-height: 2.25; color: var(--mm-muted); } .lp-top-hero__stats { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem; } .lp-top-hero__stat { border-left: 1px solid rgba(203, 133, 133, 0.2); padding-left: 1.25rem; min-width: 7rem; } .lp-top-hero__statlabel { display: block; font-size: 0.75rem; font-weight: 600; color: rgba(82, 67, 67, 0.7); } .lp-top-hero__statnum { display: block; margin-top: 0.25rem; font-size: 1.875rem; font-weight: 600; color: var(--mm-primary); } .lp-top-hero__statunit { margin-left: 0.25rem; font-size: 0.875rem; color: var(--mm-muted); } .lp-top-hero__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 0.75rem; height: 520px; } .lp-top-hero__ph { overflow: hidden; border-radius: var(--mm-rc); box-shadow: var(--mm-shadow-card); } .lp-top-hero__ph img { width: 100%; height: 100%; object-fit: cover; } .lp-top-hero__ph--a { grid-column: span 2; grid-row: span 2; } .lp-top-hero__ph--b { grid-column: span 3; grid-row: span 4; box-shadow: var(--mm-shadow-soft); } .lp-top-hero__ph--c { grid-column: span 1; grid-row: span 2; } .lp-top-hero__ph--d { grid-column: span 2; grid-row: span 2; } .lp-top-hero__ph--e { grid-column: span 1; grid-row: span 2; } /* ── 検索バー ── */ .lp-top-search { background: var(--mm-paper); } .lp-top-search__inner { position: relative; z-index: 10; max-width: 1152px; margin: -2rem auto 0; padding-inline: clamp(1rem, 3vw, 1.5rem); } .lp-top-search__card { background: #fff; border-radius: var(--mm-rc); box-shadow: var(--mm-shadow-soft); padding: 1.5rem; } .lp-top-search__row { display: grid; grid-template-columns: repeat(3, 1fr) 1.5fr auto; gap: 0.75rem; align-items: stretch; } .lp-top-search__field { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; border: 1px solid rgba(203, 133, 133, 0.2); border-radius: var(--mm-rctrl); padding: 0.5rem 1rem; min-height: 64px; cursor: pointer; } .lp-top-search__label { font-size: 0.7rem; font-weight: 600; color: rgba(82, 67, 67, 0.65); } .lp-top-search__val { font-size: 0.95rem; font-weight: 500; color: var(--mm-ink); } .lp-top-search__val--ph { color: rgba(82, 67, 67, 0.45); font-weight: 400; } .lp-top-search__submit { display: flex; align-items: center; justify-content: center; height: 64px; padding-inline: 2rem; background: var(--mm-primary); color: #fff; text-decoration: none; border-radius: var(--mm-rctrl); font-size: 1.125rem; font-weight: 600; white-space: nowrap; transition: background 0.15s ease, transform 0.15s ease; } .lp-top-search__submit:hover { background: var(--mm-primary-hover); transform: translateY(-2px); } .lp-top-search__kw { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--mm-muted); } .lp-top-search__kwlabel { margin-right: 0.5rem; font-weight: 500; } .lp-top-search__kw a { border: 1px solid rgba(203, 133, 133, 0.2); background: #fff; border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.75rem; color: var(--mm-muted); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .lp-top-search__kw a:hover { border-color: var(--mm-primary); color: var(--mm-primary); } /* ── TOP レスポンシブ ── */ @media (max-width: 900px) { .lp-top-head .lp-top-head__nav { display: none; } .lp-top-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2rem 2.5rem; } .lp-top-hero__text { padding-block: 0; } .lp-top-hero__grid { height: 340px; } .lp-top-search__row { grid-template-columns: 1fr 1fr; } .lp-top-search__field--wide { grid-column: span 2; } .lp-top-search__submit { grid-column: span 2; } } @media (max-width: 480px) { .lp-top-hero__title { font-size: 2.1rem; } .lp-top-hero__grid { height: 280px; gap: 0.5rem; } .lp-top-search__row { grid-template-columns: 1fr; } .lp-top-search__field--wide, .lp-top-search__submit { grid-column: auto; } } /* ── セクションタイトル（✦） ── */ .lp-top-sectitle { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .lp-top-sectitle__line { height: 1px; width: min(14rem, 20vw); background: rgba(203, 133, 133, 0.25); } .lp-top-sectitle__h { margin: 0; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 500; color: var(--mm-muted); } .lp-top-sectitle__star { color: var(--mm-secondary); margin: 0 0.5rem; font-size: 0.85em; } /* ── 職種から探す ── */ .lp-top-cat { background: var(--mm-paper); } .lp-top-cat__inner { max-width: var(--mm-max); margin-inline: auto; padding: 4rem clamp(1rem, 3vw, 1.5rem); } .lp-top-cat__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1rem; } .lp-top-cat__card { display: block; text-align: center; background: #fff; border-radius: var(--mm-rctrl); padding: 1.25rem; box-shadow: var(--mm-shadow-card); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .lp-top-cat__card:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow-soft); } .lp-top-cat__icon { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 50%; background: var(--mm-blush); color: var(--mm-primary); transition: background 0.15s ease, color 0.15s ease; } .lp-top-cat__icon svg { width: 1.6rem; height: 1.6rem; } .lp-top-cat__card:hover .lp-top-cat__icon { background: var(--mm-primary); color: #fff; } .lp-top-cat__t { display: block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--mm-muted); } .lp-top-cat__st { display: block; font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--mm-muted); } /* ── 注目の求人 ── */ .lp-top-jobs { background: var(--mm-paper); } .lp-top-jobs__inner { max-width: var(--mm-max); margin-inline: auto; padding: 0 clamp(1rem, 3vw, 1.5rem) 3.5rem; } .lp-top-jobs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .lp-top-jobs__card { background: #fff; border-radius: var(--mm-rctrl); overflow: hidden; box-shadow: var(--mm-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; } .lp-top-jobs__card:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow-soft); } .lp-top-jobs__thumb { position: relative; height: 11rem; } .lp-top-jobs__thumb img { width: 100%; height: 100%; object-fit: cover; } .lp-top-jobs__badge { position: absolute; left: 0; top: 0; background: var(--mm-secondary); color: #fff; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; border-bottom-right-radius: var(--mm-rctrl); } .lp-top-jobs__body { padding: 1.25rem; } .lp-top-jobs__company { margin: 0; font-size: 0.75rem; font-weight: 500; color: rgba(82, 67, 67, 0.7); } .lp-top-jobs__title { margin: 0.5rem 0 0; min-height: 3rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--mm-muted); } .lp-top-jobs__place { margin: 0.75rem 0 0; font-size: 0.875rem; color: rgba(82, 67, 67, 0.75); } .lp-top-jobs__salary { margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--mm-muted); } .lp-top-jobs__tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } .lp-top-jobs__tags span { border: 1px solid rgba(203, 133, 133, 0.2); border-radius: 6px; padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: rgba(82, 67, 67, 0.7); } .lp-top-jobs__actions { margin-top: 1.25rem; display: flex; gap: 0.75rem; } .lp-top-jobs__apply { flex: 1; display: flex; align-items: center; justify-content: center; height: 3rem; background: var(--mm-primary); color: #fff; text-decoration: none; border-radius: var(--mm-rctrl); font-weight: 600; transition: background 0.15s ease; } .lp-top-jobs__apply:hover { background: var(--mm-primary-hover); } .lp-top-jobs__fav { width: 3rem; height: 3rem; border: 1px solid rgba(203, 133, 133, 0.2); border-radius: var(--mm-rctrl); background: #fff; color: var(--mm-primary); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 0.15s ease; } .lp-top-jobs__fav:hover { background: var(--mm-blush); } /* ── ランキング/特集/サポート 3カラム ── */ .lp-top-panels { background: var(--mm-blush); } .lp-top-panels__inner { max-width: var(--mm-max); margin-inline: auto; padding: 3.5rem clamp(1rem, 3vw, 1.5rem); display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 1.5rem; align-items: start; } .lp-top-panel { background: #fff; border-radius: var(--mm-rc); box-shadow: var(--mm-shadow-card); padding: 1.75rem; } .lp-top-panel__h { margin: 0 0 1.5rem; text-align: center; font-size: 1.25rem; font-weight: 500; color: var(--mm-muted); } .lp-top-panel__more { display: block; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--mm-primary); text-decoration: none; } .lp-top-rank__row { display: grid; grid-template-columns: 2rem 5rem 1fr; align-items: center; gap: 0.75rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(203, 133, 133, 0.1); } .lp-top-rank__num { font-size: 1.5rem; font-weight: 600; color: var(--mm-secondary); text-align: center; } .lp-top-rank__thumb { height: 4rem; border-radius: 0.5rem; overflow: hidden; } .lp-top-rank__thumb img { width: 100%; height: 100%; object-fit: cover; } .lp-top-rank__meta { display: flex; flex-direction: column; } .lp-top-rank__co { font-size: 0.75rem; color: rgba(82, 67, 67, 0.7); } .lp-top-rank__t { font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--mm-muted); } .lp-top-rank__sal { margin-top: 0.25rem; font-size: 0.75rem; color: rgba(82, 67, 67, 0.6); } .lp-top-feat__row { display: grid; grid-template-columns: 5rem 1fr auto; align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(203, 133, 133, 0.1); text-decoration: none; } .lp-top-feat__thumb { height: 4rem; border-radius: 0.5rem; overflow: hidden; } .lp-top-feat__thumb img { width: 100%; height: 100%; object-fit: cover; } .lp-top-feat__meta { display: flex; flex-direction: column; } .lp-top-feat__t { font-size: 0.875rem; font-weight: 600; color: var(--mm-muted); } .lp-top-feat__ex { margin-top: 0.25rem; font-size: 0.75rem; color: rgba(82, 67, 67, 0.6); } .lp-top-feat__chev { color: var(--mm-primary); } .lp-top-support { position: relative; overflow: hidden; } .lp-top-support__body { position: relative; z-index: 1; max-width: 62%; } .lp-top-support__h { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.5; color: var(--mm-primary); } .lp-top-support__item { margin: 1rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--mm-muted); } .lp-top-support__cta { display: inline-block; margin-top: 1.75rem; background: var(--mm-primary); color: #fff; text-decoration: none; border-radius: var(--mm-rctrl); padding: 1rem 1.75rem; font-weight: 600; transition: background 0.15s ease; } .lp-top-support__cta:hover { background: var(--mm-primary-hover); } .lp-top-support__img { position: absolute; bottom: 0; right: 0; height: 78%; width: auto; object-fit: contain; } /* ── 検索条件 + 実績統計 ── */ .lp-top-stats { background: var(--mm-paper); } .lp-top-stats__inner { max-width: var(--mm-max); margin-inline: auto; padding: 3rem clamp(1rem, 3vw, 1.5rem); } .lp-top-stats__conds { margin-bottom: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .lp-top-stats__condlabel { margin-right: 0.75rem; font-weight: 500; color: var(--mm-muted); } .lp-top-stats__conds a { border: 1px solid rgba(203, 133, 133, 0.25); background: #fff; border-radius: 9999px; padding: 0.5rem 1.25rem; font-size: 0.875rem; color: var(--mm-muted); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .lp-top-stats__conds a:hover { border-color: var(--mm-primary); color: var(--mm-primary); } .lp-top-stats__card { background: #fff6f1; border-radius: var(--mm-rc); box-shadow: var(--mm-shadow-card); padding: 2rem; } .lp-top-stats__h { margin: 0; text-align: center; font-size: 1.25rem; font-weight: 500; color: var(--mm-muted); } .lp-top-stats__grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .lp-top-stats__item { text-align: center; } .lp-top-stats__item + .lp-top-stats__item { border-left: 1px solid rgba(203, 133, 133, 0.2); } .lp-top-stats__icon { display: inline-flex; color: var(--mm-secondary); } .lp-top-stats__icon svg { width: 2.25rem; height: 2.25rem; } .lp-top-stats__label { margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--mm-muted); } .lp-top-stats__val { margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 600; color: var(--mm-primary); } .lp-top-stats__unit { margin: 0; font-size: 0.875rem; color: var(--mm-muted); } .lp-top-stats__note { margin: 1.5rem 0 0; text-align: center; font-size: 0.75rem; color: rgba(82, 67, 67, 0.5); } /* ── ボトムCTA ── */ .lp-top-cta { background: var(--mm-paper); } .lp-top-cta__inner { max-width: var(--mm-max); margin-inline: auto; padding: 0 clamp(1rem, 3vw, 1.5rem) 3rem; } .lp-top-cta__band { position: relative; overflow: hidden; border-radius: var(--mm-rc); background: linear-gradient(to right, var(--mm-primary), #eaa0ad); color: #fff; box-shadow: var(--mm-shadow-soft); padding: 2.5rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; } .lp-top-cta__text, .lp-top-cta__badge, .lp-top-cta__btn { position: relative; z-index: 1; } .lp-top-cta__h { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.6; } .lp-top-cta__sub { margin: 1rem 0 0; font-size: 0.875rem; line-height: 1.75; color: rgba(255, 255, 255, 0.9); } .lp-top-cta__badge { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); text-align: center; font-size: 1.125rem; font-weight: 600; line-height: 1.4; } .lp-top-cta__btn { display: flex; align-items: center; justify-content: center; height: 4rem; background: #fff; color: var(--mm-primary); text-decoration: none; border-radius: var(--mm-rctrl); padding-inline: 2.5rem; font-size: 1.125rem; font-weight: 600; white-space: nowrap; box-shadow: var(--mm-shadow-card); transition: transform 0.15s ease; } .lp-top-cta__btn:hover { transform: translateY(-2px); } .lp-top-cta__img { position: absolute; bottom: -2.5rem; right: 1.5rem; width: 200px; height: auto; transform: rotate(6deg); z-index: 0; } /* ── フッター ── */ .lp-top-foot { background: #fff; } .lp-top-foot__inner { max-width: var(--mm-max); margin-inline: auto; padding: 2.5rem clamp(1rem, 3vw, 1.5rem); } .lp-top-foot__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; } .lp-top-foot__title { margin: 0 0 1rem; font-size: 0.875rem; font-weight: 600; color: var(--mm-muted); } .lp-top-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .lp-top-foot__links a { font-size: 0.75rem; line-height: 1.5; color: rgba(82, 67, 67, 0.7); text-decoration: none; transition: color 0.15s ease; } .lp-top-foot__links a:hover { color: var(--mm-primary); } .lp-top-foot__copy { margin: 2rem 0 0; text-align: center; font-size: 0.75rem; color: rgba(82, 67, 67, 0.5); } /* ── TOP レスポンシブ（追加セクション） ── */ @media (max-width: 900px) { .lp-top-cat__grid { grid-template-columns: repeat(4, 1fr); } .lp-top-jobs__grid { grid-template-columns: repeat(2, 1fr); } .lp-top-panels__inner { grid-template-columns: 1fr; } .lp-top-support__body { max-width: 100%; } .lp-top-support__img { display: none; } .lp-top-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; } .lp-top-stats__item:nth-child(odd) { border-left: 0; } .lp-top-cta__band { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; } .lp-top-cta__badge { margin-inline: auto; } .lp-top-cta__img { display: none; } .lp-top-foot__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .lp-top-cat__grid { grid-template-columns: repeat(2, 1fr); } .lp-top-jobs__grid { grid-template-columns: 1fr; } } /* ============================================================ POPUP運営チーム LP（B2B / .plp-*） /lp/popup/ · patterns/lp-popup-*.php ------------------------------------------------------------ ・全ルールを .plp 配下にスコープする。ページ側は tasks/lp-popup-blocks.txt が全パターンを .plp.plp-page で包む。 各パターン単体でも成立するよう、節のルートにも .plp を付ける （ページ固有の余白等は .plp-page 側にのみ持たせて二重適用を防ぐ）。 ・原本（支給HTML）は Noto Sans JP / Zen Kaku Gothic New / Jost を Google Fonts から 読んでいたが、Webフォントの追加読込は PageSpeed 90+（絶対要件）に反するため行わない。 日本語は CLAUDE.md の「Noto Sans JP 正」に従い sans トークンへ寄せ、見出しの Zen Kaku Gothic New(900) は太さで、Jost は英数字のみ Wix Madefor Display で代替する。 ・.plp * のリセットは、原本が前提にしていた素のボックスモデルを ブロックの既定スタイル下でも再現するために意図的に置いている。 ============================================================ */ .plp { --plp-rose: #A4615F; --plp-rose2: #C18887; --plp-rose3: #E3C7C5; --plp-tint: #F7ECEC; --plp-ink: #33322F; --plp-sub: #6B6663; --plp-line: #DDD6D4; --plp-grey: #F1EEEE; --plp-dark: #2A2523; --plp-shadow: 0 6px 18px rgba(51, 50, 47, .07); --plp-pad: 96px; /* 日本語は Noto Sans JP 正（CLAUDE.md）。テーマの sans トークン＝Noto Sans JP を含む システムスタックを使い、Webフォントの追加読込はしない（PageSpeed 90+ の絶対要件）。 --plp-font-dp は見出し用のフックとして分けてあるが、現状は本文と同じ書体（差は太さのみ）。 --plp-font-num は英字・数字だけの装飾（eyebrow / 統計数値 / 金額）に限定。日本語を含まない ため、自己ホスト済みの Wix Madefor Display で原本（Jost）の字面の印象を保つ。 */ --plp-font: var(--wp--preset--font-family--sans, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif); --plp-font-dp: var(--wp--preset--font-family--sans, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif); --plp-font-num: var(--lp-font-display, -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif); font-family: var(--plp-font); color: var(--plp-ink); background: #fff; font-size: 15px; line-height: 1.9; font-weight: 400; font-style: normal; letter-spacing: normal; text-align: left; word-break: normal; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ブロックの既定スタイル（余白・行間・文字サイズ）を節内で無効化し、 原本のレイアウト計算をそのまま活かす。 セレクタは .plp * だけに留めること（詳細度 0,1,0）。ここに .plp .wp-block-group 等を並べると 0,2,0 になり、.plp-hero h1（0,1,1）や .plp-hero（0,1,0）といった自前の指定を全部食い潰して、見出しが本文サイズの 黒文字に落ちる。ブロック側の既定はこの詳細度で十分に上書きできる。 例外: .plp-cta__form 配下（埋め込み資料請求フォーム）は .clp-form__* の意匠を そのまま使うためリセット対象外にする。:where() は詳細度ゼロなので 0,1,0 を維持。 */ .plp *:where(:not(.plp-cta__form, .plp-cta__form *)) { margin: 0; padding: 0; box-sizing: border-box; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; border-radius: 0; text-transform: none; float: none; } .plp ul, .plp ol { list-style: none; } .plp img { display: block; max-width: 100%; height: auto; border: 0; box-shadow: none; } .plp a { color: inherit; text-decoration: none; } .plp details, .plp summary { display: block; } .plp b, .plp strong { font-weight: 700; } .plp em { font-style: normal; } .plp :focus-visible { outline: 2px solid var(--plp-rose); outline-offset: 3px; } .plp figure.wp-block-image { line-height: 0; } /* ページ全体としての設定（節単体では効かせない） */ html:has(.plp-page) { scroll-behavior: smooth; scroll-padding-top: 80px; } /* ---- 共通パーツ ---- */ .plp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 26px; } .plp-sec { padding: var(--plp-pad) 0; } .plp-sec--tint { background: #FBF8F7; } .plp-sec--rose { background: var(--plp-tint); } .plp h2, .plp h3, .plp h4 { font-family: var(--plp-font-dp); } .plp h2 { font-size: clamp(24px, 3.4vw, 37px); font-weight: 900; line-height: 1.55; margin: 14px 0 14px; } .plp h2 em { font-style: normal; color: var(--plp-rose); } .plp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--plp-font-num); font-size: 12px; font-weight: 600; letter-spacing: .26em; color: var(--plp-rose); text-transform: uppercase; } .plp-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--plp-rose2); } .plp-lead { color: var(--plp-sub); font-size: 14.5px; max-width: 720px; } .plp-note { font-size: 11.5px; color: var(--plp-sub); margin-top: 14px; line-height: 1.8; } .plp-note--right { text-align: right; } .plp-band { margin-top: 28px; background: var(--plp-tint); padding: 18px 26px; text-align: center; font-size: 14.5px; } .plp-band b { color: var(--plp-rose); } .plp-subhead { font-size: 13px; font-weight: 700; color: var(--plp-sub); margin-top: 44px; display: flex; align-items: center; gap: 12px; } .plp-subhead::after { content: ''; flex: 1; height: 1px; background: var(--plp-line); } .plp-rule { height: 1px; background: var(--plp-line); margin: 12px 0; } /* スクロール連動フェードイン。 JS が走ったときだけ .plp-reveal が付き、初期状態が透明になる。 JS 不達・エラー時は素の表示のまま（内容が消えない）ことを保証する。 */ .plp-reveal .plp-rv { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2, .6, .2, 1), transform .8s cubic-bezier(.2, .6, .2, 1); } .plp-reveal .plp-rv.is-on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .plp-reveal .plp-rv { opacity: 1; transform: none; transition: none; } } /* ---- ボタン（wp:button のラッパに .plp-btn* を付け、内側の a を装飾） ---- */ .plp .plp-btn .wp-block-button__link, .plp a.plp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 17px 40px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; letter-spacing: .04em; transition: .26s; border: 1.5px solid transparent; background: none; } .plp .plp-btn--fill .wp-block-button__link, .plp a.plp-btn--fill { background: var(--plp-rose); color: #fff; box-shadow: 0 10px 24px rgba(164, 97, 95, .3); } .plp .plp-btn--fill .wp-block-button__link:hover, .plp a.plp-btn--fill:hover { background: #8E504E; transform: translateY(-2px); } .plp .plp-btn--line .wp-block-button__link, .plp a.plp-btn--line { border-color: rgba(255, 255, 255, .7); color: #fff; } .plp .plp-btn--line .wp-block-button__link:hover, .plp a.plp-btn--line:hover { background: rgba(255, 255, 255, .14); } .plp .plp-btn--ghost .wp-block-button__link, .plp a.plp-btn--ghost { border-color: var(--plp-ink); color: var(--plp-ink); } .plp .plp-btn--ghost .wp-block-button__link:hover, .plp a.plp-btn--ghost:hover { background: var(--plp-ink); color: #fff; } .plp .plp-btn--white .wp-block-button__link, .plp a.plp-btn--white { background: #fff; color: var(--plp-rose); } .plp .plp-btn--white .wp-block-button__link:hover, .plp a.plp-btn--white:hover { transform: translateY(-2px); } .plp .plp-btns { display: flex; gap: 14px; flex-wrap: wrap; } .plp .plp-btn__ar { display: inline-block; transition: transform .26s; } .plp .plp-btn .wp-block-button__link:hover .plp-btn__ar, .plp a.plp-btn:hover .plp-btn__ar { transform: translateX(6px); } /* ---- ヘッダー ---- */ .plp-head { position: relative; z-index: 60; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--plp-line); } .plp-head__inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 18px; } .plp-head__logo { font-family: var(--plp-font-dp); font-weight: 900; font-size: 18px; letter-spacing: .03em; line-height: 1.2; white-space: nowrap; } .plp-head__logo small { display: block; font-size: 9.5px; color: var(--plp-rose); letter-spacing: .14em; font-weight: 700; } .plp-head__nav { display: flex; gap: 22px; margin-left: auto; font-size: 13px; font-weight: 700; } .plp-head__nav a { padding: 4px 0; position: relative; white-space: nowrap; } .plp-head__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--plp-rose); transition: .26s; } .plp-head__nav a:hover::after { width: 100%; } .plp-head .plp-btn .wp-block-button__link, .plp-head a.plp-btn { padding: 11px 22px; font-size: 13px; } /* ---- ヒーロー ---- */ .plp-hero { position: relative; min-height: 640px; display: flex; align-items: center; color: #fff; padding: 104px 0 0; background: url("images/popup/hero.webp") center 22% / cover; } .plp-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(96deg, rgba(35, 25, 24, .90) 0%, rgba(35, 25, 24, .74) 40%, rgba(164, 97, 95, .34) 74%, rgba(164, 97, 95, .10) 100%); } .plp-hero__inner { position: relative; z-index: 2; width: 100%; flex: 1 1 auto; padding-bottom: 118px; } .plp-hero__tag { display: inline-flex; align-items: center; white-space: nowrap; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 7px 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; margin-bottom: 24px; } .plp-hero h1 { font-family: var(--plp-font-dp); font-size: clamp(29px, 4.4vw, 50px); font-weight: 900; line-height: 1.5; text-shadow: 0 2px 26px rgba(0, 0, 0, .3); } .plp-hero__ac { position: relative; display: inline-block; } .plp-hero__ac::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .28em; background: rgba(164, 97, 95, .88); z-index: -1; } .plp-hero__lead { margin: 22px 0 32px; font-size: 15px; opacity: .94; max-width: 560px; } .plp-spec { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #fff; border-top: 1px solid var(--plp-line); } .plp-spec__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .plp-spec__item { padding: 20px 16px; text-align: center; border-left: 1px solid var(--plp-line); color: var(--plp-ink); } .plp-spec__item:first-child { border-left: none; } .plp-spec__item b { display: block; white-space: nowrap; font-family: var(--plp-font-dp); font-size: 19px; font-weight: 900; line-height: 1.3; } .plp-spec__item b .u { font-size: 12px; font-weight: 700; margin-left: 2px; } .plp-spec__item > span { display: block; font-size: 11.5px; color: var(--plp-sub); margin-top: 2px; } /* ---- Problem ---- */ .plp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 34px; } .plp-chip { display: flex; align-items: flex-start; gap: 13px; background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 14px 22px; font-size: 14px; font-weight: 500; transition: .26s; } .plp-chip:hover { border-color: var(--plp-rose2); transform: translateX(5px); } .plp-chip__x { color: var(--plp-rose2); font-weight: 700; } .plp-goals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } .plp-goal { background: var(--plp-tint); padding: 26px 24px; } .plp-goal__no { font-family: var(--plp-font-num); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose); } .plp-goal h4 { font-size: 16.5px; font-weight: 900; margin: 5px 0 8px; } .plp-goal p { font-size: 12.8px; color: var(--plp-sub); line-height: 1.85; } .plp-pain { margin-top: 26px; background: var(--plp-dark); color: #fff; display: inline-block; padding: 13px 30px; font-weight: 700; font-size: 14.5px; } .plp-pain b { color: var(--plp-rose3); } /* ---- Market ---- */ .plp-mgroup + .plp-mgroup { margin-top: 8px; } .plp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; } .plp-stat { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 28px 30px; display: flex; align-items: center; gap: 26px; } .plp-stat__num { font-family: var(--plp-font-num); font-weight: 500; font-size: 46px; color: var(--plp-rose); line-height: 1; white-space: nowrap; } .plp-stat__num .jp { font-family: var(--plp-font-dp); font-size: 19px; font-weight: 700; margin: 0 1px; } .plp-stat__tx { flex: 1; } .plp-stat__desc { font-size: 13.5px; line-height: 1.8; } .plp-stat__src { margin-top: 6px; font-size: 10.5px; color: #A9A5A2; letter-spacing: .06em; } /* ---- Quote ---- */ .plp-quote { position: relative; padding: 120px 0; background: url("images/popup/quote.webp") center 34% / cover; color: #fff; text-align: center; } .plp-quote::before { content: ''; position: absolute; inset: 0; background: rgba(42, 37, 35, .76); } .plp-quote .plp-wrap { position: relative; } .plp-quote__en { font-family: var(--plp-font-num); font-size: 12px; letter-spacing: .38em; color: var(--plp-rose3); margin-bottom: 20px; } .plp-quote p { font-family: var(--plp-font-dp); font-size: clamp(22px, 3.3vw, 35px); font-weight: 900; line-height: 1.75; } .plp-quote p span { color: var(--plp-rose3); } /* ---- Essence ---- */ .plp-ess { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; margin-top: 42px; } .plp-ess__card { padding: 34px 32px; height: 100%; } .plp-ess__card--asis { background: var(--plp-grey); } .plp-ess__card--tobe { background: #fff; border: 2px solid var(--plp-rose); box-shadow: 0 14px 34px rgba(164, 97, 95, .12); } .plp-ess__cap { font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .24em; color: var(--plp-sub); } .plp-ess__card--tobe .plp-ess__cap { color: var(--plp-rose); } .plp-ess__card h3 { font-size: 20px; font-weight: 900; margin: 6px 0 18px; } .plp-ess__card--tobe h3 { color: var(--plp-rose); } .plp-ess__card li { position: relative; padding: 10px 0 10px 26px; font-size: 13.8px; border-bottom: 1px dashed #DFD8D6; line-height: 1.8; } .plp-ess__card li:last-child { border-bottom: none; } .plp-ess__card li::before { position: absolute; left: 0; top: 10px; font-weight: 700; } .plp-ess__card--asis li { color: var(--plp-sub); } .plp-ess__card--asis li::before { content: '✕'; color: #B3ABA8; } .plp-ess__card--tobe li::before { content: '✓'; color: var(--plp-rose); } .plp-ess__arrow { display: flex; align-items: center; justify-content: center; font-family: var(--plp-font-num); font-size: 28px; color: var(--plp-rose2); } /* ---- 章間の区切り帯 ---- */ .plp-divider { background: var(--plp-dark); color: #fff; padding: 70px 0; } .plp-divider .plp-wrap { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .plp-divider__lab { font-family: var(--plp-font-num); font-size: 12px; letter-spacing: .3em; color: var(--plp-rose3); white-space: nowrap; } .plp-divider h2 { color: #fff; margin: 0; font-size: clamp(21px, 2.7vw, 30px); flex: 1 1 420px; word-break: keep-all; } .plp-divider p { color: rgba(255, 255, 255, .68); font-size: 13.5px; flex: 1 1 320px; max-width: 470px; } /* ---- Database ---- */ .plp-db { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: center; margin-top: 40px; } .plp-db__photo { overflow: hidden; box-shadow: 0 14px 34px rgba(51, 50, 47, .16); aspect-ratio: 16 / 11; } .plp-db__photo img { width: 100%; height: 100%; object-fit: cover; } .plp-db__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .plp-kpi { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 28px 26px; } .plp-kpi__cap { font-family: var(--plp-font-num); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose); } .plp-kpi__big { font-family: var(--plp-font-num); white-space: nowrap; font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; color: var(--plp-rose); line-height: 1; margin-top: 8px; } .plp-kpi__big .jp { font-family: var(--plp-font-dp); font-size: 18px; font-weight: 700; color: var(--plp-ink); margin-left: 3px; } .plp-kpi p { font-size: 12px; color: var(--plp-sub); margin-top: 8px; line-height: 1.75; } .plp-dist { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; } .plp-dist__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 28px 30px; } .plp-dist__card h4 { font-size: 14px; font-weight: 900; margin-bottom: 14px; } .plp-bar { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 12px; margin-top: 10px; font-size: 12.5px; } .plp-bar__track { height: 9px; background: var(--plp-grey); } .plp-bar__fill { display: block; height: 100%; background: var(--plp-rose2); } .plp-bar--hl .plp-bar__fill { background: var(--plp-rose); } .plp-bar__pc { font-family: var(--plp-font-num); font-weight: 600; text-align: right; color: var(--plp-sub); } .plp-bar--hl .plp-bar__pc { color: var(--plp-rose); } .plp-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .plp-cats span { background: #fff; border: 1px solid var(--plp-line); padding: 8px 18px; font-size: 12.5px; font-weight: 700; } /* ---- Quality（4ステップ） ---- */ .plp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .plp-step { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); display: flex; flex-direction: column; position: relative; } .plp-step__ph { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--plp-grey); } .plp-step__ph i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; } .plp-step__ph::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(30, 24, 23, .72)); } .plp-step__no { position: absolute; left: 20px; bottom: 12px; z-index: 2; font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: #fff; } .plp-step__opt { position: absolute; right: 12px; top: 12px; z-index: 2; background: #fff; color: var(--plp-rose); border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 4px 12px; } .plp-step__bd { padding: 20px 20px 24px; flex: 1; } .plp-step h3 { font-size: 15.5px; font-weight: 900; line-height: 1.5; } .plp-step p { font-size: 12.5px; color: var(--plp-sub); line-height: 1.85; } .plp-step--01 .plp-step__ph i { background-image: url("images/popup/step-01.webp"); } .plp-step--02 .plp-step__ph i { background-image: url("images/popup/step-02.webp"); } .plp-step--03 .plp-step__ph i { background-image: url("images/popup/step-03.webp"); } .plp-step--04 .plp-step__ph i { background-image: url("images/popup/step-04.webp"); } /* ---- Value（4カード） ---- */ .plp-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .plp-value { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); transition: .3s; } .plp-value:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(51, 50, 47, .13); } .plp-value__ph { aspect-ratio: 16 / 10; overflow: hidden; background: var(--plp-grey); } .plp-value__ph i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: .6s; } .plp-value:hover .plp-value__ph i { transform: scale(1.06); } .plp-value__bd { padding: 22px 20px 26px; } .plp-value__no { font-family: var(--plp-font-num); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose); } .plp-value h3 { font-size: 16.5px; font-weight: 900; margin: 6px 0 9px; } .plp-value p { font-size: 12.6px; color: var(--plp-sub); line-height: 1.88; } .plp-value--01 .plp-value__ph i { background-image: url("images/popup/value-01.webp"); } .plp-value--02 .plp-value__ph i { background-image: url("images/popup/value-02.webp"); } .plp-value--03 .plp-value__ph i { background-image: url("images/popup/value-03.webp"); } .plp-value--04 .plp-value__ph i { background-image: url("images/popup/value-04.webp"); } /* ---- Strength（売上の変数） ---- */ .plp-formula { background: var(--plp-dark); color: #fff; padding: 22px 26px; margin-top: 40px; text-align: center; font-family: var(--plp-font-dp); font-weight: 900; font-size: clamp(14px, 1.9vw, 20px); letter-spacing: .02em; } .plp-formula em { font-style: normal; color: var(--plp-rose3); } .plp-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; } .plp-level { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 26px 24px; } .plp-level__no { font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose2); } .plp-level h3 { font-size: 18px; font-weight: 900; margin: 5px 0 14px; } .plp-level__how { display: inline-block; background: var(--plp-tint); color: var(--plp-rose); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; padding: 3px 12px; font-family: var(--plp-font-num); } .plp-level__hw { font-size: 13.5px; font-weight: 700; margin: 9px 0 7px; } .plp-level p { font-size: 12.5px; color: var(--plp-sub); line-height: 1.85; } /* ---- Use Cases ---- */ .plp-uc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .plp-uc__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 26px 24px; display: flex; flex-direction: column; } .plp-uc__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .plp-uc__no { font-family: var(--plp-font-num); font-size: 12px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose2); } .plp-uc__term { background: var(--plp-dark); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 14px; border-radius: 999px; white-space: nowrap; } .plp-uc__card h3 { font-size: 16.5px; font-weight: 900; margin: 10px 0 9px; line-height: 1.5; } .plp-uc__card p { font-size: 12.6px; color: var(--plp-sub); line-height: 1.85; flex: 1; } .plp-uc__ans { margin-top: 14px; background: var(--plp-tint); color: var(--plp-rose); font-size: 12.5px; font-weight: 700; padding: 9px 14px; text-align: center; } .plp-uc__scale { margin-top: 8px; font-size: 11.5px; color: var(--plp-sub); text-align: center; } /* ---- Service ---- */ .plp-sv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; } .plp-sv__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); } .plp-sv__ph { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--plp-grey); } .plp-sv__ph i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; } .plp-sv__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(30, 24, 23, .76)); } .plp-sv__cap { position: absolute; left: 24px; bottom: 16px; z-index: 2; color: #fff; } .plp-sv__cap .no { font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .2em; display: block; } .plp-sv__cap b { font-family: var(--plp-font-dp); font-size: 20px; font-weight: 900; } .plp-sv__list { padding: 24px 26px 28px; } .plp-sv__list li { position: relative; padding: 8px 0 8px 24px; font-size: 13.2px; color: var(--plp-sub); } .plp-sv__list li::before { content: '✓'; position: absolute; left: 0; color: var(--plp-rose); font-weight: 700; } .plp-sv__opt { color: var(--plp-rose2); font-size: 11px; font-weight: 700; } .plp-sv__card--01 .plp-sv__ph i { background-image: url("images/popup/service-01.webp"); } .plp-sv__card--02 .plp-sv__ph i { background-image: url("images/popup/service-02.webp"); } .plp-sv__card--03 .plp-sv__ph i { background-image: url("images/popup/service-03.webp"); } /* ---- Price ---- */ .plp-price { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: stretch; } .plp-price__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 36px 34px; } .plp-price__card h3 { font-size: 17px; font-weight: 900; margin-bottom: 22px; } .plp-calc { display: flex; align-items: stretch; gap: 10px; } .plp-calc__cell { flex: 1; background: var(--plp-tint); padding: 20px 12px; text-align: center; } .plp-calc__lb { font-size: 11.5px; color: var(--plp-sub); } .plp-calc__cell b { display: block; font-family: var(--plp-font-num); font-size: 24px; font-weight: 500; margin-top: 4px; line-height: 1.3; } .plp-calc__cell b .jp { font-family: var(--plp-font-dp); font-size: 14px; font-weight: 700; } .plp-calc__op { display: flex; align-items: center; font-family: var(--plp-font-num); font-size: 20px; color: var(--plp-rose2); } .plp-plusrow { margin-top: 12px; background: var(--plp-grey); padding: 16px 20px; text-align: center; } .plp-plusrow b { font-family: var(--plp-font-dp); font-size: 16px; font-weight: 900; } .plp-plusrow span { display: block; font-size: 11.5px; color: var(--plp-sub); margin-top: 2px; } .plp-price__incl { margin-top: 16px; font-size: 12.5px; color: var(--plp-sub); line-height: 1.8; } .plp-est { background: var(--plp-tint); padding: 36px 34px; } .plp-est__cap { font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose); } .plp-est h3 { font-size: 17px; font-weight: 900; margin: 6px 0 4px; } .plp-est__sb { font-size: 12.5px; color: var(--plp-sub); margin-bottom: 18px; } .plp-est__row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #E4D6D4; font-size: 13px; } .plp-est__row b { font-family: var(--plp-font-num); font-size: 19px; font-weight: 500; color: var(--plp-ink); } .plp-est__total { background: var(--plp-rose); color: #fff; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; margin-top: 18px; } .plp-est__total span { font-size: 13px; font-weight: 700; } .plp-est__total b { font-family: var(--plp-font-num); font-size: 30px; font-weight: 500; } /* ---- Professional（ピラミッド） ---- */ .plp-pyr { display: grid; grid-template-columns: .9fr 1.1fr; gap: 34px; align-items: center; margin-top: 40px; } .plp-pyr__photo { overflow: hidden; box-shadow: 0 14px 34px rgba(51, 50, 47, .16); aspect-ratio: 16 / 11; } .plp-pyr__photo img { width: 100%; height: 100%; object-fit: cover; } .plp-tier { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 18px 24px; text-align: center; } .plp-tier + .plp-tier { margin-top: 10px; } .plp-tier__lb { font-family: var(--plp-font-num); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; color: var(--plp-rose2); } .plp-tier b { display: block; font-family: var(--plp-font-dp); font-size: 17px; font-weight: 900; margin-top: 2px; } .plp-tier > span { font-size: 12px; color: var(--plp-sub); } .plp-tier--top { background: var(--plp-dark); border-color: transparent; color: #fff; } .plp-tier--top b { color: var(--plp-rose3); } .plp-tier--top > span { color: rgba(255, 255, 255, .66); } .plp-tier__ar { text-align: center; color: var(--plp-rose2); font-size: 14px; line-height: 1; margin: 6px 0; } .plp-pro3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; } .plp-pro3__card { background: var(--plp-tint); padding: 26px 24px; } .plp-pro3__card h4 { font-size: 16.5px; font-weight: 900; margin-bottom: 8px; color: var(--plp-rose); } .plp-pro3__card p { font-size: 12.8px; color: var(--plp-sub); line-height: 1.85; } /* ---- Asset（PDCA） ---- */ .plp-pdca { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; } .plp-pdca__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 28px 24px; position: relative; } .plp-pdca__sn { font-family: var(--plp-font-num); font-size: 11.5px; font-weight: 600; letter-spacing: .22em; color: var(--plp-rose); } .plp-pdca__card h3 { font-size: 16.5px; font-weight: 900; margin: 6px 0 9px; } .plp-pdca__card p { font-size: 12.6px; color: var(--plp-sub); line-height: 1.88; } .plp-pdca__card::after { content: ''; position: absolute; top: 50%; right: -13px; width: 8px; height: 8px; border-top: 2px solid var(--plp-rose2); border-right: 2px solid var(--plp-rose2); transform: rotate(45deg) translateY(-50%); } .plp-pdca__card:last-child::after { display: none; } .plp-engine { margin-top: 20px; background: var(--plp-dark); color: #fff; padding: 30px 34px; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; } .plp-engine__lb { font-family: var(--plp-font-num); font-size: 11px; letter-spacing: .24em; color: var(--plp-rose3); } .plp-engine b { display: block; font-family: var(--plp-font-dp); font-size: 22px; font-weight: 900; margin-top: 4px; white-space: nowrap; } .plp-engine p { font-size: 13.2px; color: rgba(255, 255, 255, .72); line-height: 1.85; } .plp-assetband { margin-top: 20px; position: relative; height: 200px; background: url("images/popup/asset-band.webp") center 52% / cover; overflow: hidden; } .plp-assetband::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(42, 37, 35, .86), rgba(42, 37, 35, .3)); } .plp-assetband p { position: relative; z-index: 2; color: #fff; font-family: var(--plp-font-dp); font-weight: 900; font-size: clamp(16px, 2.2vw, 23px); line-height: 1.7; padding: 0 clamp(24px, 5vw, 52px); height: 100%; display: flex; align-items: center; max-width: 720px; } /* ---- Comparison ---- */ .plp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: stretch; } .plp-cmp__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 38px 34px; display: flex; flex-direction: column; } .plp-cmp__card--pro { background: var(--plp-dark); color: #fff; border-color: transparent; } .plp-cmp__badge { align-self: flex-start; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 7px 20px; letter-spacing: .14em; } .plp-cmp__badge--a { background: var(--plp-rose2); color: #fff; } .plp-cmp__badge--b { background: var(--plp-rose3); color: var(--plp-dark); } .plp-cmp__card h3 { font-size: 24px; font-weight: 900; margin: 16px 0 6px; } .plp-cmp__card--pro h3 { color: var(--plp-rose3); } .plp-cmp__sb { font-size: 13px; color: var(--plp-sub); } .plp-cmp__card--pro .plp-cmp__sb { color: rgba(255, 255, 255, .66); } .plp-cmp__list { margin-top: 20px; flex: 1; } .plp-cmp__list li { position: relative; padding: 10px 0 10px 24px; font-size: 13.4px; border-bottom: 1px solid var(--plp-line); } .plp-cmp__card--pro .plp-cmp__list li { border-color: rgba(255, 255, 255, .13); } .plp-cmp__list li::before { content: '✓'; position: absolute; left: 0; color: var(--plp-rose); font-weight: 700; } .plp-cmp__card--pro .plp-cmp__list li::before { color: var(--plp-rose3); } .plp-cmp__list li.is-inc { color: var(--plp-rose); font-weight: 700; } .plp-cmp__card--pro .plp-cmp__list li.is-inc { color: var(--plp-rose3); } .plp-cmp__amt { margin-top: 20px; background: var(--plp-tint); padding: 20px 22px; } .plp-cmp__card--pro .plp-cmp__amt { background: rgba(255, 255, 255, .08); } .plp-cmp__amt .lb { font-size: 11px; letter-spacing: .14em; color: var(--plp-sub); } .plp-cmp__card--pro .plp-cmp__amt .lb { color: rgba(255, 255, 255, .6); } .plp-cmp__amt b { display: block; font-family: var(--plp-font-num); font-weight: 500; font-size: 32px; line-height: 1.3; } .plp-cmp__card--pro .plp-cmp__amt b { color: #fff; } .plp-cmp__amt b .yen { font-size: 20px; } .plp-cmp__amt b .to { color: var(--plp-rose); font-size: 20px; } .plp-cmp__card--pro .plp-cmp__amt b .to { color: var(--plp-rose3); } .plp-cmp__amt .tx { font-size: 12px; color: var(--plp-sub); line-height: 1.75; } .plp-cmp__card--pro .plp-cmp__amt .tx { color: rgba(255, 255, 255, .66); } /* ---- Flow / FAQ ---- */ .plp-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 38px; } .plp-flow__card { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); padding: 20px 14px; text-align: center; } .plp-flow__n { font-family: var(--plp-font-num); font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--plp-rose2); } .plp-flow__card b { display: block; font-family: var(--plp-font-dp); font-size: 13.5px; font-weight: 900; margin: 5px 0 3px; } .plp-flow__card > span { display: block; font-size: 11.5px; color: var(--plp-sub); line-height: 1.7; } .plp-faq { margin-top: 36px; max-width: 880px; } .plp-qa { background: #fff; border: 1px solid var(--plp-line); box-shadow: var(--plp-shadow); margin-bottom: 12px; } .plp-qa summary { list-style: none; cursor: pointer; padding: 19px 54px 19px 24px; font-weight: 700; font-size: 14.5px; position: relative; } .plp-qa summary::-webkit-details-marker { display: none; } .plp-qa summary::after { content: ''; position: absolute; right: 24px; top: 25px; width: 9px; height: 9px; border-right: 2px solid var(--plp-rose); border-bottom: 2px solid var(--plp-rose); transform: rotate(45deg); transition: .26s; } .plp-qa[open] summary::after { transform: rotate(-135deg); top: 29px; } .plp-qa__a { padding: 0 24px 21px; font-size: 13.5px; color: var(--plp-sub); line-height: 1.95; } /* ---- CTA / 会社概要 / フッター ---- */ .plp-cta { position: relative; background: url("images/popup/cta.webp") center 30% / cover; color: #fff; text-align: center; padding: 112px 0; } .plp-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(38, 33, 31, .88), rgba(132, 74, 72, .78)); } .plp-cta .plp-wrap { position: relative; } .plp-cta h2 { color: #fff; } .plp-cta__lead { max-width: 600px; margin: 0 auto 32px; font-size: 14.5px; color: rgba(255, 255, 255, .9); } .plp-cta .plp-eyebrow { color: var(--plp-rose3); } .plp-cta .plp-eyebrow::before { background: var(--plp-rose3); } .plp-cta .plp-btns { justify-content: center; } /* 埋め込みフォーム（wpmk-form kind=popup）: 白カードは .clp-form__card 側の意匠を流用し、暗色セクション内で左寄せに戻す */ .plp-cta__form { max-width: 760px; margin: 8px auto 0; text-align: left; } .plp-cta__meta { margin-top: 24px; font-size: 12.5px; color: rgba(255, 255, 255, .72); } .plp-corp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 34px; max-width: 880px; } .plp-corp__row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--plp-line); font-size: 13px; } .plp-corp__k { font-weight: 700; } .plp-corp__v { color: var(--plp-sub); } .plp-foot { background: var(--plp-dark); color: #8D8481; padding: 52px 0 38px; text-align: center; } .plp-foot__logo { font-family: var(--plp-font-dp); color: #fff; font-size: 23px; font-weight: 900; letter-spacing: .05em; } .plp-foot__logo small { display: block; font-size: 10px; color: var(--plp-rose2); letter-spacing: .2em; margin-top: 5px; font-weight: 700; } .plp-foot__copy { font-size: 11px; margin-top: 22px; } /* 追従CTA（SPのみ）。本文が隠れないよう .plp-page 側に下余白を持たせる。 WordPress は wp:buttons のレイアウトCSS（.wp-block-buttons{display:flex}）を にインライン出力し、main.css より後に来るため単一クラスでは負ける。 表示/非表示の切替は .plp を前置した 0,2,0 で当てること。 */ .plp .plp-mcta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--plp-line); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px; } .plp .plp-mcta .plp-btn { flex: 1; } .plp .plp-mcta .plp-btn .wp-block-button__link, .plp .plp-mcta a.plp-btn { width: 100%; padding: 14px 8px; font-size: 14px; } /* ---- レスポンシブ ---- */ @media (max-width: 1000px) { .plp-head__nav { display: none; } .plp-steps, .plp-values, .plp-levels, .plp-uc, .plp-pdca { grid-template-columns: repeat(2, 1fr); } .plp-pdca__card::after { display: none; } .plp-flow { grid-template-columns: repeat(3, 1fr); } .plp-sv, .plp-pro3 { grid-template-columns: 1fr; } .plp-goals { grid-template-columns: 1fr; } } @media (max-width: 860px) { .plp { --plp-pad: 64px; } .plp-page { padding-bottom: 74px; } .plp .plp-mcta { display: flex; } .plp-head__inner { height: 60px; } .plp-hero { display: block; min-height: 0; padding: 70px 0 0; background-position: center 25%; } .plp-hero__inner { padding-bottom: 56px; } .plp-hero h1 { font-size: 27px; } .plp-hero__tag { font-size: 11.5px; padding: 6px 15px; } .plp-hero .plp-btns .plp-btn { flex: 1 1 100%; } .plp-hero .plp-btns .plp-btn .wp-block-button__link { width: 100%; } .plp-spec { position: static; } .plp-spec__grid { grid-template-columns: repeat(2, 1fr); } .plp-spec__item { border-top: 1px solid var(--plp-line); } .plp-spec__item:nth-child(odd) { border-left: none; } .plp-chips, .plp-stats, .plp-db, .plp-db__kpi, .plp-dist, .plp-price, .plp-pyr, .plp-cmp, .plp-corp { grid-template-columns: 1fr; } .plp-ess { grid-template-columns: 1fr; gap: 14px; } .plp-ess__arrow { transform: rotate(90deg); } .plp-stat { gap: 18px; padding: 22px 22px; } .plp-stat__num { font-size: 36px; } .plp-engine { grid-template-columns: 1fr; gap: 14px; } .plp-engine b { white-space: normal; } .plp-divider { padding: 48px 0; } .plp-calc { flex-wrap: wrap; } .plp-calc__cell { flex: 1 1 100%; } .plp-calc__op { width: 100%; justify-content: center; } } @media (max-width: 560px) { .plp-steps, .plp-values, .plp-levels, .plp-uc, .plp-pdca { grid-template-columns: 1fr; } .plp-flow { grid-template-columns: repeat(2, 1fr); } .plp-hero h1 { font-size: 24.5px; } .plp-quote { padding: 80px 0; } }