@charset "UTF-8";

/* ==========================================================================
   0. CSS Variables (:root) ／ 案件固有変数（案件ごとに“値だけ”差し替える）
   ========================================================================== */
:root {
  /* Color */
  --color-primary: #B72123;  --color-text: #222222;   --color-link: #222222;
  --color-bg: #FFFFFF;       --color-border: #D9D9D9; --color-accent: #B72123;
  /* Decoration（装飾ノブ） */
  --radius-xs: 0.25rem;      /* 4px : チェックボックス・必須ラベル */
  --radius-sm: 0.3125rem;    /* 5px : フォーム部品 */
  --radius: 0.5rem;          /* 8px : カード・画像などの標準角丸 */
  --radius-md: 0.625rem;     /* 10px : フォーム枠（SP） */
  --radius-lg: 1.25rem;      /* 20px : フォーム枠（PC） */
  --radius-pill: 62.4375rem; /* 完全な丸み（ボタン） */
  /* Font（4-2の役割に対応） */
  --font-base:  "Noto Sans JP", sans-serif;   /* 和文ゴシック（本文） */
  --font-serif: "Noto Serif JP", serif;       /* 和文明朝 */
  --font-en:    "EB Garamond", serif;         /* 欧文見出し */
  --font-en2:   "Raleway", sans-serif;        /* 数字・欧文サブ */
}

