/* 出典: 旧WP page-official-channels.php インラインスタイル */
/* MAIN BANNER : サイト共通のHERO規格 (1920x400 / margin-top:109px) */
.oc-head{position:relative;width:100%;height:400px;margin-top:109px;overflow:hidden;text-align:center}
.oc-head-bg{position:absolute;inset:0;background:#0a1230 url(/wp-content/themes/taian-bridge-rwd/assets/images/pages/official-channels-hero.webp) center center/cover no-repeat}
.oc-head-overlay{position:absolute;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(3.5px);-webkit-backdrop-filter:blur(3.5px)}
.oc-head-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px}
.oc-head-inner > *{max-width:1000px}
.oc-title{margin:0;font-size:48px;font-weight:800;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#FAFAFA;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.oc-sub{margin:20px 0 0;font-size:25px;font-weight:400;line-height:1.3;color:#FAFAFA;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* ===== BODY : デザイン案の座標基準 (カード213x292 / gap24 / 4+3配置) ===== */
.oc-body{background:#FFFFFF;padding:89px 24px 120px}
.oc-inner{max-width:925px;margin:0 auto}

.oc-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:25px 24px}

.oc-item{
  position:relative;box-sizing:border-box;
  width:213px;height:292px;padding:33px 19px 0;
  background:#FFFFFF;border:1px solid rgba(26,26,26,.1);border-radius:33px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:box-shadow .18s ease,transform .18s ease
}
.oc-item:hover{box-shadow:0 14px 34px rgba(26,26,26,.09);transform:translateY(-3px)}

/* 上段4枚 / 下段5枚。カードは全部 213px のまま(縮めない)。
   5枚並ぶ幅 = 213*5 + 24*4 = 1161px まで枠を広げ、
   order で 4枚目と5枚目の間に「幅100%の空要素」を挟んで改行させる。
   各行は justify-content:center で中央に寄る。 */
@media (min-width:1210px){
  .oc-inner{max-width:1161px}
  .oc-item:nth-child(-n+4){order:-1}
  .oc-item:nth-child(n+5){order:1}
  /* 改行用の空要素は独立した行になるため、その上下に row-gap が1回ずつ入る。
     よって行間は row-gap の2倍。25px にしたいので row-gap は半分の 12.5px。 */
  .oc-list{row-gap:12.5px}
  .oc-list::after{content:"";order:0;flex:0 0 100%;height:0}
}

.oc-ico{width:51px;height:51px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.oc-ico svg{width:27px;height:27px}
.oc-ico.is-youtube{background:#FFDFDF;color:#c8271d}
.oc-ico.is-instagram{background:#fdeef4;color:#c1348a}
.oc-ico.is-blog{background:#eef2fb;color:#0047AB}
.oc-ico.is-facebook{background:#eaf1fd;color:#1877F2}
.oc-ico.is-x{background:#eef0f3;color:#0f1419}
.oc-ico.is-tiktok{background:#ffeef3;color:#ee1d52}
.oc-ico.is-line{background:#e8f7ec;color:#06a04a}
.oc-ico.is-linkedin{background:#eaf2fb;color:#0A66C2}
.oc-ico.is-threads{background:#f0f0f2;color:#101010}

/* 縦座標: アイコン34>85、名称94、ハンドル123、説明155、ボタン225(下端30) */
.oc-name{display:block;margin:9px 0 0;font-size:18px;font-weight:700;line-height:30px;color:#1A1A1A}
/* 行の高さ(24px)は変えない。下の説明文の位置がずれるため。 */
.oc-handle{display:block;margin:0;font-size:13px;font-weight:500;line-height:24px;color:#A8A8A8}
.oc-desc{margin:7px 0 0;width:175px;font-size:12px;font-weight:500;line-height:16px;color:#1A1A1A;word-break:normal;line-break:strict;overflow-wrap:anywhere}

.oc-btn{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  box-sizing:border-box;width:164px;height:37px;padding:0 21px;
  border-radius:27px;background:#0047AB;color:#FAFAFA;
  font-size:13px;font-weight:700;line-height:16px;text-decoration:none;
  display:flex;align-items:center;justify-content:space-between;
  white-space:nowrap;transition:background .15s ease
}
.oc-btn:hover{background:#00337d;color:#FAFAFA}
.oc-btn i{display:block;width:7px;height:7px;border:1.5px solid #FFFFFF;border-left:0;border-bottom:0;transform:rotate(45deg);flex:none}

/* ===== 下部の案内文 ===== */
.oc-note{margin:126px auto 0;max-width:844px;text-align:center}
.oc-note-mark{display:flex;align-items:center;justify-content:center;width:25px;height:25px;margin:0 auto 12px;border-radius:6.6px;background:#C00000;color:#FAFAFA;font-size:15.8px;font-weight:800;line-height:1}
.oc-note p{margin:0;font-size:14px;font-weight:500;line-height:20px;color:#1A1A1A}
.oc-note a{color:#0047AB;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ===== レスポンシブ ===== */
@media (max-width:1000px){
  .oc-body{padding:72px 20px 100px}
  .oc-note{margin-top:88px}
}
@media (max-width:768px){
  .oc-head{height:240px;margin-top:0;padding:0}
  .oc-title{font-size:28px;line-height:34px;word-break:keep-all}
  .oc-sub{margin-top:14px;font-size:15px;line-height:1.55}
  .oc-body{padding:44px 16px 72px}
  .oc-list{gap:14px}
  .oc-note{margin-top:56px}
  .oc-note p{font-size:13px;line-height:1.9}
}
@media (max-width:520px){
  .oc-list{flex-direction:column;align-items:center}
  .oc-item{width:100%;max-width:320px;height:auto;padding:30px 22px 26px;border-radius:28px}
  .oc-desc{width:100%;max-width:230px}
  .oc-btn{position:static;transform:none;margin:22px auto 0}
}