@charset "utf-8";

/*
LP_QUOcardPay  style.css
Figma: U3KAyqWM6ViYDlNoIhwoYd / design5 (419:1443)
font-family: 'Zen Kaku Gothic New', sans-serif;  (本文・見出し)
font-family: 'Outfit', sans-serif;               (数字・電話番号・STEP など)
*/

/* **************************************************************** */
/* デザイントークン（Figma variables）
*/
:root {
    --c-main:      #0C5CDD;   /* メインカラー */
    --c-title:     #1A4589;   /* タイトルカラー */
    --c-text:      #222222;   /* テキストカラー */
    --c-gray:      #888888;   /* グレーテキスト */
    --c-accent:    #ED3453;   /* アクセント */
    --c-second:    #0EA5A3;   /* セカンダリ */
    --c-base:      #FAFBFE;   /* ベースカラー */
    --c-bg-gray:   #F5FAFF;   /* 背景グレー */
    --c-bg-red:    #FFF4F6;   /* 赤背景 */
    --c-navy:      #042D70;   /* MV pill */
    --c-white:     #FFFFFF;
    --c-line:      #C8CFDA;
    --grad-blue:   linear-gradient(90deg, #0C5CDD 0%, #00B4D8 100%);   /* 青グラデ（各セクションで上書き可） */

    --ff-jp:  'Zen Kaku Gothic New', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    --ff-num: 'Outfit', 'Zen Kaku Gothic New', sans-serif;

    --fs-h2:   36px;
    --fs-h3:   28px;
    --fs-h4:   18px;
    --fs-body: 16px;
    --fs-mini: 14px;

    --w-inner:   1300px;
    --r-pill:    999px;
    --shadow-bar:  0 0 20px rgba(0, 0, 0, 0.15);   /* Figma: stdDeviation 10 = CSS blur 20 */

    --header-top: 18px;

    /* Figma design5.svg <defs> から採取した正確なグラデーション */
    --grad-mv:     linear-gradient(74.624deg, #3F87FA 0%, #6EE0FF 30.8%, #1467EB 83.7%);
    --grad-price:  linear-gradient(83.445deg, #3F87FA 0%, #6EE0FF 30.8%, #1467EB 83.7%);
    --grad-band:   linear-gradient(90deg, #D2E2FD 0%, #CDFFFC 61.5%, #DCF9F9 100%);
    --grad-circle: linear-gradient(90deg, #D2E2FD 0%, #CDFFFC 100%);
}

/* **************************************************************** */
/* ベース
*/
html {
    scroll-behavior: auto;
    overflow-x: hidden;
}
/* --------------------------------------------------------------
   PC レイアウトは 1300px 固定。ビューポートがそれより狭いときは
   組み直さず、ページ全体を等比で縮小する（縦だけ伸びるのを防ぐ）。
   1 行目は calc の型演算に未対応なブラウザ向けのフォールバック。
   768px 以下は SP レイアウトに切り替わるので responcive.css で 1 に戻す。
   -------------------------------------------------------------- */
body {
    zoom: 1;                                                  /* 型演算に未対応な環境 */
    zoom: min(1, calc(100vw / 1300px));                       /* CSS だけの近似（100vw はスクロールバーを含む） */
    zoom: var(--page-zoom, min(1, calc(100vw / 1300px)));     /* JS が正確な値を入れる */
}
body {
    font-family: var(--ff-jp);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.06em;
    color: var(--c-text);
    background: var(--c-white);
    text-align: left;
    min-width: auto;
    margin: 0 auto;
    overflow-x: hidden;
    /* Figma は palt(プロポーショナル字形)を使っていない。入れると和文が約 24% 詰まる */
    font-feature-settings: normal;
    /* Figma は厳格な禁則。既定だと「活用シ／ーン」のように長音・小書きが行頭に来る */
    line-break: strict;
    -webkit-font-smoothing: antialiased;
}
.inner {
    max-width: var(--w-inner);
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
    margin: 0;
    padding: 0;
}
ul, ol {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
a {
    color: inherit;
    text-decoration: none;
    transition: .2s;
}
a:hover {
    opacity: .8;
}
em {
    font-style: normal;
}
.num {
    font-family: var(--ff-num);
}
.accent {
    color: var(--c-accent);
}
.main {
    color: var(--c-main);
}
main {
    display: block;
    position: relative;
}
section {
    position: relative;
}

/* **************************************************************** */
/* 共通コンポーネント
*/

/* 赤いピルCTA（無料相談 / 送信する） */
.btn_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;         /* Figma: ラベルとアイコンの間隔 */
    min-width: 200px;
    padding: 11px 17px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--c-white);
    font-family: var(--ff-jp);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.45;
    white-space: nowrap;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    box-sizing: border-box;
}
.btn_cta:hover {
    opacity: .85;
}
.btn_cta:after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url(../images/icon_chevron.svg) no-repeat center / contain;
    transform: rotate(90deg);
}
.btn_cta.btn_lg {
    font-size: 28px;   /* Figma: MV / CV の CTA はどちらも 28px。
                          幅・高さ・余白は各インスタンス側で Figma 実寸を指定する */
}

/* 白抜きアウトラインボタン（詳細を見る など） */
.btn_outline {                    /* Figma: 202.4 × 55、枠 2px #FFFDFD */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 202.4px;
    height: 55px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid #FFFDFD;
    border-radius: 27.5px;
    background: transparent;
    color: var(--c-white);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.btn_outline:after {
    content: "";
    display: inline-block;
    width: 7.4px;                 /* Figma: icon_11 は 7.4 × 12 の右向きシェブロン */
    height: 12px;
    background: url(../images/icon_chevron_right.svg) no-repeat center / contain;
}

/* セクション見出し（青） */
.sec_ttl {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.444;      /* Figma: 36px の行ボックスが 52px */
    letter-spacing: 0.02em;  /* Figma: h2 は 0.72px = 0.02em */
    color: var(--c-main);
    text-align: center;
}
.sec_lead {
    margin-top: 3.88px;      /* Figma: 見出し ↔ リードのベースライン差 35.08px */
    text-align: center;
    font-size: var(--fs-body);
    line-height: 1.6;
}
/* ＼ 見出し ／ 装飾（dist / industry） */
.ttl_slash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
/* flex コンテナ直下だとテキストと <em> が別々のフレックスアイテムになり、
   gap の分だけ離れる／改行される。1 つのアイテムにまとめて防ぐ。 */
.ttl_slash .ttl_txt {
    display: block;
}
.ttl_slash .ttl_txt br{
    display: none;
}
.ttl_slash:before,
.ttl_slash:after {
    content: "";
    display: block;
    width: 2px;
    height: 34px;
    background: currentColor;
    transform: rotate(-30deg);
}
.ttl_slash:after {
    transform: rotate(30deg);
}

/* 注釈テキスト */
.note {
    font-size: var(--fs-mini);
    line-height: 1.6;
    color: var(--c-gray);
}

/* ピル（青塗り） */
.pill {
    display: inline-block;
    padding: 6px 20px;
    border-radius: var(--r-pill);
    background: var(--c-main);
    color: var(--c-white);
    font-weight: 700;
    line-height: 1.5;
}

/* タグ（青枠） */
.tag {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--c-second);
    border-radius: 3px;
    box-sizing: border-box;
    color: var(--c-second);
    font-size: var(--fs-mini);
    line-height: 23px;        /* Figma: タグの高さ 33px */
    letter-spacing: 0.01em;
    background: var(--c-white);
}

/* 吹き出し（黄） */
.bubble_yellow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #FFF06B;
    color: var(--c-text);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

/* スクロール表示アニメーションはanimation.css / common.js を使用 */

/* **************************************************************** */
/* 以下、各セクションのスタイル
*/

/* **************************************************************** */
/* ヘッダー
*/
.site_head {
    position: fixed;
    top: var(--header-top);
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 20px;
}
.head_bar {
    max-width: 1299px;
    margin: 0 auto;
    padding: 20px;
    background: var(--c-white);
    border-radius: 43px;
    box-shadow: var(--shadow-bar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: padding .2s;
}
.site_head.is-scrolled .head_bar {
    padding: 12px;
}
.head_bar .logo {
    flex-shrink: 0;
    line-height: 0;
}
.head_bar .logo img {
    width: 286px;
    height: auto;
}
.head_util {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}
.u_tel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.u_tel_num {
    font-family: var(--ff-num);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--c-text);
}
.u_tel_time {
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--c-text);
}
.u_tel_time .jp {
    font-size: 11px;
}
.u_tel_time .num {
    font-family: var(--ff-num);
    font-size: 13px;
}
.head_cta {
    min-width: 200px;
    padding: 11px 17px;
}

/* **************************************************************** */
/* MV
*/
.mv {
    position: relative;
    height: 695px;                 /* Figma: グラデ帯 1920x695 */
    overflow: visible;             /* Figma: スマホが帯の下端を 67.5px はみ出す */
}
.mv_bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--grad-mv);
}
.mv_deco {
    /* Figma の装飾グループ(Group 30, x333〜1587 / y0〜695)を SVG のまま使う。
       円・リング・波・ドットを CSS で近似していたが、形と濃度が合わないため差し替えた。 */
    position: absolute;
    top: 0;
    left: 50%;
    width: 1254px;
    height: 695px;
    margin-left: -627px;
    background: url(../images/bg_mv_deco.svg) no-repeat left top / 1254px 695px;
    pointer-events: none;
}

