@charset "utf-8";
/* =========================================================
   こんなお悩みありませんか？ /question/  ページ固有CSS

   ★このページは「Illustratorの新デザインが無い」ページ（🟦青）。
     したがって大原則が逆になる（ルール3章）。
       原稿・構成・写真  → 現行の公開ページ https://aircon.co.jp/question/ が正
       レイアウト・幅・色 → 会社概要 /company/ の作りに合わせて組み直す

   ★原稿の「正」の決まり（和田さん確定 2026/08/29）
     現行ページは本文がすべて画像。**画面に見えている画像の文字が正。alt属性は使わない。**
     （altが4か所ふるく、altに寄せると一覧カードとリンク先の見出しが噛み合わなくなる）
     例外は a04 の答えだけ。和田さんの指示で alt 側「ルームエアコン修理10 年無料保証付き！」を採用。

   ★デザインデータ/こんな悩みありませんか？/こんな悩みありませんか？.ai は
     PDF互換OFFで読めない（文字が Adobe の警告文だけ）。かつ「古いデザイン」なので
     レイアウトの正ではない。→ 全体管理チャットに報告済み。

   土台：assets/company.css（幅・色・見出し・本文・「楽に頼めて」・CTA余白）
   ※共通部品（header / sidebar / cta / footer / .cmp-closing / .cmp-photos2）は
     一切上書きしていない。ここは .qst- から始まる独自クラスと、
     .cmp-〇〇.qst-〇〇 の複合セレクタ（このページだけに効く）しか使わない。

   ------------------------------------------------------------------
   ★数値の出どころ（リファレンス4章「実CSSにある値だけを使う」）
     下の値はすべて公開中の style.css?20250624 の #question ブロックの実測値。
     実CSSに無い値だけ、会社概要から借用して「借用」と明記した。

     | 部品                | 現行の実CSS                          | ここでの実装            |
     |---------------------|--------------------------------------|-------------------------|
     | 本文ブロック        | #conts 755px − padding 51px×2 = 651px| 754px（全ページ共通ルール）|
     | 本文                | 14px / line-height 1.63 / justify    | そのまま                |
     | 答え枠（.subBox）   | 2px dotted #2896E2 / radius 5px      | そのまま                |
     | 答え枠の本文        | 14px / 1.65 / 左右margin 15px        | そのまま                |
     | セクション間        | 31px                                 | そのまま                |
     | 見出しの下          | 16px                                 | そのまま                |
     | 本文と写真の間      | 20px ／ 写真 271px                   | そのまま                |
     | 上へ戻る            | 12px / #2896E2 / 右寄せ              | そのまま                |
     | 悩み一覧のカード    | 325px（651pxに2列）                  | 376.5px（754pxに2列）   |
     | 見出しの文字サイズ  | 画像のため実CSSに無い                | 20px（現行画像から実測）|
     | 一覧カードの文字    | 画像のため実CSSに無い                | 15px（現行画像から実測）|
     | 答えの見出し        | 画像のため実CSSに無い                | 20px（現行画像から実測）|
     | リード1行目／2行目  | 画像のため実CSSに無い                | 24px／35px（同上）      |

   ★色（ルール5章）
     現行ページの画像から実測した色は 見出し#000060 ／ 帯・リンク#2896E2 ／
     枠#0060B3 ／ オレンジ#FF6F00 ／ カード背景#EAF4FC。
     このうち見出し系は、ルール5章によりブランド青 #0954A5（var(--blue)）に統一する。
     リンクと答え枠の点線は実CSSどおり #2896E2（about.css の --abt-link と同じ）。
     オレンジ #FF6F00 とカード背景 #EAF4FC は現行から借用。
   ========================================================= */

.qst{
  --qst-block:754px;      /* ★本文ブロックの幅（下の共通ルール参照） */
  --qst-link:#2896E2;     /* 本文中のリンク・答え枠の点線（現行の実CSS） */
  --qst-orange:#FF6F00;   /* リードの2行目（現行の実CSS .colorTxt と同じ） */
  --qst-card:#EAF4FC;     /* 悩み一覧カードの背景（現行画像から実測・借用） */
}

