/*
Theme Name: TEIJIN MALL Column
Description: teijinmall.com/column/ 用のコラムテーマ。ヘッダー・フッターは本体サイトと共通。
Author: Proteinum Inc.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.2.2
Text Domain: teijin_column
*/

/* ============================================================
   WordPress ブログ・コラム
   ============================================================ */
.wp{
  --gold:#B69541;
  --ink:#333;
  --sub:#8A8578;
  --line:#E4E1DA;
  --bg:#FBFAF8;
  --pad:16px;
  --serif-en:"Cormorant Garamond",serif;
  --sans:"Noto Sans JP","Yu Gothic","Hiragino Sans",sans-serif;
  /* サイト規定のメイリオ指定。theme/css/default.css と同じ並びにしてある
     （Macでは同じ位置づけのヒラギノ角ゴが当たる） */
  --meiryo:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wp *{ box-sizing:border-box; }
.wp img{ max-width:100%; height:auto; border-radius:0 !important; }
.wp a{ text-decoration:none; }
/* テーマの #main-column ul に負けないよう !important で潰す。
   ただしこの指定は詳細度(0,1,1)なので、余白を戻したい ul は
   必ず「.wp ul.○○」と書いて同じ詳細度以上にすること（.wp-cards だけでは負ける） */
.wp ul{ list-style:none; margin:0 !important; padding:0 !important; }

/* 1カラムのテーマ枠を全幅に開放する（ブランド／ガイドと同じ手当て） */
#contents:has(.wp){ max-width:none; padding:0; }

/* パンくずは本体サイトと同じ位置に置く。
   本体は #contents{ max-width:1200px; margin:0 auto; padding:0 1rem } の中に入っている。
   コラム側にはその入れ物が無いので、同じ枠をパンくず自身に持たせる。
   1rem のままにしておくと、本体CSSが画面幅で変える基準文字サイズに追従する */
#bread-crumb{
  max-width:1200px;
  margin-left:auto; margin-right:auto;
  padding-left:1rem; padding-right:1rem;
  box-sizing:border-box;
}

/* ---------- ページ頭 ---------- */
/* 担当者指示（9/28）：この帯は書体をサイト規定のメイリオで揃え、
   見出しは金ではなく黒の太字にする */
.wp-kv{
  background:var(--bg);
  padding:34px var(--pad) 30px;
  text-align:center;
  font-family:var(--meiryo);
}
.wp-kv *{ font-family:var(--meiryo) !important; }
.wp-kv__en{
  /* メイリオ太字はCormorantより横に広く、30px固定だと320px幅で2行に折れる。
     狭い画面だけ文字を縮めて1行を保つ（375px以上は30pxのまま） */
  font-size:clamp(22px,7.9vw,30px); font-weight:700 !important;
  letter-spacing:.14em; line-height:1.3 !important; color:#000;
  margin:0 !important;
}
.wp-kv__ja{
  font-weight:400; font-size:12px;
  letter-spacing:.18em; line-height:1.4 !important;
  margin:8px 0 0 !important; padding:0 !important; border:none;
}
.wp-kv__lead{
  font-size:12px; line-height:2 !important; color:var(--sub);
  margin:14px auto 0 !important; max-width:560px; text-align:left;
}

/* ---------- カテゴリー切替 ---------- */
.wp ul.wp-tabs{
  display:flex; justify-content:center; gap:8px;
  padding:22px var(--pad) 0 !important;
}
.wp-tabs li{ flex:0 1 auto; }
.wp-tabs a{
  display:flex; align-items:center; justify-content:center;
  min-width:96px; min-height:36px; padding:4px 16px;
  border:1px solid #C9C4B8; border-radius:999px;
  font-size:12px; letter-spacing:.06em; line-height:1.2 !important;
  color:var(--ink) !important; background:#fff;
}
.wp-tabs a .n{ font-size:10px; color:var(--sub); margin-left:5px; }
.wp-tabs .is-current a{
  background:var(--gold); border-color:var(--gold); color:#fff !important;
}
.wp-tabs .is-current a .n{ color:rgba(255,255,255,.75); }

