:root{
    --teal:#136070;        /* 主面・アクセント（ロゴ実測色） */
    --teal-bright:#206b76; /* 明るい面。淡い背景の上で浮かせる用 */
    --teal-chrome:#10545e; /* ヘッダー */
    --teal-deep:#0f4d55;   /* 白地の上に置く文字 */
    --teal-dark:#12454c;   /* フッター（最深） */
    --teal-soft:#e3f0f1;
    --ink:#12262a;
    --ink-2:#3d5257;
    --sub:#5b6f73;
    --body:#54686c;
    --muted:#5b7176;       /* 補助表記。情報を担うため AA を満たす濃度 */
    --eyebrow:#5c8288;     /* 英字の装飾マーカー専用。隣の見出しが同内容を伝える */
    --bg:#f5f7f7;
    --line:#e0e7e7;
    --line-2:#e6ecec;
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* hidden 属性は UA の display:none。CSS の display 指定に負けるため明示する */
  [hidden]{display:none !important}
  html{scroll-behavior:smooth}
  body{
    font-family:"Noto Sans JP",system-ui,-apple-system,"Segoe UI","Hiragino Sans",Meiryo,sans-serif;
    color:var(--ink);background:var(--bg);
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--teal);text-decoration:none;transition:.15s}
  a:hover{color:var(--teal-deep)}
  img{display:block;max-width:100%}
  .wrap{max-width:var(--maxw);margin:0 auto}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* ---------- shared type ---------- */
  .eyebrow{
    font-family:Outfit,sans-serif;font-size:12px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--eyebrow);margin-bottom:18px;
  }
  h2.sec{font-size:34px;line-height:1.5;font-weight:700;letter-spacing:.01em;text-wrap:balance}
  section{padding:110px 32px}
  [id]{scroll-margin-top:76px}
  section.white{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  section.tight{padding:84px 32px}
  .lede{font-size:14.5px;line-height:1.95;color:var(--sub)}

  .pill{
    display:inline-block;border-radius:999px;font-weight:700;font-size:15px;
    padding:16px 32px;transition:.15s;
  }
  .pill-solid{background:#fff;color:var(--teal-deep)}
  .pill-solid:hover{background:#d9efef;color:var(--teal-deep)}
  .pill-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;font-weight:500}
  .pill-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
  .pill-teal{background:var(--teal);color:#fff}
  .pill-teal:hover{background:var(--teal-deep);color:#fff}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50;background:var(--teal-chrome);border-bottom:1px solid rgba(255,255,255,.14)}
  .hd{display:flex;align-items:center;gap:32px;padding:14px 32px;max-width:var(--maxw);margin:0 auto}
  .hd .logo{flex:0 0 auto;display:flex;align-items:center;gap:14px}
  .hd .logo img{height:30px;width:auto}
  .hd .cname{
    font-size:12.5px;letter-spacing:.06em;color:rgba(255,255,255,.72);white-space:nowrap;
    padding-left:14px;border-left:1px solid rgba(255,255,255,.28);
  }
  .hd .logo:hover .cname{color:rgba(255,255,255,.92)}
  .hd nav{display:flex;gap:26px;margin-left:auto;font-size:14px;letter-spacing:.02em}
  .hd nav a{color:rgba(255,255,255,.86);white-space:nowrap}
  .hd nav a:hover{color:#fff}
  .hd .cta{
    flex:0 0 auto;background:#fff;color:var(--teal-deep);font-size:14px;font-weight:700;
    padding:11px 22px;border-radius:999px;
  }
  .hd .cta:hover{background:#d9efef;color:var(--teal-deep)}

  /* ---------- hero ---------- */
  .hero{background:var(--teal);color:#fff;padding:104px 32px;position:relative;overflow:hidden}
  .hero::after{
    content:"";position:absolute;right:-150px;top:-190px;width:620px;height:620px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.1),transparent 66%);pointer-events:none;
  }
  .hero .wrap{position:relative;z-index:1;animation:rise .7s ease both}
  .hero .kicker{
    font-family:Outfit,sans-serif;font-size:13px;letter-spacing:.28em;text-transform:uppercase;
    color:rgba(255,255,255,.78);margin-bottom:26px;
  }
  .hero h1{
    font-size:clamp(30px,4vw,50px);line-height:1.36;font-weight:700;letter-spacing:.01em;margin-bottom:30px;
    word-break:auto-phrase;text-wrap:pretty;
  }
  .hero p.lead{font-size:17px;line-height:2;color:rgba(255,255,255,.86);margin-bottom:42px;max-width:40em;text-wrap:pretty}
  .hero p.lead strong{font-weight:700;color:#fff}
  .hero .btns{display:flex;gap:14px;flex-wrap:wrap}
  .metrics{
    margin-top:82px;border-top:1px solid rgba(255,255,255,.18);
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .metrics .m{padding:26px 24px 30px;border-left:1px solid rgba(255,255,255,.18)}
  .metrics .m:first-child{padding-left:0;border-left:0}
  .metrics .m:last-child{padding-right:0}
  .metrics .n{font-family:Outfit,sans-serif;font-size:34px;font-weight:300;line-height:1.2}
  .metrics .n em{font-family:"Noto Sans JP",sans-serif;font-size:15px;font-style:normal;font-weight:400}
  .metrics .l{font-size:13px;color:rgba(255,255,255,.78);margin-top:6px}

  /* ---------- shift ---------- */
  .shift{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:stretch}
  .shift .box{border-radius:12px;padding:34px}
  .shift .before{background:#fff;border:1px solid var(--line)}
  .shift .after{background:var(--teal-bright);color:#fff;box-shadow:0 18px 40px -24px rgba(32,107,118,.7)}
  .shift .tag{font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:16px}
  .shift .before .tag{color:var(--muted)}
  .shift .after .tag{color:rgba(255,255,255,.82)}
  .shift h3{font-size:20px;font-weight:700;margin-bottom:14px}
  .shift .before h3{color:var(--ink-2)}
  .shift p{font-size:14.5px;line-height:1.95}
  .shift .before p{color:var(--sub)}
  .shift .after p{color:rgba(255,255,255,.86)}
  .arrow{display:flex;align-items:center;justify-content:center;color:var(--teal);font-size:30px;font-family:Outfit,sans-serif}

  /* ---------- products ---------- */
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap}
  .sec-head .lede{max-width:26em}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
  .pcard{
    border:1px solid #dde5e5;border-radius:14px;padding:32px;background:#fff;
    display:flex;flex-direction:column;gap:13px;
  }
  .pcard .ico{
    width:46px;height:46px;border-radius:11px;background:var(--teal-soft);
    display:grid;place-items:center;color:var(--teal);margin-bottom:3px;
  }
  /* 線画は currentColor で上の color を継承する。フォント依存の記号だと
     端末ごとに字形と線幅が変わるため SVG で固定している。 */
  .pcard .ico svg{width:24px;height:24px;display:block}
  .badge{
    align-self:flex-start;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;
  }
  .badge-main{background:var(--teal-soft);color:#12656f}
  .badge-sub{background:#e9eeee;color:var(--sub)}
  .pcard h3{font-size:20px;font-weight:700}
  /* 日本語のため Outfit（ラテン専用）は当てない。字間もラテン用の値を外す */
  .pcard .for{font-size:13px;color:var(--muted);margin-top:-6px;letter-spacing:.02em}
  .pcard p{font-size:14.5px;line-height:1.95;color:var(--body)}
  .tags{display:flex;gap:8px;flex-wrap:wrap}
  .tags span{font-size:11.5px;color:var(--teal);background:var(--teal-soft);padding:4px 11px;border-radius:999px}
  .pcard .foot{margin-top:auto;padding-top:6px;font-size:14px;font-weight:700}
  .pcard .card-cta{align-self:flex-start;margin-top:auto;font-size:14.5px;padding:14px 26px}
  .pcard .foot.note{font-weight:400;font-size:13.5px;color:var(--muted)}
  .strip{
    margin-top:34px;background:var(--bg);border-radius:12px;padding:26px 30px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  }
  .strip p{font-size:14.5px;color:var(--ink-2);line-height:1.8}
  .strip a{margin-left:auto;font-size:14px;font-weight:700}

  /* ---------- news ---------- */
  .split{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
  .news-row{
    display:grid;grid-template-columns:110px 1fr;gap:20px;padding:22px 4px;
    border-bottom:1px solid #dde5e5;
  }
  .news-row:first-child{border-top:1px solid #dde5e5}
  .news-row time{font-family:Outfit,sans-serif;font-size:13.5px;color:var(--sub);letter-spacing:.04em}
  .news-row .t{font-size:15px;line-height:1.8}

  /* ---------- strength ---------- */
  .scard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px}
  .scard .no{font-family:Outfit,sans-serif;font-size:13px;color:var(--teal);letter-spacing:.14em;margin-bottom:20px}
  .scard h3{font-size:19px;font-weight:700;margin-bottom:14px}
  .scard p{font-size:14.5px;line-height:1.95;color:var(--sub)}

  /* ---------- philosophy ---------- */
  .credo{max-width:820px;margin:0 auto 54px;text-align:center}
  .credo .eyebrow{text-align:center}
  .credo .q{font-size:26px;line-height:1.95;font-weight:700;letter-spacing:.02em;text-wrap:balance}
  .credo .note-line{font-size:14px;line-height:1.9;color:var(--sub);margin-top:26px}
  .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
  .values .v{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 24px}
  .values .v-t{font-size:15.5px;font-weight:700;color:var(--teal);margin-bottom:8px}
  .values .v-d{font-size:13.5px;color:var(--sub);line-height:1.85}

  /* ---------- history ---------- */
  ol.tl{list-style:none;position:relative;padding-left:26px}
  ol.tl::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;background:var(--line)}
  ol.tl li{position:relative;padding-bottom:30px}
  ol.tl li:last-child{padding-bottom:0}
  ol.tl li::before{
    content:"";position:absolute;left:-26px;top:9px;width:9px;height:9px;border-radius:50%;
    background:#fff;border:2px solid var(--teal);
  }
  ol.tl .yr{font-family:Outfit,sans-serif;font-size:13px;color:var(--teal);font-weight:600;letter-spacing:.08em;margin-bottom:4px}
  ol.tl .ev{font-size:14.5px;line-height:1.9;color:var(--body)}
  .todo{font-size:12px;color:var(--muted)}

  /* ---------- company ---------- */
  dl.info{display:grid;grid-template-columns:170px 1fr;font-size:14.5px}
  dl.info dt{padding:18px 0;border-top:1px solid var(--line-2);font-weight:700;color:var(--ink-2)}
  dl.info dd{padding:18px 0;border-top:1px solid var(--line-2);color:var(--body);line-height:1.95}
  dl.info dt:last-of-type,dl.info dd:last-of-type{border-bottom:1px solid var(--line-2)}
  dl.info dd a{font-weight:500}
  .badges{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:26px 0 20px}
  .badges img{height:48px;width:auto}
  .policy-link{margin-top:28px;font-size:13.5px;font-weight:700}

  /* ---------- contact ---------- */
  .contact{background:var(--teal);color:#fff;padding:96px 32px}
  .contact h2{font-size:32px;line-height:1.5;font-weight:700;margin-bottom:16px;text-wrap:balance}
  .contact p.lead{font-size:15.5px;line-height:2;color:rgba(255,255,255,.84);max-width:44em}
  /* フォームの下に置く副次的な連絡手段。優先順位（フォーム → メール → 電話）を
     文字サイズと不透明度で表す。所在地は連絡手段ではないため会社概要のみに置く。 */
  .alt-contact{max-width:900px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.24)}
  .alt-mail{font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.86)}
  .alt-mail a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .alt-mail a:hover{color:#d9efef}
  .alt-tel{font-size:14px;line-height:1.9;color:rgba(255,255,255,.78);margin-top:8px}
  .contact .btns{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .contact .note-line{font-size:14px;line-height:1.9;color:rgba(255,255,255,.76);margin:22px 0 34px}

  /* ---------- contact form ---------- */
  .form-card{background:#fff;border-radius:14px;padding:34px 36px;color:var(--ink);max-width:900px}
  .form-card h3{font-size:18px;font-weight:700;margin-bottom:6px}
  .form-card .fnote{font-size:13.5px;line-height:1.9;color:var(--sub);margin-bottom:26px}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .field{display:flex;flex-direction:column;gap:7px}
  .field.full{grid-column:1 / -1}
  .field label{font-size:13px;font-weight:700;color:var(--ink-2)}
  .field .req{color:#9c3520;font-weight:700;margin-left:4px}
  .field input,.field select,.field textarea{
    font-family:inherit;font-size:14.5px;line-height:1.7;width:100%;
    /* 枠線は WCAG 1.4.11（UI部品の境界 3:1）を満たす濃さにする。#798f93 = 3.41:1 */
    padding:12px 14px;border:1px solid #798f93;border-radius:8px;background:#fff;color:var(--ink);
  }
  .field textarea{min-height:130px;resize:vertical}
  .field input:focus,.field select:focus,.field textarea:focus{
    outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);
  }
  .consent{grid-column:1 / -1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.85;color:var(--sub)}
  .consent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--teal)}
  .form-foot{grid-column:1 / -1;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:4px}
  .form-card button{
    font-family:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--teal);
    border:0;border-radius:999px;padding:15px 38px;cursor:pointer;transition:.15s;
  }
  .form-card button:hover:not(:disabled){background:var(--teal-deep)}
  .form-card button:disabled{opacity:.55;cursor:default}
  .form-status{font-size:13.5px;line-height:1.85;margin:0}
  .form-status.ok{color:#0f5c3f;font-weight:700}
  .form-status.ng{color:#9c3520;font-weight:700}
  .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  /* ---------- footer ---------- */
  footer{background:var(--teal-dark);color:rgba(255,255,255,.72);padding:52px 32px 34px}
  .ftop{display:flex;gap:36px;flex-wrap:wrap;align-items:flex-start;margin-bottom:34px}
  .ftop img{height:26px;width:auto;opacity:.9}
  .fnav{display:flex;flex-wrap:wrap;gap:14px 26px;font-size:13.5px;margin-left:auto;max-width:920px}
  .fnav a{color:rgba(255,255,255,.78)}
  .fnav a:hover{color:#fff}
  .fbot{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;flex-direction:column;gap:8px}
  .fbot .tm{font-size:12px;color:rgba(255,255,255,.58);line-height:1.8}
  .fbot .copy{font-size:12px;color:rgba(255,255,255,.64);letter-spacing:.04em}

  /* ---------- responsive ---------- */
  /* ヘッダーは横一列に組んでいるため、本文より先に畳む。
     ロゴ256 + ナビ403 + CTA128 + 余白 で 915px 必要なので、900px で切ると
     901〜914px の帯でナビの日本語が単語の途中から2行に割れる。
     スマホの横向き（915〜932px）や「デスクトップサイトを表示」（約980px）が
     ちょうどこの付近に来るため、1000px で畳んで 85px の余裕を持たせる。
     フォントが差し替わると必要幅が変わるので、余裕は削らないこと。 */
  @media (max-width:1000px){
    .hd nav{display:none}
    .hd .cname{display:none}
    .hd .cta{margin-left:auto}
  }

  @media (max-width:900px){
    section{padding:64px 22px}
    .hero{padding:66px 22px 70px}
    .contact{padding:64px 22px}
    footer{padding:44px 22px 30px}
    .hd{padding:12px 18px}
    .shift,.split,.grid2{grid-template-columns:1fr}
    .split,.grid2{gap:30px}
    .shift{gap:20px}
    .arrow{transform:rotate(90deg)}
    /* 28px 固定だと 320px 端末（iPhone の拡大表示を含む）で「現場のためのSaaSを、」が
       可読幅を超え、語の途中で折れる。画面幅に追従させる。 */
    .hero h1{font-size:clamp(21px,7vw,28px);word-break:normal}
    .hero p.lead{font-size:15.5px;margin-bottom:34px}
    .pill{font-size:14.5px;padding:15px 26px}
    /* 26px 固定だと「つくって、育て続ける」へ。が 365px 必要になり、
       390px 端末の可読幅 346px に収まらず「へ。」だけが行に残る。
       画面幅に追従させて、長い見出しでも意図した行数に収める。 */
    h2.sec{font-size:clamp(19px,5.6vw,26px)}
    .metrics{grid-template-columns:1fr 1fr;margin-top:52px}
    .metrics .m{padding:22px 18px;border-left:0}
    .metrics .m:first-child{padding-left:18px}
    .credo .q{font-size:20px}
    .contact h2{font-size:26px}
    dl.info{grid-template-columns:1fr}
    dl.info dt{padding-bottom:2px}
    dl.info dd{border-top:0;padding-top:0}
    dl.info dt:last-of-type{border-bottom:0}
    .form-card{padding:26px 22px}
    .fgrid{grid-template-columns:1fr}
    .form-card button{width:100%}
  }

  /* ---------- 下層ページ（方針類） ---------- */
  .page-head{background:var(--teal);color:#fff;padding:70px 32px 64px;position:relative;overflow:hidden}
  .page-head::after{
    content:"";position:absolute;right:-150px;top:-210px;width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.1),transparent 66%);pointer-events:none;
  }
  .page-head .wrap{position:relative;z-index:1}
  .page-head h1{font-size:32px;line-height:1.5;font-weight:700;letter-spacing:.01em}
  .page-head .crumb{
    font-family:Outfit,sans-serif;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,.78);margin-bottom:16px;
  }
  .page-head .crumb a{color:rgba(255,255,255,.78)}
  .page-head .crumb a:hover{color:#fff}

  .prose{background:#fff;padding:80px 32px}
  .prose .wrap{max-width:860px}
  .prose .intro{font-size:15.5px;line-height:2;color:var(--body);margin-bottom:40px}
  .prose h2{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 12px}
  .prose .item{padding:26px 0;border-top:1px solid var(--line-2)}
  .prose .item:last-of-type{border-bottom:1px solid var(--line-2)}
  .prose .item p{font-size:14.5px;line-height:1.95;color:var(--body)}
  .prose .item ol{margin:12px 0 0;padding-left:1.4em}
  .prose .item li{font-size:14.5px;line-height:1.95;color:var(--body);margin-bottom:4px}
  .prose .sign{margin-top:40px;font-size:14.5px;line-height:1.95;color:var(--body)}
  .prose .sign .date{color:var(--sub);margin-bottom:6px}
  .prose .contact-block{
    margin-top:44px;background:var(--bg);border-radius:12px;padding:28px 30px;
    font-size:14.5px;line-height:1.95;color:var(--body);
  }
  .prose .contact-block .t{font-weight:700;color:var(--ink);margin-bottom:10px}
  .prose .back{margin-top:44px;font-size:14px;font-weight:700}

  @media (max-width:900px){
    .page-head{padding:48px 22px 44px}
    .page-head h1{font-size:24px}
    .prose{padding:56px 22px}
    .prose .item{padding:22px 0}
  }

  /* ---------- 個別調整（CSP で style 属性を許可しないためクラス化） ---------- */
  .mb54{margin-bottom:54px}
  .mb22{margin-bottom:22px}
  .mw24{max-width:24em}
  .lh2{line-height:2}
  /* 日本語の見出しを語の途中で折らないための塊。inline-block は内部で改行されないため、
     行送りは必ずこの単位の境界で起きる。端末のフォント拡大設定にも耐える。 */
  .nb{display:inline-block}
  /* <br> で行を決めている見出しに text-wrap:balance が効くと、収まる行まで
     均等割りしようとして余計に折られる。明示した改行位置を優先させる。 */
  h2.nobalance{text-wrap:wrap}
  .noscript-note{margin:20px 0 0}

  /* ---------- フォーム：打ち間違いの提案 ---------- */
  .field .hint{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    font-size:13px;line-height:1.8;color:#8a4a1f;
  }
  .hint-fix{
    font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;background:var(--teal);
    border:0;border-radius:999px;padding:5px 14px;cursor:pointer;
  }
  .hint-fix:hover{background:var(--teal-deep)}

  /* ---------- フォーム：入力内容の確認 ---------- */
  .review h4{font-size:17px;font-weight:700;margin-bottom:6px;outline:none}
  .review dl{
    display:grid;grid-template-columns:170px 1fr;font-size:14.5px;margin-bottom:26px;
  }
  .review dt{padding:14px 0;border-top:1px solid var(--line-2);font-weight:700;color:var(--ink-2)}
  .review dd{padding:14px 0;border-top:1px solid var(--line-2);color:var(--body);line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
  .review dt:last-of-type,.review dd:last-of-type{border-bottom:1px solid var(--line-2)}
  .review-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .review-actions button{
    font-family:inherit;font-size:15px;font-weight:700;color:#fff;background:var(--teal);
    border:0;border-radius:999px;padding:15px 38px;cursor:pointer;transition:.15s;
  }
  .review-actions button:hover:not(:disabled){background:var(--teal-deep)}
  .review-actions button:disabled{opacity:.55;cursor:default}
  .review-actions button.ghost{background:#fff;color:var(--teal-deep);border:1px solid #798f93}
  .review-actions button.ghost:hover:not(:disabled){background:var(--bg);color:var(--teal-deep)}
  .form-card > .form-status{margin-top:18px}

  @media (max-width:900px){
    .review dl{grid-template-columns:1fr}
    .review dt{padding-bottom:2px}
    .review dd{border-top:0;padding-top:0}
    .review dt:last-of-type{border-bottom:0}
    .review-actions{flex-direction:column;align-items:stretch}
    .review-actions button{width:100%}
  }

  /* ---------- SHIFT LEAD / MESSAGE ---------- */
  .shift-lead{margin-top:36px;font-size:14.5px;line-height:1.95;color:var(--sub);max-width:54em;text-wrap:pretty}
  .msg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:54px 58px;max-width:880px;margin:0 auto}
  .msg p{font-size:15px;line-height:2.1;color:var(--body);margin-bottom:26px;text-wrap:pretty}
  .msg .pull{font-size:19px;font-weight:700;line-height:1.95;color:var(--teal-deep);border-left:3px solid var(--teal);padding-left:22px;margin:34px 0}
  .msg .sign{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line);text-align:right;font-size:14px;color:var(--ink-2)}
  .msg .sign .nm{font-size:17px;font-weight:700;color:var(--ink);margin-left:14px}

  @media (max-width:900px){
    .msg{padding:32px 24px}
    .msg .pull{font-size:17px;padding-left:16px}
    /* 「アタックス株式会社　代表取締役」は 320px 端末で枠に 4px 足りず、
       「代表取／締役」と割れていた。社名で改行し、役職と氏名を同じ行に置く
       （署名の慣例どおりの組み）。氏名の block 化はやめる。 */
    .msg .sign{text-align:left}
  }