/*
Theme Name: disegnatore
Theme URI: 
Author: Takemi Tsukamoto
Author URI: 
Description: MaidenHairをベースに独自カスタマイズした独立テーマ。
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jocks-and-nerds
*/

/* ==============================================================
   ベースリセット・汎用設定
   ============================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: none;
  margin: 0;
	padding: 0;
	vertical-align: baseline;
}
/* 画面全体の背景色（オレンジみがかった温かみのあるホワイト） */
body {
    background-color: #f9f2ef; 
}

/* 本文・段落まわり（Mac/Windows両対応の軽いゴシック＆15px） */
body, p, ul, ol, li, dl, address {
    /* (既存のコード) */
}

/* ==============================================================
   本文・段落まわり（Mac/Windows両対応の軽いゴシック＆15px）
   ============================================================== */
body, p, ul, ol, li, dl, address {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  font-size: 15px;      
  line-height: 1.75;    
  text-align: left;
}

/* ==============================================================
   【重要】記事本文（.entry-content等）の中にある見出しだけを装飾
   ============================================================== */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: "Roboto Condensed", "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
  -ms-word-wrap: break-word;
  word-wrap:     break-word;
  line-height: 1.4em;
  margin: 35px 0 12px;                   
}

.entry-content h1 {
  color: black;
  font-size: 2.0rem;  /* 約30px相当：記事タイトルや大見出し */
}
.entry-content h2 {
  color: #222222;
  font-size: 1.5rem;  /* 約22〜24px相当：セクション見出し */
  border-bottom: 2px solid #eee; /* 下線でメリハリを出すと綺麗です */
  padding-bottom: 6px;
}
/* グリッドの中にあるh2（カードタイトル）の下線を例外的に無効化する */
.entry-content .grid-entry-headline {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.entry-content h3 {
  color: #333333;
  font-size: 1.25rem; 
}
.entry-content h4 {
  color: #444444;
  font-size: 1.1rem;  
}
.entry-content h5 {
  color: #555555;
  font-size: 1rem;  
}
.entry-content h6 {
  color: #666666;
  font-size: 0.9rem;  
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* ==============================================================
   リスト・テーブル・引用などの基本調整
   ============================================================== */
ul {
  margin-left: 20px;   
}
ol {
	list-style-type: decimal;
  margin-left: 20px;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
dl {
  margin-bottom: 20px;   
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 5px;
}
strong {
	font-weight: bold;
}
cite, em, i {
	font-style: italic;
}
a {
  color: #f47033;
  text-decoration: underline;           
}
a:hover {
  text-decoration: none;           
}
a img {
  border: none;      
}
img {
  height: auto; 
  max-width: 100%;   
}
table {
  font-size: 14px;
  width: 100%;      
}
table, td, th {
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
  text-align: left;
}
td, th {
  padding: 8px 12px;       
}
th {
  background: #555555;
  color: white;
  font-weight: bold;   
}
blockquote, q { 
  border-left: 3px solid #f47033;
  clear: both;
  color: #333333;
  font-style: italic;
  margin: 0 0 20px;
  padding-left: 15px;
}
address {
  font-style: italic;        
}
pre {
  margin-bottom: 20px;
  overflow: auto;   
}
sup {
  vertical-align: super;    
}
sub {
  vertical-align: sub;    
}
iframe,
embed {
  clear: both;
  width: 100%;   
}
hr {
  background: #e8e8e8;
  border: none;
  height: 1px; 
  margin: 20px 0;  
}


/* ==============================================================
   WordPress Core (Alignment & Captions)
   ============================================================== */

/* 画像・要素の配置（標準Alignment） */
.alignnone {
  clear: both;
  margin: 5px 20px 20px 0;
}
.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}
.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}
.aligncenter {
  clear: both;
  display: block;
  margin: 5px auto 20px auto;
}

/* キャプション付き画像・ギャラリー */
.wp-caption,
.gallery-caption {
  border: 1px solid #f0f0f0;
  max-width: 100%;
  padding: 5px;
  text-align: center;
}
.gallery-caption {
  border: none;
}
.wp-caption img {
  border: 0;
  height: auto;
  max-width: 100%;
  width: auto;
}
.wp-caption-text {
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0 0 0;
  padding: 0 4px;
}

/* 音声ショートコード */
.wp-audio-shortcode {
  margin-bottom: 20px;
}

/* ==============================================================
   【重要】basic structure
   ============================================================== */

#wrapper #main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px; /* 通常時：メインが可変、サイドバー固定300px */
    gap: 32px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}

/* Gridアイテムとしての初期化（floatやテーマの干渉をリセット） */
#wrapper #main-content > #content,
#wrapper #main-content > #sidebar {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 1. 1カラム（右サイドバーなし）のGrid制御。全幅固定ページ と 投稿ページの2カラム構成を解除して1列にする */
#wrapper #main-content:has(> #content.full-width-content),
body.single #wrapper #main-content {
    grid-template-columns: 1fr !important;
}

/* 2. コンテンツ領域を全幅（100%）に拡張する */
#wrapper #main-content > #content.full-width-content,
body.single #wrapper #main-content > #content {
    grid-column: 1 / -1 !important;
}

/* 3. 投稿ページで余計に残るサイドバーを非表示にする */
body.single #wrapper #main-content > #sidebar {
    display: none !important;
}

/* ==============================================================
   【重要】header
   ============================================================== */

.header-content {
  float: none !important;
  display: block !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 35px 24px !important; /* メイン側のパディングと揃える */
  box-sizing: border-box !important;
  position: relative; 
  width: 100% !important;              
}

/* ロゴエリア全体の専用コンテナ（新設） */
.header-left-container {
  max-width: 500px; /* ここでロゴエリア全体の最大幅をコントロールできます */
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 50;
}

.site-title { 
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 48px;
  font-weight: bold;  
  line-height: 1.5em;
  margin: 0;
  width: 100%;       
}

/* 英語のキャッチフレーズ */
.site-description { 
  color: #555555;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  margin: 10px 0 0; 
  width: 100%;        
}

/* 緑のバッジ（サブディスクリプション）のデザイン設定 */
.site-description-sub {
  background-color: #f47033;
  color: #ffffff;
  font-size: 10.5px;    /* フォントを太くした際の視覚的な重みを考慮して微調整 */
  font-weight: 700;     /* 太字（bold）に変更 */
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  padding: 4px 12px;
  border-radius: 4px;
  margin: 8px 0 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* 親要素（ヘッダー部分）でしっかり中央寄せさせるためのおまじない */
.site-branding, .site-header { /* テーマの構造に合わせて適用 */
  text-align: center;
}

.site-title a {
  color: #f47033;
  text-decoration: none;
  transition: color 1s ease;           
}

.site-title a:hover {
  color: black;                    
}

.header-logo {
  clear: both; 
  display: block;
  height: auto;
  margin: 0;
  max-width: 100%; /* コンテナ（460px等）の幅いっぱいに収める */
  width: 100%;             
}

.page-template-template-landing-page-php .site-title,
.page-template-template-landing-page-php .site-description,
.page-template-template-landing-page-php .header-logo {
  max-width: 100%;              
}

.header-image,
#slideshow-wrapper {
  float: left;
  height: auto;
  position: relative;
  width: 100%;              
}

.header-image img {
  display: block; 
  margin: 0 auto;                 
}

/* latest posts ticker */
#ticker-wrapper {
  background: #f47034;
  border-bottom: 1px solid #e6e6e6;
  float: left;
  height: auto;
  position: relative;
  width: 100%;                        
}

.ticker-box {
  background: #f2f2f2;
  height: 30px;
  margin-left: 28px;
  overflow: hidden; 
  position: relative;
  width: 956px;           
}

.ticker-box .ticker-arrow-1 {
  background: #f47034;
  height: 52px;
  position: absolute;
  top: 0;
  left: -23px;
  width: 23px; 
  z-index: 100;
  transform: rotate(45deg);                         
}

.ticker-box .ticker-arrow-2 {
  background: #f47034;
  height: 52px;
  position: absolute;
  top: 0;
  right: -23px;
  width: 23px; 
  z-index: 100;
  transform: rotate(135deg);                         
}

#ticker-wrapper ul {
  height: 30px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  width: 100%;                   
}

#ticker-wrapper ul ul {
  display: none;                      
}

