@charset "utf-8"; /* ========================================================================= nimocle カード LP Figma: nimocle_FIX_260721.fig（SP 375 / PC 1280） SP ファースト。PC は 768px 以上、ワイドは 1080px 以上で切り替え。 ========================================================================= */ /* ---------------------------------------------------------------- tokens */ :root{ --c-text:#4c4948; --c-text-dk:#413d3c; --c-text-gy:#595757; --c-blue:#62b0e3; --c-blue-dk:#4a9fd8; --c-blue-bg:#a1d0ee; --c-blue-pale:#cbe4f5; --c-blue-lt:#d7ebfb; --c-blue-lt2:#ddf0ff; --c-gray-bg:#f2f1f2; --c-yellow:#ffe08a; --c-cta:#ffd700; --c-teal:#109999; --c-teal-lt:#bfe3e0; --c-orange:#df6217; --c-line:#d8d8d8; --grad-hero:linear-gradient(135deg,#a7d4f8 0%,#58a7e6 100%); --inner:34.5rem; --pc-inner:100rem; --radius:1.4rem; /* Noto Sans JP は Google Fonts から 40 以上のサブセットに分割配信されるため、 読み込み完了まではフォールバックで描画される。Android に標準搭載の Noto Sans CJK JP を先に置くと、その間も字幅がほぼ一致して崩れない。 iOS は Hiragino しか無いため、下の「約物ぶんの余裕」で吸収する。 */ --font:"Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; --font-num:"Barlow","Noto Sans JP",sans-serif; --header-h:5rem; } /* ------------------------------------------------- Web フォント読み込み中 Noto Sans JP は Google Fonts から 40 以上のサブセットに分割配信されるため、 モバイル回線では揃うまで時間がかかる。その間はフォールバック（iOS なら Hiragino）で描画され、約物（、。「」！）が全角のままになるぶん 1 行が 3〜17px 広がる。Figma で「ちょうど 1 行」に組んである箇所はそこで折り返す。 読み込み中だけ、その差ぶんの字間を詰めて行数を保つ。対象は実測で行数が 変わった箇所に限定する（body 全体に掛けると、もともと複数行の箇所が 逆に詰まって行数が減ってしまう）。 */ .fonts-loading .card-panel__title{letter-spacing:-.085em} .fonts-loading .always__title{letter-spacing:-.045em} .fonts-loading .usepoint__title{letter-spacing:-.02em} .fonts-loading .fcard__title{letter-spacing:-.03em} .fonts-loading .fcard__note, .fonts-loading .notes--fv li, .fonts-loading .notes-sec .notes li, .fonts-loading .spec-list__note, .fonts-loading .spec-list dd{letter-spacing:-.03em} /* ---------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box} /* ------------------------------------------------------------- scaling Figma の値をそのまま使えるよう 1rem = デザイン 10px にスケールさせる。 SP は 375px 基準、PC は 1280px 基準。 */ html{ font-size:calc(100vw / 37.5); /* 1rem = 10px @375px */ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); } @media (min-width:431px) and (max-width:1023px){ html{font-size:11.5px} /* 端末が広くても拡大しすぎない */ /* FV のビジュアル（spec ボックス＋カード）は 375px 設計の絶対配置。 この帯ではコンテナが全幅になるため 37.5rem に固定して中央に置く */ .fv__vis{width:37.5rem;margin-inline:auto} } /* PC レイアウトは 1024px 以上。1rem = 100vw/128 なので 1024px で 8px、1280px で 10px。 768〜1023px でこれを使うと 128rem（=1024px）が画面幅を超えて FV が切れるため、 その帯は SP レイアウトを中央に表示する。 */ @media (min-width:1024px){ html{font-size:clamp(8px, calc(100vw / 128), 10px)} /* 1rem = 10px @1280px */ } body{ margin:0; /* 1rem は 100vw 基準のためスクロールバー分だけ端が溢れる。それを抑える */ overflow-x:hidden; font-family:var(--font); font-weight:700; color:var(--c-text); background:var(--c-gray-bg); line-height:1.6; overflow-wrap:anywhere; word-break:normal; line-break:strict; /* Figma 側で HALT（約物半角）が有効。palt はひらがなまで詰めてしまい 文字幅が Figma より約 5% 狭くなるため halt を使う */ font-feature-settings:"halt" 1; /* text-wrap:pretty は使わない：新しい Safari(iOS18 系)の pretty は 段落全体を均等割りするため「右が空いているのに折り返す」表示になり、 未対応の旧 iOS と改行位置が変わってしまう（実機で崩れて見えた原因）。 どのブラウザでも同じ「詰めて折り返す」挙動に固定する */ text-wrap:wrap; } img,svg{max-width:100%;height:auto;vertical-align:middle} h1,h2,h3,p,dl,dd,dt,figure,ul,ol{margin:0;padding:0} ul,ol{list-style:none} /* body が 700 のため b/strong が bolder=900 になる。Figma に合わせ 700 を既定に */ b,strong{font-weight:700} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} a{color:inherit;text-decoration:none} table{border-collapse:collapse;width:100%} sup{font-size:.62em;vertical-align:super;line-height:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } .u-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .link{color:#1673c4;text-decoration:underline} .link:hover{opacity:.7} /* shared inner */ .offers__inner,.feature__head-inner,.feature__list,.always__inner, .example-sec__inner,.flow__inner,.cardinfo__inner,.faq__inner,.notes-sec__inner, .hp-link__inner,.header__inner{ width:min(100% - 3rem,var(--inner)); margin-inline:auto; } /* shared section heads */ .sec-eyebrow{text-align:center;font-size:1.8rem;line-height:1.3;margin-bottom:.6rem} /* 見出し左右の斜線は Figma では長短 2 本 1 組（左 9x12.5：長い線が右、 短い線が左下。右側はその左右反転）。1 本の擬似要素では作れないので SVG マスクで 2 本ぶんの形を抜き、色は currentColor をそのまま使う。 */ .sec-eyebrow span{ position:relative;display:inline-block;padding:0 1.5rem; --slash:url('data:image/svg+xml;utf8,'); } .sec-eyebrow span::before,.sec-eyebrow span::after{ content:"";position:absolute;top:50%;width:.9rem;height:1.25rem; background:currentColor; -webkit-mask:var(--slash) no-repeat center/contain; mask:var(--slash) no-repeat center/contain; transform:translateY(-50%); } .sec-eyebrow span::before{left:0} .sec-eyebrow span::after{right:0;transform:translateY(-50%) scaleX(-1)} .sec-title{text-align:center;font-size:2.4rem;line-height:1.4;letter-spacing:.04em} .sec-title--blue{color:var(--c-blue)} /* notes */ /* 注釈は「※」をぶら下げる。flex にすると
や入れ子の