@charset "UTF-8";
/* ==========================================================================
   フッター
   --------------------------------------------------------------------------
   現行の問題
     ・3列のウィジェットエリアのうち、中央にスタッフ募集バナーが1枚あるだけで
       左右は空。フッターの面積のほとんどが使われていなかった
     ・サイト内へ戻る導線がゼロ（メニューは「運営会社」「プライバシーポリシー」の
       2本とも外部リンク）。記事を読み終えた人はそこで行き止まりになる
     ・姉妹サービス（エルメッセージ／エルサイト）への導線がどこにもない

   デザイン案
     1. サービスバナー3枚のグリッド（明るい背景）
     2. 4カラム：ブランド ／ カテゴリー ／ 人気のタグ ／ 運営
     3. 最下部：コピーライト ＋ 関連メディア

   カテゴリーとタグは functions.php で実データから作るので、
   記事が増えても手で直す必要はない。
   「運営」列は Cocoon のフッターメニューをそのまま流用しているので、
   リンクの出し入れは 外観 → メニュー でできる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. サービスバナー
   -------------------------------------------------------------------------- */
.lg-services{
  padding:    44px 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-sub);
}
.lg-services__in{
  width:     min(100% - 32px, var(--w-wrap-wide));
  margin:    0 auto;
}
.lg-services__grid{
  display:   grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:       clamp(18px, 1.6vw, 28px);
}
.lg-services__item{
  display:       block;
  overflow:      hidden;
  border-radius: var(--radius-lg);
  border:        1px solid var(--c-line);
  background:    var(--c-bg);
  transition:    transform .15s, opacity .15s;
}
.lg-services__item img{
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 900 / 308;
  object-fit:   cover;
}
.lg-services__item:hover{
  transform: translateY(-2px);
  opacity:   .92;
}

/* --------------------------------------------------------------------------
   2. フッター本体

   Cocoon はキーカラー設定から
     #footer, #footer a:not(.sns-button) { color:#fff }   (1,1,1)
   を出力する。文字色を指定するルールは #footer を頭に付けて、
   これに勝てる詳細度にしておくこと。
   -------------------------------------------------------------------------- */
#footer.footer{
  margin-top: 0;
  padding:    44px 0 24px;
  background: var(--c-footer-bg);
  color:      var(--c-footer-ink);
  font-size:  13px;
}

#footer-in.footer-in{
  display:        flex;
  flex-direction: column;
}

/* Cocoon は .cf（クリアフィックス）を付けており、その ::after が
   flex コンテナの中では「幅0のアイテム」として数えられてしまう。
   ・#footer-in では order:0 のアイテムとして4カラムより前に入る
   ・.footer-bottom では space-between の3つ目の枠を取り、
     関連メディアが右端ではなく中央寄りで止まる
   float の回り込み解除はどちらにも要らないので消す。 */
#footer-in.footer-in::after,
#footer-in .footer-bottom::after{ content: none; }

/* 4カラム */
.lg-footer__grid{
  display:   grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:       32px;
  padding-bottom: 32px;
  border-bottom:  1px solid var(--c-footer-line);
}

#footer .lg-footer__brand p{
  margin:      14px 0 0;
  font-size:   12px;
  line-height: 1.9;
  color:       var(--c-footer-ink-2);
}
/* ブランド名は上の説明文より詳細度を上げないと負ける */
#footer .lg-footer__brand .lg-footer__logo{
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      0;
  font-size:   14px;
  font-weight: 700;
  color:       var(--c-footer-title);
}
#footer .lg-footer__brand .lg-footer__logo img{
  flex:   none;
  width:  30px;
  height: 30px;
  border-radius: 50%;
}

#footer .lg-footer__h{
  margin:      0 0 12px;
  font-size:   12px;
  font-weight: 700;
  letter-spacing: .08em;
  color:       var(--c-footer-title);
}
.lg-footer__list{
  margin:  0;
  padding: 0;
  list-style: none;
}
/* リンクは 12px の文字なので、素のままだと当たり判定が高さ12pxしかない。
   上下に余白を持たせて 24px 以上を確保する（WCAG 2.5.8 の目安）。
   その代わり li の下マージンは外し、行間の見た目は元のまま保つ。 */
