@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/



/* ===== TECHS: 採用ページ Pick Up（急募案件）横型カード統一デザイン ===== */
.recruit-pickup {
  margin: 60px 0;
}

.recruit-pickup h2 {
  font-size: 1.5em;
  color: #ff7a00;
  border-left: 5px solid #ff7a00;
  padding-left: 10px;
  margin-bottom: 25px;
}

/* カードコンテナ */
.pickup-horizontal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* カード全体 */
.pickup-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pickup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* リンク全体 */
.pickup-link {
  display: flex;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: 12px 16px;
  gap: 20px;
}

/* サムネイル */
.pickup-thumb {
  flex: 0 0 240px;
}
.pickup-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

/* 右側の本文 */
.pickup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* タイトル */
.pickup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px 0;
  line-height: 1.5;
}
.pickup-title:hover {
  color: #ff7a00;
}

/* 抜粋 */
.pickup-excerpt {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* 日付 */
.pickup-date {
  font-size: 0.8rem;
  color: #999;
}

/* ===== スマホ表示 ===== */
@media screen and (max-width: 768px) {
  .pickup-link {
    flex-direction: column;
    padding: 10px;
  }
  .pickup-thumb {
    width: 100%;
  }
  .pickup-thumb img {
    height: 200px;
  }
  .pickup-content {
    padding-top: 10px;
  }
}

/* ===== TECHS: 全ページ共通で h2 見出し装飾をリセット ===== */
h2 {
  all: unset; /* Cocoonの全装飾を解除 */
  display: block; /* ブロック要素に戻す */
  font-size: 1.8em;
  font-weight: 700;
  color: #333;
  margin: 1.5em 0 0.8em;
  line-height: 1.3;
}

/* Cocoonのh2ラッパーを打ち消す（余白・背景・枠線） */
.article h2,
.entry-content h2 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1.5em 0 0.8em !important;
}

.article h3,
.entry-content h3 {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 1.5em 0 0.8em !important;
}
/* ===== Footer グリッド（土台） ===== */
/* Cocoonのフッターウィジェットコンテナに合わせて広めに指定（どれかにヒットすればOK） */
#footer .footer-widgets-in,
#footer .footer-widgets,
.l-footer .footer-widgets-in,
.l-footer .footer-widgets,
#techs-footer .tf-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) 20px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr; /* 左：やや広め */
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
@media (min-width: 1025px){
  .tf-col--links,
  .tf-col--sns{
    margin-top: clamp(12px, 4vw, 48px);
  }
}

/* 各カラムのベース */
.tf-col { color: #fff; }
.tf-col a { color: #fff; text-decoration: none; }
.tf-col a:hover { opacity: .9; }

/* ===== 中央：リンク ===== */
.tf-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}
.tf-menu li a {
  display: inline-block;
  font-size: clamp(16px, 2.6vw, 28px); /* 画像の雰囲気に寄せて大きめ */
  border-bottom: 1px solid transparent;
  line-height: 1.15;
}
.tf-menu li a:hover {
  border-bottom-color: rgba(255,255,255,.35);
}

/* ===== 右：SNS + CONTACT ===== */
.tf-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2.5vw, 20px);
}
.tf-social li a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  font-size: clamp(16px, 2.2vw, 24px);
}
.tf-ico {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #fff; /* SVGはcurrentColorで塗られる */
}
.tf-label { display: inline-block; }

/* まずは各カラムにエリア名を割り当て */
.tf-col--brand{ grid-area: brand; }
.tf-col--links{ grid-area: links; }
.tf-col--sns  { grid-area: sns;   }

/* 既存の .tf-inner のgridに“エリア名”を導入（PC） */
#footer .footer-widgets-in,
#footer .footer-widgets,
.l-footer .footer-widgets-in,
.l-footer .footer-widgets,
#techs-footer .tf-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-areas: "brand links sns";
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

/* ===== Grid土台：フッターウィジェット全体をグリッドに ===== */
#footer .footer-widgets-in,
#footer .footer-widgets,
.l-footer .footer-widgets-in,
.l-footer .footer-widgets{
  display: grid !important;
  gap: clamp(18px, 3vw, 32px);
}

/* ラップdivでエリア指定 */
#footer .footer-widgets .tf-w-brand{ grid-area: brand; }
#footer .footer-widgets .tf-w-links{ grid-area: links; }
#footer .footer-widgets .tf-w-sns  { grid-area: sns;   }