#ticker-wrapper ul li {
  float: left;
  height: 30px;
  line-height: 30px;
  margin-right: 20px;                      
}

#ticker-wrapper ul li a {
  color: #999999;
  font-size: 13px;
  line-height: 30px;
  text-decoration: none;
  transition: color 1s ease;                        
}

#ticker-wrapper ul li a:hover {
  color: #333333;                        
}

/* ==============================================================
   最上段メニュー・ナビゲーション
   ============================================================== */

/* トップユーティリティバー */
/* 1. トップユーティリティバー全体：背景は画面いっぱいの横幅100% */
.top-utility-bar {
    width: 100%;
    background-color: #6a6a6a; /* 先ほどよりもう1段階薄くした、なじみの良いグレー */
    border-bottom: 1px solid #7a7a7a;
    font-size: 12px;
    padding: 6px 20px;
    box-sizing: border-box;
}

/* 2. 中身のコンテンツ幅を少し短く（例：1050px）して下のレイアウトと綺麗に揃える */
.utility-inner {
    max-width: 1050px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* 3. ユーティリティバー用の共通ボタンデザイン */
.utility-btn {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #cccccc;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.utility-btn:hover {
    opacity: 0.85;
}

/* 4. 右側のグループ（For Business と 言語切り替えを綺麗に隣接させる） */
.utility-right {
    color: #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.utility-right .lang-switch {
    cursor: pointer;
}

/* 言語切り替えのリンク部分 */
.utility-right .lang-switch a {
    color: #ffffff; /* テキストは白のまま */
    text-decoration: none;
    display: inline-block;
    padding-bottom: 2px; /* テキストと下線の間の隙間 */
    border-bottom: 2px solid transparent; /* 初期状態は下線なし */
}

/* ホバー時、または選択中（active）のときに #649401 の下線を表示 */
.utility-right .lang-switch:hover a,
.utility-right .lang-switch.active a {
    border-bottom-color: #649401;
}

.utility-right .lang-switch.active {
    font-weight: bold;
}

/* 5. レスポンシブ対応（スマホ画面などで崩れを防ぐための調整） */
@media screen and (max-width: 768px) {
    .top-utility-bar {
        padding: 4px 10px;
    }
    .utility-inner {
        font-size: 10px;
    }
    .business-btn {
        font-size: 9px;
        padding: 2px 6px;
    }
    .utility-right {
        gap: 6px;
    }
}

/* 5. レスポンシブ対応（スマホ画面などで崩れを防ぐための調整） */
@media screen and (max-width: 768px) {
    .top-utility-bar {
        padding: 4px 10px;
    }
    .utility-inner {
        font-size: 10px;
    }
    .business-btn {
        font-size: 9px;
        padding: 2px 6px;
    }
    .utility-right {
        gap: 6px;
    }
}

/* ==========================================================
   メインメニュー（右寄せ＆ハンバーガー調整版）
   ========================================================== */

/* 1. 全体帯（高さ44px固定・下部にテーマカラー緑のライン） */
.menu-box-wrapper {
  background-color: #1a1a1a !important;
  border-bottom: 2px solid #f47033 !important;
  padding: 0 !important;
  height: 44px !important;
  width: 100% !important;
}

/* メニューコンテナ（ページのコンテンツ幅に合わせ、端を揃える） */
#header .menu-box,
.menu-box {
  height: 44px !important;
  min-height: 0 !important;
  max-width: 1120px !important;
  margin: 0 auto !important; /* 左右中央に配置し、端っこに行かないようにする */
  padding: 0 20px !important; /* 左右に適度な余白を持たせる */
  background: transparent !important;
  display: flex !important;
  justify-content: flex-end !important; /* 中身を右寄せ */
  box-sizing: border-box !important;
}

#header .menu-box > div > ul,
#header .menu-box > ul,
.menu-box > div > ul,
.menu-box > ul {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: 44px !important;
}

/* 3. 各親メニュー項目（ドロップダウンの配置基準） */
#header .menu-box ul > li,
.menu-box ul > li {
  position: relative !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 4. 親メニューのテキスト装飾（通常表示） */
#header .menu-box > div > ul > li > a,
#header .menu-box > ul > li > a,
.menu-box > div > ul > li > a,
.menu-box > ul > li > a {
  font-family: "Roboto Condensed", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  height: auto !important;
  line-height: 1 !important;
  background: transparent !important;
  border-radius: 12px !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* 親メニューホバー時：テキストを緑色に変更 */
#header .menu-box > div > ul > li:hover > a,
#header .menu-box > ul > li:hover > a {
  color: #f47033 !important;
  background-color: #2a2a2a !important;
  text-decoration: none !important;
}

/* 5. 独立した「HOME」アイコンボタン（1番目の項目のみに適用） */
#header .menu-box > div > ul > li:first-child > a,
#header .menu-box > ul > li:first-child > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 0 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffffff"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  border-radius: 50% !important;
}

/* HOMEアイコンホバー時 */
#header .menu-box > div > ul > li:first-child:hover > a,
#header .menu-box > ul > li:first-child:hover > a {
  background-color: #2a2a2a !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23649300"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>') !important;
}

/* 6. 子メニュー（プルダウン部分：初期状態は非表示） */
#header .menu-box ul ul,
.menu-box ul ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  position: absolute !important;
  top: 44px !important;
  left: auto !important;
  right: 0 !important; /* 右端から展開するように調整（はみ出し防止） */
  background-color: #242424 !important;
  border-top: 2px solid #f47033 !important;
  padding: 10px 12px !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
  width: max-content !important;
  z-index: 9999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  transition: all 0.2s ease-in-out !important;
}

/* 7. ホバー時にドロップダウンを表示 */
#header .menu-box ul li:hover > ul,
.menu-box ul li:hover > ul {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* 8. カプセル型ボタン（子メニュー項目） */
#header .menu-box ul ul li,
.menu-box ul ul li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header .menu-box ul ul a,
.menu-box ul ul a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  background-color: #383838 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  border: 1px solid #484848 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* ボタンホバー時：背景を緑色に変化 */
#header .menu-box ul ul a:hover,
.menu-box ul ul a:hover {
  background-color: #f47033 !important;
  border-color: #f47033 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 9. 現在位置（カレントページ）のボタンを常時緑色でハイライト */
#header .menu-box ul ul .current-menu-item > a,
.menu-box ul ul .current-menu-item > a {
  background-color: #f47033 !important;
  border-color: #f47033 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* 10. ハンバーガーメニュー等のモバイル表示パーツの調整 */
.menu-toggle, 
.mobile-menu-button,
#menu-toggle {
  margin-left: auto !important;
  margin-right: 15px !important;
  background-color: transparent !important;
  border: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* 11. 全リンクの下線を強制消去 */
.menu-box-wrapper a,
.menu-box-wrapper a:hover,
#header .menu-box a,
#header .menu-box a:hover {
  text-decoration: none !important;
}

/* ==============================================================
   main content
   ============================================================== */

/* 新しいメイン見出しブロック（英語タイトル + 日本語補足） */
.content-block {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.content-title {
  color: #f75d1b; /* オリーブグリーン */
  font-size: 26px;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8e8e8;
}

/* サブタイトル（太字・控えめなサイズ） */
.content-subtitle {
  color: #222;
  font-size: 15px; /* タイトルより小さく、本文より少しだけ大きい */
  font-weight: bold; /* しっかり太字 */
  line-height: 1.4;
  margin: 10px 0 6px 0;
}

/* その下の補足説明文 */
.content-description {
  color: #666; /* 主張しすぎない落ち着いた色 */
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* 単体で使用する記事内の標準見出し */
.entry-headline {
  color: #222;
  font-size: 27px;
  line-height: 1.5em;
  margin: 0 0 25px;
  border-bottom: 2px solid #e8e8e8;
  padding-bottom: 8px;
}

#content p,
#content ul,
#content ol,
#content table,
#content address {
  margin-bottom: 15px;           
}

#content ul ul,
#content ol ol,
#content ol ul,
#content ul ol {
  margin-bottom: 0;           
}

.home-thumbnail-posts,
.home-column-posts,
.home-latest-posts,
.home-slider-posts,
.home-grid-posts,
.home-list-posts {
  float: none !important;
  display: block !important;
  width: 100%;
  border-radius: 10px;                                
}

#content .breadcrumb-navigation {
  color: #bbbbbb !important; 
  font-size: 12px;
  line-height: 1.5em;
  margin: 7px 0 3px;
  position: relative;
  width: 100%;                                      
}

.page-template-template-without-title-php #content .breadcrumb-navigation,
.page-template-template-full-width-without-title-php #content .breadcrumb-navigation {
  margin-top: 4px;                                                                          
}   

