@charset "UTF-8";
/* ==========================================================================
   製品ページ（product-mfg.html / product-cost.html …）専用のスタイル
   ※ css/index.css を読み込んだ「あと」に読み込んでください
   ※ ページ見出し帯（.lead-band）は css/index.css にあります
   ========================================================================== */


/* ==========================================================================
   製品ごとの配色（テーマ）
   HTML の <body> に「tone」と「tone--○○」の2つを付けて切り替えます。
     製造管理システム  <body class="is-lower tone tone--violet">
     原価計算システム  <body class="is-lower tone tone--amber">
     在庫管理システム  <body class="is-lower tone tone--moss">

   暗さ・濃さはトップページの紺（--navy 一式）と同じ水準に合わせ、
   色みだけを製品ごとに変えています。

   --pc-1  見出し帯の上端（いちばん明るい）
   --pc-2  見出し帯の下端／本文その1の上端
   --pc-3  本文その1の下端／本文その2の上端
   --pc-4  本文その2の下端（いちばん深い）
   --pc-accent       濃い面で使う明るい差し色（英字ラベル・番号・枠線）
   --pc-accent-deep  明るい面（動作環境）で使う差し色
   --pc-nav          ページ内の目次バーの背景

   ⚠ --pc-1〜4 は上から下へ1本のグラデーションとしてつながっています。
      1つだけ変えると、境目に段差が出ます。
   ========================================================================== */

/* 緑（いまは 在庫管理システム で使用）
   緑も黄と同じく明るく見えるため、白い文字の読みやすさが
   ほかと同じ水準になるところまで暗くしています。コントラスト比は 10.5 */
.tone--moss{
  --pc-1:#09492B;  --pc-2:#073B23;  --pc-3:#06301C;  --pc-4:#041F12;
  --pc-accent:#6EE7A8;  --pc-accent-deep:#0E5C38;
  --pc-nav:rgba(3,24,14,.86);
}

/* オレンジ（いまはどのページでも使っていません。
   2026.08.26 まで在庫管理システムで使っていた色です。
   4つ目の製品ページを作るときや、色を戻したいときにお使いください）
   白い文字とのコントラスト比は 11.0 */
.tone--rust{
  --pc-1:#652C06;  --pc-2:#512405;  --pc-3:#411C04;  --pc-4:#291203;
  --pc-accent:#FFA24A;  --pc-accent-deep:#8A3A08;
  --pc-nav:rgba(37,16,3,.86);
}

/* 紫（いまは 製造管理システム で使用）
   白い文字とのコントラスト比は 10.4 */
.tone--violet{
  --pc-1:#5E2281;  --pc-2:#501D6D;  --pc-3:#411859;  --pc-4:#2C103C;
  --pc-accent:#C58BFF;  --pc-accent-deep:#5A1E7C;
  --pc-nav:rgba(42,15,58,.86);
}

/* 黄（いまは 原価計算システム で使用）
   黄は他の2色より明るく見えるため、白い文字の読みやすさが
   ほかと同じ水準になるところまで暗くしています。コントラスト比は 8.7 */
.tone--amber{
  --pc-1:#61470A;  --pc-2:#513B08;  --pc-3:#412F06;  --pc-4:#2C2004;
  --pc-accent:#FFD24A;  --pc-accent-deep:#6B4E08;
  --pc-nav:rgba(38,28,4,.86);
}