/* === PC（3カラム横並び） === */
@media (min-width: 1025px){
  #footer .footer-widgets-in,
  #footer .footer-widgets,
  .l-footer .footer-widgets-in,
  .l-footer .footer-widgets{
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-areas: "brand links sns";
    align-items: start;
  }
}


  /* 右（sns）をセル中央に寄せる */
  #footer .footer-widgets .tf-w-sns{
    align-self: center;
    justify-self: center;
    text-align: center;
  }

  /* 中央寄せ（必要なら） */
  .tf-col{ display:flex; flex-direction:column; align-items:center; text-align:center; }

  /* 余白リセット */
  .tf-col--links, .tf-col--sns, .tf-col--brand{ margin-top: 0 !important; }
  .tf-menu, .tf-social{ margin: 0 !important; }
}

/* === 左フッターを可変に（ロゴ＆住所） === */
.tf-col--brand img{
  max-width: clamp(180px, 28vw, 320px);
  height: auto;
  display: block;
  margin-bottom: clamp(8px, 2vw, 14px);
}
.tf-col--brand,
.tf-col--brand address,
.tf-col--brand p{
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.6;
}

/* リンク/アイコンの可変サイズ */
.tf-menu li a{ font-size: clamp(16px, 2.6vw, 28px); line-height:1.15; }
.tf-social li a{ font-size: clamp(16px, 2.2vw, 24px); line-height:1.2; }
.tf-ico img{ width:28px; height:28px; display:block; }

/* Cocoonのウィジェット上余白対策（必要なら） */
#footer .footer-widgets .widget{ margin-top: 0 !important; }

/* PC/タブレットではモバイル用フッターを非表示（既存フッターを表示） */
#tf-mobile-footer { display: none; }

@media (max-width: 767px){
  /* 既存のPC/タブレット用フッターをスマホで非表示（重複防止） */
  #footer .footer-widgets,
  #footer .footer-widgets-in { display: none !important; }

  /* モバイル専用フッターを表示＆2列レイアウト */
  #tf-mobile-footer{
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 5vw, 40px) 16px;
    grid-template-columns: 1fr 1fr;               /* 2列 */
    grid-template-areas:
      "brand links"                                /* 1段目：左=左フッター, 右=中央フッター */
      "brand sns";                                 /* 2段目：左=左フッター, 右=右フッター */
    gap: clamp(16px, 3vw, 24px);
    align-items: center;
    color: #fff;
  }

  /* エリア割当 */
  #tf-mobile-footer .tfm-brand { grid-area: brand; }
  #tf-mobile-footer .tfm-links { grid-area: links; }
  #tf-mobile-footer .tfm-sns   { grid-area: sns; }

  /* 中央寄せ・余白揺れ防止 */
  #tf-mobile-footer .tfm-links,
  #tf-mobile-footer .tfm-sns   { text-align: center; }
  #tf-mobile-footer .tf-menu,
  #tf-mobile-footer .tf-social { margin: 0; padding: 0; list-style: none; }

  /* 左（会社情報）を画面に合わせて縮小 */
  #tf-mobile-footer .footer-logo { 
    max-width: clamp(160px, 28vw, 300px);
    height: auto;
    display: block;
    margin: 0 auto clamp(8px, 2vw, 14px);
  }
  #tf-mobile-footer .footer-company-info,
  #tf-mobile-footer .footer-company-info p{ 
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.6;
    text-align: center;
    margin: 0;
  }

  /* 真ん中リンクの文字サイズ */
  #tf-mobile-footer .tf-menu{ display: grid; gap: 10px; }
  #tf-mobile-footer .tf-menu a{
    color:#fff; text-decoration:none; font-weight:700; letter-spacing:.03em;
    line-height:1.15; font-size: clamp(16px, 4.6vw, 24px);
  }

  /* 右SNS */
  #tf-mobile-footer .tf-social{ display:grid; gap: clamp(10px, 3.5vw, 18px); }
  #tf-mobile-footer .tf-social a{
    display:inline-flex; align-items:center; gap:12px; color:#fff; text-decoration:none;
    font-weight:700; font-size: clamp(16px, 4.2vw, 22px); line-height:1.2;
  }
  #tf-mobile-footer .tf-ico img{ width:28px; height:28px; display:block; }
}