/* =========================================================
   ★★本文ブロックは 754px（全ページ共通ルール・2026/08/28 和田さん確定）

     本文カラム   189.75 〜 1031.75（842px）  ← 確定値。変えない
     本文ブロック 189.75 〜  943.75（754px）  ← 中身はここに収める
     サイドバーとの間 91.25px

   842px（本文カラムいっぱい）にすると、サイドバーとの間が3pxしか空かず、
   線や枠がサイドバーに接触して見える。文章だけでなく、写真・枠・カード・
   ボタンも全部754px以内に収める。

   ここでは本文の直下にある3つのブロック（リード／悩み一覧／セクション）だけを
   754pxにしている。見出し・本文行・答え枠・上へ戻るは、その中で自動的に754pxになる。
   個別に width を書くと、写真と並ぶ段組み（.qst-body の flex）が壊れるため書かない。
   ※詳細度は .qst-main を頭に付けて確保している。
   ※スマホ（768px以下）は対象外。下のメディアクエリで100%に戻す。
   ========================================================= */
.qst-main > .qst-lead,
.qst-main > .qst-index,
.qst-main > .qst-sec{width:var(--qst-block);}

/* ---------- ページタイトル ----------
   ★2026/08/29 差し替え済み。会社概要 .cmp-hero（company.css）をそのまま使うので
     ここには何も書かない。画像 assets/img/question/hero.jpg（2000×524）。 */

/* ---------- リード ---------- */
.qst-lead{margin:0;}
.qst-lead__1{
  display:block;
  font-size:24px;
  font-weight:700;
  color:var(--blue);
  line-height:1.35;
  letter-spacing:var(--h-tracking);
}
.qst-lead__2{
  display:block;
  margin-top:4px;
  font-size:35px;
  font-weight:900;
  color:var(--qst-orange);
  line-height:1.3;
  letter-spacing:var(--h-tracking);
}

/* ---------- 悩み一覧（ページ内リンク） ----------
   現行：.qList li{width:325px} を flexB(space-between) で2列、行間 margin-top:2px
   本文ブロックが 651px → 754px に広がったので、カード幅だけ 376.5px に置き換えた。
   現行の下マージン 45px はそのまま。 */
