/* =========================================================
   レトリバーデザイン ／ 共通ベーススタイル
   （ヘッダー・フッター・モーダル・ボタンなど、全ページ共通パーツ）
   ※ このファイルはトップページ（retriever-minimal.html）の
     スタイルから、ヘッダー／フッター／モーダルに必要な部分だけを
     抜き出したものです。色を変えたいときは :root の変数を編集してください。
========================================================= */
:root{
  --green:#1c7a49;        /* キーカラー（グリーン） */
  --green-dark:#175f39;   /* ホバー時などの濃いグリーン */
  --green-tint:#eaf3ee;   /* グリーンの薄い背景 */
  --ink:#333333;          /* 見出しの黒 */
  --text:#333333;         /* 本文テキスト */
  --muted:#333333;        /* 補足テキスト */
  --line:#ededed;         /* 罫線 */
  --bg-soft:#fafafa;      /* うっすらグレー背景 */
  --maxw:1200px;          /* コンテンツ最大幅 */
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP",system-ui,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--green);color:#fff;}


/* 中央寄せの内側コンテナ（最大1200px） */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* =========================================================
   ヘッダー（上段：ロゴ／アイコン、下段：ナビ）
========================================================= */
.header{
  position:sticky;top:0;z-index:40;
  background:#fff;border-bottom:1px solid #eaeaea;
}
.header__top{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;}
.logo__mark{
  width:40px;height:40px;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;letter-spacing:.02em;
}
.logo__name{font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.04em;}

.header__icons{display:flex;align-items:center;gap:4px;}
.icon-btn{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  color:#444;background:none;border:none;cursor:pointer;text-decoration:none;
}
.icon-btn:hover{color:var(--green);}

.header__nav{display:flex;gap:60px;height:60px;align-items:center;border-top:1px solid #f2f2f2;}
.header__nav li{list-style:none;}
.header__nav a{
  font-size:14px;color:var(--text);text-decoration:none;font-weight:500;letter-spacing:.03em;
}
.header__nav a:hover{color:var(--green);}

/* ボタン類 */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:14px;font-weight:500;padding:15px 30px;letter-spacing:.04em;cursor:pointer;border:none;
}
.btn--primary{background:var(--green);color:#fff;}
.btn--primary:hover{background:var(--green-dark);}
.btn--ghost{border:1px solid #ccc;color:var(--text);background:#fff;}
.btn--ghost:hover{border-color:var(--green);color:var(--green);}
.btn--white{background:#fff;color:var(--green);font-weight:700;}
.btn--white:hover{background:#f0f0f0;}
.btn--sm{padding:10px 20px;font-size:13px;}
.btn svg{flex:0 0 auto;}

/* =========================================================
   セクション共通
========================================================= */
.section{padding:88px 0;}
.section--soft{background:var(--bg-soft);}
.section__eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--green);margin-bottom:8px;}
.section__title{font-size:26px;font-weight:700;margin:0;color:var(--ink);}
.section__head{margin-bottom:40px;}
.center{display:flex;justify-content:center;}
.mt40{margin-top:40px;} .mt48{margin-top:48px;}

/* スクロール時のフェードアップ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.reveal.is-in{opacity:1;transform:none;}

/* =========================================================
   CTA（トップページと共通のベーススタイル）
========================================================= */
.cta{background:var(--green);}
.cta .container{padding-top:76px;padding-bottom:76px;text-align:center;}
.cta__title{font-size:28px;font-weight:700;margin:0 0 16px;color:#fff;}
.cta__sub{font-size:15px;color:rgba(255,255,255,.85);margin:0 0 34px;}

/* =========================================================
   フッター
========================================================= */
.footer{background:#f7f7f7;border-top:1px solid var(--line);}
.footer .container{padding-top:64px;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer__lead{font-size:13px;color:#777;line-height:1.9;margin:0 0 20px;}
.footer__sns{display:flex;gap:10px;}
.footer__sns span{width:36px;height:36px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;}
.footer__col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:16px;}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer__col a{font-size:13px;color:#777;text-decoration:none;}
.footer__col a:hover{color:var(--green);}
.footer__bottom{margin-top:48px;padding:26px 0;border-top:1px solid #e6e6e6;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer__bottom div{font-size:12px;color:#999;}
.footer__copy{color:#aaa!important;}

/* =========================================================
   ページトップへ戻る
========================================================= */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:30;width:50px;height:50px;
  background:var(--green);color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.to-top.is-show{opacity:1;visibility:visible;}
.to-top:hover{background:var(--green-dark);}

/* =========================================================
   全画面モーダル（検索／メニュー）
========================================================= */
.modal{position:fixed;inset:0;z-index:60;background:#fff;overflow-y:auto;display:none;}
.modal.is-open{display:block;}
.modal__bar{position:sticky;top:0;background:#fff;border-bottom:1px solid #eaeaea;}
.modal__bar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.modal__close{width:44px;height:44px;background:none;border:none;cursor:pointer;color:#333;display:flex;align-items:center;justify-content:center;}

/* 検索モーダル */
.search__body{max-width:760px;margin:0 auto;padding:80px 24px;}
.search__eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--green);margin-bottom:20px;}
.search__field{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--green);padding-bottom:16px;}
.search__field input{flex:1;border:none;outline:none;font-size:24px;font-family:inherit;color:#222;background:transparent;}
.search__tags{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.search__tags .lbl{font-size:13px;color:#999;margin-right:6px;}
.tag{font-size:13px;color:var(--text);background:#f0f0f0;padding:6px 14px;cursor:pointer;}
.tag:hover{background:var(--green-tint);color:var(--green);}

/* メニューモーダル（5列グリッド） */
.menu__body{padding:56px 40px 80px;}
.menu__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;}
.menu__col-title{font-size:15px;font-weight:700;color:var(--green);padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid #e6e6e6;}
.menu__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.menu__col a{font-size:14px;color:#444;text-decoration:none;display:block;}
.menu__col a:hover{color:var(--green);}

/* =========================================================
   レスポンシブ（タブレット／スマホ）
========================================================= */
@media (max-width:900px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:32px;}
  .menu__grid{grid-template-columns:repeat(2,1fr);gap:28px;}
}
@media (max-width:560px){
  .header__nav{gap:18px;overflow-x:auto;}
  .footer__grid{grid-template-columns:1fr;}
  .menu__grid{grid-template-columns:1fr;}
  .cta__title{font-size:22px;}
}