@charset "utf-8";
/* ============================================================
   fylc.net  Instagram導線 追加スタイル
   作成: 2026-07-31 / Office N
   目的: グローバルナビ／About Us／フッターに追加した Instagram
         アイコンが、どの画面幅でもレイアウトを崩さず、意図しない
         改行・見切れ・重なりを起こさないようにする。
   方針: 追加した要素（.sns_nav_ig / .sns_ig_pair / .sns_aboutus_ig
         / .sns_footer_ig）だけを対象にし、既存のナビ・ボタン・
         画像・文字には一切干渉しない。
   ============================================================ */

/* ---------- ① グローバルナビ（PCヘッダ／追従ヘッダ／SPハンバーガー共通） ---------- */
/* アイコンは「お問い合わせ」ボタンと同じ <li> の中に置いてある。
   こうすることで、幅が狭まってナビが2段になる場合も
   「お問い合わせ＋Instagram」が必ず一緒に折り返し、
   アイコンだけが取り残されて改行することが構造的に起こらない。 */
/* ※ 既存スキンの li は「中の余白を含めない幅」で確定してしまい、
     子を2つ置くと右へはみ出す（ヘッダは overflow:hidden なので欠ける）。
     この li だけ inline-flex にして、ボタン＋アイコンの合計幅を正しく取る。 */
.c-menu .sns_nav_ig_host {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}
/* 既存メニュー項目の余白(padding 0 28px 0 14px / margin-left 10px)を
   このアイコンにだけ解除し、ナビの必要幅を最小限に抑える */
/* ※ 既存スキンは .c-menu li a に幅100%を与えるため、
     アイコンにはアイコン幅を明示してボタン幅に引き伸ばされるのを防ぐ */
.c-menu a.sns_nav_ig {
  display: inline-block;
  width: 36px !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  margin: 0 0 0 16px !important;
  line-height: 0;
  vertical-align: middle;
  transition: opacity .2s;
}
.c-menu a.sns_nav_ig:hover {
  opacity: .7;
}
.c-menu a.sns_nav_ig img {
  display: block;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: none;
  border: 0;
}

/* PC表示で横幅が狭まる帯では、アイコンを段階的に控えめにして
   ナビが元のサイトより早く2段に折り返すのを防ぐ。
   （各しきい値は 769〜1920px を20px刻みで実測して決定。
     1366px＝ノートPCの定番幅でも1行を維持できることを確認済み） */
@media screen and (min-width: 769px) and (max-width: 1465px) {
  .c-menu a.sns_nav_ig { width: 28px !important; margin-left: 8px !important; }
  .c-menu a.sns_nav_ig img { width: 28px; height: 28px; min-width: 28px; }
}
@media screen and (min-width: 769px) and (max-width: 1380px) {
  .c-menu a.sns_nav_ig { width: 22px !important; margin-left: 4px !important; }
  .c-menu a.sns_nav_ig img { width: 22px; height: 22px; min-width: 22px; }
}

/* SP（ハンバーガー展開時）は縦積みメニューに合わせて
   ボタンの下に独立表示し、中央へ揃える */
@media screen and (max-width: 768px) {
  .c-menu .sns_nav_ig_host {
    display: block !important;   /* PC用のinline-flexを解除（縦積みに戻す） */
    white-space: normal;
  }
  .c-menu a.sns_nav_ig {
    display: block;
    width: 36px !important;
    margin: 1.6em auto 0 !important;
  }
  .c-menu a.sns_nav_ig img { width: 36px; height: 36px; min-width: 36px; }
}

/* ---------- ② About Us：ライオンズ必携バッジ ＋ Instagram ---------- */
/* 2つのアイコンを1つのまとまりとして扱い、間で改行させない
   （Instagramだけが下段に落ちるのを防ぐ）。 */
/* ボタン行との間隔は左右対称のマージンで取る。
   （HTML側の全角スペース区切りだと、折返してペアが独自の行になった時に
     行頭に全角スペースが残り、まとまりが右へずれるため廃止。
     対称マージンなら折返し行でも完全に中央に揃う。
     ※合計幅は従来より増やさないこと＝広い画面での
       「ボタン2つ＋バッジ＋IGが1行」の並びを維持する条件） */
.sns_ig_pair {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin: 0 9px;
}
.sns_ig_pair .c-img {
  display: inline;
}
.sns_aboutus_ig img {
  display: inline-block;
  width: 72px;
  height: 72px;
  margin-left: 14px;   /* バッジとの間隔。ボタン間・ボタン〜バッジ間とほぼ均一に揃える */
  vertical-align: middle;
  border: 0;
  transition: opacity .2s;
}
.sns_aboutus_ig a:hover img {
  opacity: .7;
}

/* ---------- ③ フッター ---------- */
.sns_footer_ig {
  margin-top: 1.4em;
  line-height: 0;
}
.sns_footer_ig a {
  display: inline-block;
  line-height: 0;
  transition: opacity .2s;
}
.sns_footer_ig a:hover {
  opacity: .7;
}
.sns_footer_ig img {
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
}
@media screen and (max-width: 768px) {
  /* SPではフッターが1カラム中央揃えになるため、アイコンも中央へ */
  .sns_footer_ig { text-align: center; margin-top: 1.1em; }
  .sns_footer_ig img { width: 40px; height: 40px; }
}