/*
Theme Name: GENSEN child
Theme URI:https://tcd-theme.com/tcd050
Description:WordPressテーマ「GENSEN」の子テーマ
Template:gensen_tcd050
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/* --------------------------------------------------------------------------------
 web fonts
-------------------------------------------------------------------------------- */
@font-face {
  font-family: 'design_plus';
  src: url('fonts/design_plus.eot?v=1.4');
  src: url('fonts/design_plus.eot?v=1.4#iefix') format('embedded-opentype'),
       url('fonts/design_plus.woff?v=1.4') format('woff'),
       url('fonts/design_plus.ttf?v=1.4') format('truetype'),
       url('fonts/design_plus.svg?v=1.4#design_plus') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* ----------------------------------------------------------------------
 Spectrum Design Tokens
---------------------------------------------------------------------- */
:root {
  --spectrum-gray-50: #ffffff;
  --spectrum-gray-100: #f8f8f8;
  --spectrum-gray-200: #e1e1e1;
  --spectrum-gray-300: #d1d1d1;
  --spectrum-gray-400: #b3b3b3;
  --spectrum-gray-700: #4b4b4b;
  --spectrum-gray-800: #222222;
  --spectrum-gray-900: #000000;
  
  --spectrum-accent-color: #0265DC; 
  --spectrum-brand-color: #b69e84;   
  --spectrum-secondary-color: #1e2c3a; 

  --spectrum-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --spectrum-font-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS PMincho", serif;

  --spectrum-radius: 4px;
}

/* ----------------------------------------------------------------------
 基本レイアウトの強制修正（全幅問題の解決）
---------------------------------------------------------------------- */
body { 
  font-family: var(--spectrum-font-sans);
  font-size: 15px; 
  color: var(--spectrum-gray-800); 
  line-height: 1.7; 
  width: 100%; 
  min-width: 1200px; /* 1330pxから1200pxに調整 */
  background: var(--spectrum-gray-50);
  overflow-x: clip; 
}

/* GENSENの標準幅1200pxを維持する設定 */
.inner { 
  width: 95% !important; 
  max-width: 1200px !important; 
  margin: 0 auto !important; 
}

#main_col {
  max-width: 1200px !important; /* 100%から1200pxへ修正 */
  width: 95% !important;
  margin: 40px auto 100px !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: block !important;
  float: none !important;
}

/* ----------------------------------------------------------------------
 コンポーネントのデザイン
---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .headline, .rich_font, #post_title { 
  font-family: var(--spectrum-font-serif);
  font-weight: 700;
  color: var(--spectrum-secondary-color);
}

#post_list2 .article a { 
  display: flex; padding: 24px; background: #fff; border: 1px solid var(--spectrum-gray-200);
  border-radius: var(--spectrum-radius); transition: border-color 0.2s;
}
#post_list2 .article .image { width: 280px; flex-shrink: 0; }
#post_list2 .article .info { flex-grow: 1; margin-left: 24px; }

/* スマホ調整 */
@media (max-width: 767px) {
  body { min-width: 100%; }
  #post_list2 .article a { display: block !important; }
  #post_list2 .article .image { width: 100% !important; margin-bottom: 16px; }
  #post_list2 .article .info { margin-left: 0 !important; }
}

/* --- 求人詳細ページ（single.php）のメイン画像のみ調整 --- */

/* カテゴリ画像とアイキャッチ画像のコンテナ設定 */
.category-image-wrap,
#post_image {
    width: 100% !important;
    aspect-ratio: 3.5 / 2 !important; /* 横3:縦2の比率に固定 */
    overflow: hidden !important;    /* はみ出した部分を表示しない */
    border-radius: 4px;             /* 角の丸み */
    background-color: #f5f5f5;      /* 読み込み待ちの背景色 */
    margin-bottom: 30px !important;
}

/* 画像本体を枠いっぱいに広げて中央を基準にトリミング */
.category-image-wrap img,
#post_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* 全体に表示しつつ比率を維持 */
    object-position: center !important; /* 中央を基準に表示 */
    display: block;
    max-width: 100% !important;
}

/* スマホ閲覧時の余白微調整 */
@media screen and (max-width: 767px) {
    .category-image-wrap,
    #post_image {
        margin-bottom: 20px !important;
    }
}