@charset "utf-8";
/* ═══════════════════════════════════════════════════════════
   案A ── ナチュラル（NATURAL 型1「和紙と縦組み」）
   配色順序：地の色 → 墨 → 差し色1つ。差し色は面積5%以下。
   🔴 260822 CEO指示で差し色を〈枯茶〉から〈橙〉へ変更。
      NATURAL原則「アクセントは1色だけ」に従い、枯茶と併用せず置き換えた。
      鮮やかな #E8703C は面・罫・記号に、文字には #A8481A（AA）を使う二段構え。
   🔴 その二段構えを .rank（事業の英字ラベル）と .ext::after（外部リンクの↗）で破っていた。
      どちらも明るい地の上の小さな文字＝2.75:1 で AA 不適合。260823に文字用へ修正。
   🔴 260825 CEO指示「フォントが全体的に読みにくい。黒にしつつもう少し大きく」で
      ①墨を #211F1C→#131110（16.8:1）②補助文字を #6B6259→#4A433B（5.3→8.7:1）
      ③本文の太さを 300→400 ④18px未満の文字を一律 +1.5px した。
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#F4F2E9;      /* 地：和紙生成り */
  --paper-2:#EDEADE;
  --sand:#E9D9C6;       /* 砂 */
  --sumi:#131110;       /* 墨（対地 16.8:1）260825に #211F1C から黒寄りへ */
  --sub:#4A433B;        /* 補助文字（対地 8.7:1・AAA）260825に #6B6259 から濃くした */
  --daidai:#A8481A;     /* 差し色：橙（文字用）対地 5.2:1・AA */
  --daidai-deco:#E8703C;/* 柿色の橙＝面・罫・記号に使う鮮やかな側。
                           対地 2.9:1 のため本文には使わない。
                           墨を載せると対 #E8703C 5.2:1、黒地の上では 6.1:1 で映える */
  --white:#FFFFFF;
  --min:'Shippori Mincho B1',serif;
  --lat:'EB Garamond',serif;
  --go:'Zen Kaku Gothic New',sans-serif;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--sumi);font-family:var(--go);font-weight:400;
  line-height:2.05;letter-spacing:.05em;-webkit-font-smoothing:antialiased}
/* 🔴 height:auto が要る。WordPressは img に width/height 属性を書き出すので、
   max-width だけだと幅が縮んだときに高さが属性値のまま残り、縦に伸びる（260826に実害）。
   高さを自分で決めている .fv figure img / .megumi img などは、より具体的な指定が勝つので影響しない。 */
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:860px}

/* モックバー */
.mockbar{position:fixed;left:0;bottom:0;z-index:200;background:var(--sumi);color:var(--paper);
  font-size:12.5px;letter-spacing:.12em;padding:7px 15px;border-radius:0 8px 0 0}
.mockbar b{color:var(--daidai-deco);font-weight:500}
.mockbar a{color:var(--sand);border-bottom:1px solid rgba(255,255,255,.3);margin-left:10px}

/* ヘッダー：常時ソリッド（NATURAL原則） */
header{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--sand)}
.hd{max-width:1180px;margin-inline:auto;padding:15px var(--gut);display:flex;align-items:center;gap:clamp(12px,2.6vw,34px)}
.logo{font-family:var(--lat);font-size:25px;letter-spacing:.32em;margin-right:auto;padding-left:.32em}
.gnav{display:flex;gap:clamp(13px,2vw,27px);font-size:14px;letter-spacing:.09em}
.gnav a{padding:4px 0;border-bottom:1px solid transparent;transition:.45s var(--ease)}
.gnav a:hover,.gnav a[aria-current]{border-bottom-color:var(--daidai);color:var(--daidai)}
.shopbtn{border:1px solid var(--daidai);color:var(--daidai);font-family:var(--lat);font-size:13.5px;
  letter-spacing:.2em;padding:9px 18px;white-space:nowrap;transition:.45s var(--ease)}
.shopbtn:hover{background:var(--daidai-deco);color:var(--sumi);border-color:var(--daidai-deco)}