.qst-index{
  margin:38px 0 45px;   /* 上：現行 .imgtext01{margin-bottom:38px} */
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
.qst-index li{margin-top:2px;width:376.5px;}
.qst-index a{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:57px;
  padding:8px 16px;
  border:1px solid var(--blue);
  border-radius:5px;
  background:var(--qst-card);
  color:var(--blue);
  font-size:15px;
  font-weight:700;
  line-height:1.5;
  text-decoration:none;
  font-feature-settings:"palt";
}
.qst-index a:hover{opacity:.7;}
/* 下向きの山かっこ（現行カードの右端にある「∨」） */
.qst-index a::after{
  content:"";
  flex:0 0 auto;
  width:9px;height:9px;
  margin-top:-4px;
  border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
}

/* ---------- セクション ---------- */
.qst-sec{margin-bottom:31px;}   /* 現行 section:not(:last-child){margin-bottom:31px} */
.qst-sec:last-of-type{margin-bottom:0;}

/* 見出し（現行は画像。左の青いバー＋濃い文字＋下の点線をCSSで組み直した） */
.qst-h{
  margin:0 0 16px;              /* 現行 .h3Ttl{margin:0 -5px 16px} */
  padding:0 0 10px 14px;
  position:relative;
  font-size:20px;               /* 現行画像から実測 */
  font-weight:700;
  color:var(--blue);
  line-height:1.4;
  letter-spacing:var(--h-tracking);
  border-bottom:1px dotted var(--rule);
}
.qst-h::before{
  content:"";
  position:absolute;left:0;top:2px;
  width:4px;height:calc(100% - 12px);
  background:var(--blue);
}

/* 本文＋イラスト（現行 .imgBox{margin:0 9px 18px 0}／.textBox{margin-right:20px}／.photoBox{width:271px}） */
.qst-body{
  margin:0 0 18px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.qst-txt{
  flex:1;
  min-width:0;
  margin:0 20px 0 0;
}
.qst-txt p{
  margin:0;
  font-size:14px;
  line-height:1.63;
  text-align:justify;
  font-feature-settings:"palt";
}
.qst-fig{
  flex:0 0 271px;
  width:271px;
  margin:2px 0 0;               /* 現行 .photoBox{margin-top:2px} */
  text-align:right;
}
.qst-fig img{display:block;width:100%;height:auto;}

/* 答え枠（現行 .subBox） */
.qst-ans{
  margin:0 0 4px;
  padding:14px 0 17px;
  border:2px dotted var(--qst-link);
  border-radius:5px;
}
/* 「アットエアコンなら…」の矢印ラベル＋答えの見出し
   ★セレクタを p.qst-ans__h にしているのは、下の .qst-ans p（0,1,1）に
     .qst-ans__h（0,1,0）が詳細度で負けて、14pxになってしまうため。
   ★字間を −.02em にしている理由：
     754px化で入る幅が567pxになり、1番長い「本体購入から取付（交換）、アフター
     サービスまですべてお任せ！」が2行に折り返した。現行ページは1行なので、
     palt（約物を詰める）と −.02em で1行に戻した。実測で6件とも1行を確認済み。 */
.qst-ans p.qst-ans__h{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 15px 8px;
  font-size:20px;               /* 現行画像から実測 */
  font-weight:700;
  color:var(--blue);
  line-height:1.4;
  letter-spacing:-.02em;
  font-feature-settings:"palt";
  text-align:left;
}
.qst-ans__tag{
  flex:0 0 auto;
  padding:5px 22px 5px 10px;
  background:var(--blue);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:0;
  white-space:nowrap;
  /* 右側を三角にした矢印タグ（現行画像と同じ形） */
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.qst-ans p{
  margin:0 15px;
  font-size:14px;
  line-height:1.65;
  text-align:justify;
  font-feature-settings:"palt";
}
.qst-ans .qst-em{font-weight:700;}
.qst-ans .qst-link{margin-top:8px;}
.qst-ans .qst-link a{
  color:var(--qst-link);
  font-weight:700;
  text-decoration:none;
}
.qst-ans .qst-link a:hover{text-decoration:underline;}

/* 上へ戻る（現行 .back{margin:0 13px;text-align:right}） */
.qst-back{
  margin:0 13px;
  text-align:right;
}
.qst-back a{
  color:var(--qst-link);
  font-size:12px;
  text-decoration:none;
}
.qst-back a:hover{text-decoration:underline;}

/* =========================================================
   スマホ（768px以下）
   ・サイドバーは出さない（company.css 側で .cmp-side{display:none}）
   ・CTAの上100px、CTAとフッターの間60px は共通部品側で効く
   ========================================================= */
@media (max-width:768px){

  .qst-lead__1{font-size:17px;}
  .qst-lead__2{font-size:24px;}

  .qst-index{margin:24px 0 30px;display:block;}
  .qst-index li{width:auto;margin-top:8px;}
  .qst-index a{min-height:0;padding:11px 14px;font-size:14px;}

  .qst-sec{margin-bottom:34px;}
  .qst-h{font-size:17px;padding-bottom:9px;}

  .qst-body{display:block;margin-bottom:16px;}
  .qst-txt{margin:0;}
  .qst-txt p{font-size:14px;line-height:1.85;}
  .qst-fig{width:100%;max-width:271px;margin:14px auto 0;}

  .qst-ans{padding:14px 0 16px;}
  /* スマホでは矢印タグを1行目に置き、答えの見出しはその下に落とす */
  .qst-ans p.qst-ans__h{display:block;font-size:16px;margin:0 14px 8px;letter-spacing:0;}
  .qst-ans__tag{display:inline-block;margin-bottom:8px;}
  .qst-ans__t{display:block;}
  .qst-ans p{margin:0 14px;line-height:1.85;}

  .qst-back{margin:0;}

  /* ★754pxルールはPCだけ。スマホは画面幅に合わせる */
  .qst-main > .qst-lead,
  .qst-main > .qst-index,
  .qst-main > .qst-sec{width:auto;}
}

/* =========================================================
   ページ内ジャンプの位置合わせ（2026/09/03 追加）

   このページは上のボタンを押すと下の項目（#a01〜#a06）へ飛ぶ。
   ただしヘッダーが画面の上に貼り付く（sticky）ようになったため、
   飛び先がヘッダーの下に潜り込んで見えなくなっていた。
   （押しても何も起きないように見える）

   scroll-margin-top で「飛んだときだけ」その分だけ手前で止める。
   見た目の位置は1pxも変わらない。

   数値の根拠（本番で実測・2026/09/03）
     PC   追従中のヘッダーの高さ 185px → 余白15pxを足して 200px
     スマホ 追従中のヘッダーの高さ  64px → 余白16pxを足して  80px
   ========================================================= */
#a01,#a02,#a03,#a04,#a05,#a06,#qBox{
  scroll-margin-top:200px;
}
@media (max-width:768px){
  #a01,#a02,#a03,#a04,#a05,#a06,#qBox{
    scroll-margin-top:80px;
  }
}