@media (max-width: 767px){
  /* 列が中身で広がらないように：必須 */
  #tf-mobile-footer{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    padding-left: 16px; padding-right: 16px; /* 端ギリ回避 */
  }
  #tf-mobile-footer *{ box-sizing: border-box; }

  /* ラベルを必ず折り返す */
  #tf-mobile-footer .tf-menu a,
  #tf-mobile-footer .tf-social a{
    white-space: normal;
    word-break: break-word;           /* 英数も折る */
    overflow-wrap: anywhere;          /* さらに保険 */
  }
  /* アイコン＋文字が横幅を超えたら折返し */
  #tf-mobile-footer .tf-social a{ flex-wrap: wrap; }
  #tf-mobile-footer .tf-social li{ min-width: 0; }
  #tf-mobile-footer .tf-label{ display:inline-block; max-width:100%; }

  /* 文字サイズを一段だけタイトに */
  #tf-mobile-footer .tf-menu a   { font-size: clamp(14px, 4.0vw, 20px); }
  #tf-mobile-footer .tf-social a { font-size: clamp(14px, 4.0vw, 20px); }

  /* アイコンも少しだけ小さく */
  #tf-mobile-footer .tf-ico img{ width:24px; height:24px; }
}

/* 共通：ロゴの基本挙動（にじみ防止＆余白） */
.footer-logo{
  display:block;
  height:auto;
  width:auto;              /* 画像の実寸を維持 */
  max-width: 100%;
  margin: 0 auto 10px;     /* 下に少し余白 */
}

/* PC/タブレット（768px以上）：さらに小さく */
@media (min-width: 768px){
  /* 既存フッター内のロゴ */
  #footer .footer-widgets .footer-logo,
  #techs-footer .tf-inner .footer-logo{
    max-width: 180px;      /* ←お好みで 160–200px に調整OK */
  }
}

/* スマホ（～767px）：もっと小さく */
@media (max-width: 767px){
  /* モバイル用フッターのロゴ */
  #tf-mobile-footer .footer-logo{
    max-width: 100px;      /* ←お好みで 130–170px に調整OK */
  }
}



/* ===== PC/タブレット：中央＆右の4行を等間隔で揃える ===== */
@media (min-width: 768px){
  /* 1) 列の総高さをそろえる（デザインに合わせて調整） */
  /*    例：タブレットで ~230px、デスクトップで ~280px を目安に可変 */
  #footer .footer-widgets .tf-w-links > .tf-col,
  #footer .footer-widgets .tf-w-sns   > .tf-col{
    min-height: clamp(220px, 22vw, 300px);
    display: grid;
  }

  /* 2) その総高さを 4 等分して配置（=各行の高さが常に同じになる） */
  .tf-menu,
  .tf-social{
    height: 100%;
    display: grid;
    grid-template-rows: repeat(4, 1fr);  /* ←ここで4等分 */
    row-gap: 10px;                        /* 行間（お好みで） */
    margin: 30px;
    padding: 0;
    list-style: none;
  }

  /* 3) 各アイテムは行の中央に縦揃え */
  .tf-menu li,
  .tf-social li{
    display: flex;
    align-items: center;
    min-width: 0;       /* 文字はみ出し防止の保険 */
  }

  /* 4) 右のアイコン行が高くなりすぎないように */
  .tf-social a{ flex-wrap: nowrap; }
  .tf-ico{ flex: 0 0 auto; }   /* アイコンは固定 */
  .tf-label{ min-width: 0; }   /* テキスト側が折り返し可能に */
}

/* PC/タブレットでは何もしない（sp-brは非表示） */
.sp-br { display: none; }

/* スマホ時のみ改行を発生させる */
@media (max-width: 767px){
  .sp-br{
    display: inline;
  }
  .sp-br::after{
    content: "\A";         /* 改行コードを挿入 */
    white-space: pre;      /* \A を改行として解釈 */
  }

  /* 電話番号などを途中で折り返さない */
  .nowrap{
    white-space: nowrap;
  }
}
/* ========== 0) 共通トーン ========== */
/* =========================
   TECHS Blog List — Clean CSS
   （一覧カード＆見出し 色/レイアウト統一）
========================= */