#content .breadcrumb-navigation a {
  color: #999999 !important; 
  text-decoration: none;
}

#content .breadcrumb-navigation a:hover {
  color: #333333 !important;
}

#main-content .post-meta {
  clear: both;
  color: #999999 !important; 
  font-size: 12px;
  line-height: 21px;
  padding-bottom: 5px;
  margin: -2px 0 0;        
}

.single #main-content #content .post-meta {
  margin: 0;                                          
}

#main-content .home-column-posts .post-meta,
#main-content .home-grid-posts .post-meta,
#main-content .home-list-posts .post-meta {
  clear: none;
  margin: 0;
  padding: 0;                                            
}

#main-content .post-meta span {
  border-left: 1px solid #dbdbdb; 
  padding: 0 6px;                             
}

#main-content .post-meta .post-info-author,
#main-content .home-column-posts .post-meta .post-info-date,
#main-content .home-list-posts .post-meta .post-info-date {
  border-left: none; 
  padding-left: 0;                                          
}

#main-content .post-info {
  border-top: 1px solid #e8e8e8;
  clear: both;
  color: #999999 !important; 
  font-size: 12px;
  line-height: 21px;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;        
}

.single #main-content #content .post-info {
  border-bottom: 1px solid #e8e8e8;
  margin: 0 0 20px;                                          
}

.post-info a,
.post-meta a {
  color: #999999 !important;
  text-decoration: none;        
}

.post-info a:hover,
.post-meta a:hover {
  color: #111111 !important;            
}

.post-info span { 
  display: inline-block; 
  min-height: 16px;
  line-height: 16px;
}

#main-content .post-info .post-category,
#main-content .post-info .post-tags {
  float: left;
  margin: 0;
  padding: 6px 0;
  width: 50%;                       
}

#main-content .post-info .post-tags {
  padding-left: 5%;
  text-align: right;
  width: 45%;                           
}

#content .archive-meta {
  border-bottom: 1px solid #e8e8e8;
  float: left; 
  margin-bottom: 25px;  
  width: 100%;                    
}

#main-content .author-info .author-avatar {
  margin: 0 0 5px;                                          
}

#main-content .number-of-results {
  font-weight: bold;                                
}

#main-content #content .page-link {
  color: #333333;
  font-size: 12px;                                  
}

#nav-below,
#jocks-and-nerds-post-nav,
.search .navigation {
  float: none !important;
  clear: both !important;
  margin: 0 0 25px;
  width: 100%;           
}

#main-content #jocks-and-nerds-post-nav {
  margin: 10px 0 25px;                                 
}

.nav-wrapper {
  border-bottom: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  float: left;
  padding: 5px 0;
  width: 100%;               
}

.navigation-headline {
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 4px;                                          
}

.navigation .navigation-links {
  margin-bottom: 0 !important;                              
}

.navigation .navigation-links a {
  text-decoration: none;                                
}

.navigation .navigation-links a:hover {
  text-decoration: underline;                                
}

#main-content .nav-previous {
  float: left;
  margin: 0;
  width: 50%;                       
}

#main-content .nav-next {
  float: right;
  margin: 0;
  text-align: right;
  width: 50%;                       
}

#main-content .nav-previous a,
#main-content .nav-next a {
  text-decoration: none;                          
}

#main-content .nav-previous a:hover,
#main-content .nav-next a:hover {
  text-decoration: underline;                          
}

.post-edit-link {
  font-weight: bold;                
}

.highlight-text {
  background: #d3f38f;                
}

#main-content .social-share { 
  float: left;
  margin: 10px 0 0;
  width: 100%;
}

#main-content .post-entry .social-share { 
  margin: 0 0 -5px;
  padding-top: 9px;
}

#wrapper #main-content .social-share .fb_iframe_widget {
  top: -6px;
}

/* 個別記事（single）の本文エリア内の画像のみを角丸にする */
.single #content img {
    border-radius: 12px !important;
}
/* Amazonのサムネイル画像は角丸を解除 */
.single #content img[src*="media-amazon.com"] {
    border-radius: 0 !important;
}

/* ==============================================================
   【固定ページ専用】タイトルとサムネイルを1つの白い角丸枠で囲むレイアウト
   ============================================================== */
.page-header-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

/* 左側のタイトルエリア */
.page-header-flex .page-title-area {
    flex: 1 !important;
    min-width: 0 !important;
}