.mv_inner {
    position: relative;
    z-index: 2;
    height: 100%;
}
.mv_text {
    position: absolute;
    left: 21px;   /* .inner の padding 20px + Figma の 1px */
    top: 199px;
    width: 627px;
    z-index: 6;   /* 幅が狭いとき台紙がテキストの下に潜るように最前面へ */
    color: var(--c-white);
}
.mv_sub {
    font-size: 26px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
    text-shadow: 2px 2px 5px rgba(12, 47, 77, 0.5);
}
.mv_catch {
    margin-top: 15px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-shadow: 2px 2px 5px rgba(12, 47, 77, 0.5);
}
.mv_pills {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 10px 15px;
    max-width: 452px;
    margin-top: 15px;
}
.mv_pills li {
    padding: 5px 20px;
    border-radius: 50px;
    background: var(--c-navy);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
}
.mv_cta {
    margin: 43.5px 0 0 -1.5px;     /* Figma: 白枠外周 (329.5, 574.5) */
    width: 442px;                  /* 436 + 白枠 3px×2 */
    height: 84px;                  /*  78 + 白枠 3px×2 */
    min-width: 0;
    padding: 0 30px;
    border: 3px solid var(--c-white);
    border-radius: 100px;
    font-size: 28px;
    letter-spacing: 0.02em;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(4, 4, 4, 0.15);
}
.mv_cta:after {
    width: 24px;
    height: 24px;
}
/* ビジュアル：Figma 座標そのまま（コンテンツ左端 x330 基準） */
.mv_visual {
    position: absolute;
    right: 20px;
    pointer-events: none;
    bottom: -60px;
}


/* **************************************************************** */
/* メリット
*/
.merit {
    position: relative;
    margin-top: 114px;   /* Figma: MV 帯下端 695 → メリット帯 809 */
    padding: 120px 0;
    z-index: 0;
}
.merit:before {
    content: "";
    position: absolute;
    left: 0;
    right: calc(50% - 750px);   /* コンテンツ右端 +120px。1920 で 210px、狭いときは全幅 */
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--grad-band);
    border-radius: 0 10px 10px 0;
}
.merit_circle {
    position: absolute;
    left: calc(50% - 411px);   /* コンテンツ左端 +219px */
    top: 37px;
    z-index: -1;
    width: 242px;
    height: 239px;
    border-radius: 50%;
    background: linear-gradient(2.738deg, #F6FDFF 0%, #CAFDFF 80.3%);
}
.merit_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    margin-top: 60px;
}
.merit_item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;                       /* Figma は要素ごとに間隔が違うので個別指定する */
    padding: 30px 23px 40px;      /* Figma: 本文の折返し幅 250px（330+2+23 〜 630-2-23）*/
    background: var(--c-white);
    border: 2px solid var(--c-main);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.merit_num {                      /* Figma: 34.94px の円を 1.807px ずらして 2 枚重ねる */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34.943px;
    height: 34.943px;
    font-size: 18.461px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 1.807px;       /* Figma: バッジ枠は 36.75 = 34.943 + ずらし分 */
    z-index: 0;                   /* :before(z-index:-1) をカード背景より上に留める */
    background: url('../images/ico_merit-num.png') no-repeat center;
    background-size: contain;
    padding-right: 1px;
}
.merit_ttl {
    margin-top: 10px;             /* Figma: バッジ下端 68.75 → タイトル 78.75 */
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;            /* Figma: 行ボックス 24 */
    letter-spacing: 0.02em;
    color: var(--c-accent);
    text-align: center;
    height: 75px;
}
.merit_sub {
    display: block;
    margin-bottom: 3px;           /* Figma: サブ ↔ メイン 3px */
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;            /* Figma: 行ボックス 23 */
    letter-spacing: 0.03em;
    color: var(--c-title);
}
.merit_ttl_rev .merit_sub {
    margin: 3px 0 0;
}
.merit_txt {
    margin-top: 30px;             /* Figma: タイトル群 ↔ 本文 30px */
    width: 100%;
    font-size: 16px;
    line-height: 25.667px;
    letter-spacing: 0.01em;
}
.merit_txt em {
    font-weight: 700;
    font-style: normal;
    color: var(--c-title);
}
/* イラスト：Figma は本文下端からの間隔も大きさもカードごとに違う */
.merit_fig {
    margin-top: 10px;
    line-height: 0;
    text-align: center;
}
.merit_fig img {
    width: auto;
    max-width: none;
}
.merit_item:nth-child(1) .merit_fig      {margin-top: 20px;}
.merit_item:nth-child(1) .merit_fig img  {width: 238px; height: auto;}
.merit_item:nth-child(2) .merit_fig img  {width: 222.898px; height: auto;}
.merit_item:nth-child(5) .merit_fig      {margin-top: 30px;}
.merit_item:nth-child(5) .merit_fig img  {width: 110.420px; height: auto;}
.merit_item:nth-child(6) .merit_fig      {margin-top: 30px;}
.merit_item:nth-child(6) .merit_fig img  {width: 154.696px; height: auto;}
.merit_item:nth-child(7) .merit_fig img  {width: 155px; height: auto;}