/* ---- 0) 共通色 ---- */
:root{
  --techs-orange:#FF7A00;   /* NEWS */
  --techs-navy:#0A1E63;     /* WORKS */
  --techs-date:#777;        /* 日付 */
  --techs-border:#ddd;
  --techs-shadow:0 4px 14px rgba(0,0,0,.06);
}

/* ---- 1) カテゴリ見出し（ヘッダー食い込み対策 + 色） ---- */
body.archive .archive-title,
body.category .archive-title,
body.archive .page-title{
  margin-top: clamp(14px, 3vw, 28px);
  padding-top: 2px;
  scroll-margin-top: 96px; /* 固定ヘッダー対策 */
  display:inline-block;
  padding-bottom:6px;
  border-bottom:4px solid currentColor;
}
body.category-news   .archive-title,
body.category-ニュース .archive-title{ color:var(--techs-orange); }
body.category-works  .archive-title,
body.category-ワークス .archive-title{ color:var(--techs-navy);   }

/* ---- 2) 一覧カード（常に 画像左／本文右） ---- */
.entry-card{
  display:grid;
  grid-template-columns: minmax(200px, 32vw) 1fr; /* 画像列：最小幅を確保して極小化防止 */
  gap:16px;
  background:#fff;
  border:1px solid var(--techs-border);
  border-radius:14px;
  box-shadow: var(--techs-shadow);
  overflow:hidden;
  padding:12px;
}
.entry-card + .entry-card{ margin-top:16px; } /* カード間隔 */
.entry-card, .entry-card *{ box-sizing:border-box; }

/* SP/Tablet でも横並びを維持（列比率だけ縮小） */
@media (max-width:1024px){
  .entry-card{ grid-template-columns: minmax(170px, 40vw) minmax(0,1fr); }
}
@media (max-width:767px){
  .entry-card{ grid-template-columns: minmax(150px, 42vw) minmax(0,1fr); gap:12px; padding:10px; }
}

/* ---- 3) サムネ（16:9固定） ---- */
.entry-card .entry-card-thumb{
  position:relative; aspect-ratio:16/9;
  overflow:hidden; border-radius:10px; background:#f2f2f2;
}
.entry-card .entry-card-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---- 4) 本文（タイトル／抜粋／日付） 縦中央寄せ ---- */
.entry-card-content{
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  min-width:0; padding-right:6px;
}
.entry-card-title{
  margin:0; font-weight:900; line-height:1.2;
  font-size: clamp(20px,2.2vw,28px);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entry-card-title a{ color:inherit; text-decoration:none; }
.entry-card-title a:hover{ opacity:.9; }

.entry-card-snippet{
  margin:0; color:#333; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* Cocoon がSPで抜粋を消すのを防止 */
@media (max-width:767px){
  .entry-card-title{ font-size: clamp(18px,5vw,22px); }
  .entry-card-snippet{ font-size: clamp(14px,4.2vw,16px); display:-webkit-box !important; }
}

/* ---- 5) 日付（左下・小さめグレー） ---- */
/* ※“日付非表示CSS”を使っていても、一覧では再表示 */
.archive .posted-on,
.archive .post-date,
.archive .entry-date,
.archive .date,
.archive time.published,
.archive time.updated,
.home   .posted-on,
.home   .post-date,
.home   .entry-date,
.home   .date,
.home   time.published,
.home   time.updated,
.search .posted-on,
.search .post-date,
.search .entry-date,
.search .date,
.search time.published,
.search time.updated{
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
  margin-top:10px !important;
  color:var(--techs-date) !important;
  font-size:13px !important;
  text-align:left !important;
}
@media (max-width:767px){
  .archive .posted-on,
  .home   .posted-on,
  .search .posted-on{ font-size:12px !important; }
}

/* ---- 6) カテゴリバッジ（サムネ左上） ---- */
.entry-card .entry-card-thumb{ position:relative; }
.entry-card .cat-label{
  position:absolute; top:8px; left:8px; z-index:2;
  padding:4px 8px; border-radius:999px;
  color:#fff; font-weight:700; font-size:12px;
  background:#999; /* デフォルト */
}
/* スラッグ別色分け */
.entry-card.category-news  .cat-label,
.entry-card.category-ニュース .cat-label{ background:var(--techs-orange); }
.entry-card.category-works .cat-label,
.entry-card.category-ワークス .cat-label{ background:var(--techs-navy);   }

/* ---- 7) 軽いホバー ---- */
.entry-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.10); transition:.18s; }