.page-header-flex .content-headline {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 右側のスリム化したサムネイルエリア（余計な枠線を完全に排除） */
.page-header-flex .page-thumbnail {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.page-header-flex .page-thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* スマホ表示（768px以下） */
@media (max-width: 768px) {
    .page-header-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        padding: 20px !important;
    }
    
    .page-header-flex .page-thumbnail {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==============================================================
   【完全版】ヒーローカードとは完全に独立した「下部の本文用・白いカード」
   ============================================================== */

/* 1. パンくずリスト */
.single .breadcrumb-navigation {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    width: 100%;
}

/* 2. ヒーローカード（上部） */
.post-hero-card {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    margin: 10px 0 24px 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.post-hero-info {
    flex: 1;
    min-width: 0;
}

.single .post-hero-card .post-hero-thumbnail {
    flex: 0 0 30% !important;
    max-width: 280px !important;
    min-width: 180px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.single .post-hero-card .post-hero-thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;     
    object-fit: cover !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.hero-card-title {
    margin: 0 0 12px 0;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #333333;
    font-weight: bold;
    display: block;
    width: 100%;
    background: none;
}

/* 3. 下部の本文エリア：#content 自体を「独立した白いカード」にする */
body.single #wrapper #main-content > #content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}

/* 5. スマホ表示対応 */
@media (max-width: 768px) {
    .single .breadcrumb-navigation,
    .post-hero-card,
    body.single #wrapper #main-content > #content {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 20px !important;
    }
    
    .post-hero-card {
        flex-direction: column;
    }
    
    .single .post-hero-card .post-hero-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ==============================================================
   【決定版】白いカードと、中身のテキスト・ブロック幅の調整
   ============================================================== */

/* 1. 白いカード（.entry-content）自体の設定 */
.single article .entry-content {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 48px 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 24px auto 30px auto !important;
}

/* 2. カード内のテキスト、見出し、関連記事などの主要ブロックの幅を一括で絞って中央配置 */
.single article .entry-content p,
.single article .entry-content h2,
.single article .entry-content h3,
.single article .entry-content h4,
.single article .entry-content ul,  /* ← ここを修正しました！ */
.single article .entry-content ol,
.single article .entry-content blockquote,
.single article .entry-content div,
.single article .entry-content .mc-card,
.single article .entry-content iframe {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* G+1 bugs in RTL - they absolutely position on the left which makes a scrollbar */
iframe[id^="oauth2relay"] {
  left: auto !important;
  right: 0;
}

/* default post entry */
.post-entry {
  border-bottom: 1px solid #e8e8e8;
  float: left;
  margin-bottom: 25px;
  position: relative; 
  width: 100%;           
}
.search .type-page {
  padding-bottom: 10px;                  
}
#main-content .sticky {
  background-color: #f0f0f0;
  padding: 20px 3% 0;
  width: 94%;                 
}
.post-entry-content-wrapper {
  padding: 3px 0 0;                           
}
.attachment-post-thumbnail { 
  display: block;
  float: left;
  height: auto;
  margin: 0 15px 5px 0;
  max-width: 40%;
  width: auto;
  border-radius:10px;
  border: solid 1px #dcdcdc;
}
.single #content .attachment-post-thumbnail,
.page #content .attachment-post-thumbnail { 
  clear: both;
  display: block;
  float: none;
  margin: 4px 0 20px;  
  max-width: 100%;
  padding: 0;
  border-radius:10px;
  border: solid 1px #dcdcdc;
}
/* template-flexible.php を使ったページではサムネイル画像の角丸をリセットする */
.page-template-template-flexible .attachment-post-thumbnail,
.page-template-template-flexible img {
  border-radius: 0 !important;
}
.post-entry-content {
  margin-bottom: -12px; 
  margin-top: -5px;                   
}
.post-entry-content h1 {
  font-size: 21px;  
}
.post-entry-content h2 {
  font-size: 19px;  
}
#main-content .post-entry .post-entry-headline {
  font-size: 21px;
  line-height: 1.5em;
  margin: 0 0 7px;            
}
.post-entry .post-entry-headline a {
  color: #f47033;
  text-decoration: none;  
  transition: color 1s ease;               
}
.post-entry .post-entry-headline a:hover {
  color: black;                       
}
.post-entry .read-more-button {
  background-color: #f47034;
  color: white !important;
  display: inline-block;
  font-size: 12px;
  line-height: 12px;
  margin: 8px 0 3px;
  padding: 6px 8px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius:10px;
  transition: color 1s ease;                           
}
.post-entry .read-more-button:hover {
  background-color: #f47033;
  border-radius:10px;                                    
}

.site-intro-header {
    margin-bottom: 24px;
}
.site-intro-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.site-intro-lead {
    font-size: 14px;
    color: #555555; /* 落ち着いたダークグレー */
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* 本文エリア全体は 760px に制限 */
.full-width-content .entry-content,
.single .entry-content {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}



/* 枠（角丸のカード部分）だけを 1120px に広げる */
.full-width-content .entry-content,
.single .entry-content {
  max-width: 1120px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 例：英語ページのコンテナ全体やヘッダー・パンくず等を含む外側を1120pxに収める場合 */
.page-id-xxxxxx #content, /* または該当する固定ページの固有クラス・ラッパー */
.template-full-width-english .entry-header,
.template-full-width-english .entry-thumbnail {
  max-width: 1120px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* 英語版ヘッダー全体のはみ出し防止 */
.site-header,
.site-header .container,
.site-header img {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ヘッダー画像を中央寄せ＆枠内に収める */
.site-header img {
    height: auto !important;
    margin: 0 auto;
    display: block;
}

/* post entry - column */
.home-column-posts .entry-headline {
  margin-bottom: 22px;                                 
}
.post-entry-column {
  margin: 0;
  padding: 12px 0;                        
}
.post-entry-column-first {
  margin-bottom: 0;                         
}
.post-entry-column-first .attachment-post-thumbnail {
  margin: 0 0 11px !important;
  max-width: 100%;
  border-radius:10px;
  border: solid 1px #dcdcdc;                                                    
}
#content .post-entry-column-first .post- {
  margin-bottom: -4px;  
  margin-top: 0;                                                    
}
#content .post-entry-column-first .post-entry-content p {
  margin-bottom: 10px;                
}
#main-content #content .post-entry-column-first .post-entry-content .post-meta {
  margin: -4px 0 0;
  padding-bottom: 0;                                                                 
}
.post-entry-column img {
  border: none;
  float: left;
  height: auto;
  margin: 0 14px 0 0;
  max-width: 60px;
  width: auto;               
}
#content .post-entry-column .post-entry-headline {
  font-size: 15px !important;
  font-weight: bold;
  line-height: 1.5em;
  margin: 0;             
}
#content .post-entry-column .post-content {
  margin-left: 72px;             
}
#content .post-entry-column-first .read-more-button {
  display: none;                                                    
}

/* post entry - slider */
.home-slider-posts .entry-headline {
  margin-bottom: 16px;                                 
}
.flexslider {
  position: relative; 
  width: 100%;           
}
.flexslider .slides li {
  line-height: 1.5em;                      
}  
.flexslider .slides li img {
  height: auto;
  max-width: 148px;                          
}
.flexslider .slides li a {
  color: #f47033;
  display: block;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  transition: color 1s ease;                     
}
.flexslider .slides li a:hover {
  color: black;  
  opacity: 0.75;
  filter: alpha(opacity=75);                     
}
.flexslider .slides .slider-link {
  display: inline-block;
  width: 148px;                                 
}
.flexslider .flex-direction-nav {
  background: white;
  list-style-type: none;
  margin: 0;
  position: absolute;
  right: 0;
  top: -40px;
  z-index: 100;                                
}
.flexslider .flex-direction-nav li {
  display: block;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-left: 1px;
  width: 20px;                                   
}
.flexslider .flex-direction-nav li a {
  background: #777777;
  color: white !important;
  display: block;  
  height: 100%;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  width: 100%; 
  transition: color 1s ease;                                   
}
.flexslider .flex-direction-nav li a:hover {
  background-color: #333333;                                           
}

/* post entry - thumbnail （修正版） */
.home-thumbnail-posts .entry-headline {
  margin-bottom: 16px;
  border-radius: 10px;
  border: solid 1px #dcdcdc;                                 
}

.post-entry-thumbnail,
.page-entry-thumbnail,
.entry-thumbnail {
  float: none;
  margin: 0 0 20px 0;
  max-width: 100%;
  width: 100%;
  position: relative;
  border-radius: 10px;
  border: solid 1px #dcdcdc;                      
  box-sizing: border-box;
}

.post-entry-thumbnails-wrapper {
  float: none;
  margin-left: 0;
  width: 100%;
  position: relative;
  border-radius: 10px;                                
}

/* プロフィール画像の領域内にある画像だけに幅100%を適用する（プラグインには干渉させない） */
.post-entry-thumbnail img,
.page-entry-thumbnail img,
.entry-thumbnail img {
  float: none;
  height: auto;
  max-width: 100%;
  width: 100%;
  border-radius: 8px;
  border: solid 1px #dcdcdc;                        
  display: block;
}

.post-entry-thumbnail .thumbnail-hover {
  background: black left top no-repeat url(images/thumbnail-hover.png);
  display: block;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 10px;
  border: solid 1px #dcdcdc;
  transition: color 1s ease; 
}  

.post-entry-thumbnail .thumbnail-hover:hover {
  background-position: center center;
  opacity: 0.7;
  filter: alpha(opacity=70);
  border-radius: 10px;
  border: solid 1px #dcdcdc;                                      
}



/* ==============================================================
   グリッドカード内のサムネイル画像：上部だけ角丸、下部を直角にする
   ============================================================== */
.home-latest-posts .grid-entry .attachment-post-thumbnail img,
.home-grid-posts .grid-entry .attachment-post-thumbnail img {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}


/* ==========================================
   アーカイブ用カード型レイアウト
   ========================================== */

/* 1. カード全体のレイアウト（PC：横並び） */
.archive-card-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: #ffffff !important;
  border: 1px solid #dfdfdf !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* 2. サムネイル画像エリア（aタグ自体） */
.archive-card-item .archive-card-thumb {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

/* 枠いっぱいにトリミングして収める設定 */
.archive-card-item .archive-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  object-fit: cover !important; /* 縦横比を保って中央切り抜き */
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. 右側のテキスト情報エリア */
.archive-card-item .archive-card-body {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}

/* 4. リンクの下線を消す */
.archive-card-item a {
  text-decoration: none !important;
}

/* 5. タイトルのスタイル */
.archive-card-item .archive-card-headline {
  margin: 0 0 10px 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.archive-card-item .archive-card-headline a {
  color: #222 !important;
}

/* ==========================================
   レスポンシブ対応（スマホ表示：768px以下）
   ========================================== */
@media (max-width: 768px) {
  /* スマホでは縦並びに切り替え */
  .archive-card-item {
    flex-direction: column !important;
  }

  /* 画像エリアを幅いっぱいに拡大 */
  .archive-card-item .archive-card-thumb {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important; /* スマホ時の画像の高さ */
  }

  .archive-card-item .archive-card-thumb img {
    height: 200px !important;
  }

  .archive-card-item .archive-card-body {
    padding: 16px !important;
  }
}

/* ==========================================
   カテゴリーボタンのスタイル調整
   ========================================== */

/* カテゴリーのラッパーを横並びに */
.archive-card-item .post-info-category {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

/* カテゴリー個々のボタンデザイン */
.archive-card-item .post-info-category a {
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding: 5px 9px !important;
  background-color: #f0f0f0 !important; /* タグと同じ薄グレー背景 */
  color: #729636 !important;            /* グリーン */
  border-radius: 4px !important;         /* 角丸 */
  font-weight: bold !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* ホバー時の挙動 */
.archive-card-item .post-info-category a:hover {
  background-color: #e0e0e0 !important;
  color: #557027 !important;
}

/* 日付エリアの表示調整 */
.archive-card-item .archive-card-meta {
  margin-bottom: 10px !important;
  font-size: 13px !important;
  color: #888 !important;
}

/* ==========================================
   Related Posts - カード型グリッドレイアウト
   ========================================== */
.wrapper-related-posts {
  position: relative;
  width: 100%;
  margin: 20px 0;
  clear: both; /* 古いfloatの影響をリセットして親要素にしっかり収める */
}

.wrapper-related-posts .entry-headline {
  background-image: none;
  border-bottom: 1px solid #e8e8e8;
  color: #333333;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 7px;                                       
}

/* ul要素をCSS Gridに変更し、親コンテナ幅にきれいにフィットさせる */
.wrapper-related-posts ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;                      
}

/* 各カード（li）のスタイル */
.wrapper-related-posts ul li {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* 【追加】カード全体の高さを揃えるための設定 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wrapper-related-posts ul li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* サムネイル画像の調整（常にカード幅いっぱいにキレイに収める） */
.wrapper-related-posts ul li img {
  width: 100% !important;
  height: 110px !important;
  object-fit: cover !important;
  display: block;
  max-width: none !important;
  border-bottom: 1px solid #eaeaea;
  flex-shrink: 0; /* 画像が縮むのを防ぐ */
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

/* テキストリンクの調整 */
.wrapper-related-posts ul li a {
  display: block;
  padding: 12px;
  color: #333333 !important;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: normal;
  text-decoration: none;
  line-height: 1.4;
  opacity: 1;
  
  /* 【追加】余った高さをテキストエリアで埋める */
  flex-grow: 1;
}

.wrapper-related-posts ul li a:hover {
  color: #f47033 !important;  
  opacity: 1;
  filter: none;
}


/* ==============================================================
   タグエリア
   ============================================================== */

/* タグエリア全体 */
.post-tags {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 個別のタグリンク */
.post-tags a {
  display: inline-block;
  background-color: #f2f2f2 !important;
  color: #555555 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

/* ホバー時 */
.post-tags a:hover {
  background-color: #e0e0e0 !important;
}


/* ==============================================================
   アイキャッチ画像・サムネイル（メインコンテンツ内限定・安全スコープ版）
   ============================================================== */

/* --- サムネイル外枠コンテナ（通常の記事・固定ページ内のみに限定） --- */
#main-content .post > .post-entry-thumbnail,
#main-content .page > .page-entry-thumbnail,
#main-content .type-post .entry-thumbnail,
#main-content .type-page .entry-thumbnail,
#main-content .post-entry-thumbnail,
#main-content .page-entry-thumbnail,
#main-content .entry-thumbnail {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 0 0 25px 0;
  position: relative;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden; /* 画像が角丸からはみ出るのを防ぐ */
}

/* --- 内側の画像本体（通常のサムネイル内のみ） --- */
#main-content .post > .post-entry-thumbnail img,
#main-content .page > .page-entry-thumbnail img,
#main-content .type-post .entry-thumbnail img,
#main-content .type-page .entry-thumbnail img,
#main-content .post-entry-thumbnail img,
#main-content .page-entry-thumbnail img,
#main-content .entry-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  float: none;
  border: none;
}

/* --- ホバーエフェクト（オーバーレイ） --- */
#main-content .post > .post-entry-thumbnail .thumbnail-hover,
#main-content .page > .page-entry-thumbnail .thumbnail-hover,
#main-content .type-post .entry-thumbnail .thumbnail-hover,
#main-content .type-page .entry-thumbnail .thumbnail-hover,
#main-content .post-entry-thumbnail .thumbnail-hover,
#main-content .page-entry-thumbnail .thumbnail-hover,
#main-content .entry-thumbnail .thumbnail-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4) center center no-repeat url(images/thumbnail-hover.png);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#main-content .post > .post-entry-thumbnail:hover .thumbnail-hover,
#main-content .page > .page-entry-thumbnail:hover .thumbnail-hover,
#main-content .type-post .entry-thumbnail:hover .thumbnail-hover,
#main-content .type-page .entry-thumbnail:hover .thumbnail-hover,
#main-content .post-entry-thumbnail:hover .thumbnail-hover,
#main-content .page-entry-thumbnail:hover .thumbnail-hover,
#main-content .entry-thumbnail:hover .thumbnail-hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------
   profile Image (プロフィール画像)
-------------------------------------------------------------- */
/* プロフィール写真の枠・サイズ・回り込み設定 */
.profile-photo {
    float: left; /* 左側に配置して、テキストを右に回り込ませる（右が良い場合は right に） */
    width: 160px; /* 写真の表示幅 */
    max-width: 100%;
    margin: 0 24px 16px 0; /* 右側と下側に文章との隙間（余白）を作る */
    padding: 8px;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-sizing: border-box;
}

.profile-photo img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px;
}

/* スマホなど画面幅が狭い端末（600px以下）での崩れ防止 */
@media (max-width: 600px) {
    .profile-photo {
        float: none; /* 回り込みを解除 */
        margin: 0 auto 20px auto; /* 中央寄せに変更 */
    }
}


/* ==============================================================
   sidebar の修正・適用強化版
   ============================================================== */

/* ウィジェット全体のベース */
#sidebar .sidebar-widget {
  color: #333333;
  font-size: 13px;
  margin-bottom: 25px;  
}

/* 見出し：オリーブグリーン化・背景画像等の完全解除 */
#sidebar .sidebar-widget .sidebar-headline,
#sidebar .widget-title,
#sidebar h2,
#sidebar h3 {
  background: none !important;
  color: #f75d1b !important;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif; 
  font-size: 19px;
  font-weight: bold;
  margin: 0 0 12px 0;
  position: relative;
  border-bottom: 2px solid #e8e8e8 !important; /* メインと同じ薄い下線を復活・適用 */
  padding-bottom: 6px !important;              /* 線との間に少し余白を持たせる */
}

#sidebar .sidebar-headline-text {
  background: transparent !important;
  display: inline-block;  
  max-width: 100%;
  padding-right: 0;                     
}

#sidebar .sidebar-widget .sidebar-headline a {
  color: #f75d1b !important;
  text-decoration: none;                                    
}

#sidebar .sidebar-widget img {
  height: auto;
  max-width: 100%;                    
}

