@charset "utf-8";
/*
Theme Name: SUKIFUKU
Theme URI: 自分のURL
Description: COMPANY official theme
Version: 1.0
*/

/* 推奨：ボックスサイジングの初期化 */
*, *::before, *::after { box-sizing: border-box; }

/* ====== ベース設定 ====== */
body {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #333;
  background-color: #fff;
}

/* ====== 見出し ====== */
h1, h2, h3 {
  font-weight: 700;
  line-height: 1.4;
  margin: 2em 0 1em;
}
h1 { font-size: 28px; }
h2 {
  font-size: 22px;
  border-left: 4px solid #0073e6;
  padding-left: 20px;
  padding-right:20px;
  padding-top:16px;
  padding-bottom:16px;
  margin-bottom:30px;
}
h3 { font-size: 18px; }

/* ====== リンク ====== */
a { color: #0073e6; text-decoration: none; }
a:hover { color: #005bb5; text-decoration: underline; }

/* ====== リスト ====== */
ul, ol { margin: 1em 0 1em 1.5em; line-height: 1.8; }

/* ====== 画像 ====== */
img { max-width: 100%; height: auto; display: block; margin: 1em auto; }

/* ====== ボタン ====== */
.btn {
  display: inline-block;
  background: #0073e6;
  color: #fff;
  padding: 0.8em 1.5em;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  transition: 0.3s;
}
.btn:hover { background: #005bb5; }

/* ===== ヘッダー ===== */
.site-header { border-bottom:1px solid #eaeaea; background:#fff;}
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:5px 0; }
.site-title { font-weight:700; font-size:20px; color:#0073e6; text-decoration:none; }
.site-desc { margin:0px 0 0; color:#666; font-size:12px; }

/* ===== ナビ ===== */
.site-nav .menu, .footer-nav .menu {
  list-style:none; margin:0; padding:0; display:flex; gap:16px;
}
.site-nav .menu a { text-decoration:none; color:#333; }
.site-nav .menu a:hover { color:#005bb5; text-decoration:underline; }

/* ===== フッター ===== */
.site-footer { border-top:1px solid #eaeaea; background:#f9fbff; margin-top:40px; }
.footer-inner {
  padding:20px 0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.copy { color:#666; font-size:12px; }

/* ===== レイアウト ===== */
.container { width:min(1100px, 92%); margin:0 auto; }

/* モバイル基準：1カラム */
.content-area { display: block; }
.site-main   { min-width: 0; }        
.site-sidebar{ margin-top: 24px; }   

/* ===== PR Notice（控えめ） ===== */
.pr-notice{
  background:#f7faff; color:#555;
  border-left:3px solid #0073e6;
  font-size:.9rem; line-height:1.6;
  margin:0 0 50px; 
  padding:8px 12px; border-radius:4px;
}

.post-content { line-height:1.9; font-size:17px; }

/* ===== パンくず ===== */
.breadcrumb-wrap{
  margin-top:10px;
  font-size:14px; 
  color:#555;
}


.container { width: min(1224px, 92%); margin: 0 auto; }


@media (min-width: 960px) and (max-width: 1223.98px){
  .content-area{
    display: grid;
    grid-template-columns: 1fr 300px; 
    column-gap: 24px;
    align-items: start;
  }
  .site-sidebar{ margin-top: 30px; }
}


@media (min-width: 1224px){
  .content-area{
    display: grid;
    grid-template-columns: 880px 300px; 
    column-gap: 44px;             
    align-items: start;
  }
  .site-sidebar{ margin-top: 30px; }
}

/* ===== スクロールトップ ===== */
.scroll-top {
  width: 48px;
  height: 48px;
  line-height: 44px;       
  text-align: center;     
  font-size: 18px;
  border-radius: 50%;      
  border: 1px solid #ccc;  
  color: #666;             
  background: #f7f7f7;    
  display: none;           
  position: fixed;
  right: 20px;
  bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1); 
  text-decoration: none;
  z-index: 1000;
  transition: all 0.3s ease;
}

.scroll-top:hover {
  background: #e0e0e0; 
  color: #333;         
}

.post-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin:10px 0 16px;
  font-size:14px;
  color:#666;
}

/* カテゴリをバッジ風に */
.post-category a{
  display:inline-block;
  background:#0073e6;
  color:#fff;
  padding:3px 10px;
  border-radius:9999px;
  font-size:12px;
  text-decoration:none;
  line-height:1.8;
}
.post-category a:hover{ background:#005bb5; }

/* 日付と更新日 */
.post-date{ color:#888; font-size:13px; }
.post-updated{ color:#999; font-size:12px; }

/* アイキャッチ */
.eyecatch{ margin:16px 0 22px; }
.eyecatch img{ width:100%; height:auto; display:block; border-radius:6px; }

/*目次*/

.ez-toc-container{
  background:#f4fbff;              
  border:1px solid #d7e9f7;
  border-radius:8px;
  padding:0;                         
  margin:16px 0 24px;
  font-size:14px;
}

/* タイトルバー */
.ez-toc-title-container{
  display:flex; align-items:center; gap:12px;
  background:#58aee8;              
  color:#fff;
  padding:10px 14px;
}

/* 左側の「目次」 */
.ez-toc-title{
  margin:0; padding:0;
  font-weight:700; font-size:16px; color:#fff;
}

/* 右端の [close]/[open] を右寄せ＆白に */
.ez-toc-title-toggle{ margin-left:auto; }
.ez-toc-title-toggle a{
  color:#fff; text-decoration:none; font-size:13px;
}
.ez-toc-title-toggle a:hover{ text-decoration:underline; }

/* 本文（リスト部） */
.ez-toc-list{ margin:0; padding:14px 18px 16px; }

/* 行間と余白 */
.ez-toc-list li{
  margin:.4em 0; line-height:1.9;
}

/* H2項目を強調（太字） */
.ez-toc-list .ez-toc-heading-level-2 > a{ font-weight:700; }

/* リンク色（サイトのアクセントに合わせて） */
.ez-toc-link{ color:#1a73e8; text-decoration:none; }
.ez-toc-link:hover{ text-decoration:underline; }

.ez-toc-list.ez-toc-list-level-1{ counter-reset: toc; }
.ez-toc-list.ez-toc-list-level-1 > li{ list-style:decimal; }

@media (max-width: 480px){
  .ez-toc-list{ padding:12px 14px; }
}

#ez-toc-container {
  font-size: 14px !important;
  line-height: 1.6 !important;
}


#ez-toc-container ul li {
  margin-bottom: 4px !important;
}

#ez-toc-container a {
  color: #666 !important;  
  text-decoration: none !important;
  transition: color 0.2s ease-in-out;
}

#ez-toc-container a:hover {
  color: #0073e6 !important; 
  text-decoration: underline;
}


.ez-toc-list{
 background:#f0f8ff;
 padding:10px 35px;
}


.ez-toc-js-icon-con{
  color:#fff;
}

/* サイドバー　人気記事カード */
.widget_wpp{
  background: #f8fafc;
  border: 1px solid #e6edf5;
  border-radius: 14px;
  padding: 12px;
}

/* 見出し（ウィジェットタイトル） */
.widget_wpp .widget-title{
  margin: 4px 8px 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

/* リスト全体 */
.widget_wpp .wpp-list{
  list-style: none;
  margin: 0;
  padding: 0 6px 8px;
  counter-reset: rank; /* 連番を作る */
}

/* 各アイテムの並び */
.widget_wpp .wpp-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  position: relative;
  counter-increment: rank;
}

/* サムネイル枠 */
.widget_wpp .wpp-thumb{
  display: block;
  flex: 0 0 80px;
  width: 80px; height: 80px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #eef2f7; /* サムネなしの時の下地 */
}

/* 画像自体 */
.widget_wpp .wpp-thumb img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 左上の番号バッジ */
.widget_wpp .wpp-thumb::before{
  content: counter(rank);
  position: absolute;
  top: -6px; left: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #1e90ff;   /* 1位の色 */
  color: #fff;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.widget_wpp .wpp-item:nth-child(2) .wpp-thumb::before{ background:#6c9efc; }
.widget_wpp .wpp-item:nth-child(3) .wpp-thumb::before{ background:#f7b731; }
.widget_wpp .wpp-item:nth-child(4) .wpp-thumb::before{ background:#9aa5b1; }
.widget_wpp .wpp-item:nth-child(5) .wpp-thumb::before{ background:#b7c0cc; }

/* タイトル（2行で省略） */
.widget_wpp .wpp-meta{ flex: 1; min-width: 0; }
.widget_wpp .wpp-title{
  font-size: 14px; line-height: 1.5;
  color: #111; text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.widget_wpp .wpp-title:hover{ color:#0073e6; text-decoration: underline; }

/* 罫線（任意） */
.widget_wpp .wpp-item:not(:last-child){
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8eef5;
}
.widget-title{
 border-left:none;
 border-bottom:4px solid #0073e6;
 text-align:center;
 font-size:18px;
 padding:10px;
}

/* 最新記事（サムネ左・タイトル右） */
.site-sidebar .recent-posts{ list-style:none; margin:0; padding:0; }
.site-sidebar .recent-post-item{
  display:flex; gap:10px; align-items:flex-start;
  margin:0 0 12px;
}
.site-sidebar .recent-thumb{
  flex:0 0 67px; width:120px; height:67px;
  overflow:hidden; background:#eef2f7; display:block;
}
.site-sidebar .recent-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.site-sidebar .recent-title{
  flex:1; min-width:0;
  font-size:14px; line-height:1.5; color:#111; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.site-sidebar .recent-title:hover{ color:#0073e6; text-decoration:underline; }

/* 最新記事：サムネ枠*/
.site-sidebar .widget_recent .recent-thumb{
  flex: 0 0 100px;
  width: 100px;
  height: 56px;
  overflow: hidden;
  display: flex;            
  align-items: center;      
  justify-content: center; 
}
.site-sidebar .widget_recent .recent-thumb img{
  max-width: 100%;     
  max-height: 100%;    
  height: auto;
  width: auto;
  object-fit: contain; 
  display: block;
}

.wpp-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpp-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.wpp-thumb img {
  width: 100px;   
  height: 56px;  
  object-fit: cover;
  margin-right: 10px;
}

.wpp-title {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
}

.wpp-title:hover {
  text-decoration: underline;
  color: #0073e6;
}

/* 人気記事ウィジェットのサムネイル調整 */
.wpp-list .wpp-thumbnail {
  width: 100px !important; 
  height: 56px !important;  
  object-fit: cover;         
  border-radius: 0 !important; 
  margin-right: 8px;
}
/* サイドバー 検索ボックス */

.site-sidebar .sf-form{ display:flex; width:100%; }

.site-sidebar .sf-input{
  flex:1;
  height:40px;
  padding:0 12px;
  border:1px solid #e1e8f0;
  border-right:none;
  background:#fff;
  border-radius:8px 0 0 8px;
  font-size:14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.site-sidebar .sf-input::placeholder{ color:#9aa7b4; }
.site-sidebar .sf-input:focus{
  border-color:#0073e6;
  box-shadow:0 0 0 3px rgba(0,115,230,.12);
}

.site-sidebar .sf-btn{
  width:44px; min-width:44px; height:40px;
  display:grid; place-items:center;
  border:none; cursor:pointer;
  background:#0073e6; color:#fff;
  border-radius:0 8px 8px 0;
  transition:filter .15s, transform .02s;
}
.site-sidebar .sf-btn:hover{ filter:brightness(1.05); }
.site-sidebar .sf-btn:active{ transform:translateY(1px); }

/* パンくず */
.breadcrumbs{
  font-size:12px;
  color:#777777;
  margin-top:30px;
}

.popular-item{
 height:56px;
 margin-bottom:10px;
}

/* サイドバーカテゴリー */

.sidebar-categories{
 margin:0 ;
 padding:0 0 0 5px;
 list-style: none;
}

.sidebar-categories li{
 list-style: none;
 padding-left:-30px
}

.sidebar-categories a{
 font-size:15px;
 color:#333;
}

.sidebar-categories a:hover{
 color:#0073e6;
}

.sidebar-categories ul.children{
  margin:0px;
  padding:3px 0px 10px 15px;
}

/* サイドバープロフィール */
.profile-name{
 text-align:center;
}

.profile-img{
 width:150px;
 height:150px; 
}

/* 次の記事前の記事 */
.post-nav {
  display: flex;
  justify-content: space-between; 
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #ddd;
  font-size:14px;
}

.post-nav .nav-prev,
.post-nav .nav-next {
  flex: 1;
}

.post-nav .nav-prev {
  text-align: left;
}

.post-nav .nav-next {
  text-align: right;
}

.post-nav a {
  color: #0073aa;
  text-decoration: none;
}

.post-nav a:hover {
  text-decoration: underline;
}
/* ===== CRP関連記事：横並びカード ===== */
.crp_related ul {
  list-style: none;        
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px;
}
/* aタグ全体を縦積みにする */
.crp_related ul li a {
  display: flex;
  flex-direction: column; 
  height: 100%;
  text-decoration: none;
  color: inherit;
}
/* 画像 */
.crp_related ul li figure {
  margin: 0;
}
.crp_related ul li img {
  display: block;
  width: 100%;
  height: 160px;     
  object-fit: cover;
}
/* タイトル */
.crp_related .crp_title {
  display: block;
  padding: 5px;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* レスポンシブ対応 */
@media (max-width: 960px) {
  .crp_related ul { grid-template-columns: repeat(2, 1fr); }
  .crp_related ul li img { height: 140px; }
}
@media (max-width: 600px) {
  .crp_related ul { grid-template-columns: 1fr; }
  .crp_related ul li img { height: 56vw; }
}

.crp_related h2{
 background:#dcdcdc;
 border:none;
 text-align:center;
}

.crp_related{
 margin-bottom:50px;
}

/* 記事下部シェアボタン */
.share-buttons{
 margin-top:50px 0 0 30px;
 text-align:center;
}
.share-text{
 text-align:center;
}
.share-buttons .share-btn {
  display: inline-block;
  margin: 0 8px;
  padding: 10px 16px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

/* X (Twitter) */
.share-buttons .x {
  background-color: #000000; /* Xは黒 */
}
.share-buttons .x:hover {
  background-color: #333333;
}

/* Facebook */
.share-buttons .facebook {
  background-color: #1877f2; /* Facebook公式カラー */
}
.share-buttons .facebook:hover {
  background-color: #0d65d9;
}

/* LINE */
.share-buttons .line {
  background-color: #06c755; /* LINE公式グリーン */
}
.share-buttons .line:hover {
  background-color: #04a844;
}

/* カテゴリ/タグ */
.post-taxonomies{}
.post-taxonomies{margin:50px 0 20px;font-size:14px;line-height:1.8}
.post-taxonomies .tx-label{display:inline-block;min-width:72px;color:#666;font-weight:700}
.post-taxonomies a{display:inline-block;margin:2px 6px 2px 0;padding:2px 10px;border:1px solid #e5e5e5;text-decoration:none;color:#333}
.post-taxonomies a:hover{background:#f7f7f7}

.addtoany_share_save_container{
  text-align: right;
  margin: 8px 0 10px;
}

/* ========= SP向け微調整 ========= */
@media (max-width: 480px){

  /* タイトルを少しだけ小さく＆余白調整 */
  .single .entry-title{
    font-size: 22px;        /* お好みで 20?24px */
    line-height: 1.4;
    margin-bottom: 10px;
  }

  /* メタ行（カテゴリ・日付など）をきれいに並べる */
  .single .post-meta{                 /* 例：メタ全体のラッパー */
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;                    /* 行・列の間隔 */
    align-items: center;
  }

  /* カテゴリのバッジ（折れ防止＆小さめ） */
  .single .post-meta .cat-badge,      /* 使っているclass名に合わせて変更 */
  .single .post-taxonomies .post-cats a{
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    white-space: nowrap;              /* ← 改行させない */
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
  }

  /* 日付表示を小さめ&色薄めに */
  .single .post-meta .post-date,
  .single .post-meta .post-updated{
    font-size: 12px;
    color: #666;
  }

/* シェアブロックの整列をflexで統一 */
.share-buttons{
  display: flex;
  flex-wrap: wrap;            /* 幅が狭いときは折り返す */
  gap: 8px;                   /* ボタン間のすき間 */
  align-items: center;        /* 高さを中央で揃える */
  justify-content: center;    /* 右寄せなら flex-end / 左寄せなら flex-start */
  margin: 20px 0 12px;
  padding: 14px 10px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}


/* ブロック全体 */
.share-buttons{
  display:flex;
  flex-wrap:wrap;           /* 2段構成にするため必須 */
  gap:10px;
  align-items:center;
  justify-content:center;
  margin:20px 0 14px;
  padding:14px 10px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}

/* タイトル行：必ず1行占有＆中央寄せ */
.share-buttons .share-title{
  flex-basis:100%;          /* ←ここがポイント：タイトルを1行占有 */
  text-align:center;
  margin:0 0 6px;
  font-weight:700;
  font-size:15px;
  line-height:1.6;
  position:relative;
}

/* ボタン行（高さ・位置を揃える） */
.share-buttons .share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:6px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  color:#fff;
  text-decoration:none;
  transition:opacity .2s, transform .06s;
  margin:0;
}
.share-buttons .share-btn:hover{ opacity:.85; transform:translateY(-1px); }

/* スマホ微調整 */
@media (max-width:480px){
  .share-buttons{ gap:8px; }
  .share-buttons .share-btn{ padding:9px 14px; font-size:13px; border-radius:7px; }
  .share-buttons .share-title{ font-size:14px; }
}
}

/* お問い合わせページ全体 */
/* ===== お問い合わせフォーム（CF7） ===== */
.form-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}
/*
.contact-form {
  background: #fff;
  border: 1px solid #e6e6e9;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  padding: clamp(20px, 3.5vw, 36px);
}*/

.contact-form .lead {
  margin: 0 0 1.5em;
  font-size: 0.98rem;
  line-height: 1.9;
  color: #444;
}

.input-box {
  display: grid;
  gap: 8px 20px;
  padding: 14px 0;
  /*border-top: 1px dashed #ececf2;*/
}
.input-box:first-of-type { border-top: none; }

.label-area,
.input-box > label {
  font-weight: 600;
  color: #222;
}

.required {
  display: inline-block;
  margin-left: .5em;
  padding: 0 .5em;
  font-size: .75em;
  line-height: 1.9;
  color: #c40000;
  background: #ffeaea;
  border: 1px solid #ffc9c9;
  border-radius: 6px;
}

/* 入力欄 */
.input-area .wpcf7-form-control {
  width: 100%;
}
.input-area input[type="text"],
.input-area input[type="email"],
.input-area textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  background: #fff;
  border: 1px solid #dfe3e6;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input-area textarea { min-height: 180px; resize: vertical; }

.input-area input:focus,
.input-area textarea:focus {
  border-color: #5aa4ff;
  box-shadow: 0 0 0 3px rgba(90,164,255,.15);
}

/* 送信ボタン行 */
.action-box {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.action-box input[type="submit"] {
  appearance: none;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  font-weight: 700;
  border-radius: 999px;
  background: #0a66ff;
  color: #fff;
  transition: transform .02s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 6px 16px rgba(10,102,255,.25);
}
.action-box input[type="submit"]:hover { opacity: .95; }
.action-box input[type="submit"]:active { transform: translateY(1px); }

.action-box .wpcf7-spinner {
  margin: 0;
}

.note {
  margin-top: 8px;
  color: #666;
}
.note small { line-height: 1.8; }

.wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: .85rem;
  color: #c40000;
}
.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 3px rgba(255,107,107,.15);
}

.wpcf7-form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  border-width: 1px;
  font-size: .95rem;
}
.wpcf7-form.sent .wpcf7-response-output {
  background: #f2fbf5; border-color: #bfe6c9; color: #146c2e;
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed  .wpcf7-response-output {
  background: #fff5f5; border-color: #ffd2d2; color: #a40000;
}
/*カテゴリ*/
.archive-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.archive-thumb img {
  width: 220px;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

.archive-body {
  flex: 1;
}

.archive-title {
  font-size: 18px;
  margin: 0 0 10px;
}

.archive-date {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.archive-excerpt {
  font-size: 14px;
  color: #333;
}

.archive-title {
  border-left: none !important;
  padding-left: 0 !important;
  margin:0;
}

/* スマホは縦並び */
@media (max-width: 768px) {
  .two-column {
    flex-direction: column;
  }
  .archive-item {
    flex-direction: column;
  }
  .archive-thumb img {
    width: 100%;
  }
}

/* 404ページの検索フォームデザイン */
.notfound-search form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto;               /* 中央寄せ */
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 9999px;        /* 丸み */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.notfound-search input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  padding: 8px;
}

.notfound-search input[type="submit"],
.notfound-search button[type="submit"] {
  border: none;
  border-radius: 9999px;
  background: #111;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: bold;
}

.notfound-search input[type="submit"]:hover,
.notfound-search button[type="submit"]:hover {
  opacity: .9;
}


.notfound-block h2{
 border-left:none;
}

/* ===== グローバルナビゲーション ===== */
.site-nav {
  margin-left: auto; 
}

.site-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;  
  gap: 0px;    
}

.site-nav .menu li {
  position: relative;
  padding:0 16px; 
}

.site-nav .menu li + li{       /* 先頭以外にだけ線を出す */
  border-left:1px solid #ccc;  /* ← 左側に1本。最後の処理不要 */
}

.site-nav .menu a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2px;                     /* アイコンと文字の間 */
  padding:10px 0;              /* 高さを統一 */
  font-size:12px;
  font-weight:600;
  color:#333;
  text-decoration:none;
  line-height:1;
  transition:opacity .2s;
}

.site-nav .menu a:hover {
  opacity: 0.6;
}

/* アイコン調整 */
.site-nav .menu a i{
  display:block;
  font-size:18px;
  line-height:0;
  margin:0; padding:0;
}
/* 文字だけ微調整したい場合（ラベルを span で囲っている前提） */
.site-nav .menu a span{ line-height:1.2; }

/* ===== スマホ版 ===== */
@media (max-width: 768px){
.header-inner{
    flex-direction: column;
    align-items: stretch;     
    gap: 6px;
  }
.site-branding{
    display:flex; flex-direction:column; align-items:flex-start;
  }
  .site-title{ font-size: 20px; margin:0; }
  .site-desc{  font-size: 12px; margin:0; color:#666; }
.site-nav{ width:100%; }
.site-nav .menu{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
    gap: 0;
  }
 .site-nav .menu li{
    position: relative;
    padding: 4px 14px;             
  }
  .site-nav .menu li + li{
    border-left: 1px solid #e0e0e0;  /* 区切り線 */
  }
.site-nav .menu a{
    padding: 0px 0;                 
    gap: 1px;
    font-size: 11px;          
  }
  .site-nav .menu a i{
    font-size: 16px;           
    line-height: 1;
  }
  .site-nav .menu a span{ line-height: 1.15; }
.site-nav .menu a span{
    white-space: nowrap;
  }
}
@media (max-width: 768px){
  .site-nav{
    background: #1e90ff;   
    width: 100%;
  }


  .site-nav .menu a,
  .site-nav .menu a i{
    color: #fff;
  }


  .site-nav .menu li + li{
    border-left: 1px solid #fff;
  }


  .site-title{ color: #0073e6; }  
  .site-desc { color: #333; }    
}


@media (max-width: 768px){

  .site-nav .menu{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    justify-items: center;
    width: 100%;
  }

  .site-nav .menu li{
    padding: 10px 3px 3px 3px;                  
    margin: 0;
    box-sizing: border-box; 
  }

  .site-nav .menu li + li{
    border-left: 1px solid #fff;
  }


  .site-nav .menu a{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 5px 8px 5px 10px;
    color: #fff;
    text-align: center;
  }

  .site-nav .menu a i{
    font-size: 16px;
    line-height: 0;
  }
.site-header{
  border-bottom:none;
}

}

@media (max-width: 768px){
  .site-nav{
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;    
    margin-right: -50vw;
    width: 100vw;
    background: #1e90ff;   
  }


  html, body { overflow-x: hidden; }


  .site-nav .menu{
    margin: 0 auto;
    justify-content: center;
  }

  .site-nav .menu a,
  .site-nav .menu a i { color:#fff; }
  .site-nav .menu li + li { border-left:1px solid #fff; }
}
/*=== トップページ ===*/


/* おすすめ記事 */
.front-pickup{ 
  max-width: 990px;
  margin: 0 auto;
  padding: 0 20px;
}

.front-pickup h2,.front-latest h2{
  border-left:none;
  text-align:left;
  margin:0 0 20px 0;
  padding: 0;
  font-size:24px;
}
.front-sub-title{
  text-align:center;
  margin:0;
  padding:10px 0;
}

.pickup-item{
  width: auto;        
  float: none;       
}

h3.pickup-title , h3.latest-card{
color:#333; margin:8px 0 0; font-size:16px; line-height:1.5;
}

@media(min-width:768px){
.pickup-posts:after{
  content:"";
  display:block;
  clear:both;

}
.pickup-item{
  float:left;
  width:300px;
  margin:0;
}

.pickup-posts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
}

@media (max-width: 1024px){
  .pickup-posts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px){
  .pickup-posts{ grid-template-columns: 1fr; }
}

/*新着記事6件*/

.front-latest {
  max-width: 990px;   
  margin: 0 auto;     
  padding: 0 20px;    
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; 

}

.latest-card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.latest-card time {
  font-size: 13px;
  color: #777;
}

.more-link {
  text-align: center;   
  margin: 40px 0;
}

.btn-round {
  display: inline-block;
  padding: 14px 100px;
  background: #2563eb;        
  color: #fff;
  font-weight: bold;
  border-radius: 9999px;      
  text-decoration: none;
  font-size: 16px;
  transition: background 0.3s ease, transform 0.2s ease;
  border:1px solid #2563eb;
}

.btn-round:hover {
  background: #fff;   
  color:#2563eb;
  border:1px solid #2563eb;
}


/* スマホ対応 */
@media (max-width: 768px) {
  .latest-grid {
    grid-template-columns: 1fr;
  }
}


/*フロントカテゴリ*/

.front-cate{ 
  max-width: 980px;   
  margin: 70px auto 100px auto;     
  padding:30px 0px;
  background:#f5f5f5;   
  border-radius: 8px;
}

.front-cate__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 12px;
  background: #f3f5f7;
  border-radius: 12px;
}

.front-cate__grid li{
  width:210px;
  margin:0 auto; 
  padding:0
}

.front-cate__grid li a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
  background: #4f75ff;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.front-cate__grid li a:hover{ opacity:.9; }

.front-cate__grid li{
  font-size:20px;
}

@media (min-width: 768px) and (max-width: 1024px){
  .front-cate__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 767px){
  .front-cate__grid{
    grid-template-columns: 1fr;
  }
}


}

/* ファーストビューのカード型 */
.front-feature {
  background: #f9f9f9;
  padding: 40px 20px;
  margin-bottom: 60px;
}

.feature-inner {
  display: flex;
  flex-wrap: wrap;      
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  gap: 20px;
}


.feature-thumb {
  flex: 0 0 600px;
  text-align: center;
}
.feature-thumb img {
  width: 600px;
  height: 337px;
  object-fit: cover;
  border-radius: 8px;
}


.feature-content {
  flex: 1 1 calc(100% - 620px); 
  min-width: 280px;             
}

.feature-content h3 {
  font-size: 28px;
  margin: 0 0 16px;
}

.feature-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #444;
}

.feature-btn {
  display: inline-block;
  background: #2979ff;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: background .3s;
  text-align:center;
}
.feature-btn:hover { background: #fff;color:#2979ff;border:1px solid #2979ff; }

.front-feature {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 10px 20px;
  margin: 0 auto 60px;   
  max-width: 1000px;   
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-top:50px;
}


.feature-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  gap: 20px;
  padding: 0 10px
  box-sizing: border-box;
}

.feature-thumb {
  flex: 0 0 600px;
  text-align: center;
}

.feature-thumb img {
  width: 600px;
  height: 337px;
  object-fit: cover;
  border-radius: 8px;
}

.feature-content {
  flex: 1 1 calc(100% - 620px);
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

.feature-content h3 {
  font-size: 28px;
  margin: 15px 0;
}

.feature-content h3 a{
  color:#444;
}

.feature-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #444;
  padding-bottom:30px;
}


/* スマホ：縦並び */
@media (max-width: 768px) {
  .feature-inner { flex-direction: column; }
  .feature-thumb { flex: 1 1 100%; }
  .feature-thumb img { width: 100%; height: auto; }
  .feature-content { flex: 1 1 100%; }
  .feature-content h3 { font-size: 22px; }
}
.front-profile {
  background: #f9f9f9;
  padding: 40px 20px;
  margin: 60px auto;
  max-width: 900px;
  border-radius: 12px;
}
.profile-card {
  display: flex;
  align-items: center;
  gap: 20px;
}
.profile-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-text h3 {
  margin: 0 0 10px;
  font-size: 20px;
}
.profile-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #2979ff;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-size: 14px;
}

@media (max-width: 768px){
  .front-profile .profile-card{
    flex-direction:column;     
    text-align:center;          
    align-items:center;
  }
  .front-profile .profile-photo{ order:-1; margin-bottom:12px; }

  .front-profile .profile-img{ width:140px; height:140px; }
}
/* フッター全体 */
.site-footer {
  background: #20232a; 
  color: #f5f5f5;
  font-size: 14px;
  padding: 30px 0;
  text-align: center;
}

/* メニュー横並び */
.site-footer .widget_nav_menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 20px;
}
.site-footer .widget_nav_menu a {
  color: #e6e6e6;
  text-decoration: none;
}
.site-footer .widget_nav_menu a:hover {
  text-decoration: underline;
}

/* 底部のコピーライト */
.footer-bottom {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.8;
}

.site-footer .widget-title { 
  display: none; 
}


.site-footer .widget_nav_menu ul { 
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;               
  justify-content: center;     
  flex-wrap: wrap;
  gap: 8px 20px;               
}


.site-footer .widget_nav_menu ul > li + li {
  position: relative;
}
.site-footer .widget_nav_menu ul > li + li::before {
  content: "｜";
  opacity: .35;
  margin: 0 6px 0 2px;        
}


.site-footer .widget_nav_menu a { 
  color: #eaeaea;
  text-decoration: none;
}
.site-footer .widget_nav_menu a:hover { 
  text-decoration: underline;
}

.site-footer { 
  padding-top: 28px; 
  padding-bottom: 0; 
}
.footer-bottom { 
  margin-top: 18px; 
  padding: 16px 0 22px; 
  font-size: 13px; 
  opacity: 0.9;
}
.footer-bottom .ad-note { margin-bottom: 6px; }

.site-footer .footer-inner { 
  max-width: 1100px;
  margin: 0 auto; 
  padding: 0 16px; 
  text-align: center;
}

@media (max-width: 768px) {
  .site-footer { font-size: 15px; }
  .site-footer .widget_nav_menu ul { gap: 10px 14px; }
}


img.wp-image-732 {
  width: 350px;   
  height: 350px;   
  display: block;
  margin: 0 auto;
}


/*トグル（バーガー）*/
button.togglebtn {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button.togglebtn:hover {
    background-color: #45a049;
}

#toggleContent {
    margin-top: 10px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/*トグルボタン*/
.site-header { position: relative; }

/* ===== モバイル用ハンバーガー ===== */
.hamburger{
  position:absolute; top:6px; right:8px;
  margin:0; z-index:999; display:block;
  border:none; background:none; padding:0;
}

/* ボタン（枠線なし・正方形・下に「メニュー」） */
.hamburger-button{
  width:40px; height:40px;
  display:flex; flex-direction:column; gap:3px;
  align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  padding:0; list-style:none; box-sizing:border-box;
}
.hamburger-button::-webkit-details-marker{ display:none; } /* Safari/Chrome */
.hamburger > summary::after{ content:none !important; }   /* ＋/－消す */

/* ハンバーガーアイコン（最終調整版） */
.hamburger-icon {
  width: 22px;
  height: 16px; /* ← 少し低くしてバランス改善 */
  position: relative;
  display: inline-block;
}

.hamburger-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: all 0.3s ease;
}


.hamburger-icon span:nth-child(1) { top: 0; }
.hamburger-icon span:nth-child(2) { top: 6px; }  
.hamburger-icon span:nth-child(3) { bottom: 0; }


.hamburger[open] .hamburger-icon span:nth-child(1) {
  transform: rotate(45deg);
  top: 7px;  
}

.hamburger[open] .hamburger-icon span:nth-child(2) {
  opacity: 0;
}

.hamburger[open] .hamburger-icon span:nth-child(3) {
  transform: rotate(-45deg);
  top: 7px; 
}

/* アイコン下の文字 */
.hamburger-text {
  font-size: 10px;
  color: #333;
  margin-top: 3px;
  font-weight: normal;
  white-space: nowrap;   
  text-align: center;
  display: block;
  line-height: 1;
}

/* メニューパネル */
.hamburger .site-nav-sp{
  display:none;                         
  position:absolute; top:48px; right:0;  
  width:260px;
  background:#fff; border:1px solid #ddd; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:12px; z-index:1000;
}
.hamburger[open] .site-nav-sp{ display:block; } 

.hamburger .site-nav-sp ul{ list-style:none; margin:0; padding:0; }
.hamburger .site-nav-sp li{ margin:0; }
.hamburger .site-nav-sp a{
  display:block; padding:10px 8px; text-decoration:none;
  color:#333; font-size:14px;
}
.hamburger .site-nav-sp a:hover{ background:#f3f4f6; }
.hamburger .site-nav-cate{
  padding:6px 8px; margin:4px 0 2px; font-weight:700; color:#0073e6;
}
.hamburger .site-nav-sp ul li i{ padding:5px; color:#ff0000; }

@media (min-width:768px){ .hamburger{ display:none; } }

/* ============================
   quote-border：引用デザイン
   左に3pxの青い線＋右上に”マーク
============================ */
.quote-border {
  position: relative;
  margin: 1.8em 0;
  padding:1px 20px;
  border-left: 3px solid #0073e6; 
  background: #f9f9fb;            
  /*border-radius: 6px;*/
  color: #333;
  /*line-height: 1.8;*/
}

/* 引用の ” マーク */
.quote-border::before {
  content: "”";
  position: absolute;
  top: 0.25em;
  right: 0.4em;
  font-size: 3rem;
  line-height: 1;
  color: rgba(0,115,230,0.15); 
  font-family: serif;
  pointer-events: none;
}

/* 引用元（cite） */
.quote-border cite {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9rem;
  color: #666;
  font-style: normal;
}
.quote-border cite::before {
  content: "— ";
}

/* ====== ChatGPT風の最終上書き（SUKIFUKU調整）====== */

/* 本文の基本色・行間（全体統一） */
body {
  color: #202123;
  line-height: 1.7; /* 1.7～1.75が目安 */
}

/* 記事本文ブロックの統一（過度な拡大を戻す） */
.post-content {
  font-size: 1rem;     /* 16pxに統一 */
  line-height: 1.7;    /* 本文と同じに */
  color: #202123;
}

/* 見出し（ChatGPTバランス） */
h2 {
  font-size: 1.5rem;   /* 24px */
  font-weight: 600;    /* 既存の700→少し軽く */
  line-height: 1.6;    /* 日本語は1.5～1.6が見やすい */
  margin-top: 1.8em;
  margin-bottom: 0.9em;
  color: #1a1a1a;
  /* 既存の装飾（border-left / padding）はそのままでOK */
}

h3 {
  font-size: 1.25rem;  /* 20px */
  font-weight: 600;
  line-height: 1.5;
  margin: 1.2em 0 0.7em;
  color: #1a1a1a;
}

/* 箇条書き：各項目の行間と縦間隔を整える */
ul li, ol li {
  margin: 0.4em 0;     /* 項目間隔を少し確保 */
  line-height: 1.7;    /* 本文と同じ行間 */
}

/* ネスト時（2階層目）のスタイル差別化は任意 */
ul ul { 
  margin-top: 0.4em; 
  margin-bottom: 0.4em; 
  list-style-type: circle; 
}
/* =========================
   フッター全体
========================= */
.site-footer {
  background: #0f172a;
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
}

/* 内側ラッパー */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}
/* =========================
   3カラムグリッド（PC）
========================= */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
}

/* 各カラム内 */
.footer-col {
  /*min-width: 0;*/
  text-align:left;
}

/* タイトル */
.footer-col h3 {
  color: #fff;
  /*font-weight: 700;*/
  font-size: 16px;
  margin-bottom: 10px;
}

/* リンクリスト */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin: 6px 0;
}

.footer-col a {
  color: #fff;
  text-decoration: none;
  transition: opacity .2s;
}

.footer-col a:hover {
  opacity: 0.8;
  text-decoration: underline;
}
/* =========================
   レスポンシブ対応
========================= */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
.cta-box {
  background: #f9fbff;
  border: 2px solid #0073e6;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  margin: 40px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.cta-lead {
  font-weight: 700;
  color: #0073e6;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0073e6;
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 20px;
  transition: background 0.3s ease;
}
.cta-btn:hover {
  background: #005bb5;
}
.cta-img {
  height: 32px;
  width: auto;
}