/* 案件追加カラー（上記テンプレート以外に本案件で使用する色） */
:root { --color-black: #000000; --color-white: #FFFFFF; --color-bg-gray: #EEEEEE; --color-gray: #D9D9D9; --color-gray-txt: #999999; --color-line: #CCCCCC; }

/* ==========================================================================
   1. Font / Text Utility（案件固有分。役割ベースの共通クラスは common.css）
   ========================================================================== */
.txt75 { font-size: 4.6875rem; }
.txtBK { color: var(--color-black); }
.lh20 { line-height: 2; }
.lh24 { line-height: 2.4; }
@media screen and (max-width: 896px) { .txt75 { font-size: var(--font-size-40); } }

/* ==========================================================================
   2. Section Title（見出し共通パーツ／Figma: title コンポーネント）
   ========================================================================== */
.secTtl { width: fit-content; max-width: 100%; margin: 0 auto 30px; gap: 0.625rem; letter-spacing: 0.1em; }
.secTtlEn { width: 100%; color: var(--color-accent); text-transform: uppercase; }
.secTtlEn::before, .secTtlEn::after { content: ""; flex: 1; border-top: 1px solid var(--color-accent); }
.secTtlEn::before { margin-right: 0.625rem; }
.secTtlEn::after { margin-left: 0.625rem; }
/* 左寄せ見出し（下層セクション見出し／罫線は短い固定長） */
.secTtlSide { width: 15.36%; max-width: 11.25rem; flex-shrink: 0; gap: 0.625rem; letter-spacing: 0.1em; }
.secTtlEnShort { width: auto; }
.secTtlEnShort::before, .secTtlEnShort::after { flex: 0 0 0.9375rem; }

/* ==========================================================================
   2-2. Button（共通パーツ）
   ========================================================================== */
.btnMore { min-width: 12.5rem; gap: 0.625rem; padding: 0.8125rem 1.875rem; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-pill); }
.btnMore:hover { opacity: 0.7; }
.arw { position: relative; width: 0.9375rem; border-top: 1px solid currentColor; }
.arw::after { content: ""; position: absolute; right: 0; top: -0.1875rem; width: 0.375rem; height: 0.375rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ==========================================================================
   3. Header Layout
   ========================================================================== */
#header {position: absolute; top: 1.875rem; left: 0; z-index: 10; width: 100%; padding: 0 clamp(1.25rem, 3.31vw, 3.125rem);}
.logo {width: clamp(9.375rem, 17.63%, 15.5625rem);}
.headContact {width: clamp(11rem, 17.71%, 15.625rem); flex-shrink: 0;}
.btnContact {width: 100%; max-width: 15.625rem; gap: 0.9375rem; padding: 0.9375rem 0.625rem; color: var(--color-accent); background: var(--color-white); border: 1px solid var(--color-accent); border-radius: var(--radius-pill);}
.btnContact .icon {width: 1.5rem;}
.btnContact:hover {opacity: 0.7;}

/* ==========================================================================
   4. Global Navigation
   ========================================================================== */
.menu:hover > a {opacity: 0.7;}
.child_menu > li > a:hover {opacity: 0.7;}
.child_menu {width: 100%; left: 0; color: var(--color-text); background: var(--color-white);}
.menu:hover .child_menu {visibility: visible;}
.child_menu a:hover {color: var(--color-primary); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);}
#hanburger {display: none;}
.menu_button {width: 3.4375rem; height: 3.4375rem; position: fixed; top: 0; right: 0; background: var(--color-primary); z-index: 15;}
#hanburger:checked ~ .menu_button {top: 0;}
#hanburger:checked ~ .span2 {display: none;}
#hanburger:checked ~ .span1 {width: 2.125rem; transform: rotate(45deg); top: 1.6875rem; right: 0.6875rem;}
#hanburger:checked ~ .span3 {width: 2.125rem; transform: rotate(-45deg); top: 1.6875rem; right: 0.6875rem;}
.global_menu {visibility: hidden; width: 100%; height: 100%; position: fixed; top: 0; left: 0; color: var(--color-text); overflow-y: scroll; text-align: center;}
#hanburger:checked ~ .global_menu {visibility: visible;}
.global_menu a {display: block; width: 100%; padding: 0.625rem 0.9375rem; border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);}
.global_menu a:hover {opacity: 0.7;}
.menu {white-space: nowrap; display: inline-block;}
.menu .pd {display: none;}
.menu:last-child {margin-right: 0;}
.child_menu > li > a {padding: 0.625rem 1.25rem; text-align: left;}
#hanburger,.spOnly {display: none;}
@media screen and (min-width: 896px) {
  .menu_button {display: none;}
  .global_menu {position: inherit; padding: 0; color: var(--color-text); visibility: visible; overflow-y: visible; height: auto; width: auto;}
  .global_menu a {padding: 0;}
  .menu_wrap {gap: 3.75rem;}
  .child_menu {width: 100%; position: absolute; top: 0; left: 0; padding: 0.625rem; color: var(--color-text); background: var(--color-white); visibility: hidden; opacity: 0; transition: .5s top, .5s opacity; z-index: 10;}
  .menu:hover .child_menu {visibility: visible; top: 6.8125rem; opacity: 1;}
  .child_menu > li {display: inline-block;}
  .child_menu > li > ul > li a {padding: 0.625rem; position: relative;}
}
@media screen and (max-width: 896px) {
  #header {top: 0.9375rem; padding: 0 1.25rem;}
  .logo {width: 9.375rem;}
  .headContact {display: none;}
  span.span1,span.span2,span.span3 {width: 1.8125rem; height: 1px; background-color: var(--color-white); position: absolute; right: 0.8125rem; transition: .3s; z-index: 100; position: fixed;}
  .span1 {top: 1.0625rem;}
  .span2 {top: 1.6875rem;}
  .span3 {top: 2.3125rem;}
  .menu {display: block;}
  .menu > a {padding: 0.9375rem 1.25rem; text-align: left; border-bottom: 1px solid var(--color-accent);}
  .menu > a span {margin-right: 0.625rem; width: 1.875rem!important;}
  .menu > a span img {width: 100%;}
  .global_menu {z-index: 10;}
  .global_menu a {border-top-left-radius: 0; border-top-right-radius: 0;}
  .child_menu > li > a,.child_menu > li > ul > li a {padding: 0.625rem 0.9375rem; color: var(--color-primary); text-align: left; border-bottom: 1px dotted var(--color-primary);}
  .child_menu > li > ul > li a {padding: 0.9375rem 1.25rem 0.9375rem 2.1875rem; position: relative;}
  .child_menu > li > ul > li:last-child a {border-bottom: 1px solid var(--color-primary);}
  .child_menu > li > ul > li a::before {border-top: solid 1px var(--color-primary); content: ''; left: 1.25rem; position: absolute; top: 50%; width: 0.625rem;}
  .menu .pd {display: inline-block; width: 100%; position: absolute; top: 0; left: 0; height: 100%;}
  .menu_wrap {display: none;}
  #hanburger:checked ~ * .menu_wrap {display: block; opacity: 1; min-height: 100vh; padding-top: 3.4375rem; background: var(--color-white); /*position: fixed;*/ top: 0; z-index: 5;}
  #hanburger:checked ~ * .menu {max-height: inherit; overflow-y: visible; padding: 0; margin-left: 0; position: relative;}
  #hanburger:checked ~ * .child_menu {max-height: 0; overflow-y: hidden; visibility: hidden; text-align: left;}
  .menu .child_menu {border-top: 1px solid var(--color-primary); position: relative; opacity: 1; top: 0; margin-left: auto; left: auto; width: auto;}
  .child_menu li {display: block;}
  .menu > label:hover {cursor: pointer; cursor: hand;}
  .menu input[type="checkbox"]:checked ~ .child_menu {max-height: inherit!important; overflow-y: visible; visibility: visible!important;}
  /*
  .angletoggle:before {content: "\f107";}
  #nav input[type="checkbox"]:checked ~ * .angletoggle:before {content: "\f106";}
  */
}

