/* MEDIA セクション */
.techs-media__title{ font-size: var(--techs-fz-h2); font-weight:800; margin:0 0 .6em; }
.techs-media__grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:900px){ .techs-media__grid{ grid-template-columns:repeat(3,1fr); } }

.techs-media__card{ display:flex; flex-direction:column; gap:12px; }
.techs-media__head{ display:flex; align-items:center; justify-content:space-between; }
.techs-media__badge{ font-weight:800; color:#fff; background:var(--techs-orange-600); padding:.35em .6em; border-radius:999px; font-size:.9rem; }

.techs-media__embed{ position:relative; width:100%; }
.techs-media__embed iframe, .techs-media__embed blockquote{ width:100% !important; max-width:100% !important; }

/* “チラ見せ”：初期は高さ制限＋フェード、ホバーで全開 */
.techs-media__embed--peek{ max-height:320px; overflow:hidden; border-radius:var(--techs-radius); }
.techs-media__embed--peek::after{
  content:""; position:absolute; inset:auto 0 0 0; height:80px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events:none;
}
.techs-media__card:hover .techs-media__embed--peek{ max-height:1200px; transition:max-height .35s ease; }
.techs-media__card:hover .techs-media__embed--peek::after{ opacity:0; transition:opacity .25s ease; }

.techs-media__placeholder{
  display:grid; place-items:center; min-height:220px;
  color:var(--techs-ink-400); background:var(--techs-surface); border-radius:var(--techs-radius);
}
.techs-media__btn{ align-self:flex-start; display:inline-flex; gap:.5em; align-items:center; text-decoration:none; }

/* ===== Header shrink support ===== */
.header--shrunk #header-in{min-height:60px; transition:min-height .25s ease}
.header--shrunk .logo-header img{max-height:44px; transition:max-height .25s ease}

/* ===== MEDIA（Instagram / X / YouTubeの3カード） ===== */
.techs-media__title{ font-size: var(--techs-fz-h2); font-weight:800; margin:0 0 .6em; }
.techs-media__grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:900px){ .techs-media__grid{ grid-template-columns:repeat(3,1fr); } }

.techs-media__card{ display:flex; flex-direction:column; gap:12px; }
.techs-media__head{ display:flex; align-items:center; justify-content:space-between; }
.techs-media__badge{ font-weight:800; color:#fff; background:var(--techs-orange-600); padding:.35em .6em; border-radius:999px; font-size:.9rem; }

.techs-media__embed{ position:relative; width:100%; }
.techs-media__embed iframe, .techs-media__embed blockquote{ width:100% !important; max-width:100% !important; }

/* “チラ見せ”：初期は高さ制限＋フェード、ホバーで全開 */
.techs-media__embed--peek{ max-height:320px; overflow:hidden; border-radius:var(--techs-radius); }
.techs-media__embed--peek::after{
  content:""; position:absolute; inset:auto 0 0 0; height:80px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  pointer-events:none;
}
.techs-media__card:hover .techs-media__embed--peek{ max-height:1200px; transition:max-height .35s ease; }
.techs-media__card:hover .techs-media__embed--peek::after{ opacity:0; transition:opacity .25s ease; }

.techs-media__placeholder{
  display:grid; place-items:center; min-height:220px;
  color:var(--techs-ink-400); background:var(--techs-surface); border-radius:var(--techs-radius);
}
.techs-media__btn{ align-self:flex-start; display:inline-flex; gap:.5em; align-items:center; text-decoration:none; }

/* ==== MEDIA ヘッダー（アイコン＋名前） ==== */
.techs-media__head{ display:flex; align-items:center; margin-bottom:6px; }
.techs-media__brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; }
.techs-media__icon{ display:inline-flex; line-height:0; }