#sidebar .sidebar-widget p {
  margin: 6px 0 -4px;                  
}

#sidebar .sidebar-widget p,
#sidebar .sidebar-widget ul li,
#sidebar .sidebar-widget ol li {
  color: #333333;
  font-size: 13px;                   
}

/* リスト側の背景画像やドットを完全に消してシンプルにする */
#sidebar .sidebar-widget ul {
  background: none !important; 
  margin: 0;
  padding: 0;                      
}

#sidebar .sidebar-widget ul ul {
  margin-top: 0;                      
}

#sidebar .sidebar-widget ul li {
  background: none !important;
  border-bottom: 1px dotted #e0e0e0; /* 代わりのうっすらとした線 */
  height: auto;
  line-height: 2.2;
  list-style-type: none;
  min-height: auto;
  padding: 6px 0;                       
} 

#sidebar .sidebar-widget ul li:last-child {
  border-bottom: none;
}

/* サイドバー内のリンク：下線を消し、ホバー時のみ下線 */
#sidebar .sidebar-widget a {
  color: #555555;
  text-decoration: none;
  transition: color 0.3s ease;                       
}

#sidebar .sidebar-widget ul li a {
  text-decoration: none;                        
}

#sidebar .sidebar-widget a:hover {
  color: #f75d1b !important;
  text-decoration: underline;                       
}


/* ==============================================================
   default widgets (Cleaned)
   ============================================================== */

#wp-calendar th,
#wp-calendar td {
  text-align: center;                   
}
#wp-calendar a,
#wp-calendar #today {
  font-weight: bold;
  text-decoration: none;               
}
#wp-calendar #prev {
  text-align: left;                   
}
#wp-calendar #next {
  text-align: right;                   
}

.tagcloud a {
  text-decoration: none;          
}
.tagcloud a:hover {
  text-decoration: underline;          
}