/* ---------- 記事カード ---------- */
.wp ul.wp-cards{
  display:grid; grid-template-columns:1fr; gap:26px;
  max-width:1120px; margin:26px auto 0 !important;
  padding:0 var(--pad) !important;
}
.wp-cards a{ display:block; color:var(--ink) !important; }
.wp-card__fig{
  margin:0; overflow:hidden; background:var(--bg); border-radius:4px;
}
.wp-card__fig img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:4px !important;
  transition:transform .4s ease;
}
.wp-cards a:hover .wp-card__fig img{ transform:scale(1.04); }
.wp-card__meta{
  display:flex; align-items:center; gap:10px; margin-top:12px;
}
.wp-card__cate{
  font-family:var(--sans); font-weight:500;
  font-size:10px; letter-spacing:.08em; line-height:1 !important;
  padding:5px 12px; border-radius:999px; color:#fff;
}
.wp-card__cate.is-blog{ background:#6F8D4D; }
.wp-card__cate.is-column{ background:var(--gold); }
.wp-card__date{
  /*font-family:var(--serif-en); font-size:13px; letter-spacing:.08em;*/
  color:var(--sub); line-height:1 !important;
}
.wp-card__ttl{
  font-size:14.5px; font-weight:500 !important; line-height:1.7 !important;
  letter-spacing:.02em; margin:9px 0 0 !important; padding:0 !important;
  border:none;
  /* 一覧では2行まで。はみ出す分は「…」にする */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}
.wp-card__ex{
  font-size:11.5px; line-height:1.9 !important; color:var(--sub);
  margin:7px 0 0 !important;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

/* ---------- ページ送り ---------- */
.wp ul.wp-pager{
  display:flex; justify-content:center; align-items:center; gap:7px;
  margin:38px 0 0 !important; padding:0 var(--pad) !important;
}
.wp-pager li a,
.wp-pager li span{
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 9px;
  border:1px solid var(--line); border-radius:3px; background:#fff;
  /*font-family:var(--serif-en); */
  font-size:14px; line-height:1 !important;
  color:var(--ink) !important;
}
.wp-pager li.is-current span{
  background:var(--gold); border-color:var(--gold); color:#fff !important;
}
.wp-pager li.is-disabled span{ opacity:.35; }

/* ============================================================
   記事ページ
   ============================================================ */
.wp-post{ max-width:760px; margin:0 auto; padding:0 var(--pad); }
.wp-post__head{ padding:26px 0 0; }
.wp-post__meta{ display:flex; align-items:center; gap:10px; }
.wp-post__ttl{
  font-family:var(--sans); font-weight:700 !important;
  font-size:21px; line-height:1.7 !important; letter-spacing:.04em;
  margin:14px 0 0 !important; padding:0 !important; border:none;
}
/* サイト共通CSSの header{ position:relative; z-index:9999 } が、
   記事見出しの <header class="wp-post__head"> にも当たってしまう。
   その結果、スクロールすると記事タイトルが固定ヘッダーの上に出る。
   要素セレクタ(0,0,1)よりクラス(0,1,0)が強いので、ここで元に戻す */
.wp-post__head{ position:static; z-index:auto; }

.wp-post__hero{ margin:20px 0 0; }
.wp-post__hero img{
  width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:4px !important;
}

.wp-post__body{ margin-top:26px; }
.wp-post__body p{
  font-size:14px; line-height:2.1 !important; letter-spacing:.02em;
  margin:0 0 1.6em !important;
}
.wp-post__body h2{
  font-family:var(--sans); font-weight:500 !important;
  font-size:17px; line-height:1.7 !important; letter-spacing:.04em;
  margin:2.4em 0 1em !important; padding:0 0 0 14px !important;
  border:none; border-left:3px solid var(--gold) !important;
}
.wp-post__body h2:first-child{ margin-top:0 !important; }
.wp-post__body h3{
  font-weight:500 !important; font-size:14.5px;
  line-height:1.7 !important; letter-spacing:.02em; color:var(--gold);
  margin:2em 0 .7em !important; padding:0 !important; border:none;
}
.wp-post__body figure{ margin:1.8em 0; }
.wp-post__body figure img{ width:100%; display:block; border-radius:4px !important; }
.wp-post__body figcaption{
  font-size:11px; line-height:1.8 !important; color:var(--sub); margin-top:7px;
}

/* ---------- 監修者 ---------- */
.wp-sup{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--bg); border:1px solid var(--line); border-radius:4px;
  padding:18px 16px; margin-top:34px;
}
.wp-sup__img{ flex:0 0 62px; margin:0; }
.wp-sup__img img{ width:62px; height:62px; border-radius:50% !important; object-fit:cover; }
.wp-sup__ttl{
  font-family:var(--sans); font-weight:500 !important; font-size:12.5px;
  line-height:1.7 !important; margin:0 0 5px !important; padding:0 !important; border:none;
}
.wp-sup__ttl .org{
  display:block; font-family:var(--sans); font-weight:400;
  font-size:10px; letter-spacing:.04em; color:var(--sub); margin-top:2px;
}
.wp-sup__txt{ font-size:11px; line-height:1.9 !important; color:var(--sub); margin:0 !important; }

/* ---------- 関連商品 ---------- */
.wp-rec{ margin-top:38px; }
.wp-rec__ttl{
  /*font-family:var(--serif-en); font-size:19px; */
  font-weight:400;
  letter-spacing:.12em; line-height:1.2 !important; color:var(--gold);
  text-align:center; margin:0 0 4px !important; padding:0 !important; border:none;
}
.wp-rec__sub{
  font-family:var(--sans); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; line-height:1.4 !important; text-align:center;
  color:var(--sub); margin:0 0 16px !important;
}
/* 文字を載せるバナーなので、SPは1列にする（ブランドページと同じ）。
   2列にすると1枚166pxしかなく、欧文が収まらず横にはみ出す */
.wp ul.wp-rec__list{ display:grid; grid-template-columns:1fr; gap:12px; }
.wp ul.wp-rec__list > li{ min-width:0; }

/* シリーズバナー。本体ブランドページの .mg-banner と同じ作り。
   写真は背景画像、文字はHTMLで載せる。
   支給画像は730×400なので、同じ比率にして写真が切れないようにする */
.wp-banner{
  position:relative; overflow:hidden;
  aspect-ratio:73/40;
  background-image:var(--img); background-size:cover; background-position:center;
  color:#fff; padding:0 12px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  border-radius:4px;
}
.wp-banner > *{ position:relative; z-index:2; }
/* 文字の塊は幅を決めて中央そろえにする（ブランドページと同じ） */
.wp-banner .txt{ display:block; width:140px; text-align:center; }
.wp-banner .en, .wp-banner .ja, .wp-banner .view{ color:#fff; }
.wp-banner .en{
  font-family:var(--serif-en); font-size:19px; letter-spacing:.08em;
  line-height:1.2 !important; display:block;
}
/* 本体ブランドページでは明朝だが、コラム側は和文をゴシックで揃える指示のためゴシック */
.wp-banner .ja{
  font-family:var(--sans); font-size:9.5px; font-weight:500;
  line-height:1.4 !important; margin-top:4.5px; display:block;
}
.wp-banner .view{
  font-family:var(--serif-en); font-size:8.5px; letter-spacing:.02em;
  line-height:1.4 !important; margin-top:16px;
  display:inline-block; position:relative; padding-bottom:8px;
}
/* 矢印は文字幅にそろえる。inline-block の .view の幅＝文字幅 */
.wp-banner .view img{
  position:absolute; left:0; bottom:0; width:100%; height:auto; display:block;
  border-radius:0 !important;
}

/* ---------- 前後の記事 ---------- */
.wp-nav{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  margin:40px 0 0 !important; padding:20px 0 0 !important;
  border-top:1px solid var(--line);
}
.wp-nav a,
.wp-nav span{
  font-size:11.5px; line-height:1.7 !important; color:var(--sub) !important;
  display:block;
}
.wp-nav .prev{ text-align:left; }
.wp-nav .next{ text-align:right; }
.wp-nav .back a{
  font-family:var(--sans); font-size:11.5px; color:var(--ink) !important;
  border:1px solid #C9C4B8; border-radius:999px; padding:8px 18px; white-space:nowrap;
}
.wp-nav .lbl{
  display:block; font-family:var(--serif-en); font-size:11px;
  letter-spacing:.1em; color:var(--gold); margin-bottom:3px;
}
.wp-nav .t{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* ---------- 関連記事 ---------- */
.wp-related{ background:var(--bg); margin-top:50px; padding:32px 0 36px; }
.wp-related__ttl{
  /*font-family:var(--serif-en); font-size:19px; */
  font-weight:400;
  letter-spacing:.12em; line-height:1.2 !important; color:var(--gold);
  text-align:center; margin:0 0 18px !important; padding:0 !important; border:none;
}
.wp-related ul.wp-cards{ margin-top:0 !important; }

/* ============================================================
   PC
   ============================================================ */
@media screen and (min-width:769px){
  .wp{ --pad:24px; }
  .wp-kv{ padding:56px var(--pad) 46px; }
  .wp-kv__en{ font-size:46px; }
  .wp-kv__ja{ font-size:14px; margin-top:12px !important; }
  .wp-kv__lead{ font-size:13.5px; text-align:center; margin-top:20px !important; }

  .wp ul.wp-tabs{ gap:12px; padding-top:34px !important; }
  .wp-tabs a{ min-width:132px; min-height:44px; font-size:13.5px; }

  .wp ul.wp-cards{ grid-template-columns:repeat(3,1fr); gap:40px 28px; margin-top:38px !important; }
  .wp-card__ttl{ font-size:15.5px; }
  .wp-card__ex{ font-size:12px; }

  .wp-post{ padding:0 var(--pad); }
  .wp-post__head{ padding-top:44px; }
  .wp-post__ttl{ font-size:29px; }
  .wp-post__hero{ margin-top:28px; }
  .wp-post__body{ margin-top:38px; }
  .wp-post__body p{ font-size:15px; }
  .wp-post__body h2{ font-size:21px; padding-left:16px !important; }
  .wp-post__body h3{ font-size:16px; }

  .wp-sup{ padding:24px 24px; gap:20px; }
  .wp-sup__img{ flex-basis:80px; }
  .wp-sup__img img{ width:80px; height:80px; }
  .wp-sup__ttl{ font-size:13.5px; }
  .wp-sup__txt{ font-size:12px; }

  /* おすすめは横長バナー（640x290）なので、4列に割ると文字が読めない。PCでも2列 */
  .wp ul.wp-rec__list{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .wp-banner{ padding:0 30px; }
  /* 担当者指示（10/1）：PCの文字が大きすぎるため縮小 */
  .wp-banner .txt{ width:150px; }
  .wp-banner .en{ font-size:20px; }
  .wp-banner .ja{ font-size:9px; }
  .wp-banner .view{ font-size:10px; margin-top:24px; padding-bottom:14px; }
  .wp-rec__ttl{ font-size:24px; }

  .wp-nav a, .wp-nav span{ font-size:12.5px; }
  .wp-related{ margin-top:70px; padding:46px 0 54px; }
  .wp-related__ttl{ font-size:24px; margin-bottom:26px !important; }
}