/* 活用例（カード 3・4・8） */
.merit_ex {
    width: 100%;
    margin-top: 10px;
}
.merit_ex_head {
    display: flex;
    align-items: center;
    height: 27px;
}
.merit_ex_head:after {            /* Figma: ラベル右 5px から右端まで伸びる罫線 */
    content: "";
    flex: 1;
    height: 1px;
    margin-left: 5px;
    background: #B7E7F1;
}
.merit_ex_ttl {
    flex-shrink: 0;
    width: 53px;
    height: 27px;
    padding: 2px 5px;
    box-sizing: border-box;
    background: #FDEF87;
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0.01em;
    text-align: center;
}
.merit_ex_body {
    position: relative;
    margin-top: 5px;              /* Figma: ラベル行下端 27 → リスト 32 */
}
.merit_ex ul {
    font-size: 11px;              /* Figma: 活用例リストは 11px */
    line-height: 17.667px;
    letter-spacing: 0.01em;
}
.merit_ex ul li {
    position: relative;
    padding-left: 11px;
}
.merit_ex ul li:before {
    content: "・";
    position: absolute;
    left: -1px;
}
.merit_ex_fig {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 0;
}
.merit_ex_fig img {
    width: 100%;
    height: 100%;
}
/* 図は absolute なので高さを持たない。Figma のブロック高＝max(リスト, 図) を min-height で確保する */
.merit_item:nth-child(3) .merit_ex_body   {min-height: 80.253px;}
.merit_item:nth-child(4) .merit_ex_body   {min-height: 53.578px;}
.merit_item:nth-child(8) .merit_ex_body   {min-height: 106px;}
.merit_item:nth-child(3) .merit_ex_body ul {width: 169.363px;}
.merit_item:nth-child(3) .merit_ex_fig    {width: 70.637px;  height: 80.253px;}
.merit_item:nth-child(4) .merit_ex_body ul {width: 144px;}
.merit_item:nth-child(4) .merit_ex_fig    {width: 52px;      height: 53.578px;}
.merit_item:nth-child(8) .merit_ex_body ul {width: 250px;}
.merit_item:nth-child(8) .merit_ex_fig    {width: 82.757px;  height: 53px;}