/* ==========================================================================
   5. Top / #top01 (メインビジュアル)
   ========================================================================== */
#top01 { position: relative; height: 100vh; }
#top01 > img { width: 100%; height: 100%; object-fit: cover; }
.top01Copy { position: absolute; left: 6.61%; top: 35.13%; gap: 1.25rem; color: var(--color-white); text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.top01Catch { letter-spacing: 0.1em; }
@media screen and (max-width: 896px) {
  .top01Copy { left: 1.25rem; right: 1.25rem; top: auto; bottom: 5.875rem; gap: 0.625rem; }
  .top01Copy p { font-size: clamp(1.125rem, 6vw, 1.5rem); }
}

/* ==========================================================================
   6. Top / #top02 (VISION)
   ========================================================================== */
.top02Copy { width: 100%; max-width: 36.25rem; margin: 0 auto; padding: 4.875rem 0 7.5625rem; }
.top02Img01, .top02Img02, .top02Img03 { position: absolute; border-radius: var(--radius); }
.top02Img01 { top: 0; left: 9.59%; width: 20.76%; }
.top02Img02 { top: 29.19%; left: 0; width: 25.33%; border-radius: 0 var(--radius) var(--radius) 0; }
.top02Img03 { top: 60.70%; right: 1.98%; width: 25.79%; }
/* コピー（36.25rem）の左右に1.25rem以上の余白を確保し、画像がテキストに重ならないようにする */
@media screen and (max-width: 1300px) {
  .top02Img01 { left: 2%; width: min(21.76%, calc((100% - 38.75rem) / 2 - 2%)); }
  .top02Img02 { width: min(25.33%, calc((100% - 38.75rem) / 2)); }
  .top02Img03 { width: min(25.79%, calc((100% - 38.75rem) / 2 - 1.98%)); }
}
/* SPはコピーの下にPCと同じ組み方（左上→左下ブリード→右）のコラージュで配置する */
@media screen and (max-width: 896px) {
  .top02Inner { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .top02Copy { max-width: none; padding: 0 1.25rem; }
  .top02Img01, .top02Img02, .top02Img03 { position: static; }
  .top02Img01 { width: 56%; margin: 8% 0 0 4%; }
  .top02Img02 { width: 52%; margin: -7% 0 0; }
  .top02Img03 { width: 44%; margin: 20% 0 0 auto; border-radius: var(--radius) 0 0 var(--radius); }
}

/* ==========================================================================
   6-2. Top / #top03 (NEWS)
   ========================================================================== */
#top03 { padding-inline: 1.25rem; background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url("../img/top/top03-01.webp") no-repeat center center / cover; }
.newsBox { width: 100%; max-width: 73.0625rem; margin: 0 auto; gap: clamp(1.875rem, 3.97vw, 3.75rem); padding: 2.5rem; background: var(--color-white); border-radius: var(--radius); }
.newsHead { width: 18.37%; min-width: 12.5rem; max-width: 12.5rem; flex-shrink: 0; }
.newsTtl { letter-spacing: 0.1em; }
.newsList { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.25rem; row-gap: 1.6875rem; }
.newsThumb { aspect-ratio: 263 / 174; }
.newsTxt { gap: 0.625rem; }
@media screen and (max-width: 896px) {
  .newsBox { gap: 1.875rem; padding: 1.875rem 1.25rem; }
  .newsHead { width: 100%; max-width: none; gap: 1.25rem; }
  .newsList { grid-template-columns: 1fr; row-gap: 1.875rem; }
  /* SPは左サムネイル・右テキストの横並び */
  .newsList li a { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.9375rem; }
  .newsThumb { width: 38%; flex-shrink: 0; margin-bottom: 0; }
  .newsTxt { flex: 1; min-width: 0; }
}

/* ==========================================================================
   6-3. Top / #top04 (ABOUT US)
   ========================================================================== */
.top04Row { gap: 0.625rem; }
.top04Img { flex: 1 1 0; min-width: 0; overflow: hidden; }
.top04Img01 { border-radius: 0 var(--radius) var(--radius) 0; }
.top04Img02 { border-radius: var(--radius); }
.top04Img03 { border-radius: var(--radius) 0 0 var(--radius); }
.top04Txt { width: clamp(20rem, 33.07%, 31.25rem); flex-shrink: 0; gap: 1.25rem; padding: 2.5rem clamp(1.25rem, 3.97vw, 3.75rem); }
.top04Ttl { letter-spacing: 0.1em; }
@media screen and (max-width: 896px) {
  /* SPはテキストの下に画像3点を横並び（左右の画像は画面端までブリード） */
  .top04Row { flex-wrap: wrap; gap: 1.25rem 0.625rem; }
  .top04Txt { order: -1; width: 100%; gap: 0.9375rem; padding: 0 1.25rem; }
  .top04Img img { height: auto; }
}

/* ==========================================================================
   6-4. Top / #top05 (COMMITMENT)
   ========================================================================== */
.top05Blocks { gap: 0.625rem; }
.top05Block { padding: 0 clamp(1.25rem, 7.28vw, 6.875rem); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.top05Block01 { padding-top: 6.25rem; background-image: url("../img/top/top05-01.webp"); }
.top05Block02 { padding-top: 10.5rem; background-image: url("../img/top/top05-02.webp"); }
.top05Block03 { padding-top: 8.5rem; background-image: url("../img/top/top05-03.webp"); background-position: 65% center; }
.top05Card { width: clamp(18rem, 43.81%, 35.375rem); max-width: 100%; gap: 1.875rem; padding: 2.5rem clamp(1.25rem, 3.97vw, 3.75rem); background: var(--color-white); }
.top05Ttl { letter-spacing: 0.1em; }
@media screen and (max-width: 896px) {
  .top05Blocks { gap: 1.25rem; }
  .top05Block { padding: 0; }
  /* SPは写真帯を疑似要素で持たせ、縦長ブロック全体をcoverして被写体が切れるのを防ぐ */
  .top05Block::before { content: ""; width: 100%; aspect-ratio: 16 / 9; background: inherit; background-size: cover; }
  .top05Block03::before { background-position: 85% center; }
  .top05Block01, .top05Block02, .top05Block03 { padding-top: 0; }
  .top05Card { width: 100%; gap: 0.9375rem; padding: 1.875rem 1.25rem; }
}

/* ==========================================================================
   6-5. Top / #top06 (栽培品種へのこだわり)
   ========================================================================== */
.top06Inner { width: 100%; max-width: 86.6875rem; margin: 0 auto; gap: clamp(1.875rem, 3.97vw, 3.75rem); padding: 0 1.25rem; }
.top06Img { flex: 711 1 0; min-width: 0; }
.top06Img img { border-radius: var(--radius); }
.top06Body { flex: 616 1 0; min-width: 0; }
.top06SecTtl { margin-left: 0; }
.top06Name { letter-spacing: 0.1em; }
.top06Badge { position: absolute; right: 0; top: 0; width: 28.5%; max-width: 10.5625rem; }
/* 1220px以下は見出しがバッジに届くため、バッジ幅+余白を見出し側に確保して常に横並びを維持する（見出しは必要に応じて2行） */
@media screen and (max-width: 1220px) {
  .top06SecTtl { padding-right: calc(min(28.5%, 10.5625rem) + 1rem); }
}
@media screen and (max-width: 896px) {
  .top06Inner { flex-wrap: wrap; gap: 1.875rem; }
  .top06Img, .top06Body { flex: 0 0 100%; }
  .top06Badge { max-width: 5rem; }
  .top06SecTtl { padding-right: calc(min(28.5%, 5rem) + 1rem); }
}

/* ==========================================================================
   6-6. Top / #top07 (RECRUIT)
   ========================================================================== */
.top07Inner { width: 100%; max-width: 73.25rem; margin: 0 auto; gap: clamp(1.875rem, 3.97vw, 3.75rem); padding: 0 1.25rem; }
.top07Body { flex: 606 1 0; min-width: 0; }
.top07SecTtl { margin-left: 0; }
.top07Bg { width: 100%; font-size: clamp(2.5rem, 5.29vw, 5rem); line-height: 1; letter-spacing: 0.1em; color: var(--color-accent); opacity: 0.2; }
.top07Img { flex: 506 1 0; min-width: 0; }
@media screen and (max-width: 896px) {
  .top07Inner { flex-wrap: wrap; gap: 1.875rem; }
  .top07Body, .top07Img { flex: 0 0 100%; }
  .top07Img img { height: auto; }
}

/* ==========================================================================
   6-7. Top / #top08 (直売所)
   ========================================================================== */
.top08Inner { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem; }
.top08Lead { gap: clamp(1.25rem, 2.65vw, 2.5rem); }
.top08LeadTtl { letter-spacing: 0.1em; }
.top08Line { align-self: stretch; border-left: 1px solid var(--color-border); }
.top08LeadTxt { gap: 0.625rem; }
.top08Btm { gap: clamp(1.25rem, 2.65vw, 2.5rem); }
.top08Img { flex: 606 1 0; min-width: 0; }
.top08Map { flex: 526 1 0; min-width: 0; background: var(--color-gray); }
.top08MapFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.top08MapLabel { position: absolute; right: 0.625rem; top: 0.625rem; z-index: 1; padding: 0.5rem 1.25rem; background: var(--color-white); border-radius: var(--radius); }
@media screen and (max-width: 896px) {
  .top08Lead { flex-wrap: wrap; gap: 1.25rem; }
  .top08Line { display: none; }
  .top08LeadTtl, .top08LeadTxt { flex: 0 0 100%; }
  .top08Btm { flex-wrap: wrap; gap: 1.25rem; }
  .top08Img, .top08Map { flex: 0 0 100%; }
  .top08Map { min-height: 15rem; }
}

/* ==========================================================================
   6-8. 下層共通 / #kv（下層メインビジュアル）・パンくず
   ========================================================================== */
#kv { padding-top: 5.4375rem; }
/* 左右の余白はパンくず（max-width: 73.25rem + padding: 1.25rem）の内側と揃える */
/* 既定は共通KV画像。専用画像を持つページのみ .kv[ページ名] で上書きする（WP: page.php がスラッグからクラスを付与） */
.kvInner { padding: 9.1875rem max(1.25rem, calc((100% - 70.75rem) / 2)) 7.375rem; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: linear-gradient(180deg, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%), url("../img/cmn/kv-01.webp"); }
.kvTtl { gap: 1.875rem; color: var(--color-white); text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.8); }
.kvTtlEn { letter-spacing: 0.1em; }
.kvRecruit .kvInner { background-position: center 45%; background-image: linear-gradient(180deg, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%), url("../img/recruit/kv-01.webp"); }
/* WP: 固定ページのアイキャッチ（page.php の汎用形） */
.kvImg { width: 100%; max-width: 73.25rem; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.breadcrumb { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0.9375rem 1.25rem 0; }
.breadcrumbList { gap: 0.625rem; }
.breadcrumbList li { display: flex; align-items: center; gap: 0.625rem; }
.breadcrumbList li + li::before { content: ""; width: 1.25rem; border-top: 1px solid currentColor; }
@media screen and (max-width: 896px) {
  #kv { padding-top: 3.4375rem; }
  .kvInner { padding: 5rem 1.25rem 3.125rem; }
  .kvTtl { gap: 0.9375rem; }
}

/* ==========================================================================
   6-9. 下層共通 / 定義リスト（募集要項・会社概要）
   ========================================================================== */
.dataList { width: 100%; letter-spacing: 0.1em; color: var(--color-black); }
.dataList dt, .dataList dd { display: flex; align-items: center; padding: 1.25rem 1.875rem; line-height: 1.5; border-bottom: 1px solid var(--color-line); }
.dataList dt { width: 20%; }
.dataList dd { width: 80%; border-left: 1px solid var(--color-line); }
.dataList dd > * { width: 100%; }
.bdT { border-top: 1px solid var(--color-line); }
.listDisc, .dataList dd ul { list-style: disc; padding-left: 1.5rem; }
.listNum, .dataList dd ol { list-style: decimal; padding-left: 1.5rem; }
.listDisc li, .listNum li, .dataList dd li { line-height: 1.5; }
/* ACF（WYSIWYG）出力の受け皿。dd 直下の <p> は静的の素テキストと同じ体裁に揃える */
.dataList dd p { line-height: 1.5; }
.dataList dd p + p, .dataList dd p + ul, .dataList dd p + ol, .dataList dd ul + p, .dataList dd ol + p { margin-top: 0.625rem; }
@media screen and (max-width: 896px) {
  .dataList dt, .dataList dd { width: 100%; padding: 0.9375rem 1.25rem; }
  .dataList dt { background: var(--color-bg-gray); }
  .dataList dd { border-left: none; }
}

/* ==========================================================================
   6-10. Recruit / #recruit01（GREETING）・#recruit02（募集要項）
   ========================================================================== */
.recruit01Inner { width: 100%; max-width: 46.875rem; margin: 0 auto; padding: 0 1.25rem; }
/* ACF（WYSIWYG）出力の受け皿。親の line-height / 中央揃えを段落にも継承させる */
.greetingTxt p { line-height: inherit; }
.greetingTxt p + p { margin-top: 1.875rem; }
.recruitInner { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem; }
.recruitBox { width: 100%; gap: 1.875rem; padding: 1.875rem 2.5rem; border: 1px solid var(--color-accent); border-radius: var(--radius); }
.recruitBoxInner { width: 100%; gap: 1.875rem; }
.recruitHead { width: 100%; gap: 1.875rem; }
.recruitTag { flex-shrink: 0; padding: 0.5rem 1.25rem; letter-spacing: 0.1em; color: var(--color-white); background: var(--color-accent); border-radius: var(--radius); }
.recruitTtl { flex: 1; min-width: 0; letter-spacing: 0.1em; }
@media screen and (max-width: 896px) {
  .recruitBox { gap: 1.25rem; padding: 1.25rem; }
  .recruitHead { flex-wrap: wrap; gap: 0.625rem; }
  .recruitTtl { flex: 0 0 100%; }
}

/* ==========================================================================
   6-11. Company / #company01（沿革）・#company02（会社概要）・#company03（代表挨拶）
   ========================================================================== */
.companyInner { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem; }
.companyRow { gap: clamp(1.25rem, 3.41vw, 2.5rem); }
.companyBody { flex: 1; min-width: 0; }
.historyList { width: 100%; color: var(--color-text); }
.historyList dt, .historyList dd { display: flex; align-items: center; padding: 0.9375rem 0; line-height: 1.5; border-top: 1px solid var(--color-line); }
.historyList dt { width: 18.38%; letter-spacing: 0.05em; border-right: 1px solid var(--color-black); }
.historyList dd { width: 81.62%; gap: 1.875rem; }
.historyList dd::before { content: ""; flex-shrink: 0; width: 1rem; height: 1rem; margin-left: -0.5rem; background: var(--color-accent); border-radius: 50%; }
.historyList dt:first-of-type, .historyList dd:first-of-type { border-top: none; }
/* ACF（WYSIWYG）出力の受け皿。段落間は静的の .mb30 と同じ余白にする */
.messageBody p + p { margin-top: 1.875rem; }
.messageRow { gap: clamp(1.25rem, 2.98vw, 2.1875rem); }
.messageTxt { flex: 768 1 0; min-width: 0; gap: 1.25rem; }
.messageTtl { letter-spacing: 0.1em; }
.messageImg { flex: 369 1 0; min-width: 0; aspect-ratio: 369 / 555; border-radius: var(--radius); overflow: hidden; }
/* 年号と元号が横並びだと窮屈になる幅から2行にする */
@media screen and (max-width: 1070px) {
  .historyList dt { flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media screen and (max-width: 896px) {
  .companyRow { flex-wrap: wrap; gap: 1.875rem; }
  .secTtlSide { width: 100%; max-width: none; }
  .companyBody { flex: 0 0 100%; }
  .historyList dt, .historyList dd { width: 100%; padding-left: 1.5rem; border-left: 1px solid var(--color-black); }
  /* 1行に戻し、縦線はdt/ddの左ボーダーで継続、丸は年号の左（縦線上）に配置 */
  .historyList dt { flex-direction: row; align-items: center; justify-content: flex-start; padding-bottom: 0; border-right: none; }
  .historyList dd { position: relative; padding-top: 0.625rem; border-top: none; }
  .historyList dd::before { position: absolute; left: 0; top: -1.3125rem; margin-left: 0; transform: translateX(-50%); }
  .messageRow { flex-wrap: wrap; }
  .messageTxt, .messageImg { flex: 0 0 100%; }
  .messageImg { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   6-12. News / #news01（お知らせ一覧・詳細）
   一覧カードは #top03 の .newsList / .newsThumb / .newsTxt をそのまま共用する
   ========================================================================== */
.newsInner, .pageInner { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem; }
.newsDetailInner { width: 100%; max-width: 56.25rem; margin: 0 auto; padding: 0 1.25rem; }
/* ページャ（WP: functions.php の pagination() と同一構造） */
.pageNav ul { gap: 0.625rem; }
.pageNav .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: 0.5rem 0.75rem; line-height: 1; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius); }
.pageNav .page-numbers.current { color: var(--color-white); background: var(--color-accent); }
.pageNav .page-numbers.dots { border-color: transparent; }
.pageNav a.page-numbers:hover { opacity: 0.7; }
/* 詳細 */
.newsDetailHead { width: 100%; gap: 0.9375rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.newsDetailTtl { letter-spacing: 0.1em; }
.newsEyecatch { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
/* 本文（エディタ出力＝WYSIWYG） */
.post > * { margin-bottom: 1.875rem; }
.post > *:last-child { margin-bottom: 0; }
.post h3 { font-family: var(--font-serif); font-size: var(--font-size-24); font-weight: var(--font-weight-500); letter-spacing: 0.1em; padding-left: 0.9375rem; border-left: 3px solid var(--color-accent); }
.post h4 { font-family: var(--font-serif); font-size: var(--font-size-20); font-weight: var(--font-weight-500); color: var(--color-accent); }
.post a { text-decoration: underline; }
.post a:hover { opacity: 0.7; }
.post ul { list-style: disc; padding-left: 1.5rem; }
.post ol { list-style: decimal; padding-left: 1.5rem; }
.post img { border-radius: var(--radius); }
.post table { width: 100%; }
.post th, .post td { padding: 0.9375rem 1.25rem; line-height: 1.5; text-align: left; vertical-align: top; border: 1px solid var(--color-line); }
.post th { width: 25%; font-weight: var(--font-weight-500); background: var(--color-bg-gray); }
.post blockquote { padding: 1.25rem 1.875rem; color: var(--color-gray-txt); background: var(--color-bg-gray); border-radius: var(--radius); }
/* 記事送り */
.postNav { width: 100%; gap: 1.25rem; }
.postNav .prev, .postNav .next { width: 25%; flex-shrink: 0; }
.postNav .next { text-align: right; }
.postNav .list { flex: 1; display: flex; justify-content: center; }
.postNav .prev a, .postNav .next a { position: relative; display: inline-block; }
.postNav .prev a { padding-left: 1.5625rem; }
.postNav .next a { padding-right: 1.5625rem; }
.postNav .prev a::before, .postNav .next a::after { content: ""; position: absolute; top: 50%; width: 0.9375rem; border-top: 1px solid currentColor; }
.postNav .prev a::before { left: 0; }
.postNav .next a::after { right: 0; }
@media screen and (max-width: 896px) {
  .postNav { flex-wrap: wrap; gap: 0.9375rem 0.625rem; }
  .postNav .prev, .postNav .next { width: calc(50% - 0.3125rem); }
  .postNav .list { order: 1; flex: 0 0 100%; }
  .post h3 { font-size: var(--font-size-20); }
  .post th, .post td { padding: 0.625rem 0.9375rem; }
  .post blockquote { padding: 1.25rem; }
}

/* ==========================================================================
   6-13. Contact / #contact（お問い合わせフォーム）
   ========================================================================== */
.contactInner { width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem; }
.contactTel { gap: 1.875rem; }
.contactTelNum { letter-spacing: 0.05em; }
.mailformBox { width: 100%; max-width: 56.25rem; margin: 0 auto; padding: 2.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
/* STEP ナビ（罫線は .stepDot の擬似要素を li で clip して連結） */
.step { width: 100%; }
.step li { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; flex: 1; gap: 0.625rem; color: var(--color-gray-txt); }
.step li.current { color: var(--color-accent); }
.stepDot { position: relative; width: 0.75rem; height: 0.75rem; background: var(--color-white); border: 1px solid var(--color-accent); border-radius: 50%; }
.step li.current .stepDot { background: var(--color-accent); }
.stepDot::before, .stepDot::after { content: ""; position: absolute; top: 50%; width: 50vw; border-top: 1px solid var(--color-accent); }
.stepDot::before { right: 100%; }
.stepDot::after { left: 100%; }
.step li:first-child .stepDot::before, .step li:last-child .stepDot::after { content: none; }
/* 送信完了（#mailform 内。WP: 本文＝エディタ出力を受けるため素タグにスタイルを当てる） */
.finishTxt h3 { font-family: var(--font-serif); font-size: var(--font-size-24); font-weight: var(--font-weight-400); line-height: 1.5; margin-bottom: 1.25rem; }
.finishTxt p { line-height: 2; }
.finishTxt p + p { margin-top: 1.25rem; }
@media screen and (max-width: 896px) { .finishTxt h3 { font-size: var(--font-size-20); } }
/* フォーム本体（ベースは common.css の #mailform を継承） */
#mailform .full { width: 100%; }
#mailform .half { width: 48.5%; }
.formRadio label { position: relative; display: inline-block; padding-left: 1.75rem; }
.formRadio label::before { content: ""; position: absolute; top: 0.125rem; left: 0; width: 1.25rem; height: 1.25rem; border: 1px solid var(--color-gray-txt); border-radius: 50%; }
.formRadio input[type="radio"]:checked + span { color: var(--color-accent); }
.formRadio input[type="radio"]:checked + span::after { content: ""; position: absolute; top: 0.4375rem; left: 0.3125rem; width: 0.625rem; height: 0.625rem; background: var(--color-accent); border-radius: 50%; }
@media screen and (max-width: 896px) {
  .contactTel { flex-wrap: wrap; gap: 0.625rem; }
  .contactTel dt, .contactTel dd { width: 100%; text-align: center; }
  .mailformBox { padding: 1.875rem 1.25rem; border-radius: var(--radius-md); }
  #mailform .half { width: 100%; }
}

/* ==========================================================================
   7. Footer
   ========================================================================== */
#footer {background: var(--color-bg-gray);}
.footInner {width: 100%; max-width: 73.25rem; margin: 0 auto; padding: 0 1.25rem;}
.footLogo {width: 26.5%; max-width: 18.75rem;}
.footSns {flex: 1; gap: 1.25rem;}
.footSns > p {flex-shrink: 0;}
.snsList {gap: 1.25rem; flex-wrap: nowrap;}
.snsList a {display: block; width: 2rem;}
.footSns .btnContact {flex-shrink: 0; margin-left: 1.25rem;}
.footNavi {gap: 3.75rem;}
.footCopy {flex-shrink: 0;}
#ftNavi {display: none;}
@media screen and (max-width: 896px) {
  .footTop, .footBtm, .footSns, .footNavi {justify-content: center;}
  .footBtm {align-items: center;}
  .footLogo {width: 100%; max-width: 15rem; margin: 0 auto 1.25rem;}
  .footSns {flex: 0 0 100%; flex-direction: column;}
  .footSns .btnContact {margin-left: 0;}
  .footNavi {gap: 0.625rem 1.875rem;}
  .ftInfo {width: 100%; text-align: center;}
  .footCopy {width: 100%; margin-top: 1.875rem; text-align: center;}
  #ftNavi {display: block; position: fixed; bottom: 0; z-index: 1000; width: 100%;}
  #ftNavi li {width: 25%; text-align: center;}
  #ftNavi li span {display: block; width: 1.5rem; margin: 0 auto 0.3125rem;}
  #ftNavi li a {display: block; width: 100%; padding: 0.625rem 0; border-top: 1px solid var(--color-border); color: var(--color-white); background: var(--color-primary);}
}