、静的プロトタイプは） --------------------------------------------------------------- */ .lp-atleta, .lp-atleta *, .lp-atleta *::before, .lp-atleta *::after { box-sizing: border-box; } body.lp-atleta { margin: 0; background: #fff; } .lp-atleta { font-family: var(--font); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* リセットは :where() で詳細度0にする。 .lp-atleta a { } のように書くと詳細度(0,1,1)が .lp-cta-btn--solid など(0,1,0)を上書きしてしまうため。 */ :where(.lp-atleta img) { max-width: 100%; vertical-align: middle; } :where(.lp-atleta a) { color: inherit; text-decoration: none; } :where(.lp-atleta ul), :where(.lp-atleta ol) { margin: 0; padding: 0; list-style: none; } :where(.lp-atleta button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :where(.lp-atleta h2), :where(.lp-atleta h3) { font-weight: 700; margin: 0; } /* 既存テーマの a { color: rgba(0,0,0,.87) } を打ち消す。クラス付きの a はコンポーネント側の色指定を尊重するため対象外にしている。 */ .lp-atleta a:not([class]) { color: inherit; } /* SPだけ改行する
。 base.css が @media (max-width:767px) で display:block !important にしているので、ここではPC時に効かないよう既定値を none にしておく */ .lp-atleta .sp-br { display: none; } .lp-container { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 24px; } .lp-section { padding: 96px 0; } .lp-section--gray { background: var(--bg-gray); } .lp-section--pink { background: var(--bg-pink); } .lp-section--cream { background: var(--bg-cream); } .lp-section__head { text-align: center; margin-bottom: 40px; } .lp-section__tag { display: inline-block; margin-bottom: 24px; padding: 8px 32px; border: 1px solid var(--red-accent); border-radius: 48px; color: var(--red-accent); font-size: 16px; font-weight: 700; line-height: 1.6; } .lp-section__title { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: var(--navy); } .lp-section__lead { margin: 24px 0 0; font-size: 20px; font-weight: 400; line-height: 1.6; letter-spacing: -0.45px; color: var(--gray); } /* ---------- buttons ---------- */ .lp-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 50px; font-size: 14px; font-weight: 700; line-height: 1.5; transition: opacity .2s, background-color .2s; } .lp-btn:hover { opacity: .8;color:#fff; } .lp-btn--outline { border: 1px solid var(--red); color: var(--red); background: #fff; } .lp-btn--solid { background: var(--red); color: #fff; } .lp-btn__circle { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; } .lp-btn--outline .lp-btn__circle { background: var(--red); color: #fff; } .lp-btn--solid .lp-btn__circle { background: #fff; color: var(--red); } .lp-btn__circle svg { width: 12px; height: 12px; display: block; } /* ========================================================= header ========================================================= */ .lp-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 80px; padding: 0 54px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(8px); border-bottom: 1px solid #f3f4f6; } .lp-header__logo img { width: 119px; } .lp-gnav { display: flex; align-items: center; gap: 32px; } .lp-gnav__link { display: block; padding-bottom: 8px; text-align: center; border-bottom: 2px solid transparent; } .lp-gnav__en { display: block; font-size: 14px; font-weight: 900; line-height: 20px; color: #4a5565; } .lp-gnav__ja { display: block; font-size: 10px; font-weight: 500; line-height: 15px; color: #99a1af; } .lp-gnav__link--current { border-bottom-color: var(--red); } .lp-gnav__link--current .lp-gnav__en { color: var(--red); } .lp-header__actions { display: flex; align-items: center; gap: 12px; } .lp-header__actions .lp-btn { padding: 12px 24px; } /* ========================================================= hero ========================================================= */ /* 左のテキスト列と写真の間隔（--lp-hero-gap）は固定のまま、写真エリアだけが右へ伸びる。Figma実測: 左余白112 + テキスト列451 + 間隔102 → 写真の左端 665 */ .lp-hero { --lp-hero-lpad: 112px; --lp-hero-pad: 40px; --lp-hero-body: 451px; --lp-hero-gap: 48px; position: relative; display: flex; align-items: center; justify-content: flex-start; min-height: 629px; padding-left: var(--lp-hero-lpad); overflow: hidden; background: #fff; max-width: 1920px; margin: 0 auto; } .lp-hero__body { position: relative; z-index: 2; width: 451px; flex: 0 0 auto; } .lp-hero__catch { display: flex; align-items: center; gap: 8px; margin: 0 0 32px; font-size: 32px; font-weight: 900; line-height: 48px; letter-spacing: .39px; } .lp-hero__catch em { padding: 0 10px; font-style: normal; color: #fff; background: var(--red); } .lp-hero__logo { width: 435px; max-width: 100%; margin-bottom: 16px; } .lp-hero__sub { margin: 0 0 64px; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: .45px; } .lp-hero__badges { display: flex; gap: 24px; margin-bottom: 24px; } .lp-badge { position: relative; display: flex; align-items: center; justify-content: center; min-width: 209px; height: 140px; padding: 10px 0; } .lp-badge__laurel { position: absolute; top: 10px; width: 62px; } .lp-badge__laurel--l { left: 0; } .lp-badge__laurel--r { right: 0; } .lp-badge__text { text-align: center; } .lp-badge__label { display: block; font-size: 22px; font-weight: 700; line-height: 26px; letter-spacing: -.2px; } .lp-badge__value { display: block; font-size: 39px; font-weight: 900; line-height: 47px; letter-spacing: -.2px; color: var(--red); min-width: 72px;} .lp-badge__unit { display: block; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -.2px; } .lp-hero__notes { display: flex; align-items: center; gap: 18px; width: fit-content; padding: 10px 19px; background: #eee; border: 1px solid #fff; border-radius: 999px; } .lp-hero__notes li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; letter-spacing: -.17px; white-space: nowrap; } .lp-hero__notes img { width: 25px; } /* ヒーローの窓は上下左右の四隅が丸い「大きな円」の形。以前は「左側だけ円弧・右側は直線」の path() で切っていたが、四辺すべてを丸めるため ellipse() に変更した。形状は「MAX幅（1920px時の写真エリア = 1327px）の状態」で固定し、左端を基準に配置している。画面幅が狭くなって写真エリアがそれより細くなると、形状の右側が枠の外へはみ出すため、右端は自動的に直線でカットされる。（左右を % 指定にすると幅ごとに弧の出方が変わってしまうため px で固定している）下の変数だけで形を調整できる: --lp-hero-shape-w 形状の基準幅。MAX時の写真エリア幅 --lp-hero-shape-x 円の中心（左右）。枠の左端からの距離 --lp-hero-shape-y 円の中心（上下）。40% = 上:下 = 2:3 --lp-hero-shape-rx 左右方向の半径 --lp-hero-shape-ry 上下方向の半径。小さくするほど四隅が大きく削れる --lp-hero-rim 写真の外側に見えるグレーの縁の太さ */ .lp-hero__visual { /* 1920(hero最大) - 40(左余白) - 451(テキスト列) - 102(間隔) = 1327 */ --lp-hero-shape-w: 1252px; --lp-hero-shape-x: calc(var(--lp-hero-shape-w) / 2); --lp-hero-shape-y: 40%; --lp-hero-shape-rx: calc(var(--lp-hero-shape-w) / 2); --lp-hero-shape-ry: 104%; --lp-hero-rim: 20px; position: relative; flex: 1 1 auto; /* 余った横幅は写真エリアが受け持つ（Figma 1387pxで722px） */ width: auto; min-width: 0; height: 629px; margin-left: var(--lp-hero-gap); overflow: hidden; background: #f1f1f1; -webkit-clip-path: ellipse(var(--lp-hero-shape-rx) var(--lp-hero-shape-ry) at var(--lp-hero-shape-x) var(--lp-hero-shape-y)); clip-path: ellipse(var(--lp-hero-shape-rx) var(--lp-hero-shape-ry) at var(--lp-hero-shape-x) var(--lp-hero-shape-y)); } /* 写真は親より --lp-hero-rim ぶん小さい相似形で切り抜く。はみ出した親の背景（#f1f1f1）が、左右の弧に沿ったグレーの縁として見える。 */ .lp-hero__slides { position: absolute; inset: 0; -webkit-clip-path: ellipse(calc(var(--lp-hero-shape-rx) - var(--lp-hero-rim)) calc(var(--lp-hero-shape-ry) - var(--lp-hero-rim)) at var(--lp-hero-shape-x) var(--lp-hero-shape-y)); clip-path: ellipse(calc(var(--lp-hero-shape-rx) - var(--lp-hero-rim)) calc(var(--lp-hero-shape-ry) - var(--lp-hero-rim)) at var(--lp-hero-shape-x) var(--lp-hero-shape-y)); } .lp-hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity, filter; } /* 上から順に引き抜くための横スライス（JSで生成） */ .lp-hero__band { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; will-change: transform; } .lp-hero__slide.is-active { opacity: 1; } .lp-hero__filter { position: absolute; width: 0; height: 0; overflow: hidden; } .lp-hero__visual img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .lp-hero__slide { filter: none !important; transform: none !important; } } /* CTAは写真エリアの右下に固定。写真の右端＝ヒーローの右端なので、右余白は左余白と同じ値（Figma実測でもヒーロー右端から112px）を使う。 */ .lp-hero__cta { position: absolute; right: var(--lp-hero-pad); bottom: 70px; /* Figma: ヒーロー下端709 − CTA下端639 */ z-index: 3; display: flex; gap: 8px; } .lp-cta-btn { display: flex; align-items: center; gap: 15px; height: 66px; padding: 0 20px; border-radius: 50px; font-size: 18px; font-weight: 700; letter-spacing: -.31px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); transition: transform .2s, opacity .2s; } .lp-cta-btn:hover { transform: translateY(-2px); opacity: .92; } /* 画像は書き出し時にドロップシャドウ分の余白が付いているため、実寸の枠（Figmaの button_image_sub / _main）を確保したうえで画像そのものは書き出しサイズで置き、はみ出す影は枠外へ逃がす。 Figma: 素材 56x64 / 端末 52x66、書き出し 80x80.67 / 57.67x66 */ .lp-cta-btn__img { position: relative; flex: 0 0 auto; } .lp-cta-btn__img img { position: absolute; max-width: none; } .lp-cta-btn__img--doc { width: 56px; height: 64px; } .lp-cta-btn__img--doc img { width: 80px; left: -10px; top: -1px; } .lp-cta-btn__img--devices { width: 52px; height: 66px; } .lp-cta-btn__img--devices img { width: 57.67px; left: 0; top: 0; } .lp-cta-btn--outline { background: #fff; border: 1px solid var(--red); color: var(--red); } .lp-cta-btn--outline:hover { background: var(--red); border: 1px solid #fff; color: #fff; } .lp-cta-btn--solid { background: var(--red); border: 1px solid #fff; color: #fff; gap: 17px; padding: 0 19px; } .lp-cta-btn--solid:hover { background: #fff; border: 1px solid var(--red); color: var(--red); } .lp-cta-btn--outline { padding: 0 21px; } .lp-cta-btn .lp-btn__circle { width: 22px; height: 22px; } .lp-cta-btn--outline .lp-btn__circle { background: var(--red); color: #fff; } .lp-cta-btn--solid .lp-btn__circle { background: #fff; color: var(--red); } /* ========================================================= all in one (red band) ========================================================= */ .lp-allinone { padding: 32px 0 40px; background: var(--red-band); } .lp-allinone__title { margin: 0 0 32px; font-size: 34px; font-weight: 700; line-height: 1.2; text-align: center; color: #fff; } .lp-allinone__title em { font-style: normal; color: var(--highlight); } .lp-allinone__body { display: flex; align-items: center; justify-content: center; max-width: 1031px; margin: 0 auto; padding: 0 24px; } .lp-allinone__mock { width: 355px; flex: 0 0 auto; margin-right: -108px; position: relative; z-index: 2; } .lp-allinone__cats { flex: 1 1 auto; padding: 16px 32px 16px 112px; background: var(--highlight); border-radius: 24px; } .lp-cat + .lp-cat { margin-top: 8px; } .lp-cat__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 29px; } .lp-cat__title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--red); } .lp-cat__tags { display: flex; flex-wrap: wrap; gap: 8px; } .lp-cat__tags li { padding: 11px 16px; border-radius: 99px; background: var(--gold); font-size: 14px; line-height: 24px; } /* ========================================================= mission ========================================================= */ .lp-mission { text-align: center; } .lp-mission__title { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.35; color: var(--navy); } .lp-mission__title em { font-style: normal; color: var(--red); } .lp-mission__lead { margin: 24px 0 0; font-size: 20px; line-height: 1.6; color: var(--gray); } .lp-mission__diagram { margin-top: 40px; } /* ========================================================= solution cards ========================================================= */ .lp-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 24px; } .lp-solution { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 16px; } .lp-solution__badge { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; /* 暗黙行（auto）が 48px の高さまで引き伸ばされ、各行の中央に文字が置かれて上下が離れてしまうため、行を content サイズのまま中央に寄せる。 */ align-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--red); color: #fff; line-height: 1; } /* Figma の badge_number は「課題」16px + 数字17px = 33px を 47px の円に配置 */ .lp-solution__badge small { display: block; font-size: 10px; font-weight: 700; line-height: 16px; } .lp-solution__badge strong { display: block; font-size: 17px; font-weight: 900; line-height: 17px; } .lp-solution__issue { padding: 36px 16px; text-align: center; } .lp-solution__img { display: flex; align-items: center; justify-content: center; height: 140px; margin-bottom: 12px; } .lp-solution__img img { max-height: 140px; width: auto; } .lp-solution__issueText { margin: 0; font-size: 19px; font-weight: 700; line-height: 30px; } .lp-solution__answer { position: relative; padding: 20px 16px 36px; text-align: center; } .lp-solution__answer::before { content: ""; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); /* Figma の img_triangle は 36x29 / cornerRadius 2。 CSS のボーダー三角形では角を丸められないため SVG マスクで描いている。マスク内のパスは外形を 2px 内側にオフセットしたもので、 stroke-width:4 + stroke-linejoin:round により半径2pxの角丸として復元される。色は mask 方式なので var(--red-accent) のまま変更できる。 */ width: 36px; height: 29px; background: var(--red-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 29'%3E%3Cpath d='M3.6 2H32.4L18 25.21Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 29'%3E%3Cpath d='M3.6 2H32.4L18 25.21Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; } .lp-solution__answerText { margin: 0 0 12px; font-size: 16px; font-weight: 700; line-height: 24px; } .lp-solution__answerText span { background: linear-gradient(transparent 62%, var(--highlight) 62%); } .lp-solution__note { margin: 0; font-size: 13px; line-height: 25px; color: var(--muted); } /* ========================================================= feature tabs (visualization / alignment) ========================================================= */ .lp-tabs { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .lp-tabs__list { display: grid; grid-template-columns: repeat(3, 1fr); } .lp-tabs__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 18px 20px; font-size: 16px; font-weight: 700; text-align: left; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .2s, color .2s; } .lp-tabs__btn::after { content: ""; width: 8px; height: 8px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); opacity: .55; } .lp-tabs__btn:hover { background: #EEE; } .lp-tabs__btn.is-active { background: var(--red-active); color: #fff; } .lp-tabs__panel { display: none; gap: 32px; padding: 24px; background: var(--bg-gray); } .lp-tabs__panel.is-active { display: flex; align-items: center; } .lp-tabs__panel--reverse { flex-direction: row-reverse; } .lp-tabs__panel img { width: 384px; height: auto; flex: 0 0 auto; border-radius: 4px; } .lp-tabs__panelTitle { margin: 0 0 12px; font-size: 20px; font-weight: 700; } /* 原稿内の改行を活かす（.lp-modal__text と同じ扱い） */ .lp-tabs__panelText { margin: 0; font-size: 16px; line-height: 26px; color: var(--gray); white-space: pre-line; } /* 現在位置のページャー。カルーセルはSPのみなのでPC・タブレットでは出さない */ .lp-tabs__dots { display: none; } /* ========================================================= other features ========================================================= */ .lp-others { padding-bottom: 64px; } .lp-otherGroup { display: flex; align-items: center; gap: 24px; padding: 24px; background: var(--bg-gray); border-radius: 16px; } .lp-otherGroup + .lp-otherGroup { margin-top: 24px; } .lp-otherGroup__title { display: flex; align-items: center; gap: 8px; width: 190px; flex: 0 0 auto; margin: 0; font-size: 16px; font-weight: 700; } .lp-otherGroup__title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--red); } .lp-otherGroup__list { display: grid; grid-template-columns: repeat(3, 196px); gap: 16px; } .lp-otherItem { display: flex; align-items: center; gap: 10px; width: 196px; text-align: left; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; transition: box-shadow .2s; } .lp-otherItem:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .08);border-color:var(--red); } .lp-otherItem img { width: 24px; flex: 0 0 auto; } .lp-otherItem::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-top: 1.5px solid #9ca3af; border-right: 1.5px solid #9ca3af; transform: rotate(45deg); } /* ========================================================= 機能詳細モーダル ========================================================= */ .lp-noscroll { overflow: hidden; } .lp-modal { position: fixed; inset: 0; z-index: 1000; } .lp-modal[hidden] { display: none; } .lp-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); } .lp-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 16px 48px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); animation: lp-modal-in .2s ease-out; } @keyframes lp-modal-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to { opacity: 1; transform: translate(-50%, -50%); } } .lp-modal__close { display: block; width: 27px; height: 27px; margin-left: auto; color: #c5c5c5; transition: color .2s; } .lp-modal__close:hover { color: #8a8a8a; } .lp-modal__close svg { width: 100%; height: 100%; display: block; } .lp-modal__title { margin: 24px 0 0; font-size: 20px; font-weight: 700; line-height: 28px; text-align: center; color: var(--navy); } .lp-modal__icon { margin: 24px 0 0; text-align: center; } .lp-modal__icon img { width: 120px; height: 120px; object-fit: contain; } .lp-modal__text { width: 424px; max-width: 100%; margin: 24px auto 0; font-size: 16px; line-height: 26px; color: var(--gray); white-space: pre-line; } /* ========================================================= reason for choosing ========================================================= */ .lp-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .lp-reason { padding: 0 28px 32px; background: #fff; border-radius: 16px; text-align: center; } .lp-reason--pad { padding-top: 32px; } .lp-reason__img { display: grid; place-items: center; height: 172px; } .lp-reason__img img { max-height: 176px; width: auto; } .lp-reason__title { margin: 14px 0; font-size: 18px; font-weight: 700; line-height: 27px; } .lp-reason__text { margin: 0; font-size: 14px; font-weight: 500; line-height: 25px; color: var(--muted); text-align: left; } .lp-reason .lp-badge { min-width: 0; width: 100%; } .lp-stats { display: flex; justify-content: center; gap: 64px; margin-top: 40px; padding: 40px; background: #fff; border-radius: 20px; } .lp-stats__item { text-align: center; } .lp-stats__label { display: block; font-size: 14px; font-weight: 700; letter-spacing: .2px; color: var(--gray-light); } .lp-stats__value { display: block; margin-top: 4px; font-size: 48px; font-weight: 800; line-height: 1; color: var(--navy); } .lp-stats__value span { font-size: 24px; color: var(--red); } /* クライアントロゴティッカー TOPページ（index.php / index2.css）の .p-index2-partners__ticker と同じ実装。速度はロゴ数に依存しない px/s 指定で、JSから animation-duration を設定する。 */ .lp-partners__logos-wrap { display: flex; flex-direction: column; margin-top: 40px; } .lp-partners__ticker { overflow: hidden; width: 100%; } .lp-partners__ticker-track { display: flex; width: max-content; animation: lp-partners-ticker 1s linear infinite; animation-play-state: paused; } .lp-partners__ticker-item { display: flex; align-items: center; gap: 32px; padding-right: 32px; } .lp-partners__ticker-item img { height: 100px; width: auto; object-fit: contain; } @keyframes lp-partners-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ========================================================= case list ========================================================= */ .lp-cases { display: flex; flex-direction: column; gap: 24px; } .lp-case { display: flex; gap: 24px; align-items: flex-start; position: relative; } .lp-case:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .lp-case__thumb { width: 277px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; display: block; } .lp-case--link .lp-case__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 8px; } .lp-case--link { cursor: pointer; } .lp-case--link .lp-case__title a:focus-visible::after { outline: 2px solid var(--red); outline-offset: 2px; } .lp-case__cat { margin: 0 0 8px; font-size: 14px; color: var(--gray-light); } .lp-case__title { margin: 0 0 12px; font-size: 14px; font-weight: 700; line-height: 1.6; } .lp-case__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .lp-case__tags li { padding: 2px 10px; border: 1px solid var(--red); border-radius: 4px; color: var(--red); font-size: 12px; } .lp-case__date { margin: 0; font-size: 14px; color: var(--gray-light); } .lp-tagCloud { display: flex; align-items: flex-start; gap: 24px; margin-top: 40px; padding: 24px 32px; background: var(--bg-gray); border-radius: 12px; } .lp-tagCloud__title { display: flex; align-items: center; gap: 8px; width: 160px; flex: 0 0 auto; margin: 0; font-size: 20px; font-weight: 700; } .lp-tagCloud__list { display: flex; flex-wrap: wrap; gap: 8px 24px; } .lp-tagCloud__list a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; } .lp-tagCloud__list a:hover { color: var(--red); } /* ========================================================= price ========================================================= */ .lp-price { position: relative; } .lp-priceMain { position: relative; display: flex; align-items: center; gap: 80px; padding: 40px 60px; background: #fff; border: 2px solid var(--line); border-radius: 16px; overflow: hidden; } .lp-priceMain__img { width: 293px; flex: 0 0 auto; } .lp-priceMain__title { margin: 0 0 16px; font-size: 32px; font-weight: 700; color: var(--navy); } .lp-priceMain__text { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--gray); } .lp-priceMain__ribbon { position: absolute; top: 40px; right: -66px; width: 300px; margin: 0; padding: 10px 0; background: #e2493b; color: #fff; font-size: 18px; text-align: center; transform: rotate(35deg); transform-origin: center; } .lp-priceSub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; } .lp-priceSub__card { display: flex; align-items: center; gap: 32px; padding: 32px 40px; background: #fff; border: 2px solid var(--line); border-radius: 16px; transition: box-shadow .2s; } .lp-priceSub__card:hover { box-shadow: 0 8px 24px rgba(16, 24, 40, .08); } .lp-priceSub__card img { width: 64px; flex: 0 0 auto; } .lp-priceSub__title { display: block; margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--navy); } .lp-textLink { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-size: 16px; font-weight: 700; } .lp-textLink::after { content: ""; width: 6px; height: 6px; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); } /* ========================================================= support ========================================================= */ .lp-supports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; padding: 32px; background: #fff; border-radius: 16px; } .lp-support { display: flex; align-items: center; gap: 12px; } .lp-support img { width: 53px; flex: 0 0 auto; } .lp-support__name { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; } .lp-support__target { display: block; font-size: 14px; color: var(--gray-light); white-space: nowrap; } /* ========================================================= news ========================================================= */ .lp-news__head { position: relative; margin-bottom: 40px; text-align: center; } .lp-news__more { position: absolute; right: 0; bottom: 8px; font-size: 14px; font-weight: 700; color: var(--red); } .lp-news__more:hover { text-decoration: underline; } .lp-newsList li { border-bottom: 1px solid var(--line); } .lp-newsList a { display: flex; align-items: center; gap: 24px; padding: 24px 0; transition: opacity .2s; } .lp-newsList a:hover { opacity: .7; } .lp-newsList__date { font-size: 14px; color: var(--gray-light); flex: 0 0 auto; } /* カテゴリラベルの配色は TOPページ（index2.css の .p-index2-news__tag）と同じ */ .lp-newsList__cat { flex: 0 0 auto; padding: 2px 10px; border-radius: 4px; background-color: #FFE5E5; color: #BE123C; font-size: 12px; font-weight: 600; } .lp-newsList__cat.is-news { background-color: #DBEAFE; color: #1D4ED8; } .lp-newsList__cat.is-info { background-color: #FEF3C7; color: #92400E; } .lp-newsList__cat.is-seminar { background-color: #E6F7F5; color: #007A75; } .lp-newsList__cat.is-pickup { background-color: #F3E8FF; color: #6B21A8; } .lp-newsList__cat.is-press { background-color: #FFE5E5; color: #BE123C; } .lp-newsList__cat.is-media { background-color: #E0E7FF; color: #3730A3; } .lp-newsList__title { font-size: 18px; font-weight: 700; line-height: 1.55; } /* ========================================================= movie ========================================================= */ .lp-movies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .lp-movie__thumb { position: relative; display: block; border-radius: 12px; overflow: hidden; } .lp-movie__thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background-color .2s; } .lp-movie__thumb:hover::after { background: rgba(0, 0, 0, .12); } .lp-movie__title { margin: 16px 0 8px; font-size: 20px; font-weight: 700; } .lp-movie__text { margin: 0; font-size: 14px; line-height: 24px; color: var(--gray); } /* ========================================================= FAQ ========================================================= */ .lp-faq { display: flex; flex-direction: column; gap: 16px; } .lp-faq__item { background: #fff; border-radius: 12px; overflow: hidden; } .lp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 24px; font-size: 16px; font-weight: 700; text-align: left; } .lp-faq__q::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-top: 2px solid #9ca3af; border-right: 2px solid #9ca3af; transform: rotate(135deg); transition: transform .25s; } .lp-faq__item.is-open .lp-faq__q::after { transform: rotate(-45deg); } .lp-faq__a { display: none; padding: 20px 24px 24px; border-top: 1px solid var(--line); } .lp-faq__item.is-open .lp-faq__a { display: block; } .lp-faq__a p { margin: 0; font-size: 16px; line-height: 26px; } .lp-faq__a a { color: #1447e6; text-decoration: underline; } .lp-faq__more { margin-top: 32px; text-align: center; } /* ========================================================= contact ========================================================= */ .lp-contact { position: relative; padding: 72px 0; background: var(--navy); color: #fff; text-align: center; overflow: hidden; } .lp-contact__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .2; } .lp-contact__inner { position: relative; z-index: 2; } .lp-contact__title { margin: 0 0 16px; font-size: 48px; font-weight: 700; line-height: 1.25; } .lp-contact__text { margin: 0 0 32px; font-size: 20px; line-height: 1.7; } .lp-contact__btns { display: flex; justify-content: center; gap: 24px; } .lp-contact__btns .lp-btn { height: 56px; padding: 0 32px; font-size: 18px; } .lp-contact__btns .lp-btn--outline { border-color: #fff; } .lp-contact__btns .lp-btn--solid { background: #e8380d; } /* ========================================================= footer ========================================================= */ .lp-footer { padding: 64px 72px; background: var(--navy); color: #fff; } .lp-footer__inner { display: flex; gap: 64px; max-width: 1243px; margin: 0 auto; } .lp-footer__brand { width: 268px; flex: 0 0 auto; } .lp-footer__brand img { width: 96px; margin-bottom: 24px; } .lp-footer__mission { margin: 0 0 24px; font-size: 14px; line-height: 1.85; color: #d1d5dc; } .lp-footer__sns { display: flex; gap: 8px; } .lp-footer__sns a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #364153; font-size: 16px; } .lp-footer__sns a:hover { background: #4a5565; } .lp-footer__nav { display: flex; gap: 64px; flex: 1 1 auto; } .lp-footer__navTitle { margin: 0 0 16px; font-size: 18px; font-weight: 700; } .lp-footer__navList li + li { margin-top: 12px; } .lp-footer__navList a { font-size: 14px; color: #d1d5dc; } .lp-footer__navList a:hover { color: #fff; text-decoration: underline; } .lp-footer__login { display: inline-block; margin-left: 12px; padding: 2px 12px; border-radius: 99px; background: var(--red); color: #fff !important; font-size: 14px; font-weight: 700; } .lp-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1243px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid #1e2939; font-size: 12px; color: #99a1af; } .lp-footer__legal { display: flex; gap: 32px; } /* ========================================================= responsive ========================================================= */ @media (max-width: 1200px) { .lp-header { padding: 0 20px; gap: 16px; } .lp-gnav { gap: 20px; } /* 左余白と間隔だけ詰める。弧の形は変えず、写真エリアの右側で幅を吸収する */ .lp-hero { --lp-hero-pad: 40px; --lp-hero-lpad: 112px; --lp-hero-gap: 48px; } /* CTAがテキスト列に近づくので、ボタンから画像を外してその分だけ横幅を詰める */ .lp-cta-btn__img { display: none; } } /* 画像を外してもテキスト列に迫る幅では、CTAを縦積みにする。 bottom基準で配置しているので、下のボタンが従来の位置に残り上へ積み上がる。 */ @media (max-width: 1060px) { .lp-hero__cta { flex-direction: column; align-items: stretch; /* 幅は広い方のボタンに揃う */ } .lp-hero__cta .lp-cta-btn { justify-content: space-between; } } /* hero は 761px 以上では PC デザインを使うため、 PC / SP の切り替えではなく幅の詰めだけ行う（縦積みには切り替えない） */ @media (max-width: 960px) { .lp-hero { --lp-hero-lpad: 24px; --lp-hero-gap: 24px; --lp-hero-pad: 24px; } } @media (max-width: 960px) { .lp-section { padding: 64px 0; } .lp-section__title { font-size: 28px; } .lp-section__lead { font-size: 16px; } .lp-gnav, .lp-header__actions { display: none; } .lp-allinone__body { flex-direction: column; } .lp-allinone__mock { margin: 0 0 -24px; } .lp-allinone__cats { width: 100%; padding: 32px 20px 20px; } .lp-allinone__title { font-size: 24px; } .lp-solutions, .lp-reasons, .lp-movies, .lp-priceSub, .lp-supports { grid-template-columns: 1fr; } .lp-supports { grid-template-columns: repeat(2, 1fr); } .lp-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-tabs__btn { min-width: 0; } .lp-tabs__panel.is-active, .lp-tabs__panel--reverse { flex-direction: column; align-items: flex-start; } .lp-tabs__panel img { width: 100%; } .lp-otherGroup { flex-direction: column; align-items: flex-start; } .lp-otherGroup__title { width: auto; } .lp-otherGroup__list { grid-template-columns: 1fr; width: 100%; } .lp-otherItem { width: 100%; } .lp-stats { flex-direction: column; gap: 24px; padding: 24px; } .lp-case { flex-direction: column; } .lp-case__thumb { width: 100%; } .lp-tagCloud { flex-direction: column; } .lp-priceMain { flex-direction: column; gap: 24px; padding: 32px 24px; } .lp-priceMain__ribbon { display: none; } .lp-newsList a { flex-wrap: wrap; gap: 8px 16px; } .lp-newsList__cat { font-size: 10px; padding: 0 4px; line-height: 18px; } .lp-newsList__title { width: 100%; font-size: 16px; } .lp-news__head { text-align: left; } .lp-news__more { position: static; display: inline-block; margin-top: 8px; } .lp-contact__title { font-size: 28px; } .lp-contact__btns { flex-direction: column; } .lp-footer { padding: 48px 24px; } .lp-footer__inner, .lp-footer__nav { flex-direction: column; gap: 32px; } .lp-footer__brand { width: 100%; } .lp-footer__bottom { flex-direction: column; align-items: flex-start; } .lp-footer__legal { flex-wrap: wrap; gap: 16px; } } /* --------------------------------------------------------------- SP（Figma: SP版_260803 / TOP_SP_案A 375px） PC・タブレットの表示は変更せず、ここだけでSPの見た目を作っている --------------------------------------------------------------- */ @media (max-width: 600px) { body { overflow-x: hidden; } .lp-container { padding: 0 16px; } .lp-header { padding: 0 16px; } .lp-section { padding: 56px 0; } .lp-section__head { margin-bottom: 24px; } .lp-section__title { font-size: 22px; line-height: 1.4; } .lp-section__lead { margin-top: 12px; font-size: 14px; } .lp-section__tag { margin-bottom: 16px; padding: 5px 20px; font-size: 13px; } /* Figma(SP)の badge_achievement は月桂樹が文字の左右に並ぶ横方向オートレイアウト。 PCの「文字の上に重ねる」絶対配置を解除して、重ならないようにする */ .lp-badge { min-width: 0; flex: 1 1 0; height: auto; padding: 0; } .lp-badge__laurel { position: static; flex: 0 0 auto; width: 26px; } .lp-badge__text { min-width: 0; } .lp-badge__label { font-size: 13px; line-height: 18px; } .lp-badge__value { font-size: 25px; line-height: 30px; white-space: nowrap;} .lp-badge__unit { font-size: 12px; line-height: 17px; } /* ---------- all in one ---------- */ .lp-allinone { padding: 32px 0; } .lp-allinone__title { margin-bottom: 16px; padding: 0 16px; font-size: 20px; line-height: 1.5; } .lp-allinone__body { padding: 0 16px; } .lp-allinone__mock { width: 260px; margin: 0 0 -20px; } .lp-allinone__cats { padding: 24px 16px 16px; border-radius: 16px; } .lp-cat__title { margin-bottom: 6px; font-size: 15px; line-height: 24px; } .lp-cat__tags { gap: 6px; } .lp-cat__tags li { padding: 6px 12px; font-size: 12px; line-height: 20px; } /* ---------- mission ---------- */ .lp-mission__title { font-size: 22px; } .lp-mission__lead { margin-top: 16px; font-size: 13px; } /* SP用の図はセクション幅(375px)で書き出しているので、コンテナの左右パディング16pxを打ち消して画面いっぱいに表示する。画像は透明な余白を切り落としてあるので、間隔はそのまま指定できる */ .lp-mission__diagram { width: calc(100% + 32px); max-width: none; margin: 20px -16px 0; } /* ---------- solution ---------- Figma(SP) card_solution: 343px幅・角丸12・padding 32/16/24/16。課題の画像(78x90)と見出しは横並び、その下に三角 → 回答 → 補足を14px間隔で置く */ .lp-solutions { gap: 40px; padding-top: 24px; } .lp-solution__issue { display: flex; align-items: center; gap: 14px; padding: 32px 16px 0; text-align: left; margin: 0 auto; } .lp-solution__img { width: 78px; height: 90px; flex: 0 0 auto; margin: 0; } .lp-solution__img img { max-height: 90px; } .lp-solution__issueText { font-size: 17px; line-height: 25.5px; } /* 三角(36x14)は回答ブロックの上端から14pxの位置に置き、その下14pxから回答テキストが始まる（14 + 14 + 14 = 42px） */ .lp-solution__answer { padding: 42px 16px 24px; } .lp-solution__answer::before { top: 14px; width: 36px; height: 14px; /* PC用(36x29)を潰すと角丸が歪むので、SPの比率で描き直したマスクを使う */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 14'%3E%3Cpath d='M4.6 2H31.4L18 10.4Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 14'%3E%3Cpath d='M4.6 2H31.4L18 10.4Z' fill='%23fff' stroke='%23fff' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); } .lp-solution__answerText { margin: 0; font-size: 15px; line-height: 24px; } .lp-solution__note { margin-top: 14px; font-size: 12px; line-height: 21px; } /* ---------- feature tabs ---------- SPではタブを横スクロールのピルにして、パネルは「画像＋テキストカード」の縦積みにする */ .lp-tabs { border: 0; border-radius: 0; overflow: visible; } .lp-tabs__list { display: flex; gap: 8px; margin: 0 -16px 16px; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lp-tabs__list::-webkit-scrollbar { display: none; } .lp-tabs__btn { flex: 0 0 auto; width: auto; padding: 9px 18px; border: 1px solid var(--line-card); border-radius: 999px; font-size: 14px; white-space: nowrap; } .lp-tabs__btn::after { display: none; } .lp-tabs__btn.is-active { border-color: var(--red-active); } .lp-tabs__panel { padding: 0; background: none; } .lp-tabs__panel.is-active { display: block; } .lp-tabs__panel img { width: 100%; border-radius: 12px 12px 0 0; } .lp-tabs__panel > div { padding: 20px 16px 24px; background: var(--bg-gray); border-radius: 0 0 12px 12px; } .lp-tabs__panelTitle { font-size: 18px; } .lp-tabs__panelText { font-size: 14px; line-height: 24px; } /* パネルの下に「全何枚中の何枚目か」を示すドット。タップでも切り替えできる */ .lp-tabs__dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; } .lp-tabs__dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--line); transition: background-color .2s; } .lp-tabs__dot.is-active { background: var(--red-active); } /* ---------- other features ---------- */ .lp-others { padding-bottom: 48px; } .lp-otherGroup { gap: 12px; padding: 16px; border-radius: 12px; } .lp-otherGroup + .lp-otherGroup { margin-top: 16px; } .lp-otherGroup__title { font-size: 15px; } .lp-otherGroup__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lp-otherItem { gap: 6px; padding: 10px; font-size: 12px; } .lp-otherItem img { width: 20px; } /* ---------- reason / stats ---------- */ .lp-reasons { gap: 16px; } .lp-reason { padding: 0 20px 24px; } .lp-reason--pad { padding-top: 24px; } .lp-reason__img { height: 148px; } .lp-reason__img img { max-height: 148px; } .lp-reason__title { font-size: 17px; line-height: 26px; } .lp-reason__text { font-size: 13px; line-height: 23px; text-align: center; } .lp-reason .lp-badge__value { font-size: 34px; } /* 3つの実績は Figma どおり横並びのまま（960px の縦積み指定を戻す） */ .lp-stats { flex-direction: row; gap: 8px; margin-top: 24px; padding: 20px 8px; } .lp-stats__item { flex: 1 1 0; min-width: 0; } .lp-stats__label { font-size: 11px; } .lp-stats__value { font-size: 24px; white-space: nowrap;} .lp-stats__value span { font-size: 13px; } .lp-partners__logos-wrap { margin-top: 24px; } .lp-partners__ticker-item { gap: 16px; padding-right: 16px; } .lp-partners__ticker-item img { height: 64px; } /* ---------- case ---------- */ .lp-cases { gap: 32px; } .lp-case { gap: 12px; } .lp-case__cat { margin-bottom: 4px; font-size: 12px; } .lp-case__title { font-size: 14px; } .lp-case__date { font-size: 12px; } .lp-tagCloud { gap: 12px; margin-top: 32px; padding: 20px 16px; } .lp-tagCloud__title { width: auto; font-size: 16px; } .lp-tagCloud__list { gap: 8px 16px; } .lp-tagCloud__list a { font-size: 13px; } /* ---------- price ---------- */ .lp-priceMain { gap: 16px; padding: 24px 16px 32px; text-align: center; } .lp-priceMain__img { width: 200px; } .lp-priceMain__title { font-size: 24px; } .lp-priceMain__text { font-size: 14px; } /* リボンは Figma の SP でも表示する（カードは overflow:hidden で角に収まる） */ .lp-priceMain__ribbon { display: block; top: 22px; right: -68px; width: 240px; padding: 6px 0; font-size: 11px; } .lp-priceSub { gap: 16px; margin-top: 16px; } .lp-priceSub__card { flex-direction: column; gap: 12px; padding: 24px 16px; text-align: center; } .lp-priceSub__card img { width: 48px; } .lp-priceSub__title { margin-bottom: 4px; font-size: 18px; } .lp-textLink { font-size: 14px; } /* ---------- support ---------- */ .lp-supports { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; padding: 20px 16px; } .lp-support { gap: 8px; } .lp-support img { width: 32px; } .lp-support__name { font-size: 13px; white-space: normal; } .lp-support__target { font-size: 11px; white-space: normal; } /* ---------- news ---------- Figma は見出し（中央）→ 一覧 → 「一覧を見る」の順。 head を display:contents で分解して order で並べ替える */ .lp-news .lp-container { display: flex; flex-direction: column; } .lp-news__head { display: contents; } .lp-news .lp-section__title { order: 1; margin-bottom: 24px; text-align: center; } .lp-newsList { order: 2; } .lp-news__more { order: 3; position: static; margin: 24px auto 0; } .lp-newsList a { gap: 8px 12px; padding: 16px 0; } .lp-newsList__date { font-size: 12px; } .lp-newsList__title { font-size: 15px; } /* ---------- movie ---------- */ .lp-movies { gap: 32px; } .lp-movie__title { margin: 12px 0 8px; font-size: 17px; } .lp-movie__text { font-size: 13px; line-height: 23px; } /* ---------- FAQ ---------- */ .lp-faq { gap: 12px; } .lp-faq__q { gap: 12px; padding: 18px 16px; font-size: 15px; line-height: 1.5; } .lp-faq__a { padding: 16px; } .lp-faq__a p { font-size: 14px; line-height: 24px; } .lp-faq__more { margin-top: 24px; } /* ---------- contact / modal ---------- */ .lp-contact__title { font-size: 22px; } .lp-contact__text { font-size: 15px; } .lp-modal__panel { padding: 12px 12px 32px; } .lp-modal__title { margin-top: 12px; font-size: 18px; } .lp-modal__icon { margin-top: 16px; } .lp-modal__icon img { width: 88px; height: 88px; } .lp-modal__text { margin-top: 16px; font-size: 14px; line-height: 24px; } } @media (max-width: 500px) { .lp-modal__text { margin-left: 12px; margin-right: 12px; width: calc(100% - 24px); } } /* ========================================================= hero（ページ上部）は 760px 以下（スマホView）で SP デザインに切り替える。 761px 以上（PCView）は PC と同じ横並びデザイン（761〜960px は左余白と間隔だけ max-width:960px 側で詰めている） ========================================================= */ @media (max-width: 760px) { /* PC の横並び・楕円マスクを解除して SP の縦積みにする */ .lp-hero__badges { gap: 0; } .lp-hero__notes { flex-direction: column; align-items: flex-start; border-radius: 16px; } .lp-hero__cta { position: static; } .lp-cta-btn { justify-content: center; } .lp-cta-btn__img { display: block; } /* ---------- hero ---------- SPの並びは写真 → キャッチ → ロゴ → サブ → CTA → バッジ → 注記。マークアップ上は写真がテキスト列の後ろにあるため、 .lp-hero__body を display:contents にして order で並べ替えている */ .lp-hero { flex-direction: column; padding: 0 0 32px 12px; text-align: left; } .lp-hero__body { display: contents; } /* Figma(SP) image_heroArea: 359x277（左16px空け・右は画面端まで）。 PCと同じく楕円の窓で切り抜く。外側の楕円 534x279 を左端基準で置き（上下は枠からわずかにはみ出すので直線でカット）、写真は 592x278 を左から10pxずらした楕円で切り抜いて、左側だけにグレーの縁を出す */ /* 左端だけを緩い弧にし、上下・右端は直線でカットする。マスクの viewBox は枠の実寸(379x277)＝1単位1pxなので、パスの数値がそのまま px。写真(下の .lp-hero__slides)は外枠より右に10pxずらして、左側にだけグレーの縁を出す。外枠の弧: 上端 x=30 → 中央 x=2 → 下端 x=38（画面左からは +12px = 42/14/50px）写真の弧: 上端 x=40 → 中央 x=12 → 下端 x=48（画面左からは 52/24/60px） */ .lp-hero__visual { order: 1; width: calc(100% + 16px); height: 277px; margin: 0 -16px 0 0; border-radius: 0; overflow: hidden; -webkit-clip-path: none; clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 379 277' preserveAspectRatio='none'%3E%3Cpath d='M30 0C8 40 2 100 2 138.5C2 180 14 240 46 277L379 277L379 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0 / 379px 277px, linear-gradient(#000, #000) no-repeat 280px 0 / calc(100% - 280px) 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 379 277' preserveAspectRatio='none'%3E%3Cpath d='M30 0C8 40 2 100 2 138.5C2 180 14 240 46 277L379 277L379 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0 / 379px 277px, linear-gradient(#000, #000) no-repeat 280px 0 / calc(100% - 280px) 100%; } .lp-hero__slides { -webkit-clip-path: none; clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 379 277' preserveAspectRatio='none'%3E%3Cpath d='M40 0C18 40 12 100 12 138.5C12 180 24 240 56 277L379 277L379 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0 / 379px 277px, linear-gradient(#000, #000) no-repeat 280px 0 / calc(100% - 280px) 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 379 277' preserveAspectRatio='none'%3E%3Cpath d='M40 0C18 40 12 100 12 138.5C12 180 24 240 56 277L379 277L379 0Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 0 / 379px 277px, linear-gradient(#000, #000) no-repeat 280px 0 / calc(100% - 280px) 100%; } /* キャッチは写真の下端に重ねる（マイナスマージン＋z-index） */ /* .lp-hero は align-items:center のため、幅の違う要素は中央に寄ってしまう。キャッチ・ロゴ・サブは align-self:flex-start で左端（heroの左パディング）に揃える */ /* 開始位置はTOP画像の楕円の最左（写真マスク Ellipse148 の左端＝画像枠+10px）に合わせる。画像枠自体は heroの左パディング 12px の位置なので、画面左からは 22px */ .lp-hero__catch, .lp-hero__logo, .lp-hero__sub { align-self: flex-start; margin-left: 10px; } .lp-hero__catch { order: 2; position: relative; z-index: 2; justify-content: flex-start; gap: 6px; margin: -30px 0 14px 10px; font-size: 20px; line-height: 30px; background:#FFF; } .lp-hero__catch em { padding: 0 8px; } .lp-hero__logo { order: 3; width: 280px; margin: 0 0 12px 10px; } .lp-hero__sub { order: 4; margin: 0 0 0 10px; font-size: 13px; line-height: 1.6; } .lp-hero__badges { order: 6; justify-content: center; gap: 48px; margin: 20px 0 12px; } /* Figma(SP)の badge_achievement は月桂樹が文字の左右に並ぶ横方向オートレイアウト。 PCの「文字の上に重ねる」絶対配置を解除して、重ならないようにする。 reason セクションの .lp-badge には影響させないため hero 配下に限定 */ .lp-hero__badges .lp-badge { min-width: 0; flex: 1 1 0; height: auto; padding: 0; } .lp-hero__badges .lp-badge__laurel { position: static; flex: 0 0 auto; width: 26px; } .lp-hero__badges .lp-badge__text { min-width: 0; } .lp-hero__badges .lp-badge__label { font-size: 13px; line-height: 18px; } .lp-hero__badges .lp-badge__value { font-size: 25px; line-height: 30px; white-space: nowrap;} .lp-hero__badges .lp-badge__unit { font-size: 12px; line-height: 17px; } .lp-hero__notes { order: 7; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 90%; padding: 8px 12px; border-radius: 999px; margin-right: 12px; } .lp-hero__notes li { gap: 4px; font-size: 11px; white-space: nowrap; } .lp-hero__notes img { width: 14px; } .lp-hero__cta { order: 5; gap: 8px; padding: 20px 0 0; } .lp-cta-btn { height: 56px; gap: 10px; padding: 0 16px; font-size: 16px; } .lp-cta-btn--solid { gap: 10px; padding: 0 16px; } .lp-cta-btn__img--doc { width: 40px; height: 46px; } .lp-cta-btn__img--doc img { width: 58px; left: -8px; } .lp-cta-btn__img--devices { width: 38px; height: 48px; } .lp-cta-btn__img--devices img { width: 42px; } } @media (min-width: 1470px) { .lp-hero { --lp-hero-lpad: 16px; margin-left: calc((100% - 1280px) / 2); } }