/* 共通パーツ */
.eyebrow{font-family:var(--lat);font-size:13px;letter-spacing:.42em;color:var(--daidai);margin-bottom:13px}
.stitle{font-family:var(--min);font-weight:500;font-size:clamp(23px,2.9vw,34px);letter-spacing:.15em;line-height:1.7}
.sec{padding:clamp(58px,7.5vw,110px) 0}
.lead{font-size:15px;line-height:2.5;color:var(--sub)}
.rule{height:1px;background:var(--sand)}
.btn{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--sumi);
  padding:14px 27px;font-size:14px;letter-spacing:.15em;transition:.45s var(--ease)}
.btn:hover{background:var(--sumi);color:var(--paper)}
.btn.fill{background:var(--daidai-deco);border-color:var(--daidai-deco);color:var(--sumi)}
.btn.fill:hover{background:var(--sumi);border-color:var(--sumi);color:var(--paper)}
.btn .ext{font-family:var(--lat);font-size:11.5px;letter-spacing:.12em;opacity:.75}
.more{display:inline-flex;align-items:center;gap:11px;font-family:var(--lat);font-size:13.5px;
  letter-spacing:.24em;color:var(--daidai);border-bottom:1px solid var(--daidai-deco);padding-bottom:5px;transition:.45s var(--ease)}
.more:hover{gap:19px}
.mizuhiki{display:flex;align-items:center;gap:13px;justify-content:center}
.mizuhiki span{width:min(150px,20vw);height:1px;background:var(--sand)}
.mizuhiki i{font-family:var(--min);font-style:normal;font-size:15.5px;color:var(--daidai)}

/* 下層ページの見出し帯 */
.phead{background:var(--paper-2);border-bottom:1px solid var(--sand);padding:clamp(44px,6vw,84px) 0}
.phead h1{font-family:var(--min);font-weight:500;font-size:clamp(25px,3.4vw,40px);letter-spacing:.18em;line-height:1.6}
.crumb{font-size:13px;letter-spacing:.1em;color:var(--sub);margin-top:16px}
.crumb a:hover{color:var(--daidai)}

/* NEWS */
.date{font-family:var(--lat);font-size:14.5px;letter-spacing:.14em;color:var(--sub)}
.cat{font-size:12px;letter-spacing:.12em;border:1px solid var(--daidai-deco);color:var(--daidai);
  padding:3px 10px;border-radius:99px;white-space:nowrap}
.meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nlist{list-style:none;border-top:1px solid var(--sand)}
.nlist li a{display:block;padding:19px 0;border-bottom:1px solid var(--sand);transition:.45s var(--ease)}
.nlist li a:hover{padding-left:8px}
.nlist h3{font-size:15px;font-weight:400;line-height:1.9;margin-top:7px;letter-spacing:.03em}
.nlist li a:hover h3{color:var(--daidai)}

/* フッター */
footer{background:var(--paper);border-top:1px solid var(--sand);padding:clamp(50px,6vw,78px) 0 32px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px}
.fgrid h4{font-family:var(--lat);font-size:12.5px;letter-spacing:.26em;color:var(--daidai);margin-bottom:15px}
.fgrid li{list-style:none;font-size:14px;line-height:2.5}
.fgrid li a:hover{color:var(--daidai)}
.fgrid .ext::after{content:'↗';font-family:var(--lat);font-size:12.5px;margin-left:5px;color:var(--daidai)}
.fbtm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;
  padding-top:21px;border-top:1px solid var(--sand);font-size:13px;color:var(--sub);letter-spacing:.08em}