/* **************************************************************** */
/* 配布方法
*/
.dist {
    padding: 61px 0 0;   /* Figma: メリット帯下端 2047.75 → 2108.99 */
}
.dist .sec_ttl em {
    color: var(--c-accent);
}
.dist_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 1258px;          /* Figma: 327〜1585（コンテンツ中央より 3px 左） */
    margin: 60px 0 0 -3px;
}
.dist_col {
    position: relative;
    border-radius: 3px;
    background: var(--c-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.dist_badge {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: #FDEF87;
    font-size: 20px;
    font-weight: 700;
    line-height: 29px;       /* Figma: 2 行のベースライン差 29px */
    letter-spacing: 0.02em;
    text-align: center;
    color: #000000;
}
.dist_badge:after {          /* Figma: 吹き出しの尻尾（Vector 19 / 19_2） */
    content: "";
    position: absolute;
    width: 14px;
    height: 13px;
    background: #FDEF87;
}
.dist_col:nth-child(1) .dist_badge:after {
    left: 77.419%;           /* 124px 基準。SP で縮んでも比率を保つ */
    top: 81.452%;
    -webkit-clip-path: polygon(100% 100%, 78.571% 0, 0 50%);
    clip-path: polygon(100% 100%, 78.571% 0, 0 50%);
}
.dist_col:nth-child(2) .dist_badge:after {
    left: 23.387%;
    top: 90.323%;
    -webkit-clip-path: polygon(0 100%, 21.429% 0, 100% 50%);
    clip-path: polygon(0 100%, 21.429% 0, 100% 50%);
}
/* Figma は本文を中央揃えではなく固定 x に左揃えし、「！」は本文とは別の
   回転付き要素として置いている。中央揃えのままだと「！」のぶん行が左へずれる。 */
.dist_badge > span {
    position: absolute;
    top: 27.516%;            /* Figma: バッジ上端 +34.12px（124px 基準） */
    display: block;
    text-align: left;
    white-space: nowrap;
}
.dist_badge em {
    position: absolute;
    top: 48.387%;            /* Figma: バッジ上端 +60px */
    display: block;
    font-style: normal;
    line-height: 31.24px;    /* Figma: 回転枠内のベースライン y=23.22 */
    transform-origin: 0 0;
    transform: rotate(12.2717deg);
}
.dist_col:nth-child(1) .dist_badge > span {left: 25%;}      /* Figma: x=402（バッジ左 +31） */
.dist_col:nth-child(2) .dist_badge > span {left: 21.774%;}  /* Figma: x=1478（バッジ左 +27） */
.dist_col:nth-child(1) .dist_badge em {left: 75.939%;}      /* Figma: x=465.164 */
.dist_col:nth-child(2) .dist_badge em {left: 71.903%;}      /* Figma: x=1540.16 */
.dist_col:nth-child(1) .dist_badge {left: 44px;  top: -85px;}   /* Figma: カード内側左上、39px 重なり */
.dist_col:nth-child(2) .dist_badge {right: 10px; top: -109px;}  /* Figma: カード内側右上、15px 重なり */
.dist_bar {
    padding: 10px;           /* Figma: バー高さ 61px = 10 + 41 + 10 */
    line-height: 1.464;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, #1E66D9 0%, #2D7EFF 100%);
    color: var(--c-white);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
.dist_body {
    padding: 32px 32px 27.3px;   /* Figma: 画像 (359,2365) はカード左端 327 から 32px、下は 27.3px */
}
/* Figma の画像フィルは回転 22.4°・スキュー 4.5° を含むため、
   object-fit では再現できない。元画像を原寸で置き、
   Figma の pattern matrix を px 換算した matrix() をそのまま適用する。 */
.dist_body figure {
    position: relative;
    height: 241.704px;
    overflow: hidden;
}
.dist_body figure img {
    position: absolute;
    left: 0;
    top: 0;
    width: 1376px;
    height: 768px;
    max-width: none;
    transform-origin: 0 0;
}
.dist_col:nth-child(1) .dist_body figure img {
    transform: matrix(0.727211, 0.130788, -0.127817, 0.710682, -205.001, -221.039);
}
.dist_col:nth-child(2) .dist_body figure img {
    transform: matrix(0.519247, 0.093386, -0.091265, 0.507450, -74.104, -137.748);
}
.dist_body figure {
    text-align: center;
}
.list_dot {
    margin-top: 25.7px;      /* Figma: 画像下端 2606.69 → 1 行目の行ボックス上端 */
}
.list_dot li {
    position: relative;
    padding-left: 13px;      /* Figma: 中黒 x359 / 本文 x372 */
    line-height: 34px;       /* Figma: 行の送りが 34px */
    letter-spacing: 0.01em;
}
.list_dot li:before {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 15.2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4B5563;
}

/* **************************************************************** */
/* オリジナルデザイン
*/
.original {
    padding: 31px 0 0;   /* Figma: 配布方法下端 2795.69 → 2827 */
}
/* Figma のクラスタ 1062.397 x 537.589 をそのまま再現する */
.original_inner {
    position: relative;
    max-width: 1102.397px;   /* クラスタ 1062.397 + 左右 20px */
    width: 100%;
    height: 537.589px;
    padding: 0 20px;
}
.original_txt {
    position: absolute;
    left: 33.2px;        /* Figma: 本文 x=442 */
    top: 149px;
    width: 425px;
    z-index: 2;   /* 幅が狭いとき、端末がテキストの下に潜るように */
}
.original_ttl {
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.02em;
}
.original_ttl .wave {
    position: relative;
    font-style: normal;
    color: var(--c-accent);
}
.original_ttl .wave:after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -12px;
    height: 12.443px;
    background: url(../images/img_wave_red.svg) no-repeat center bottom / 100% 100%;
}
.original_txt .original_lead {
    margin-top: 55px;   /* Figma: 見出し 2 行目下端 → 本文 1 行目ベースライン 3154.22 */
    letter-spacing: 0.01em;
}
.original_txt .original_lead p + p {
    margin-top: 10px;
}
.original_visual {
    position: absolute;
    right: 20px;  /* Figma: クラスタ 1062.397 の右端に接する（left 479 と同値） */
    top: 0;
    width: 583.397px;
    max-width: 100%;
    height: 537.589px;
}

/* **************************************************************** */
/* 使い方 3ステップ
*/
.howto {
    margin-top: 30px;    /* 前の余白は帯の外（Figma: 3364.59 → 3395） */
    padding: 59px 0 88px;/* Figma: 帯上端 3395 → 見出し ink 3464 / バナー下端 4468 → 帯下端 4556 */
    background: var(--c-base);
}
.howto .inner {
    max-width: 1184px;   /* Figma: コンテンツ幅 1144 */
}
.howto_head {
    text-align: center;
}
.howto_bracket {
    display: inline-block;
    position: relative;
    padding-bottom: 39.138px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-title);
}
.howto_bracket:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 444px;
    height: 37.138px;
    margin-left: -222px;
    background: url(../images/img_howto_bracket.svg) no-repeat center top / contain;
}
.howto_pills {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;                    /* Figma: ピル間 42 */
    margin-top: 28px;             /* Figma: ブラケット下端 3535.14 → ピル上端 3565.14 */
}
.howto_pills li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 153px;                 /* Figma: ピルは 3 枚とも 153 × 58 */
    height: 58px;
    border-radius: var(--r-pill);
    background: var(--c-main);
    color: var(--c-white);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.howto_pills li + li:before {
    content: "・";
    position: absolute;
    left: -21px;                  /* ギャップ 42 の中央 */
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--c-title);
}
.howto_ttl {
    margin-top: 8px;              /* Figma: ピル下端 3623.14 → 見出し ink 3644 */
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-title);
}
.howto_steps {
    display: grid;
    grid-template-columns: repeat(3, 328px);  /* Figma: 列 328 / 間隔 80 */
    gap: 80px;
    justify-content: center;
    margin-top: 56px;             /* Figma: 見出し ink 下端 3678 → 円上端 3745.14 */
}
.howto_step {
    position: relative;
    width: 328px;
    height: 334px;                /* Figma: 円 328 + STEP1 のイラストのはみ出し 6 */
    padding: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.howto_step:before {              /* Figma: 円 328 角・水平グラデーション */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 328px;
    height: 328px;
    border-radius: 50%;
    background: linear-gradient(90deg, #D2E2FD 0%, #CDFFFC 61.5385%, #DCF9F9 100%);
}
.step_num {
    position: absolute;
    left: 7px;                    /* Figma: 円左上から (+7, +3) */
    top: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    box-sizing: border-box;
    border: 1px solid var(--c-main);
    border-radius: 50%;
    background: var(--c-white);
    color: var(--c-main);
}
.step_label {
    font-size: 11px;
    font-weight: 700;
    line-height: 12.94px;         /* Figma: ベースライン バッジ上端 +21.29 */
    letter-spacing: 0.01em;
}
.step_num .num {
    font-size: 30.6429px;
    font-weight: 700;
    line-height: 25.78px;         /* Figma: ベースライン バッジ上端 +48.12 */
    letter-spacing: 0.01em;
}
.howto_step h3 {
    position: absolute;
    left: 0;
    right: 0;
    top: 61.1px;                  /* Figma: ベースライン 円上端 +83.7 */
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.02em;
    color: #222222;
}
/* イラスト：Figma は STEP ごとに大きさも位置も違うので個別に絶対配置する */
.howto_step figure {
    display: block;
    margin: 0;
    position: relative;
    margin-top: 60px;
}

.howto_note {
    max-width: 893px;             /* Figma: 注記は 2 行（x 511〜1400）。890 だと 1 文字ぶん足りない */
    margin: 54px auto 0;          /* Figma: ステップ下端 4079.14 → 注記 ink 4138 */
    letter-spacing: 0.01em;       /* body の 0.06em を継承すると 3 文字ぶん早く折り返す */
    text-align: left;
}
.howto_note a{
    text-decoration: underline;
}
.shop_bnr {
    position: relative;
    display: block;
    height: 240px;                /* Figma: 1144 × 240 */
    margin-top: 50px;             /* Figma: 注記 ink 下端 4176 → バナー上端 4228 */
    padding: 0;
    border-radius: 0;             /* Figma: 角丸なし */
    background: var(--c-main);
    color: var(--c-white);
    overflow: hidden;
}
.shop_bnr:before {                /* Figma: 直径 618 の明るい円を左上に置いて切る */
    content: "";
    position: absolute;
    left: -269px;
    top: -282px;
    width: 618px;
    height: 618px;
    border-radius: 50%;
    background: #397FEE;
}
.shop_bnr_txt {
    position: relative;
    padding: 26.95px 0 0 50px;    /* Figma: h3 ベースライン バナー上端 +58.63 */
}
.shop_bnr h3 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}
.shop_bnr p {
    margin-top: 24.08px;          /* Figma: 本文 1 行目ベースライン +104.61 */
    font-weight: 700;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.03em;
}
.shop_bnr .btn_outline {
    position: absolute;
    left: 891.6px;                /* Figma: バナー左上から (+891.6, +155.14) */
    top: 155.14px;
}

/* **************************************************************** */
/* 会員登録不要
*/
.noreg {
    padding: 60px 0 0;   /* Figma: 使い方下端 4556 → 4616 */
}
.noreg_ttl {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    margin-top: 11px;
    padding: 10px 50px;
    border-radius: 36px;
    line-height: normal;   /* Figma: ピル高さ 72px（36px × normal + 上下 10px） */
    background: linear-gradient(90deg, #1E66D9 0%, #2D7EFF 100%);
    color: var(--c-white);
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
/* 4 列は Figma でブロブ・アイコン・見出しがそれぞれ独立した座標を持つので、
   列ごとに箱を作って中を絶対配置する。基準は列の左上（＝見出しの行ボックス上端）。 */
.noreg_list {
    position: relative;
    display: block;
    width: 1035px;
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
}
.noreg_list li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.noreg_list h3 {
    font-size: 19.7946px;
    font-weight: 500;
    line-height: 18.8px;
    letter-spacing: 0.01em;
    color: #000000;
    text-align: center;
}
.noreg_list h3 em {
    font-weight: 700;
    font-style: normal;
    color: var(--c-accent);
}


.noreg_note {
    position: relative;
    left: 2px;                     /* ブロックを 5px 広げたぶんの中央ずれを戻す */
    max-width: 770px;              /* Figma のブロックは 765 だが、注記の最後の 1 文字が入らない */
    margin: 53.57px auto 0;        /* Figma: 列下端 4967 → 本文 1 行目 */
    letter-spacing: 0.01em;        /* body の 0.06em を継承すると注記が 2 行になる */
}
.noreg_note p {
    line-height: 1.6;
}
.noreg_note .note {
    margin-top: 5.68px;            /* Figma: 本文下端 5071.77 → 注記 5077.45 */
    color: var(--c-text);
}
/* **************************************************************** */
/* 活用シーン
*/
/* .ttl_slash は箱の高さが違うので配布方法だけ従来値のまま */
.dist .sec_lead {
    margin-top: 25px;
}
.scene {
    position: relative;
    margin-top: 72px;   /* Figma: 会員登録不要の注記下端 5099.85 → 帯 5172 */
    padding: 122px 0 120px;
    overflow: hidden;
    z-index: 0;
}
.scene:before {
    content: "";
    position: absolute;
    left: calc(50% - 745px);   /* コンテンツ左端 −115px。1920 で 215px */
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: var(--grad-band);
    border-radius: 10px 0 0 10px;
}
.scene_circle {
    position: absolute;
    left: calc(50% + 100px);       /* コンテンツ左端 +730px */
    top: 52px;
    z-index: -1;
    width: 242px;
    height: 239px;
    border-radius: 50%;
    background: linear-gradient(2.738deg, #F6FDFF 0%, #CAFDFF 80.3%);
}
.scene_grid {
    display: grid;
    grid-template-columns: 300px 299px 299px 300px;  /* Figma: 1258 を 4 分割した実寸 */
    gap: 20px;
    width: 1258px;
    margin: 59.5px 0 0 5px;
}
.scene_item {
    display: flex;
    flex-direction: column;
    height: 419px;
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.scene_item figure {
    position: relative;
    height: 157px;   /* Figma: カード上部の画像枠 */
    flex-shrink: 0;
    line-height: 0;
    overflow: hidden;
}
/* Figma の画像フィルは拡大率もオフセットもカードごとに違う（object-fit では再現できない） */
.scene_item figure img {
    position: absolute;
    max-width: none;
}
.scene_item:nth-child(1) figure img {left: -47.4251%; top: -7.43673%; width: 150.827%; height: 160.858%;}
.scene_item:nth-child(2) figure img {left: 0;         top: -45.2229%; width: 100%;     height: 190.446%;}
.scene_item:nth-child(3) figure img {left: 0;         top: -3.14768%; width: 100%;     height: 106.295%;}
.scene_item:nth-child(4) figure img {left: 0;         top: -3.32543%; width: 100%;     height: 106.651%;}
.scene_item h3 {
    margin: 20px 15px 0;
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.scene_item > p {
    margin: 13px 15px 0;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: 0.01em;   /* body の 0.06em を継承すると行数が変わる */
    color: var(--c-gray);
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.scene_item .tags {
    margin: auto 15px 20px;
    padding-top: 18px;
}

/* **************************************************************** */
/* 業界・用途 / グッズ
*/
.industry {
    padding: 60px 0 0;   /* Figma: 帯下端 5974 → 6034 */
}
.industry_tags {
    max-width: 756px;
    margin: 30px auto 0;
    justify-content: center;
}
.goods {
    display: flex;
    align-items: center;
    gap: 76.8px;         /* Figma: ビジュアル右端 894.2 → テキスト左端 971 */
    padding-left: 6px;   /* Figma: ピンク背景の左端は 336（.inner 左端 330 の 6px 内側）*/
    margin-top: 60px;    /* Figma: タグ行下端 → グッズ画像帯 */
}
.goods_visual {
    position: relative;
    flex: 0 1 558.206px;   /* 入りきらないときだけ縮む（LP1 の img{max-width:100%} と同じ考え方） */
    min-width: 0;
    max-width: 558.206px;
    /* 高さを px 固定すると、幅が縮んだときだけ縦横比が崩れて
       % 配置のうちわ・QR がブロブからずれる。比率で持たせる */
    aspect-ratio: 558.206 / 470.563;
}
.goods_ttl {
    font-size: 32px;
    font-weight: 700;
    line-height: 51px;   /* Figma: 1 行目「等の」6405.73 → 2 行目 6456.73 */
    letter-spacing: 0.02em;
}
/* Figma: 枠は 152x64 / 299x64、枠線 1px、左右の余白 20.2px、枠同士の間隔 10px。
   枠内の文字ベースライン 6398.48 は「等の」6405.73 より 7.25px 上にある */
.goods_ttl .box {
    display: inline-block;
    margin-right: 10px;
    padding: 0 20.2px;
    border: 1px solid var(--c-main);
    border-radius: 4px;
    background: var(--c-white);
    font-size: var(--fs-h2);
    line-height: 62px;
    vertical-align: 7.25px;
    color: var(--c-main);
}
.goods_ttl em {
    color: var(--c-main);
}
.goods_txt > p {
    margin-top: 27.46px;      /* Figma: 見出し 2 行目 6456.73 → 本文 1 行目 6515.56 */
    line-height: 1.6;         /* Figma: 行送り 25.6px */
    letter-spacing: 0.01em;   /* body の 0.06em を継承すると 4 行目が折り返す */
}
.goods_txt > p em {
    font-weight: 700;
    color: var(--c-main);
}

/* **************************************************************** */
/* CTAバナー
*/
.cv {
    position: relative;
    margin-top: 61px;              /* Figma: グッズ下端 6722.56 → 6784 */
    padding: 123.5px 0;            /* Figma: 帯 h601、カードは top 123.5 */
    background: var(--c-base);
    overflow: hidden;
}
.cv:after {                        /* Figma 419:1643 の下端ウェーブ */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 401px;
    background: url(../images/bg_cv_wave.svg) no-repeat center bottom / 100% 100%;
    pointer-events: none;
}
.cv .inner {
    position: relative;
    left: 2.5px;          /* Figma: カードは 333.5〜1591.5（中心 962.5）で、ページ中心 960 より右 */
    z-index: 1;
}
.cv_box {
    position: relative;
    max-width: 1258px;    /* Figma: rect w=1258（.inner の 1260 ではない）*/
    margin: 0 auto;
    min-height: 354px;
    padding: 36px 60px;
    border-radius: 12px;
    background: linear-gradient(90deg, #4C94FF 0%, #159FE9 50%, #5DE4FF 100%);
    color: var(--c-white);
    box-sizing: border-box;
}
.cv_box:before,
.cv_box:after {                    /* bg-glow-1 / bg-glow-2 */
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--c-white);
    pointer-events: none;
}
.cv_box:before {left: 19px;  top: -75px; width: 351px; height: 351px; opacity: .2;}
.cv_box:after  {left: 535px; top: 122px; width: 180px; height: 180px; opacity: .15;}
.cv_txt {
    position: relative;
    z-index: 1;
}
.cv_sub {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.05em;
}
.cv_ttl {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 50.4px;
    letter-spacing: 0.05em;
}
.cv_lead {
    margin-top: 15px;
    line-height: 25.6px;
    letter-spacing: 0.01em;
    color: #FFFAFA;
}
.cv_txt .btn_cta {
    width: 598px;                  /* 594 + 白枠 2px×2 */
    height: 85px;                  /*  81 + 白枠 2px×2 */
    min-width: 0;
    margin-top: 30px;
    padding: 0 30px;
    border: 2px solid var(--c-white);
    border-radius: 100px;
    font-size: var(--fs-h3);
    box-sizing: border-box;
}
.cv_txt .btn_cta:after {
    width: 24px;
    height: 24px;
}
.cv_visual {
    position: absolute;
    right: 45px;   /* Figma: カード幅 1258 −(814+369) */
    bottom: 0;
    width: 471px;
    max-width: 100%;
    height: 369px;
    z-index: 2;
}
.cv_visual figure {
    line-height: 0;
}
.cv_visual figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Figma: 100% x 107.2%（上下を少し切る） */
}
.cv_bubble {
    position: absolute;
    left: -166px;
    top: -51px;
    z-index: 3;
    width: 275.243px;
    height: 120.031px;
    padding: 2px;
    border-radius: 15px;
    background: var(--c-title);
    box-sizing: border-box;
}
.cv_bubble p {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border-radius: 13px;
    background: var(--c-white);
    color: var(--c-text);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0.01em;
    text-align: center;
}
.cv_bubble:after {
    content: "";
    position: absolute;
    left: 225px;                   /* カード基準 902px */
    top: 117px;
    width: 15.52px;
    height: 16.04px;
    background: url(../images/icon_cv_bubble_tail.svg) no-repeat center / contain;
}

/* **************************************************************** */
/* 価格表
*/
.price {
    padding: 120px 0;
    background: var(--grad-price);
}
.price_card {
    padding: 40px 107px;   /* Figma: カード 1260 / 内容 1046（437〜1483） */
    border-radius: 5px;
    background: var(--c-white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.price_head {
    text-align: center;
}
.price_unit {
    margin-top: 1px;
    font-size: var(--fs-mini);
}
.table_wrap {
    margin-top: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.price_table {
    width: 100%;
    /* Figma の券種 4 列は等幅（各 216px）。auto レイアウトだと中身の文字量で
       列幅がばらつき、右へ行くほど数値が左にずれる（最大 11px）*/
    table-layout: fixed;
    /* 罫線は各セルの片側（右・下）だけに寄せてあるので collapse でなくても二重にならない。
       border-radius は border-collapse: collapse では無視されるため separate を使う */
    border-collapse: separate;
    border-spacing: 0;
    border: 3px solid var(--c-title);   /* Figma: 外枠 3px */
    border-radius: 6px;                 /* Figma: 角丸（外側の弧を実測）*/
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;   /* Figma: 本文行 35px（24 + 上下 5 + 罫線 1） */
    letter-spacing: 0.01em;
}
.price_table th,
.price_table td {
    padding: 5px 20px;
    text-align: center;
}
/* Figma の罫線マップ（画素実測）。券種 4 列は等幅 216px で境界は x=832 / 1048 / 1264。
     ・外枠 3px と「枚数」列まわり（右罫 x=615・行の横罫）……… 紺 #1A4589
     ・券種列どうしの縦罫と行の横罫（データ行）………………… 薄いグレー #E6E6E6
     ・券種見出し行だけは列の境界も紺、ヘッダー下端 y=7721 も全幅で紺
     ・ヘッダー 2 行分の「枚数｜券種」の境（x=615）は罫線ではなく白 1px */
.price_table tbody th,
.price_table tbody td {
    border-bottom: 1px solid #E6E6E6;
}
.price_table tbody th {
    border-right: 1px solid var(--c-title);
    border-bottom-color: var(--c-title);
}
.price_table tbody td + td {
    border-left: 1px solid #E6E6E6;
}
.price_table thead tr:nth-child(2) th + th {
    border-left: 1px solid var(--c-title);
}
.price_table thead th {
    background: var(--c-main);
    border-bottom: 0;                   /* Figma: 1 行目と 2 行目の間に罫線なし */
    color: var(--c-white);
}
.price_table thead tr:nth-child(2) th { /* Figma: 券種行は淡色地に紺文字、高さ 34px */
    background: #EBF7FF;
    color: var(--c-title);
}
.price_table thead .th_qty {
    width: 176px;                       /* Figma: 枚数列 440〜615（内容 175 + 罫 1）*/
    border-right: 1px solid var(--c-white);
}
/* ヘッダー下端の紺は「データ 1 行目の上罫」として引く。
   th_qty に border-bottom を持たせると、右の白罫と角がマイターされて紺に白が 1px 混じる。
   さらに、ヘッダーの白仕切りとデータ行の紺縦罫を同じ border で描くことになるので、
   ブラウザ倍率が整数でなくても 2 本が同じ位置に丸められ、縦線がずれない */
.price_table tbody tr:first-child th,
.price_table tbody tr:first-child td {
    border-top: 1px solid var(--c-title);
}
/* 最終行の下罫は外枠 3px そのもの。separate では相殺されないので明示的に消す */
.price_table tbody tr:last-child th,
.price_table tbody tr:last-child td {
    border-bottom: 0;
}
/* 内側 R は 外側 6 − 枠 3 = 3px。四隅のセル地色が枠の弧からはみ出さないようにする */
.price_table thead tr:first-child th:first-child { border-top-left-radius: 3px; }
.price_table thead tr:first-child th:last-child { border-top-right-radius: 3px; }
.price_table tbody tr:last-child th:first-child { border-bottom-left-radius: 3px; }
.price_table tbody tr:last-child td:last-child { border-bottom-right-radius: 3px; }
.price_table tbody th,
.price_table tbody td {
    /* 和文フォントと数値フォントが混ざると行ボックスが 24→25px になるため
       パディングで吸収して Figma の行ピッチ 35px に合わせる */
    padding: 7.5px 20px 2.5px;
}
.price_table tbody th {
    background: #EBF7FF;
    color: var(--c-title);
    white-space: nowrap;
}
.price_table tbody td {
    background: var(--c-white);
    color: var(--c-text);
    font-size: 12px;                    /* Figma:「円」は 12px */
}
/* Figma の価格表は数字も Zen Kaku Gothic New bold。Outfit を当てない */
.price_table .num {
    font-family: inherit;
}
.price_table tbody td .num {
    font-size: 18px;
    line-height: 18px;
}
.price_note {
    margin-top: 7px;
    color: var(--c-text);
}
.spec_box {
    max-width: 1040px;   /* Figma: 枠 440〜1480（カード内容 1046 より 6px 狭い）*/
    margin: 30px auto 0;
    padding: 20px 30px 40px;
    border: 1px solid var(--c-title);
    border-radius: 5px;
    background: var(--c-base);
}
.spec_ttl {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 23px;
    background: var(--c-main);
    color: var(--c-white);
    font-size: 20px;         /* Figma: 242 x 46 の錠剤。20px / ls .01em / 左右余白 20 */
    font-weight: 700;
    line-height: 26px;
    letter-spacing: 0.01em;
}
.spec_body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 3px 67px;       /* Figma: 画像帯 右端 940 → アイコン枠 1007、画像下端 8744 → 注記行上端 8747 */
    margin-top: 10px;
    align-items: start;
}
.spec_imgs {
    display: flex;
    gap: 11px;           /* Figma: 表面 471〜699 / 裏面 710〜940 */
}
.spec_imgs figure {
    text-align: center;
}
.spec_imgs figcaption {
    margin-bottom: 10.34px;   /* Figma: ベースライン 8580.78 → 画像上端 8597 */
    font-size: 16px;
    font-weight: 500;
    line-height: 25.6px;
    letter-spacing: 0.01em;
}
.spec_front img {
    width: 228px;
    height: 147px;       /* Figma: 枠 228 x 147 */
    object-fit: cover;
    border: 1px solid #E2E8F0;
    box-sizing: border-box;
}
.spec_back_sheet {   /* Figma: 白地に「QUOカードPay／注意事項」を中央配置（QR は白で不可視） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 146px;
    box-sizing: border-box;
    border: 1px solid #000000;
    background: var(--c-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 25.6px;
    letter-spacing: 0.01em;
    color: var(--c-text);
    text-align: center;
    aspect-ratio: 230 / 146;
}
.spec_caption {
    grid-column: 1;
    color: var(--c-text);
}
.spec_list {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-top: 9px;     /* Figma: 「表面」行 8561.06 → 「サイズ」行 8570.06 */
    max-width: 442px;    /* Figma: アイコン枠 1007 〜 箱の内側右端 1449 */
    letter-spacing: 0.01em;
}
.spec_list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;           /* Figma: アイコン枠 1007+30 → 本文 1047 */
    line-height: 25.6px;
}
/* li は flex なので行の高さはアイコン 30px で決まる。
   Figma のベースライン間隔は 8613.30→8648.78 が 35.48、以降は 40 */
.spec_list li + li {
    margin-top: 10px;
}
.spec_list li:nth-child(2) {
    margin-top: 10.6px;
}
.spec_list img {
    width: 30px;         /* アイコン SVG は 30x30 の viewBox。Figma も原寸で使っている */
    flex-shrink: 0;
}
.spec_list small {
    display: block;      /* 行送りを 22.4px にするため（16px の strut に引っぱられない）*/
    font-size: var(--fs-mini);
    line-height: 22.4px;
}
.price_tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    max-width: 1040px;   /* Figma: 枠 440〜1480 */
    margin: 20px auto 0;
    padding: 10px 20px;  /* Figma: 枠 8831〜8888（高さ 57.14＝電球 35.14＋上下 10＋枠 1）*/
    border: 1px solid var(--c-title);
    border-radius: 5px;
    background: var(--c-base);
    color: var(--c-title);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.price_tip img {
    width: 20.833px;
    flex-shrink: 0;
}

/* **************************************************************** */
/* 納品までの流れ
*/
.flow {
    padding: 120px 0 98px;   /* Figma: 帯 9049〜9872（カード下端 9774 + 98）*/
    background: var(--c-base);
}
.flow .sec_ttl:after {
    content: "";
    display: block;
    width: 50px;         /* Figma: rect x935 y9230 w50 h2 */
    height: 2px;
    margin: 10px auto 0;
    background: var(--c-main);
}
.flow_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}
.flow_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.flow_step {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 26px;
    color: var(--c-white);
    font-size: var(--fs-mini);
    font-weight: 700;
    line-height: 25.6px;
    letter-spacing: 0.01em;
}
.flow_step:after {
    content: "";
    position: absolute;
    top: -.35em;
    left: -2.8em;
    z-index: -1;
    width: 132px;
    height: 35px;
    background: url(../images/flow_step_bg.png) no-repeat left center / contain;
}
.flow_item:nth-child(4) .flow_step:after {
    content: "";
    position: absolute;
    top: -.35em;
    left: -2.8em;
    z-index: -1;
    width: 132px;
    height: 35px;
    background: url(../images/flow_step_bg02.png) no-repeat left center / contain;
}
.flow_item figure {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px;
}
.flow_item figure img {
    width: 100%;
    height: 207px;
    object-fit: contain;
}
.flow_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 30px 8px;
    box-sizing: border-box;
    border-radius: 5px;
    background: var(--c-white);
    box-shadow: 0 2px 14px rgba(12, 47, 77, 0.08);
    text-align: center;
}
.flow_box h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 38.4px;
    letter-spacing: 0.02em;
    color: var(--c-main);
}
.flow_box p {
    margin-top: 10px;
    line-height: 25.6px;
}

/* **************************************************************** */
/* デザインシミュレーター
*/
.design {
    padding: 119px 0 0;  /* Figma: 流れ帯下端 9872 → 見出し ink 9998（126px）*/
}
.design_head {
    position: relative;
    left: 0.7px;             /* Figma のこのブロックの中心は 960.7（ページ中心 960 ではない） */
    max-width: 649px;
    margin: 0 auto;
    text-align: center;
}

.design_ttl {
    position: relative;
    z-index: 1;              /* Figma はミニカードより文字が前面 */
    margin-top: 27.12px;     /* Figma: ブラケット下端 10048.8 → 1 行目ベースライン 10125.4 */
    color: #222222;          /* Figma:「オリジナルに！」は黒 */
}

.design_lead {
    /* Figma のリード 1 行目は 648.9px あり、.design_head の 649px 枠だとぎりぎりで
       環境によって折り返す。左右に逃がして中心はそのまま保つ */
    width: 700px;
    margin: 29.8px -25.5px 0;   /* Figma: 見出し 2 行目下端 → リード 1 行目 */
    line-height: 1.6;
    letter-spacing: 0.01em;  /* body の 0.06em を継承すると 3 行になる */
}
.design_lead em {
    font-weight: 700;
    color: var(--c-accent);
}
.design_panels {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 49.7px;      /* Figma: リード下端 → パネル背景上端 10334.8 */
}
.design_panel {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 375px;
    padding: 10px;
    border-radius: 5px;
    background: var(--c-bg-gray);
}
.design_panel_ttl {
    position: absolute;
    /* left:50% だけだと shrink-to-fit の幅が「パネル幅の半分」に制限されて折り返す。
       left/right:0 + margin auto なら全幅を使って中央寄せできる */
    left: 0;
    right: 0;
    top: -17px;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100% - 20px);
    padding: 5px 20px;
    border-radius: 50px;
    background: var(--c-main);
    color: var(--c-white);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    box-sizing: border-box;
}
.design_panel figure {
    line-height: 0;
}
.design_panel > figure:not(.design_panel_phone) img {
    width: 342.59px;
    max-width: none;
    transform: rotate(-3.56deg);   /* Figma の台紙画像に影は付いていない */
}
.design_panel_note {
    position: absolute;
    left: 20px;
    bottom: 14px;
    color: var(--c-text);
}
.design_panel_phone {
    position: relative;
    width: 231.777px;
    max-width: 100%;
    height: 300.999px;   /* Figma: 端末画像は下側をトリミング */
    overflow: hidden;
}
.design_phone_card {
    position: absolute;
    left: 31.96px;     /* Figma: 端末 (1184.4,10371.8) → カード枠外周 (1216.36,10490.1) */
    top: 118.3px;
    width: 164.111px;
    height: 109.666px;
    border: 3px solid var(--c-white);
    box-sizing: content-box;
    object-fit: cover;
}
.design_plus {
    flex-shrink: 0;
    width: 60px;
    line-height: 0;
}
.design_easy {
    margin-top: 20px;
    padding: 50px 40px;
    border-radius: 5px;
    background: var(--c-bg-red);
}
.design_easy h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
}
.design_easy h3 em {
    color: var(--c-accent);
}
.design_easy_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
    margin-top: 30px;
}
.design_easy_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    border-radius: 5px;
    background: var(--c-white);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
}
.design_easy_list li:before,
.design_easy_list li:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.design_easy_list li:before {   /* Figma Group 76：赤い 3 本線のきらめき */
    left: -1.34px;
    top: -1px;
    width: 21.553px;
    height: 20.3px;
    background-image: url(../images/icon_design_sparkle.svg);
}
.design_easy_list li:after {    /* Figma Vector 17：バッジ下の小三角 */
    left: 36px;
    top: 41px;
    width: 6.5px;
    height: 5px;
    background-image: url(../images/icon_design_tri.svg);
}
.design_num {
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-white);
    font-size: 16px;
    font-weight: 700;
}
.design_easy_list li p {
    font-size: var(--fs-mini);
    line-height: 1.6;
}
.design_easy_list li figure {
    line-height: 0;
}
.design_btns {
    display: flex;
    gap: 20px;
    margin-top: 32px;    /* Figma: 01-04 リスト下端 → ボタン行 11133.8 */
}
.btn_link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 2px solid var(--c-title);
    border-radius: 5px;
    background: var(--c-bg-gray);
    box-shadow: 0 2px 0 var(--c-title);
    color: var(--c-title);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.btn_link_body {
    display: flex;
    align-items: center;
    gap: 20px;
}
.btn_link_body img {
    width: 55px;
    flex-shrink: 0;
}
.btn_link_arrow {
    width: 41px;
    flex-shrink: 0;
}