/* ========== A) カードが少し狭い時の最適化 ========== */
/* ギャップを詰めて、右コンテンツを中央寄せしやすく */
@media (max-width: 1280px){
  .entry-card{ gap: 12px; }
}

/* ========== B) 左サムネを“列いっぱい”にフィット ========== */
/* ふだんは16:9。中間幅ではセル高いっぱいに広げて「左面を埋める」 */
.entry-card .entry-card-thumb{ width:100%; height:auto; aspect-ratio:16/9; }
.entry-card .entry-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 画面が少し狭い帯域では、アスペクト拘束を解除してセル高いっぱいに */
@media (min-width: 768px) and (max-width: 1280px){
  .entry-card .entry-card-thumb{ height:100%; aspect-ratio: auto; }
}

/* ========== C) 右テキストを“より中央側”に ========== */
/* 右側ブロックの内側余白を調整＋縦中央キープ */
.entry-card-content{
  justify-content: center;          /* 既に指定があれば上書き維持 */
  align-items: flex-start;          /* 左揃えのまま中央へ寄せる */
  padding: 0 8px 0 2px;             /* 右の余白を減らして中央へ寄せる */
  max-width: 980px;                 /* 行の伸び過ぎ抑止（任意） */
}

/* 列間をもう一段だけ詰めたい幅帯（任意） */
@media (max-width: 1100px){
  .entry-card{ gap: 10px; }
  .entry-card-content{ padding-right:6px; }
}

/* ========== D) スマホの文字サイズ最適化（形は崩さず縮小） ========== */
@media (max-width: 767px){
  .entry-card-title  { font-size: clamp(17px, 4.7vw, 20px); }
  .entry-card-snippet{ font-size: clamp(13px, 3.9vw, 15px); }
}

/* ========== E) 日付を少し大きく＆視認性UP ========== */
/* 一覧（home/archive/search）で必ず表示・サイズUP・色調整 */
.home .posted-on, .home .post-date, .home .entry-date, .home time.published, .home time.updated,
.archive .posted-on, .archive .post-date, .archive .entry-date, .archive time.published, .archive time.updated,
.search .posted-on, .search .post-date, .search .entry-date, .search time.published, .search time.updated{
  display:inline !important; visibility:visible !important; opacity:1 !important; height:auto !important;
  color:#666 !important;
  font-size: 15px !important;      /* ← ここで大きく */
  font-weight: 600;
  margin-top: 10px !important;
  text-align: left !important;
}
@media (max-width: 767px){
  .home .posted-on, .home .post-date, .home .entry-date,
  .archive .posted-on, .archive .post-date, .archive .entry-date,
  .search .posted-on, .search .post-date, .search .entry-date{
    font-size: 13px !important;
  }
}

/* 日付：左寄せ・サイズUP・はみ出し防止（一覧のみ） */
.home .entry-card .posted-on,
.home .entry-card .post-date,
.home .entry-card .entry-date,
.home .entry-card time.published,
.home .entry-card time.updated,
.archive .entry-card .posted-on,
.archive .entry-card .post-date,
.archive .entry-card .entry-date,
.archive .entry-card time.published,
.archive .entry-card time.updated,
.search .entry-card .posted-on,
.search .entry-card .post-date,
.search .entry-card .entry-date,
.search .entry-card time.published,
.search .entry-card time.updated{
  display:block !important;
  margin-top:12px !important;
  text-align:left !important;
  font-weight:700;               /* 太字のまま */
  font-size:22px !important;     /* ← もう少し大きく */
  line-height:1.35;
  color:#666 !important;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;        /* はみ出し防止 */
  word-break:break-word;         /* 互換用 */
}

@media (max-width: 767px){
  .home .entry-card .posted-on,
  .home .entry-card .post-date,
  .home .entry-card .entry-date,
  .home .entry-card time.published,
  .home .entry-card time.updated,
  .archive .entry-card .posted-on,
  .archive .entry-card .post-date,
  .archive .entry-card .entry-date,
  .archive .entry-card time.published,
  .archive .entry-card time.updated,
  .search .entry-card .posted-on,
  .search .entry-card .post-date,
  .search .entry-card .entry-date,
  .search .entry-card time.published,
  .search .entry-card time.updated{
    font-size:14px !important;   /* SPは少し控えめ */
  }
}
/* ===== 時計アイコンを完全に消す（Cocoon想定：疑似要素/FA/ダッシュアイコン/SVG全部） ===== */