.sidebar-widget img,
.footer-widget img {
  padding-top: 3px;                           
}

.sidebar-widget select {
  margin-top: 3px;
  width: 100%;                       
}

.sidebar-widget #searchform {
  margin-top: 10px;                       
}


/* ==============================================================
   フッター専用レイアウト & ウィジェット調整（統合完全版）
   ============================================================== */

/* 1. フッター全体の上下のゆとり・ベース設定 */
#wrapper-footer {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 3カラムを横並びに固定し、基本構造（1120px）の幅と完璧に合わせる */
#wrapper-footer #footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
}

/* 3. 各カラムの割り当てを均等にリセット */
#wrapper-footer #footer .footer-widget-area {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}

/* 4. 1カラム目のメインロゴ画像のサイズ調整 */
#wrapper-footer .footer-widget-area-1 img {
    max-width: 100% !important;
    height: auto !important;
    width: 220px !important;
}

/* 5. 1カラム目の複数のウィジェット間の縦の隙間をスッキリ詰める */
#wrapper-footer .footer-widget-area-1 .widget {
    margin-bottom: 15px !important;
}
#wrapper-footer .footer-widget-area-1 .widget:last-child {
    margin-bottom: 0 !important;
}


/* ==============================================================
   フッター専用レイアウト & ウィジェット調整（完成版）
   ============================================================== */

/* 1. フッター全体の背景色（暗色）と上下のゆとり */
#wrapper-footer {
    background-color: #222222 !important; /* 暗い背景色を追加して白文字を表示 */
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. 3カラムを横並びに固定し、幅1120pxに揃える */
#wrapper-footer #footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    float: none !important;
    width: 100% !important;
}

/* 3. 各カラムの割り当てを均等にリセット */
#wrapper-footer #footer .footer-widget-area,
#wrapper-footer #footer .footer-widget {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}

/* 4. 1カラム目のメインロゴ画像のサイズ調整 */
#wrapper-footer .footer-widget-area-1 img {
    max-width: 100% !important;
    height: auto !important;
    width: 220px !important;
}

/* 5. 1カラム目の複数のウィジェット間の縦の隙間調整 */
#wrapper-footer .footer-widget-area-1 .widget {
    margin-bottom: 15px !important;
}
#wrapper-footer .footer-widget-area-1 .widget:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================
   フッター完全固定CSS（ロゴ高さジャスト調整版）
========================================== */

/* ロゴ画像の上余白をリセットして位置を上に引き上げる */
#footer .widget_media_image,
#footer .widget img,
#footer .widget_text img,
#footer img {
  margin-top: 0 !important;
  padding-top: 0 !important;
  vertical-align: top !important;
}

#footer select { 
  margin-top: 3px; 
  width: 100%; 
}

/* テキスト全般 */
#footer, #footer p, #footer li, #footer span, #footer .footer-widget-area, #footer .footer-widget {
  color: #cccccc !important;
  font-size: 13px !important;
}

/* 見出しの共通設定 */
#wrapper-footer h1, #wrapper-footer h2, #wrapper-footer h3, #wrapper-footer h4,
#wrapper-footer .widget-title, #wrapper-footer .footer-headline,
#footer h1, #footer h2, #footer h3, #footer h4 {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: bold !important;
  padding-bottom: 6px !important;
  margin-top: 36px !important;
  margin-bottom: 12px !important;
  border-bottom: none !important;
}

/* 一番最初の見出し（Social Media / Business Social Media）は上余白ゼロ */
#wrapper-footer .widget *:first-child > h3,
#wrapper-footer .widget *:first-child > h4,
#footer .widget *:first-child > h3,
#footer .widget *:first-child > h4,
#footer .widget > h3:first-child,
#footer .widget > h4:first-child {
  margin-top: 0 !important;
}

/* 白線 */
#wrapper-footer h1::after, #wrapper-footer h2::after, #wrapper-footer h3::after, #wrapper-footer h4::after,
#wrapper-footer .widget-title::after, #wrapper-footer .footer-headline::after,
#footer h3::after, #footer h4::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #ffffff !important;
}

/* リスト全体の余白 */
#footer ul, #footer ol, #footer .menu {
  list-style: none !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

/* 各項目の縦余白と改行 */
#footer li {
  display: block !important;
  border: none !important;
  background: none !important;
  padding: 3px 0 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* リンクカラー */
#footer a, #footer a.style1 {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

#footer a:hover, #footer a.style1:hover {
  color: #f75d1b !important;
  text-decoration: none !important;
}

#footer a::after, #footer a::before {
  display: none !important;
}

/* ==============================================================
   コピーライトエリア（footer-signature）の調整
   ============================================================== */
#wrapper-footer .footer-signature {
    background-color: transparent !important;
    border-top: none !important;
    margin-top: 40px !important;
    padding-top: 0 !important;
    color: #aaaaaa !important; /* 文字色が見えるよう追加 */
}

/* ==============================================================
   スマホ表示時（画面幅768px以下）のレイアウト調整
   ============================================================== */
@media screen and (max-width: 768px) {
  /* 3カラムを縦並びにして隙間を確保 */
  #wrapper-footer #footer {
    flex-direction: column !important;
    gap: 30px !important;
  }

  /* 各カラムの幅を100%に広げる */
  #wrapper-footer #footer .footer-widget-area {
    width: 100% !important;
  }

  /* 見出し要素を幅100%にして罫線を端まで伸ばす */
  #footer h2,
  #footer h3,
  #footer h4,
  #footer .widget-title,
  #footer .footer-headline {
    display: block !important;
    width: 100% !important;
  }
}

/* --------------------------------------------------------------
   Related Sites などのバナー角丸設定
   -------------------------------------------------------------- */
.widget_media_image img,
.related-sites img {
    border-radius: 12px;
}

/* ==============================================================
   form fields & buttons (スコープ・整理版)
   ============================================================== */

input[type="text"],
input[type="file"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
select {
  background-color: #f2f2f2;
  border: 1px solid #e6e6e6;
  color: #333333;
  line-height: normal;
  padding: 5px;
  width: 50%;
}

textarea {
  overflow: auto;
  vertical-align: top;
  width: 98%;
}

.custom-button,
input[type="submit"],
input[type="reset"] {
  background: #f47034;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: white;
  cursor: pointer;
  font-size: 15px;
  height: auto;
  margin-top: 5px;
  padding: 7px 10px;
  text-align: center;
  text-decoration: none; 
  text-shadow: none; 
  transition: background-color 1s ease;                 
}

.custom-button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: #f47033;                    
}

.custom-button {
  display: inline-block;
  margin-bottom: 10px;                 
}

#searchform .searchform-wrapper {
  height: 31px;
  position: relative;
  width: 100%;                                
}

.header-content #searchform .searchform-wrapper {
  margin-top: -15px;
  position: absolute;
  right: 28px;
  top: 50%;
  width: 200px;
  z-index: 100;        
}

#searchform .searchform-wrapper #s {
  color: #aaaaaa; 
  font-size: 13px;
  height: 19px;
  padding: 5px 0 5px 3%;
  position: absolute;
  left: 0;
  top: 0;
  width: 96%;              
}

#searchform .searchform-wrapper .send {
  background-color: #f47034;
  background-image: url(images/searchform-send.png);
  border: none;
  cursor: pointer;
  height: 31px;
  position: absolute;
  right: 0;
  top: 0;
  width: 31px;
  z-index: 20; 
  transition: background-color 1s ease;
}

#searchform .send:hover {
  background-color: #f47033;
}


/* ==============================================================
   comments area (ライト版・!important除去)
   ============================================================== */

/* コメントエリア全体の幅 */
#comments,
.comments-area {
  width: 100%;
  max-width: 100%;
  margin: 40px 0 0 0;
  padding-top: 30px;
  border-top: 1px solid #e8e8e8;
  box-sizing: border-box;
  clear: both;
}

/* 投稿されたコメント枠 */
#comments ol.commentlist {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
}

#comments ol.commentlist li.comment {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #ffffff;
  margin: 16px 0 0 0;
  padding: 20px;
  list-style: none;
  box-sizing: border-box;
  width: 100%;
}

#comments ol.commentlist .children {
  list-style: none;
  padding-left: 20px;
  margin: 10px 0 0 0;
}