.lg-footer__list li{ margin-bottom: 0; }
#footer .lg-footer__list a{
  display:     inline-block;
  padding:     4px 0;
  font-size:   12px;
  line-height: 1.5;
  color:       var(--c-footer-ink);
  text-decoration: none;
}
#footer .lg-footer__list a:hover{
  color: var(--c-footer-title);
  text-decoration: underline;
}

/* 「運営」列は wp_nav_menu() で .lg-footer__list として出しているので、
   上のリスト指定がそのまま効く。Cocoon が最下部にも出す #navi-footer は
   下の「3. 最下部」で隠している。 */

/* --------------------------------------------------------------------------
   スタッフ募集などのウィジェット（footer-left / center / right）
   4カラムの下、コピーライトの上に1行で置く。
   Cocoon の DOM 順は「ウィジェット → footer-bottom」なので、
   4カラムを差し込んだあとの順番を order で整える。
   -------------------------------------------------------------------------- */
/* SPでは Cocoon が .footer-widgets ではなく .footer-widgets-mobile を出す。
   order を付け忘れると 0 のまま＝先頭になり、4カラムより上にバナーが出る。 */
#footer-in .lg-footer__grid{ order: 1; }
#footer-in .footer-widgets,
#footer-in .footer-widgets-mobile{ order: 2; }
#footer-in .footer-bottom{ order: 3; }

/* display は触らない。
   Cocoon は画面幅で .footer-widgets と .footer-widgets-mobile を出し分けており、
   こちらで display:flex を当てると SP で両方出てしまい、
   スタッフ募集バナーが2枚並ぶ。
   余白と画像の中央寄せだけを指定する。 */
#footer-in .footer-widgets,
#footer-in .footer-widgets-mobile{
  margin:  0;
  padding: 24px 0 0;
}
#footer-in .footer-widgets .widget,
#footer-in .footer-widgets-mobile .widget{ margin: 0; }
#footer-in .footer-widgets img,
#footer-in .footer-widgets-mobile img{
  display:       block;
  margin:        0 auto;
  max-width:     300px;
  height:        auto;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   3. 最下部
   -------------------------------------------------------------------------- */
/* Cocoon のマークアップは
     .footer-bottom > .footer-bottom-content > (#navi-footer ＋ .copyright)
   という2階層。関連メディアのナビは .footer-bottom-content の外に足しているので、
   横並びの器は .footer-bottom のほうにする。
   （テンプレートの出力を文字列で切り貼りして内側に入れる方法もあるが、
     Cocoon が div の数を変えた瞬間に壊れるので採らない） */
#footer-in .footer-bottom{
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         16px;
  margin:      0;
  padding-top: 20px;
}
#footer-in .footer-bottom-content{
  flex:    0 1 auto;
  padding: 0;
}
/* 「運営」列へ移したので、最下部のメニューは出さない */
#footer-in .footer-bottom #navi-footer{ display: none; }

/* Cocoon の配置設定（fdt-left-and-right）で右寄せになっているが、
   左に置くので戻す */
#footer-in .copyright{
  margin:     0;
  font-size:  12px;
  color:      var(--c-footer-ink-2);
  text-align: left;
}

.lg-footer__sites{
  display: flex;
  flex:    0 1 auto;
  gap:     18px;
}
#footer .lg-footer__sites a{
  display:     inline-block;
  padding:     4px 0;      /* 当たり判定を24px以上に */
  font-size:   12px;
  line-height: 1.5;
  color:       var(--c-footer-ink-2);
  text-decoration: none;
}
#footer .lg-footer__sites a:hover{
  color: var(--c-footer-title);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px){
  .lg-services{ padding: 32px 0; }
  .lg-footer__grid{ grid-template-columns: 1fr 1fr; gap: 24px; }

  /* この幅では Cocoon の .wrap が左右の余白を持たなくなり、
     フッターの文字が画面の端に貼りついてしまう。ここで持たせる。
     .footer-bottom は Cocoon が 8px の左右余白を持っているので相殺する。 */
  #footer-in.footer-in{ padding-inline: 16px; }
  #footer-in .footer-bottom{ padding-inline: 0; }
}

@media screen and (max-width: 834px){
  .lg-services__grid{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media screen and (max-width: 560px){
  .lg-footer__grid{ grid-template-columns: 1fr; }
  #footer-in .footer-bottom{
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
  }
  .lg-footer__sites{ flex-wrap: wrap; gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce){
  .lg-services__item{ transition: none; }
}