/* 疑似要素で入れてるケース */
.entry-card .post-date::before,
.entry-card .entry-date::before,
.entry-card .post-date a::before,
.entry-card .entry-date a::before,
.entry-card .post-date span::before,
.entry-card .entry-date span::before,
.archive .post-date::before,
.archive .entry-date::before,
.home .post-date::before,
.home .entry-date::before{
  content: '' !important;
  display: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Font Awesome / 独自アイコンクラス / “clock”を含むクラス名ごと */
.entry-card .post-date i,
.entry-card .entry-date i,
.entry-card .post-date svg,
.entry-card .entry-date svg,
.entry-card .post-date [class*="clock"],
.entry-card .entry-date [class*="clock"],
i.fa-clock, i.fa-clock-o, i.far.fa-clock, i.fas.fa-clock{
  display: none !important;
}

/* Dashicons を消す（:before にフォントグリフ） */
.entry-card .post-date.dashicons:before,
.entry-card .entry-date.dashicons:before,
.entry-card .post-date .dashicons:before,
.entry-card .entry-date .dashicons:before{
  content: '' !important;
  display: none !important;
  font-family: inherit !important;
}

/* アイコン用に残った左の余白をリセット */
.entry-card .post-date,
.entry-card .entry-date{
  padding-left: 0 !important;
  background: none !important;
}

/* 日付：太字OFF＋右端から内側に余白 */
.home .entry-card .posted-on,
.home .entry-card .post-date,
.home .entry-card .entry-date,
.home .entry-card time.published,
.home .entry-card time.updated,
.archive .entry-card .posted-on,
.archive .entry-card .post-date,
.archive .entry-card .entry-date,
.archive .entry-card time.published,
.archive .entry-card time.updated,
.search .entry-card .posted-on,
.search .entry-card .post-date,
.search .entry-card .entry-date,
.search .entry-card time.published,
.search .entry-card time.updated{
  font-weight: 400 !important;      /* 太字を解除 */
  padding-right: 16px !important;   /* 右端から少し左へ（内側余白） */
}

@media (max-width: 767px){
  .home .entry-card .posted-on,
  .home .entry-card .post-date,
  .home .entry-card .entry-date,
  .home .entry-card time.published,
  .home .entry-card time.updated,
  .archive .entry-card .posted-on,
  .archive .entry-card .post-date,
  .archive .entry-card .entry-date,
  .archive .entry-card time.published,
  .archive .entry-card time.updated,
  .search .entry-card .posted-on,
  .search .entry-card .post-date,
  .search .entry-card .entry-date,
  .search .entry-card time.published,
  .search .entry-card time.updated{
    padding-right: 10px !important; /* SPは少し控えめ */
  }
}

/* ==== A) テキスト全体をもう少し左へ（画像側へ寄せる） ==== */
/* 列間を少し詰めて、右カラムの内側余白を左寄せに最適化 */
@media (min-width: 768px){
  .entry-card{ gap: 12px !important; }            /* 16px → 12px に詰める */
  .entry-card-content{
    padding-left: 4px !important;                 /* 画像側に少し寄せる */
    padding-right: 4px !important;                /* 右の余白は控えめ */
    justify-content: center;                      /* 縦中央は維持 */
    align-items: flex-start;                      /* 左揃え */
  }
}

/* ==== B) スマホ：画像と文字をもう一段だけ小さく（形は維持） ==== */
@media (max-width: 767px){
  /* 画像列をもう少しだけ細くしてカード比率にフィット */
  .entry-card{
    grid-template-columns: minmax(125px, 36vw) minmax(0, 1fr) !important;  /* 画像列を微調整 */
    gap: 10px !important;
  }
  .entry-card .entry-card-thumb{ height: auto; aspect-ratio: 16/9; }
  .entry-card .entry-card-thumb img{ width:100%; height:100%; object-fit:cover; }

  /* 文字をひと回り小さく（形はそのまま） */
  .entry-card-title  { font-size: clamp(16px, 4.6vw, 19px) !important; }
  .entry-card-snippet{ font-size: clamp(12.5px, 3.8vw, 14.5px) !important; }

  /* 日付も少し小さめに（見やすさは確保） */
  .home .entry-card .posted-on,
  .home .entry-card .post-date,
  .home .entry-card .entry-date,
  .home .entry-card time.published,
  .home .entry-card time.updated,
  .archive .entry-card .posted-on,
  .archive .entry-card .post-date,
  .archive .entry-card .entry-date,
  .archive .entry-card time.published,
  .archive .entry-card time.updated,
  .search .entry-card .posted-on,
  .search .entry-card .post-date,
  .search .entry-card .entry-date,
  .search .entry-card time.published,
  .search .entry-card time.updated{
    font-size: 13px !important;
    padding-right: 8px !important;               /* はみ出し保険で少しだけ内側へ */
    text-align: left !important;
  }

  /* テキストブロック自体もわずかに画像側へ寄せる */
  .entry-card-content{
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}
:root{ --techs-orange:#FF7A00; --techs-navy:#0A1E63; }
.home-contact-sec{ background:#0A1E63; color:#fff; padding:clamp(32px,6vw,72px) 0; }
.home-contact-sec a{ color:inherit; text-decoration:none; }
.hc-inner{ max-width:1200px; margin:0 auto; padding:0 16px; }

.hc-head{ text-align:center; margin-bottom:clamp(18px,4vw,32px); }
.hc-title{ font-size:clamp(22px,3.2vw,36px); letter-spacing:.12em; font-weight:900; }
.hc-lead{ opacity:.9; margin-top:6px; }

.hc-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:clamp(16px,3vw,28px); align-items:stretch; }
@media (max-width:1024px){ .hc-grid{ grid-template-columns:1fr; } }

.hc-visual{ position:relative; margin:0; border-radius:16px; overflow:hidden; background:#00133e; }
.hc-visual img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 16/10; display:block; opacity:.95; }
.hc-visual[data-dummy="1"] .hc-visual-dummy{ aspect-ratio:16/10; background:linear-gradient(135deg,#0b215f,#163f9b); }
.hc-badge{
  position:absolute; left:12px; bottom:12px; background:rgba(10,30,99,.9);
  padding:8px 12px; border-radius:999px; font-size:clamp(12px,1.6vw,14px);
}

.hc-right{ display:flex; flex-direction:column; justify-content:center; }
.hc-cta{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:16px; border-radius:16px; display:grid; gap:10px;
}
.hc-btn{
  display:flex; align-items:center; justify-content:center;
  font-weight:800; padding:14px 16px; border-radius:12px; background:#fff; color:#0A1E63;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.hc-btn.line{ background:#20c64a; color:#fff; }
.hc-btn.form{ background:var(--techs-orange); color:#fff; }

/* PCでボタンを2列にしたい場合（任意でON） */
/*
@media (min-width:1025px){
  .hc-cta{ grid-template-columns: 1fr 1fr; }
  .hc-btn.form{ grid-column:1 / -1; }
}
*/
/* 1) CONTACT 見出しを白っぽくクッキリ（背景と混ざらないように） */
.home-contact-sec .hc-title{
  color:#fff !important;
  opacity:1;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}

/* 2) TELボタンが“白抜け”に見えるのを解消（濃色の透過ボタン＋白文字） */
.hc-btn.tel{
  background: rgba(255,255,255,.10);      /* 紺の上でうっすら明るく */
  color:#fff !important;                  /* 白文字を強制 */
  border:1.5px solid rgba(255,255,255,.28);
  backdrop-filter: blur(2px);
}
.hc-btn.tel:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-1px);
}

/* 数字の視認性UP（等幅っぽく・詰まりすぎ防止） */
.hc-btn.tel{ font-variant-numeric: tabular-nums; letter-spacing:.02em; }

/* 3) ダミー背景を少し明るめのネイビー寄りに（画像差し替え前提でも馴染む色） */
.hc-visual[data-dummy="1"] .hc-visual-dummy{
  background: linear-gradient(135deg, #1a2b6d, #2c4fb0);
}

/* 4) ボタン影を少し強めに（立体感） */
.hc-btn{ box-shadow:0 8px 20px rgba(0,0,0,.18); }