/* 画面の下までスクロールしきったときの余白も、テーマの色にします */
.tone{background:var(--pc-4)}
.tone ::selection{background:#fff;color:var(--pc-3)}


/* 製品ページの見出し帯だけ、下端の色を「濃い面その1」の上端に合わせています。
   （グラデーションを、見出し帯からフッターまで1本でつなげるため） */
.lead-band--prod{background:linear-gradient(180deg,var(--pc-1) 0%,var(--pc-2) 100%)}
.lead-band__cat{margin-top:2.2rem;display:inline-flex;align-items:center;gap:1rem;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:.7rem 1.8rem;
  font-size:1.25rem;letter-spacing:.08em}
.lead-band__cat i{font-style:normal;opacity:.55;letter-spacing:.2em}


/* ==========================================================================
   濃い面（lead-band のあと〜お問い合わせまで）
   色は上から下へ 1本のグラデーションでつながっています。
   片方の色だけ変えると、境目に段差が出ます。
   ========================================================================== */
.detail{background:var(--pc-2);position:relative;z-index:10}
.detail__zone1{background:linear-gradient(180deg,var(--pc-2) 0%,var(--pc-3) 100%);position:relative;z-index:1}
.detail__zone2{background:linear-gradient(180deg,var(--pc-3) 0%,var(--pc-4) 100%);position:relative;z-index:1}

.detail__inner{padding-top:9rem;padding-bottom:9rem}
.unit+.unit{margin-top:9.6rem}
/* 目次から飛んだときに、見出しが目次バーの下に隠れないようにする */
.unit[id]{scroll-margin-top:18rem}


/* --------------------------------------------------------------
   ページ内の目次（画面を下げても上に残ります）
   -------------------------------------------------------------- */
.jump{position:sticky;top:9.6rem;z-index:60;
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(17,20,68,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jump__inner{display:flex;align-items:center;gap:3rem;height:5.6rem}
.jump__lab{flex:none;font-size:1.15rem;letter-spacing:.22em;opacity:.45}
.jump__list{display:flex;align-items:center;gap:2.8rem;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.jump__list::-webkit-scrollbar{display:none}
.jump__list a{white-space:nowrap;font-size:1.35rem;opacity:.55;transition:opacity .3s var(--e1)}
.jump__list a:hover,
.jump__list a.is-here{opacity:1}


/* --------------------------------------------------------------
   セクションの見出し
   -------------------------------------------------------------- */
.unit__en{font-size:1.2rem;letter-spacing:.24em;opacity:.5}
.unit__head{font-size:3rem;font-weight:700;line-height:1.7;letter-spacing:.02em;margin-top:1.2rem}
/* max-width は 82rem だったものを 84rem に。製造管理ページの
   「ゼロから作らないので…作り込みます。」が6px足りず「す。」だけ次行に
   落ちていたためです。他の段落の行組みは変わりません（全3ページで確認済み） */
.unit__lead{margin-top:2.2rem;font-size:1.6rem;line-height:2.1;opacity:.8;max-width:84rem}
.unit__lead+.unit__lead{margin-top:1.6rem}


/* --------------------------------------------------------------
   「ひとことで言うと」
   -------------------------------------------------------------- */
.gist{border-left:2px solid rgba(255,255,255,.35);padding-left:3.4rem;margin-top:4rem}
.gist__lab{font-size:1.2rem;letter-spacing:.22em;opacity:.5}
.gist__text{margin-top:1.6rem;font-size:2.4rem;font-weight:700;line-height:1.9;letter-spacing:.02em}
.gist__sub{margin-top:2.2rem;font-size:1.55rem;line-height:2.1;opacity:.75;max-width:78rem}


/* --------------------------------------------------------------
   業務の流れ（丸い札が矢印でつながる図）
   札を増やすときは <li class="track__item"> を1つコピーしてください
   -------------------------------------------------------------- */
.track{display:flex;flex-wrap:wrap;gap:1.4rem 3.2rem;margin-top:3.6rem}
.track__item{position:relative;display:flex;align-items:center;gap:1.1rem;
  border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.05);
  border-radius:100px;padding:.9rem 2rem}
.track__item+.track__item::before{
  content:"";position:absolute;left:-2.3rem;top:0;bottom:0;margin:auto;
  width:.6rem;height:.6rem;transform:rotate(45deg);
  border-top:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(255,255,255,.45)}
.track__no{font-size:1.1rem;letter-spacing:.14em;opacity:.45}
.track__txt{font-size:1.4rem;font-weight:700;line-height:1.6}
.track__note{margin-top:2.2rem;font-size:1.3rem;line-height:1.9;opacity:.55}


/* --------------------------------------------------------------
   こんな課題はありませんか（お客様の言葉を「」で引用します）
   -------------------------------------------------------------- */
.voice__list{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 3rem;margin-top:4rem}
.voice__list li{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  border-radius:.8rem;padding:2.6rem 2.8rem}
.voice__q{font-size:1.6rem;font-weight:700;line-height:1.9}
.voice__a{margin-top:1.2rem;font-size:1.35rem;line-height:2;opacity:.6}


/* --------------------------------------------------------------
   主な機能（トップページ「事業内容」の3枚と同じ見た目に揃えています）
   ★2026.08.21：ページの分量を減らすため、3ページとも「主な機能」の
     セクションを削除しました。この見た目の指定は、あとで復活させる
     ときのために残してあります（いまはどのページでも使っていません）
   -------------------------------------------------------------- */
.feat__list{display:grid;grid-template-columns:repeat(3,1fr);gap:4.4rem 3.6rem;margin-top:4.4rem}
.feat__item{border-top:1px solid rgba(255,255,255,.18);padding-top:2.6rem}
.feat__head{display:flex;align-items:center;justify-content:space-between}
.feat__no{font-size:1.2rem;letter-spacing:.24em;opacity:.45}
.feat__icon{width:2.8rem;height:2.8rem;opacity:.55}
.feat__icon svg{width:100%;height:100%}
.feat__item h4{margin-top:2rem;font-size:1.7rem;font-weight:700;line-height:1.7}
.feat__item p{margin-top:1.4rem;font-size:1.35rem;line-height:2;opacity:.6}

/* こまかい機能（箇条書き） */
.feat__more{margin-top:5rem;border-top:1px solid rgba(255,255,255,.14);padding-top:3rem}
.feat__more-head{font-size:1.5rem;font-weight:700}
.feat__more-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 3.6rem;margin-top:2.2rem}
.feat__more-list li{position:relative;padding-left:1.8rem;font-size:1.4rem;line-height:2;opacity:.7}
.feat__more-list li::before{content:"";position:absolute;left:0;top:1.15rem;
  width:.6rem;height:.6rem;border-radius:100px;background:#fff;opacity:.5}


/* --------------------------------------------------------------
   画面イメージ（左へ流れます。マウスを乗せると止まります）

   ★画像の差し替え方
     images/screen-〇〇-01.svg … は「仮」の図版です。
     実際の画面キャプチャができたら、同じ場所に画像を置いて
     HTML の <img src="..."> と <figcaption> を書き換えてください。
     ・横長（幅1200px前後）で書き出すと、この枠にきれいに収まります
     ・枚数を増やすときは <li> をコピーし、
       「2つ目のかたまり（aria-hidden="true"）」の側にも同じだけコピーしてください
       （2つのかたまりが同じ中身のとき、途切れずに流れます）
   -------------------------------------------------------------- */
.shots{margin-top:4rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.shots__row{display:flex;width:max-content}
.shots__list{display:flex;align-items:flex-start;gap:2.6rem;padding-right:2.6rem;
  animation:marquee 90s linear infinite}
.shots:hover .shots__list{animation-play-state:paused}
.shots__list li{flex:none;width:46rem}
.shots__list figure{position:relative}
/* 画像の上に透明なカバーを重ね、画像そのものを掴めないようにしています */
.shots__list figure::before{content:"";position:absolute;z-index:2;left:0;top:0;right:0;
  aspect-ratio:1875/906;border-radius:.6rem}
.shots__list img{width:100%;height:auto;border:1px solid rgba(255,255,255,.16);border-radius:.6rem;
  background:rgba(255,255,255,.03);
  /* 画像を保存・ドラッグできないようにしています（右クリックは js/product.js で止めています）
     ※Webの仕組み上、完全に防ぐことはできません。開発者ツールや画像のURLを
       直接開けば取得できてしまう点は、あらかじめご承知おきください */
  pointer-events:none;user-select:none;-webkit-user-select:none;
  -webkit-user-drag:none;-webkit-touch-callout:none}
.shots__list figcaption{margin-top:1.4rem;font-size:1.35rem;line-height:1.7;opacity:.65}
.shots__note{margin-top:2.6rem;font-size:1.3rem;line-height:1.9;opacity:.5}


/* --------------------------------------------------------------
   導入で変わること（これまで → 導入後）
   ★2026.08.21：3ページとも削除しました。復活させるときのために
     この見た目の指定だけ残してあります（いまは使っていません）
   -------------------------------------------------------------- */
.gain__list{margin-top:4rem;border-top:1px solid rgba(255,255,255,.14)}
.gain__list li{display:flex;align-items:center;gap:3rem;
  padding:2.6rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
.gain__box{flex:1 1 0;min-width:0}
.gain__box2{flex:1.15 1 0}
.gain__lab{font-size:1.15rem;letter-spacing:.18em;opacity:.4}
.gain__before{margin-top:.8rem;font-size:1.5rem;line-height:1.9;opacity:.55}
.gain__after{margin-top:.8rem;font-size:1.6rem;font-weight:700;line-height:1.9}
.gain__arrow{flex:none;width:3rem;height:1px;background:rgba(255,255,255,.35);position:relative}
.gain__arrow::after{content:"";position:absolute;right:0;top:-.3rem;
  width:.7rem;height:.7rem;transform:rotate(45deg);
  border-top:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5)}


/* --------------------------------------------------------------
   トップページの内容とつなぐ枠（事業内容・会社情報へのご案内）
   -------------------------------------------------------------- */
.bridge{margin-top:4rem;border:1px solid rgba(255,255,255,.18);border-radius:.8rem;
  background:rgba(255,255,255,.04);padding:3rem 3.4rem}
.bridge__lab{font-size:1.2rem;letter-spacing:.22em;opacity:.5}
.bridge__txt{margin-top:1.4rem;font-size:1.55rem;line-height:2.1;opacity:.85}
.bridge__act{margin-top:2.4rem;display:flex;gap:1.2rem;flex-wrap:wrap}


/* --------------------------------------------------------------
   よくあるご質問（見出しをクリックすると開きます）
   ★2026.08.21：3ページとも削除しました。復活させるときのために
     この見た目の指定だけ残してあります（いまは使っていません）
   -------------------------------------------------------------- */
.qa{margin-top:4rem;border-top:1px solid rgba(255,255,255,.14)}
.qa__item{border-bottom:1px solid rgba(255,255,255,.14)}
.qa__q{position:relative;list-style:none;cursor:pointer;
  padding:2.6rem 5rem 2.6rem 4.2rem;font-size:1.6rem;font-weight:700;line-height:1.9}
.qa__q::-webkit-details-marker{display:none}
.qa__q::before{content:"Q";position:absolute;left:0;top:2.6rem;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-size:1.6rem;opacity:.45}
.qa__mark{position:absolute;right:.6rem;top:3.5rem;width:1.4rem;height:1.4rem}
.qa__mark::before,
.qa__mark::after{content:"";position:absolute;left:0;top:.65rem;width:1.4rem;height:1px;
  background:#fff;opacity:.7;transition:transform .4s var(--e2)}
.qa__mark::after{transform:rotate(90deg)}
.qa__item[open] .qa__mark::after{transform:rotate(0deg)}
.qa__a{position:relative;padding:0 5rem 2.8rem 4.2rem;font-size:1.5rem;line-height:2.1;opacity:.75}
.qa__a::before{content:"A";position:absolute;left:0;top:0;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;font-size:1.6rem;opacity:.45}


/* --------------------------------------------------------------
   ほかの製品
   -------------------------------------------------------------- */
.also__list{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 3rem;margin-top:3.4rem}
.also__list li{position:relative}
.also__item{display:block;height:100%;border:1px solid rgba(255,255,255,.16);border-radius:.8rem;
  background:rgba(255,255,255,.04);padding:3rem 3.2rem;
  transition:background-color .4s var(--e1),border-color .4s var(--e1),transform .4s var(--e2)}
a.also__item:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);transform:translateY(-.4rem)}
.also__no{font-size:1.15rem;letter-spacing:.24em;opacity:.45}
.also__item h4{margin-top:1.2rem;font-size:2rem;font-weight:700;line-height:1.6}
.also__item p{margin-top:1.2rem;font-size:1.35rem;line-height:2;opacity:.6}
.also__soon{display:inline-block;margin-top:1.8rem;font-size:1.15rem;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:.4rem 1.2rem;opacity:.6}
.also__item--off{opacity:.55}


/* --------------------------------------------------------------
   お問い合わせへのご案内
   -------------------------------------------------------------- */
.closing{margin-top:9.6rem;text-align:center;
  border-top:1px solid rgba(255,255,255,.14);padding-top:8rem}
.closing__head{font-size:3.4rem;font-weight:700;line-height:1.7;letter-spacing:.1rem}
.closing__lead{margin-top:2.4rem;font-size:1.55rem;line-height:2.1;opacity:.8}
.closing__act{margin-top:4.4rem}

/* トップページへ戻るボタン（左向きの矢印。ホバーで左へ動きます） */
.backlink{margin-top:5rem;text-align:center}
.pill--rev::before{
  width:.7rem;height:.7rem;border-radius:0;background:transparent;
  border-left:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg)}
.pill--rev:hover::before{
  background:transparent;border-color:var(--pc-3);
  transform:rotate(45deg) translate(-.42rem,.42rem)}
.pill--rev:hover span{transform:translateX(-.6rem)}


/* ==========================================================================
   動作環境（明るい面）
   ※ js/index.js の lightSections に .env を入れています。
      クラス名を変えるときは js も直してください（ロゴの色が切り替わらなくなります）
   ========================================================================== */
.env{background:var(--gray);color:var(--ink);position:relative;z-index:10;overflow:hidden}
.env a{color:var(--ink)}
.env__inner{padding-top:9rem;padding-bottom:9rem}
.env .unit__en{opacity:.55}
.env .unit__head{margin-top:1.2rem}
.env__note{margin-top:2.6rem;font-size:1.35rem;line-height:2;opacity:.6}
.env .profile__body{margin-top:3.4rem}



/* --------------------------------------------------------------
   差し色を当てる場所（色そのものは、上の「テーマ」で決めています）
   -------------------------------------------------------------- */
.lead-band__cat{border-color:var(--pc-accent)}
.lead-band__cat i{color:var(--pc-accent);opacity:.9}

.jump{background:var(--pc-nav)}
.jump__list a.is-here{color:var(--pc-accent)}

.unit__en{color:var(--pc-accent);opacity:.85}
.gist{border-left-color:var(--pc-accent)}
.gist__lab{color:var(--pc-accent);opacity:.75}
.track__no{color:var(--pc-accent);opacity:.85}
.bridge__lab{color:var(--pc-accent);opacity:.85}
.also__no{color:var(--pc-accent);opacity:.8}
a.also__item:hover{border-color:var(--pc-accent)}

/* 白く反転するボタンの、文字と丸の色 */
.tone .pill:hover{color:var(--pc-3)}
.tone .pill:hover::before{background:var(--pc-3)}
.tone .disc:hover{color:var(--pc-3)}
.tone .disc:hover::before{background:var(--pc-3)}

/* 明るい面（動作環境）の英字ラベルは、濃いほうの差し色を使います */
.env .unit__en{color:var(--pc-accent-deep);opacity:.9}


/* ==========================================================================
   画面幅への対応
   ========================================================================== */
@media screen and (max-width:1200px){
  .feat__list{grid-template-columns:repeat(2,1fr)}
  .shots__list li{width:40rem}
}

@media screen and (max-width:1040px){
  /* 目次が1行に収まらない幅では、横にスワイプできるようにし、
     右端をぼかして「まだ続きがある」ことを示します */
  .jump__lab{display:none}
  .jump__list{gap:2.2rem;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent 100%)}

  .unit__head{font-size:2.6rem}
  .gist__text{font-size:2.1rem}
  .voice__list{grid-template-columns:1fr}
  .feat__more-list{grid-template-columns:1fr}
  .also__list{grid-template-columns:1fr}
  .closing__head{font-size:2.8rem}
}

@media screen and (max-width:900px){
  .jump{top:8.4rem}
}

@media screen and (max-width:767px){
  /* スマートフォンでは目次を固定せず、横にスワイプできる帯にします */
  .jump{position:static;top:auto}
  .jump__inner{display:block;height:auto;padding:1.8rem 0}
  .jump__lab{font-size:1.1rem}
  .jump__list{gap:2rem;margin-top:1.2rem;padding-bottom:.4rem}
  .jump__list a{font-size:1.3rem}

  .detail__inner{padding-top:6.4rem;padding-bottom:6.4rem}
  .unit+.unit{margin-top:6.8rem}
  .unit[id]{scroll-margin-top:8rem}

  .lead-band__cat{margin-top:1.8rem;font-size:1.15rem;padding:.6rem 1.4rem}
  .unit__en{font-size:1.1rem}
  .unit__head{font-size:2.1rem;margin-top:1rem}
  .unit__lead{margin-top:1.8rem;font-size:1.5rem}

  .gist{margin-top:3rem;padding-left:2rem}
  .gist__text{margin-top:1.2rem;font-size:1.8rem;line-height:1.9}
  .gist__sub{margin-top:1.8rem;font-size:1.45rem}

  .track{gap:1rem 2.6rem;margin-top:2.8rem}
  .track__item{padding:.7rem 1.5rem;gap:.8rem}
  .track__item+.track__item::before{left:-1.9rem}
  .track__txt{font-size:1.3rem}
  .track__note{margin-top:1.8rem;font-size:1.25rem}

  .voice__list{gap:1.6rem;margin-top:3rem}
  .voice__list li{padding:2rem 2.2rem}
  .voice__q{font-size:1.5rem}
  .voice__a{font-size:1.3rem}

  .feat__list{display:block;margin-top:3rem}
  .feat__item{padding-top:2.2rem}
  .feat__item+.feat__item{margin-top:3.4rem}
  .feat__item h4{margin-top:1.6rem;font-size:1.6rem}
  .feat__item p{margin-top:1.2rem;font-size:1.3rem}
  .feat__more{margin-top:3.6rem;padding-top:2.4rem}
  .feat__more-list{gap:1.2rem;margin-top:1.8rem}
  .feat__more-list li{font-size:1.3rem}

  .shots{margin-top:3rem}
  .shots__list{gap:1.8rem;padding-right:1.8rem}
  .shots__list li{width:28rem}
  .shots__list figcaption{margin-top:1rem;font-size:1.25rem}
  .shots__note{margin-top:2rem;font-size:1.25rem}

  /* これまで → 導入後 を縦に積み、矢印を下向きにします */
  .gain__list{margin-top:3rem}
  .gain__list li{display:block;padding:2.2rem 0}
  .gain__box2{margin-top:1.6rem}
  .gain__before{font-size:1.4rem}
  .gain__after{font-size:1.4rem}
  .gain__arrow{width:1px;height:1.8rem;margin:1.4rem 0 0 .9rem;background:rgba(255,255,255,.35)}
  .gain__arrow::after{right:auto;left:-.35rem;top:auto;bottom:0;transform:rotate(135deg)}

  .bridge{margin-top:3rem;padding:2.2rem 2.4rem}
  .bridge__txt{margin-top:1.2rem;font-size:1.45rem}
  .bridge__act{margin-top:2rem}

  .qa{margin-top:3rem}
  .qa__q{padding:2.2rem 4rem 2.2rem 3.2rem;font-size:1.5rem}
  .qa__q::before{top:2.2rem;font-size:1.5rem}
  .qa__mark{top:3rem}
  .qa__a{padding:0 0 2.4rem 3.2rem;font-size:1.4rem}

  .also__list{gap:1.6rem;margin-top:2.6rem}
  .also__item{padding:2.2rem 2.4rem}
  .also__item h4{font-size:1.8rem}

  .closing{margin-top:6.4rem;padding-top:5.4rem}
  .closing__head{font-size:2.2rem}
  .closing__lead{margin-top:1.8rem;font-size:1.45rem}
  .closing__act{margin-top:3.6rem}
  .backlink{margin-top:3.6rem}

  .env__inner{padding-top:6.4rem;padding-bottom:6.4rem}
  .env__note{margin-top:2rem;font-size:1.25rem}
}