@media(max-width:960px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(max-width:720px){
  .gnav{display:none}
  .hd{padding-inline:18px;gap:10px}
  .logo{font-size:20px;letter-spacing:.24em;padding-left:.24em}
  .shopbtn{font-size:12px;letter-spacing:.1em;padding:8px 12px}
}

/* ═══════════════════════════════════════════════
   WP実装で追加（260825）
   管理画面のエディタが吐く本文（.entry-body）と、
   モックには無かったページャ・アーカイブの体裁。
   ═══════════════════════════════════════════════ */
.entry-body{font-size:15px;line-height:2.2;color:var(--sumi)}
.entry-body > * + *{margin-top:1.5em}
.entry-body h2{font-family:var(--min);font-weight:500;font-size:21px;letter-spacing:.08em;line-height:1.8;
  margin-top:2.2em;padding-left:14px;border-left:2px solid var(--daidai-deco)}
.entry-body h3{font-family:var(--min);font-weight:500;font-size:17px;letter-spacing:.06em;margin-top:2em}
.entry-body p{font-size:15px;line-height:2.2}
.entry-body a{color:var(--daidai);border-bottom:1px solid var(--sand)}
.entry-body a:hover{border-bottom-color:var(--daidai)}
.entry-body ul,.entry-body ol{padding-left:1.4em}
.entry-body li{font-size:15px;line-height:2.1;margin-top:.5em}
.entry-body img,.entry-body figure img{width:100%;height:auto}
.entry-body figcaption{font-size:12.5px;color:var(--sub);margin-top:9px}
.entry-body blockquote{border-left:2px solid var(--sand);padding-left:20px;color:var(--sub)}
.entry-body table{width:100%;border-collapse:collapse;font-size:14px}
.entry-body th,.entry-body td{border:1px solid var(--sand);padding:11px 13px;text-align:left}
.entry-body th{background:var(--paper-2);font-weight:500}

/* ページャ（WordPressのpaginate_linksが吐くa/spanに合わせる） */
.pager{display:flex;gap:9px;justify-content:center;align-items:center;margin-top:44px;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sand);font-size:13.5px;font-family:var(--lat);letter-spacing:.08em;
  padding-inline:12px;transition:.4s var(--ease)}
.pager a:hover{border-color:var(--daidai);color:var(--daidai)}
.pager .current{background:var(--sumi);color:var(--paper);border-color:var(--sumi)}

/* WPFormsをサイトの見た目に寄せる（プラグイン既定の青いボタン等を消す） */
.wpforms-container{max-width:none}
.wpforms-container .wpforms-field{padding:0 0 20px}
.wpforms-container .wpforms-field-label{font-size:13.5px;font-weight:400 !important;letter-spacing:.06em;color:var(--sumi);margin-bottom:9px}
.wpforms-container .wpforms-required-label{color:var(--daidai) !important}
.wpforms-container input[type=text],.wpforms-container input[type=email],
.wpforms-container input[type=tel],.wpforms-container select,.wpforms-container textarea{
  width:100% !important;max-width:none !important;background:var(--white);border:1px solid var(--sand) !important;
  border-radius:0 !important;padding:13px 15px !important;font-family:var(--go);font-size:15px;color:var(--sumi);
  box-shadow:none !important;line-height:1.7 !important}
/* 🔴 selectはWPForms既定の高さ指定だと日本語の長い選択肢が上下に切れる（検証で確認）。
      高さを内容に任せる */
.wpforms-container select{height:auto !important;min-height:0 !important;padding-right:36px !important}

/* モックの「お名前／会社名」「メール／電話」の2列組みを再現する。
   WPForms Lite にはカラム機能が無い（Pro のレイアウト項目）ため、
   項目の並び順を前提にCSSで2列にしている。
   🔴 管理画面で項目の順番を変えたらここも直す。 */
@media(min-width:721px){
  .wpforms-container .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
  .wpforms-container .wpforms-field-container > .wpforms-field:nth-child(n+5){grid-column:1 / -1}
}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{
  outline:none;border-color:var(--daidai) !important}
.wpforms-container textarea{min-height:190px}
.wpforms-container .wpforms-submit{
  background:var(--daidai-deco) !important;border:1px solid var(--daidai-deco) !important;border-radius:0 !important;
  color:var(--sumi) !important;font-family:var(--go);font-size:14px;letter-spacing:.15em;padding:15px 44px !important;
  transition:.45s var(--ease);cursor:pointer}
.wpforms-container .wpforms-submit:hover{background:var(--sumi) !important;border-color:var(--sumi) !important;color:var(--paper) !important}
.wpforms-container .wpforms-submit-container{text-align:center;margin-top:10px}


/* お知らせ詳細のアイキャッチ（260826追加）
   どんな比率の写真が来ても記事の頭が破綻しないよう、3:2で切り抜いて出す。 */
.entry-thumb{margin-bottom:clamp(24px,3vw,36px)}
.entry-thumb img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}