/* アバターと投稿者情報 */
#comments .comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#comments .comment-author img.avatar {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
  margin: 0;
}

#comments .comment-author .fn {
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  color: #333333;
  margin: 0;
}

#comments .comment-meta,
#comments time {
  font-size: 12px;
  color: #888888;
  margin-left: auto;
}

#comments .comment-content {
  clear: both;
  font-size: 14px;
  line-height: 1.6;
  color: #444444;
  margin-bottom: 12px;
}

/* 入力フォームの幅・マージン */
#comments #respond {
  margin-top: 30px;
  padding: 0;
  width: 100%;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 16px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #ffffff;
}

/* 送信ボタン */
#commentform input[type="submit"],
.comment-form input[type="submit"] {
  background-color: #729636;
  color: #ffffff;
  font-weight: bold;
  padding: 10px 24px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ==============================================================
   BOX
   ============================================================== */


/* --- 外枠レイアウト用（広く見せたい部分） --- */
.layout-box {
    display: block !important;
    width: 100% !important;
    max-width: 1120px !important;
    margin: 30px auto !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 30px !important;
    background: #fff !important;
    clear: both !important;
}

/* --- コンテンツ用ボックスの基本設計（テキスト幅 760px に収める） --- */
.content-box {
  max-width: 760px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 1.2em 2em;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  font-size: 14px;
  border-radius: 15px;
  box-sizing: border-box;
}

.content-box p {
  margin: 0;
  padding: 0.2em;
}

/* パターン1：標準（白背景 ＋ グレー枠線） */
.content-box.is-default {
  background: #ffffff;
  border: solid 1px #dcdcdc;
}

/* パターン2：グレー背景（薄いグレー背景 ＋ グレー枠線） */
.content-box.is-gray {
  background: #f5f5f5;
  border: solid 1px #dcdcdc;
  padding: 0.2em 2em 2.5em 2em;
}

/* パターン3：グリーン系アクセント */
.content-box.is-green {
  background: #f0fce0;
  border: solid 2px #638c0b;
  color: #2c2c2f;
}


/* ==============================================================
   Media Queries (PC / タブレット / スマホ 3段階対応 最終調整版)
   ============================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------
   1. タブレットサイズ以下 (1012px 以下) - 被り防止最終調整
   -------------------------------------------------------------- */
@media screen and (max-width: 1012px) {
  /* 全体の横スクロール（右側の白余白）防止 */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  /* 外枠のコンテナは左右余白なしで100%表示（黒帯やフッター用） */
  #wrapper #container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* メインコンテンツのみ左右15pxの余白を確保 */
  #wrapper #container #main-content {
    padding: 20px 15px 10px !important;
    width: 100% !important;
  }

  #wrapper #content {
    max-width: 100% !important;
    width: 100% !important;                    
  }

  /* サイドバーを下部に移動 ＆ 左右15pxの余白を確保 */
  #wrapper #sidebar {
    float: none !important;
    position: static !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 30px !important;
    padding: 0 15px !important;
  }

  #wrapper .ticker-box {
    margin-left: 0 !important;
    width: 100% !important;                       
  }

  /* --- 上部黒帯（.menu-box） --- */
  #wrapper #header .menu-box-wrapper {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 90 !important;
  }

  #wrapper #header .menu-box {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 8px 15px !important;
    height: auto !important;
  }

  #wrapper #header .menu-toggle-checkbox {
    display: none !important;
  }

  /* ハンバーガーボタン */
  #wrapper #header .hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 26px !important;
    height: 18px !important;
    cursor: pointer !important;
    z-index: 100 !important;
    order: 2 !important;
  }

  #wrapper #header .hamburger-btn span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
  }

  #wrapper #header .link-home {
    order: 1 !important;
  }

  /* 開閉メニュー（#nav） */
  #wrapper #header .menu-box #nav {
    display: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    flex-basis: 100% !important;
    order: 3 !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #222222 !important;
    clear: both !important;
  }

  #wrapper #header .menu-box #nav li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #333 !important;
  }

  #wrapper #header .menu-box #nav li a {
    display: block !important;
    padding: 12px 15px !important;
    color: #ffffff !important;
    text-align: left !important;
  }

  /* ボタン押下時に開く */
  #wrapper #header .menu-box .menu-toggle-checkbox:checked ~ #nav {
    display: block !important;
  }

  /* 「✕」アニメーション */
  #wrapper #header .menu-box .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  #wrapper #header .menu-box .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(2) {
    opacity: 0 !important;
  }
  #wrapper #header .menu-box .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* ★ロゴ・検索フォームエリア ＆ 左右15pxの余白を確保 */
  #wrapper #header .header-content-wrapper {
    clear: both !important;
    position: relative !important;
    width: 100% !important;
    margin-top: 15px !important;
    padding: 0 15px !important;
  }

  #wrapper #header .header-content {
    float: none !important;
    clear: both !important;
    position: relative !important;
    padding: 15px 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
  }

  #wrapper #header .header-content .header-logo,
  #wrapper #header .header-content .site-title {
    float: none !important;
    position: relative !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  #wrapper #header .header-content #searchform,
  #wrapper #header .header-content .searchform-wrapper {
    float: none !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }

  /* 記事一覧（2列カードレイアウト） */
  #wrapper .grid-entry,
  #wrapper #main-content .sticky {
    width: 50% !important;
  }

  #wrapper .post-entry-thumbnails-wrapper {
    margin-left: 0;
    border-radius: 10px;                                 
  }

  #wrapper .post-entry-thumbnail,
  #wrapper .post-entry-thumbnail img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;
  }

  #wrapper .post-entry-thumbnails-wrapper,
  #wrapper .page-entry-thumbnails-wrapper,
  #wrapper .single-entry-thumbnails-wrapper {
    margin-left: 0 !important;
  }

  #wrapper .post-entry-thumbnail,
  #wrapper .page-entry-thumbnail,
  #wrapper .single-entry-thumbnail,
  #wrapper .entry-thumbnail,
  #wrapper .page-thumbnail,
  #wrapper .single-thumbnail,
  #wrapper .post-thumbnail {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------
   2. WordPress管理バー調整用 (782px 以下)
   -------------------------------------------------------------- */
@media screen and (max-width: 782px) {
  .admin-bar #header .sticky-nav {
    top: 46px !important;
  } 
}

/* --------------------------------------------------------------
   3. スマホサイズ (600px 以下)
   -------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .admin-bar #header .sticky-nav {
    top: 0 !important;
  } 

  /* 検索フォームの縦並び化 */
  #wrapper .header-content #searchform,
  #wrapper .header-content #searchform .searchform-wrapper {
    float: none !important;
    margin: 15px 0 0 !important;
    position: static !important;
    width: 100% !important;        
  }

  /* 記事一覧を1列に変更 */
  #wrapper #container .grid-entry,
  #wrapper #container #main-content .sticky {
    width: 100% !important;                          
  }

  #wrapper .grid-entry .grid-entry-inner,
  #wrapper #container #main-content {
    margin: 0 !important;                                         
  }
}

/* --------------------------------------------------------------
   2. WordPress管理バー調整用 (782px 以下)
   -------------------------------------------------------------- */
@media screen and (max-width: 782px) {
  .admin-bar #header .sticky-nav {
    top: 46px !important;
  } 
}

/* --------------------------------------------------------------
   3. スマホサイズ (600px 以下)
   -------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  .admin-bar #header .sticky-nav {
    top: 0 !important;
  } 

  /* 検索フォームの縦並び化 */
  #wrapper .header-content #searchform,
  #wrapper .header-content #searchform .searchform-wrapper {
    float: none !important;
    margin: 15px 0 0 !important;
    position: static !important;
    width: 100% !important;        
  }

  /* 記事一覧を1列に変更 */
  #wrapper #container .grid-entry,
  #wrapper #container #main-content .sticky {
    width: 100% !important;                          
  }

  #wrapper .grid-entry .grid-entry-inner,
  #wrapper #container #main-content {
    margin: 0 !important;                                         
  }
}

/* ==========================================================
   Pagination ページネーション＆レイアウト崩れ防止（完全版）
   ========================================================== */