/* **************************************************************** */
/* お問い合わせ
*/
.contact {
    margin-top: 60.3px;   /* Figma: デザイン下端 11218.8 → CV 帯上端 11279.1 */
}
.contact_head {
    position: relative;
    padding: 70px 60px 69.3px;   /* Figma: 帯 11279.1〜11585.1（306px） */
    background: linear-gradient(90deg, #2775F3 0%, #008CD7 50%, #00B4D8 100%);
    color: var(--c-white);
    text-align: center;
    overflow: hidden;
}
.contact_head:before {
    content: "";
    position: absolute;
    left: 140px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);   /* Figma: opacity 0.05 */
}
.contact_head:after {          /* bg-glow-2 */
    content: "";
    position: absolute;
    left: 520px;
    top: 120px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);   /* Figma: opacity 0.06 */
}
.contact_head .inner {
    position: relative;
}
.contact_ttl {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.contact_ttl:after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin: 4.4px auto 0;    /* Figma: 罫線 11411.1（帯上端 +132） */
    background: var(--c-white);
}
.contact_lead {
    margin-top: 25.92px;     /* Figma: 本文 1 行目ベースライン 11457.9 */
    line-height: 1.6;
    letter-spacing: 0.01em;
}
.contact_lead .num {
    font-family: var(--ff-num);
}
.contact_body {
    position: relative;
    padding: 80px 0 60px;
    background: var(--c-bg-gray);
}
.contact_body:before {         /* Figma Polygon 2：バナー下端からフォーム帯にかかる矢印 */
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;               /* Figma: 三角形 11576.1〜11623.1、帯下端 11585.1 */
    width: 87px;
    height: 47px;
    margin-left: -43.5px;
    background: #008CD7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.contact_body .inner {
    position: relative;
    left: 2px;           /* Figma: 白カード 462〜1462（中心 962）*/
    max-width: 1040px;
}
/* Figma では「送信する」ボタンは白カードの外（帯の上）に置かれている。
   カードの装飾は form ではなく .contact_bloc に持たせる */