/* ブランドごとの色（アイコンだけ色付け） */
.techs-media__card--instagram .techs-media__icon{ color:#E1306C; }
.techs-media__card--x         .techs-media__icon{ color:#000; }           /* ダーク基調。薄くしたいなら #1d9bf0 でもOK */
.techs-media__card--youtube   .techs-media__icon{ color:#FF0000; }
/* MEDIA: タイトル中央揃え */
.techs-media__head{ justify-content:center; text-align:center; }
.techs-media__brand{ margin-inline:auto; display:inline-flex; align-items:center; gap:10px; }
.techs-media__name{ font-weight:800; font-size:1.1rem; }

/* ついでにプレースホルダも中央に */
.techs-media__placeholder{ text-align:center; }

/* カードの整列と見出し */
.techs-media__card{ text-align:center; align-items:center; }
.techs-media__head{ justify-content:center; margin-bottom:10px; }
.techs-media__brand{ display:inline-flex; gap:10px; align-items:center; }
.techs-media__name{ font-weight:800; font-size:1.15rem; }

/* 埋め込みの“チラ見せ”高さ調整（PC/スマホ） */
.techs-media__embed--peek{ max-height:520px; overflow:hidden; border-radius:16px; }
@media (max-width: 900px){
  .techs-media__embed--peek{ max-height:360px; }
}

/* Instagram/Xのデフォ余白を詰める */
.techs-media__embed blockquote.instagram-media{ margin:0 auto !important; }
.techs-media__embed .twitter-tweet{ margin:0 auto !important; }

/* グリッドの間隔（見やすく） */
.techs-media__grid{ gap:28px; }


/* ===== TECHS 擬似ボックス（NEWS/WORKS）===== */
.techs-posts{ display:flex; flex-direction:column;  }
.techs-posts__item{ background:#fff; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,.07); overflow:hidden; }
.techs-posts__link{ display:flex; align-items:flex-start; gap:20px; padding:14px 16px; color:inherit; text-decoration:none; }
.techs-posts__link:hover .techs-posts__title{ color:#ff7a00; }
.techs-posts__thumb{flex:0 0 33% !important; max-width:33% !important;max-height: 100% !important; }
.techs-posts__img{ width:100%; height:160px; object-fit:cover; border-radius:8px; display:block; }
.techs-posts__meta{ flex:1; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.techs-posts__title{ margin:0 0 8px; font-weight:700; font-size:1.05rem; color:#222; line-height:100; }
.techs-posts__excerpt{ margin:0 0 10px; color:#555; line-height:1.6; }
.techs-posts__date{ margin:0; color:#9aa0a6; font-size:.65rem; text-align:right; }


/* 余白の調整（NEWS→WORKS の間を詰めるなら） */
.home-section.news + .home-section.news{ padding-top: 20px; }
/* ===== TECHS：ホバーで浮き上がり＋オレンジ枠 ===== */
:root{
  --techs-orange: #FF7A00;       /* ブランド色：必要なら値だけ差し替え */
}

.techs-posts__item{
  position: relative;
  border: 1px solid rgba(0,0,0,.06);      /* ふだんは薄い枠 */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  will-change: transform;
  background:#fff; /* 念のため指定 */
}

/* ボックス全体でホバー／フォーカス反応 */
.techs-posts__item:hover,
.techs-posts__item:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: var(--techs-orange);
}

/* 既存のタイトル色変化をブランド色に寄せる */
.techs-posts__link:hover .techs-posts__title{
  color: var(--techs-orange);
}

/* アクセシビリティ：キーボード操作でも分かるように */
.techs-posts__link{
  border-radius: inherit;   /* 枠丸みを継承して見た目を揃える */
}
.techs-posts__link:focus-visible{
  outline: 5px solid var(--techs-orange);
  outline-offset: 3px;
}

/* レイアウトのはみ出し保険（横幅は常に親幅に追随） */
.techs-posts,
.techs-posts__item,
.techs-posts__link{ box-sizing: border-box; width: 100%; }

/* 端末幅に素直に縮むように（既存設定を活かしつつ微調整） */
@media (max-width: 768px){
  .techs-posts{ gap: 18px; }
  .techs-posts__link{ padding: 12px; }
  .techs-posts__img{ height: 40%; } /* 好みで200→190などに */
}

/* 動きが苦手な人向け：アニメ最小化 */
@media (prefers-reduced-motion: reduce){
  .techs-posts__item{
    transition: border-color .01s linear, box-shadow .01s linear;
  }
  .techs-posts__item:hover,
  .techs-posts__item:focus-within{
    transform: none;
    box-shadow: 0 6px 20px rgba(0,0,0,.07);
  }
}
/* === 横長ボックスを全端末で維持しつつ、滑らかに縮む === */

/* 行レイアウトと余白を可変に */
.techs-posts__link{
  display:flex;
  align-items:center;
  gap: clamp(12px, 3vw, 20px);
  padding: clamp(10px, 3vw, 16px);
  flex-wrap: nowrap;
}

/* サムネは常に左。幅は可変、アスペクトは16:9で固定 */
.techs-posts__thumb{ 
  flex: 0 0 clamp(120px, 32vw, 240px);
}
.techs-posts__img{
  width: 100%;
  aspect-ratio: 16 / 9;   /* ← height固定をやめて比率固定に */
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* 右側テキスト領域 */
.techs-posts__meta{
  flex: 1;
  min-width: 0;                   /* 折返し時のはみ出し防止 */
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.6vw, 10px);
}

/* タイトル・本文も可変サイズ＆行数制御で縦長化を防ぐ */
.techs-posts__title{
  margin: 0;
  font-weight: 700;
  font-size: clamp(15px, 3.6vw, 18px);
  line-height: 1.35;
}
.techs-posts__excerpt{
  margin: 0;
  color: #555;
  line-height: 1.6;
  display: -webkit-box;           /* 行数制限 */
  -webkit-line-clamp: 2;          /* 必要なら 1〜3 に調整 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 日付は右下固定（本文量が増えても底に張り付く） */
.techs-posts__date{
  margin: 0;
  color: #9aa0a6;
  font-size: clamp(.82rem, 2.8vw, .9rem);
  text-align: right;
  margin-top: auto;
}

/* カード自体の最小高さも可変にして“縦長化”を抑える */
.techs-posts__item{
  min-height: clamp(110px, 28vw, 180px);
  overflow: hidden;
}

/* === SPで右側テキストをさらに圧縮し、横長ボックスを維持 === */
@media (max-width: 560px){
  /* 余白とギャップを小さく */
  .techs-posts__link{
    gap: 10px;
    padding: 10px 12px;
  }
  .techs-posts__meta{
    gap: 4px;                 /* タイトル/本文/日付の間隔を圧縮 */
    justify-content: space-between;
    min-width: 0;
  }

  /* 画像サイズはそのまま（比率16:9）—必要なら flex-basis を小さくして調整 */
  .techs-posts__thumb{ flex: 0 0 clamp(95px, 34vw, 180px); }
  .techs-posts__img{ aspect-ratio: 16 / 9; height: auto; }

  /* タイトル/本文/日付を“かなり”小さく＋行数制限で縦長化を防止 */
  .techs-posts__title{
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.28;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;      /* 見出しは最大2行まで */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .techs-posts__excerpt{
    font-size: clamp(11px, 3.2vw, 12.5px);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;      /* 本文は1行に圧縮（もっと見せたいなら 2 に） */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .techs-posts__date{
    font-size: clamp(10px, 2.8vw, 11.5px);
    line-height: 1.2;
    margin-top: auto;            /* 右下に張り付けて整列 */
    text-align: right;
    white-space: nowrap;
  }

  /* カードの最小高さを下げて縦長化を抑える */
  .techs-posts__item{
    min-height: clamp(84px, 22vw, 140px);
  }
}

/* さらに狭い端末（iPhone SE等）はもう一段コンパクトに */
@media (max-width: 380px){
  .techs-posts__thumb{ flex-basis: 40vw; }
  .techs-posts__title{ font-size: clamp(10.5px, 4.4vw, 13px); -webkit-line-clamp: 1; }
  .techs-posts__excerpt{ font-size: clamp(9.5px, 3.4vw, 12px); -webkit-line-clamp: 1; }
  .techs-posts__date{ font-size: clamp(6.5px, 2.6vw, 11px); }
}

/* ====== 修正パック：中央寄せ＋はみ出し防止（PC/スマホ共通） ====== */

/* 1) ULの左インデントを完全リセット＆中央寄せ */
.techs-posts{
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* 2) コンテンツ幅は「100%の中で最大値」を採用して中央に固定
      （以前の width:min(720px,92vw) は上書き） */
.home-section .techs-posts{
  max-width: 1040px;          /* PC時の上限。好みで 960–1120px */
  width: 100%;
  margin-inline: auto;        /* 中央寄せ */
  padding-inline: clamp(12px, 3vw, 24px);  /* 左右を対称に */
}

/* 3) 影や枠が途中で切れないよう overflow を可視化に戻す */
.techs-posts,
.techs-posts__item,
.techs-posts__link{
  overflow: visible !important;   /* ← 以前の hidden を打ち消し */
}

/* 4) li（カード）は常に親幅いっぱいで揃える */
.techs-posts__item{
  width: 100%;
  box-sizing: border-box;
  transform: translateZ(0);       /* スクロールバー出現の揺れ防止 */
}

/* 5) スマホは画面いっぱいを厳守（右切れ防止の最終ガード） */
@media (max-width: 560px){
  .home-section .techs-posts{
    max-width: 100%;
    padding-inline: 16px;         /* 左右均等の内側余白だけにする */
  }
}

/* === TECHS NEWS/WORKS：行の高さを統一して比率を固定 === */
.home-section .techs-posts{
  /* 行の高さ・サムネ幅・余白を1か所で管理 */
  --card-h: clamp(94px, 18vw, 140px);   /* ← 行の高さ（小さくしたければ最小値を下げる） */
  --thumb-w: 33%;                       /* ← 左画像の幅（%で一定） */
  --gap: 12px;
  --pad-x: 12px;                        /* 左右パディング */
  --pad-y: 0px;                         /* 上下パディング（帯を消す） */
}

/* 行レイアウト：常に横並び＆縦は card-h に合わせる */
.techs-posts__link{
  display:flex !important;
  align-items:stretch !important;       /* 画像を上下いっぱいに */
  flex-wrap:nowrap !important;
  gap: var(--gap) !important;
  padding: var(--pad-y) var(--pad-x) !important;
  min-height: var(--card-h) !important; /* ← 行の高さをここで統一 */
}

/* 左サムネ：幅は%固定・高さは行にフィット */
.techs-posts__thumb{
  flex: 0 0 var(--thumb-w) !important;
  max-width: var(--thumb-w) !important;
  align-self: stretch !important;
}
.techs-posts__img{
  width:98% !important;
  height: 98% !important;               /* ← 上下いっぱい */
  object-fit:cover !important;
  border-radius:10px !important;
  display:block !important;
  border-radius: 0 !important;
}

/* 右テキスト：縦中央＆高さに依存しないよう圧縮 */
.techs-posts__meta{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;    /* ← タイトル縦中央 */
  padding-block: 0 !important;
  padding-inline: 2px !important;
}

/* タイポは行高に合わせて自動スケール（比率維持） */
.techs-posts__title{
  margin:0 0 4px !important;
  line-height:1.3 !important;
  font-size: clamp(.9rem, 2.6vw, 1.45rem) !important;
}
.techs-posts__excerpt{
  margin:0 !important; color:#555;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-line-clamp: 1 !important;     /* 高さ一定のため1行に */
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.techs-posts__date{
  margin:0 !important; text-align:right;
  font-size: clamp(.78rem, 2.2vw, .9rem) !important;
  white-space:nowrap !important;
}

/* カード間の余白ゼロ（必要なら 6–8px に） */
.techs-posts{ gap:0 !important; }
.techs-posts__item{ margin:0 !important; }

/* さらに小さい端末で“同じ比率のまま”もう一段だけ縮む */
@media (max-width: 420px){
  .home-section .techs-posts{
    --card-h: clamp(86px, 24vw, 120px); /* ← 行の高さだけ微調整 */
    --thumb-w: 34%;                      /* 視認性確保で少しだけ広げる */
  }
}