/* ▼ ページネーション（選択中長方形の完全固定版） */
    .archive-pagination-wrap {
        clear: both !important;
        width: 100% !important;
        display: block !important;
        margin: 40px auto 20px auto !important;
        text-align: center !important;
    }
    .archive-pagination-wrap .pagination-1 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    .archive-pagination-wrap .pagination-1 li {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .archive-pagination-wrap .pagination-1 a,
    .archive-pagination-wrap .pagination-1 span {
        box-sizing: border-box !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-width: 2.2em !important;
        height: 2.2em !important;
        padding: 0 0.4em !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        border: 1px solid #f47034 !important;
        color: #f47034 !important;
        background-color: transparent !important; /* 背景色なし（透過） */
    }
    .archive-pagination-wrap .pagination-1 a:hover {
        background-color: rgba(126, 177, 18, 0.08) !important;
    }
    /* ▼ 選択中のページだけに強制的に正方形サイズを適用 */
    .archive-pagination-wrap .pagination-1 .current {
        box-sizing: border-box !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 2.2em !important;     /* 崩れないよう幅を固定 */
        min-width: 2.2em !important;
        height: 2.2em !important;    /* 高さを固定して正方形に */
        padding: 0 !important;
        border-radius: 4px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        text-decoration: none !important;
        border: 1px solid #f47034 !important;
        background-color: #f47034 !important; /* 緑の塗りつぶし */
        color: #fff !important;
        pointer-events: none !important;
    }
    .archive-pagination-wrap .pagination-1 .dots {
        border: none !important;
        background: transparent !important;
        color: #333 !important;
        min-width: 1.5em !important;
    }

/* ==========================================================
   print
   ========================================================== */

@media print {
  html body {
    background: none !important; 
    font-family: Arial, Helvetica, sans-serif;        
  }
  #wrapper #container-shadow {  
    box-shadow: none;
    background: white;
  }
  h1, h2, h3, h4, h5, h6 { 
    font-family: Arial, Helvetica, sans-serif;        
  }
  #container {  
    max-width: 100% !important;
  }
  #wrapper #main-content {
    padding: 0 !important;
    width: 100% !important;              
  } 
  #content {
    width: 100% !important;         
  }
  .entry-headline {
    background-image: none !important;                  
  }
}

/* ==========================================================
   fade-in
   ========================================================== */

.fade-in {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-in.in-view {
  opacity: 1;
}

/* ==========================================================
   メインコンテンツとサイドバーのグリッド設定
   ========================================================== */

#wrapper #main-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}

#wrapper #main-content > #content {
    grid-column: 1;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#wrapper #main-content > #sidebar {
    grid-column: 2;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 1012px) {
    #wrapper #main-content {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 16px;
    }
    
    #wrapper #main-content > #content,
    #wrapper #main-content > #sidebar {
        grid-column: auto;
    }
}

/* ==============================================================
   ハンバーガーメニュー制御
   ============================================================== */

@media screen and (min-width: 1013px) {
  .menu-toggle-checkbox,
  .hamburger-btn {
    display: none !important;
  }
}

@media screen and (max-width: 1012px) {
  .menu-box {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    height: auto !important;
  }

  .menu-toggle-checkbox {
    display: none !important;
  }

  .hamburger-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 26px !important;
    height: 18px !important;
    cursor: pointer !important;
    z-index: 100 !important;
  }

  .hamburger-btn span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    transition: all 0.3s ease !important;
  }

  #wrapper #header #nav,
  #nav {
    display: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 0 !important;
    list-style: none !important;
    background-color: #222222 !important;
    clear: both !important;
  }

  #wrapper #header #nav li,
  #nav li {
    float: none !important;
    width: 100% !important;
    border-bottom: 1px solid #333 !important;
    background-color: #222222 !important;
  }

  #wrapper #header #nav li a,
  #nav li a {
    display: block !important;
    padding: 12px 15px !important;
    color: #ffffff !important;
    background-color: #222222 !important;
  }

  .menu-toggle-checkbox:checked ~ #nav {
    display: block !important;
  }

  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(2) {
    opacity: 0 !important;
  }
  .menu-toggle-checkbox:checked ~ .hamburger-btn span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }
}

/* ==========================================================
   ヘッダー・カード・ギャラリー等のパーツ調整
   ========================================================== */

.site-header-right .header-about-box {
  max-width: 350px;
  font-size: 11px;
  line-height: 1.5;
  padding: 12px;
}

.site-header-right .header-about-box .heading-1 {
  font-size: 13px;
  margin-bottom: 6px;
}

.site-header-right .header-about-box p {
  margin-bottom: 8px;
}

.site-header-right .header-about-box .btn1 {
  padding: 4px 10px;
  font-size: 11px;
}

.site-header-right .header-inner-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.featured-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.featured-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.featured-card img {
    width: 100%;
    height: auto;
    display: block;
}

.featured-card h4 {
    padding: 12px;
    margin: 0;
    font-size: 14px;
}

.foogallery .foogallery-thumb,
.foogallery .fg-thumb {
    width: 150px !important;
    max-width: 150px !important;
    height: 150px !important;
    float: left !important;
    margin: 0 10px 10px 0 !important;
}

.foogallery .foogallery-thumb img,
.foogallery .fg-thumb img,
.foogallery img {
    width: 150px !important;
    height: 150px !important;
    max-width: none !important;
    object-fit: cover !important;
}

/* ==============================================================
   wrapper-content 内のグリッドカード：上部だけ角丸、下部を直角にする
   ============================================================== */
.wrapper-content .grid-entry,
.wrapper-content .card {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    overflow: hidden !important;
}

/* ==========================================
   新着の業務実績（ボックス背景グレー＋グリッド化）
   ========================================== */

.recent-works-box {
  background-color: #f7f7f7 !important;
  border: 1px solid #e2e2e2 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-top: 24px !important;
  margin-bottom: 30px !important;
  box-sizing: border-box !important;
}

.recent-works-box .card-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 16px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.recent-works-box .card-container .card {
  flex: 0 0 calc(33.333% - 11px) !important;
  max-width: calc(33.333% - 11px) !important;
  width: calc(33.333% - 11px) !important;
  box-sizing: border-box !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.recent-works-box .card a {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
}

.recent-works-box .card-image {
  width: 100% !important;
  height: 160px !important;
  overflow: hidden !important;
  background-color: #eee !important;
}

.recent-works-box .card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .recent-works-box {
    padding: 16px !important;
  }
  
  .recent-works-box .card-container .card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ==========================================
   共通ボタン（一覧を見る / もっと見る） [統合・集約済]
   ========================================== */
.featured-section-container {
  clear: both;
  margin-bottom: 40px;
}

.featured-more-btn-wrapper {
  text-align: center !important;
  margin-top: 24px !important;
  margin-bottom: 30px !important;
  display: block !important;
  clear: both !important;
}

.recent-works-box .works-more-btn-wrapper {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.featured-more-btn {
  display: inline-block !important;
  padding: 12px 32px !important;
  background-color: #333333 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 99 !important;
  transition: background-color 0.3s ease !important;
}

a.featured-more-btn:hover {
  background-color: #555555 !important;
  color: #ffffff !important;
}

/* ===================================================
   Landing Page / Business Front Page Layout
   ================================================   */

.page-template-template-landing-page #content,
.page-template-template-landing-page .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lp-section {
    width: 100%;
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px;
}

.lp-inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.lp-inner-full {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.lp-three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .lp-three-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 768px) {
    .lp-three-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .lp-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* ==============================================================
   その他のテーブル・カード等の共通スタイル [タイポ削除済]
   ============================================================== */

.table1 th,
.table1 td {
    border-right: none !important;
    border-left: none !important;
}

/* リンクの白抜き・不要なタイポ（text-navigation）を削ぎ落とし */
.style1 {
    color: #fff !important;
    text-decoration: none;
}

.kakumaru {
    border-radius: 10px;
}

.card-container {
    padding-bottom: 2em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    grid-gap: 20px;
}

.card {
    background-color: transparent;
}

.card-image {
    max-width: 100%;
    height: auto;
}

.card-image img {
    max-width: 100%;
}

.card-image:hover {
    filter: grayscale(100%);
}

/* 右寄せ専用のユーティリティクラス */
.is-align-right {
    text-align: right !important; /* もしflex等の環境なら justify-content: flex-end; に調整 */
}

/* FooGalleryのサムネイルを中央寄せにする */
.foogallery.fg-default {
    display: flex;
    justify-content: center !important;
}