.contact_bloc {
    max-width: 1000px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.contact_bloc dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.contact_bloc dl + dl {
    margin-top: 30px;
}
.contact_bloc dl.dl_area {
    align-items: flex-start;
}
.contact_bloc dt {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
}
.contact_bloc dt.required:after {
    content: "必須";
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--c-main);
    color: var(--c-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
}
.contact_bloc dd {
    flex: 0 1 600px;
    min-width: 0;
    max-width: 600px;
}
.contact_bloc .fmctr {
    padding: 18.5px 20px;   /* Figma: 入力枠の外形 63px（行 24 + 上下 18.5 + 枠 1）*/
    border: 1px solid var(--c-gray);
    border-radius: 3px;
    line-height: 1.5;
}
.contact_bloc textarea.fmctr {
    min-height: 241px;
}
.btn_bloc {
    margin-top: 54px;   /* Figma: カード下端 12566.1 → ボタン上端 12626.1（実測差 6px 補正済み）*/
    text-align: center;
}
.btn_submit {
    min-width: 594px;
    padding: 20px 30px;
    font-size: var(--fs-h3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.btn_submit:after {
    width: 24px;
    height: 24px;
}
.contact_notes {
    max-width: 1000px;
    margin: 30px auto 0;   /* Figma: フォーム帯 12767.08 → 注意事項 12797.08 */
    padding: 30px;
    border-radius: 5px;
    background: var(--c-base);
}
.contact_notes p {
    font-size: var(--fs-mini);
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* **************************************************************** */
/* よくあるご質問
*/
.faq {
    padding: 64px 0 0;   /* Figma: 注意事項下端 → 見出し ink 13176 */
}
.faq_ttl {
    font-size: var(--fs-h2);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--c-title);
    text-align: center;
}
.faq_ttl:after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin: 7px auto 0;   /* Figma: 見出し ink 13176 → 下線 13226 */
    background: var(--c-title);
}
.faq_bloc {
    margin-top: 60px;   /* Figma: 見出し ink 13176 → 1 枚目 13288 */
}
.faq_item {
    border: 1px solid rgba(204, 204, 204, 0.87);
    border-radius: 3px;
    background: var(--c-white);
}
.faq_item + .faq_item {
    margin-top: 30px;
}
.faq_item dt {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;   /* 閉じている時は上下均等で中央に見せる */
    cursor: pointer;
    transition: padding-bottom .25s;
}
.faq_item dt.is-open {
    padding-bottom: 16px; 
}
.faq_q {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 3px;
    background: var(--c-main);
    color: var(--c-white);
    font-size: var(--fs-mini);
    font-weight: 700;
}
.faq_txt {
    flex: 1;
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.faq_item dt:after {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url(../images/icon_chevron_blue.svg) no-repeat center / contain;
    transform: rotate(180deg);
    transition: transform .25s;
}
.faq_item dt.is-open:after {
    transform: rotate(0deg);
}
.faq_item dd {
    display: none;                  /* 初期状態は閉じる（jQuery の slideToggle が inline display で開く）*/
    padding: 0 24px 24px 68px;   /* Figma: 質問行 ↔ 回答 gap 16 */
}
.faq_item dd p {
    font-size: var(--fs-mini);
    line-height: 24px;
    color: var(--c-gray);
}
.faq_item dd p + p {
    margin-top: 4px;
}
.faq_item dd a {
    color: var(--c-main);
    text-decoration: underline;
}

/* **************************************************************** */
/* フッター
*/
footer {
    text-align: left;
}
.footer_content {
    margin-top: 84px;   /* Figma: FAQ 下端 14002 → フッター 14086.08 */
    padding: 60px 0;
    background: var(--c-base);
}
.footer_inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}
.footer_data {
    flex-shrink: 0;
    /* Figma のフッター住所ブロックは letter-spacing 0em。body の 0.06em を継承すると
       「販促物（ノベルティー）の…」以下 2 行が枠に収まらず折り返す */
    letter-spacing: 0;
    max-width: 500px;
}
.footer_company {
    font-weight: 700;
}
.footer_addr {
    margin-top: 7.5px;   /* Figma: 社名ベースライン 14177.1 → 住所 14210.1（33px）*/
}
.footer_data dl {
    display: flex;
    flex-wrap: wrap;
    margin-top: 18.7px;   /* Figma: 住所ベースライン 14210.1 → TEL 14253.1（43px）*/
}
/* Figma の行ベースライン 14253.1 / 14283.1 / 14317.1 / 14347.1 は
   ピッチが 30・34・30 と不揃い。均等割り（31.33）にして誤差を ±1.3px に収める */
.footer_data dt {
    width: 85px;
    flex-shrink: 0;
    margin-bottom: 8.333px;
    line-height: 23px;
}
.footer_data dd {
    width: calc(100% - 85px);
    margin-bottom: 8.333px;
    line-height: 23px;
}
/* 業務内容は 5 項目の並列なのでリストで組む。見た目は <br> 区切りのときと同じにする */
.footer_biz {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_gmap {
    flex: 0 1 546px;
    min-width: 0;
    max-width: 546px;
    line-height: 0;
}
.footer_gmap iframe {
    width: 100%;
    height: 310px;
}
.footer_bar {
    padding: 16px 0;
    background: var(--c-main);
    color: var(--c-white);
}
.footer_bar_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer_nav {
    display: flex;
    align-items: center;
    gap: 39px;
}
.footer_nav a,
.copy {
    font-size: var(--fs-mini);
    line-height: 1.6;
    letter-spacing: 0.01em;
}
.copy {
    display: block;
}

/* **************************************************************** */
/* 追記：装飾の細部
*/
.goods_qr {
    position: absolute;
}
.goods_qr01 {left: 59.227%; top: 84.926%; width: 6.701%; transform: rotate(6.05deg);}
.goods_qr02 {left: 32.613%; top: 35.947%; width: 5.119%; transform: rotate(-4.99deg);}
.goods_qr03 {left: 69.671%; top: 18.465%; width: 5.032%; transform: rotate(11.18deg);}
.goods_qr04 {left: 85.808%; top: 27.463%; width: 5.032%; transform: rotate(36.51deg);}

/* **************************************************************** */
/* サンクスページ
*/
.thanks_body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.thanks_body main {
    flex: 1;
    display: flex;
    align-items: center;
}
.thanks {
    width: 100%;
    padding: 200px 0 120px;
    text-align: center;
}
.thanks_box {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.thanks_box h1 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--c-title);
}
.thanks_box p {
    margin-top: 24px;
    line-height: 1.8;
}
.thanks_note {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid #E2E8F0;
    font-size: var(--fs-mini);
}
.thanks_note .num {
    font-family: var(--ff-num);
    font-weight: 700;
    color: var(--c-main);
}
.thanks_back {
    margin-top: 34px;
}