@charset "UTF-8";
/* ==========================================================================
   セクションタイトル（紺の筆バナー）
   --------------------------------------------------------------------------
   SECTION 3 の経営理念バッジ（.s3-phil-badge）と同じ見せ方を他のセクションにも
   広げるためのレイヤー。設計 1484px 幅のとき「高さ 61px・左から 60px・上から 22px」
   という SECTION 3 の実測値をそのまま使う。

   ステージ（.s4-stage など）は参考元を実測したピクセル座標で組んであり、中に要素を
   足すと座標がずれる。そこで バッジはステージの「中」ではなく「上」に、
   ふつうの流し込みで積む。ステージ自体には一切さわらない。

   cqw はコンテナ（.sec-badge）の幅基準。コンテナ自身のプロパティで使うと
   祖先基準になってしまうので、必ず子（img）側でだけ使う。
   ========================================================================== */

/* ステージを横中央に置いていた justify-content:center は、縦積みにすると
   効き目が変わる。横方向の中央寄せは align-items で持たせ直す。 */
section.s1,
section.s4,
section.s5,
section.s7,
section.s8,
section.s9,
section#contact.s10,
section#company.s11{
  flex-direction: column;
  align-items: center;
}

.sec-badge{
  width: min(100%, 1484px);
  container-type: inline-size;
  margin: 0;
  padding: 0;
  line-height: 0;          /* img の下に行間のすき間ができないように */
}
.sec-badge img{
  display: block;
  height: 4.111cqw;        /* 設計 61 / 1484 */
  width: auto;
  margin: 1.482cqw 0 0 4.043cqw;   /* 設計 上 22 / 左 60 */
}

/* SECTION 1 だけは実測ステージではなく通常の流し込み（.s1-wrap）なので、
   バッジもその中に入れて左端をそろえる。
   .s1-wrap の幅は 1349px（＝他セクションの 1484px より狭い）ので、
   見た目の高さがそろうよう cqw の係数を割り戻す（61 / 1349）。 */
.s1-wrap .sec-badge{ width: 100%; }
.s1-wrap .sec-badge img{ height: 4.522cqw; margin: 0 0 0 6px; }
/* バッジが戻ったぶん、見出しが持っていた上の余白は減らす */
.s1-wrap .sec-badge + .s1-title{ margin-top: 14px; }


/* ── スマホ ───────────────────────────────────────────────
   ステージが流し込みに戻り、左右に 5vw の余白が入るので、バッジもそろえる。
   高さは cqw だと小さくなりすぎるため px で固定する。 */
@media (max-width: 900px){
  .sec-badge{ padding: 0 5vw; }
  .sec-badge img{
    height: 50px;
    margin: 26px 0 0;
  }
  /* SECTION 5 はセクション自身が 5vw の左右余白を持つので、二重にしない */
  section.s5 .sec-badge{ padding: 0; }

  .s1-wrap .sec-badge{ padding: 0; }
  .s1-wrap .sec-badge img{ height: 50px; margin: 6px 0 0 6px; }  /* 6px は .s1-title の左と同じ */
  .s1-wrap .sec-badge + .s1-title{ margin-top: 12px; }
}

/* SECTION 11 だけは流し込みに戻る境目が 1080px、ステージの左右余白も 20px 固定。
   そこに合わせる（900px 以下でも効くよう、上のブロックより後ろに書く）。 */
@media (max-width: 1080px){
  section#company .sec-badge{ padding: 0 20px; }
  section#company .sec-badge img{ height: 50px; margin: 26px 0 0; }
}

@media (max-width: 400px){
  .sec-badge img,
  .s1-wrap .sec-badge img,
  section#company .sec-badge img{ height: 42px; }
}