/* --------------------------------------------------
   社長の全国行脚バナー（トップとブログの全ページで共通。中身は /parts/angya-banner.html）
   ★控えめに（2026-10-10 ユーザー指定）：横1段の細い帯。イラスト2枚は小さく傾けて重ね、
     文字とボタンは画像の外にふつうの文字で置く（ポスターの中の文字は小さくて読めないため）。
   -------------------------------------------------- */
.angya{--ag-ink:var(--ink,#3a2a21);--ag-sub:var(--ink-2,#6e5b4e);--ag-gold:var(--gold,#a98b5d);
  --ag-line:var(--line,#ddd0bb);
  max-width:var(--wrap,1120px);margin:0 auto;padding:40px 32px;color:var(--ag-ink);text-align:left}
.angya-in{display:flex;align-items:center;gap:28px;padding:18px 28px 18px 22px;
  border:1px solid var(--ag-line);border-radius:16px;background:#fffdf8}

/* イラスト2枚：奥に「大募集」、手前に「全国行脚」 */
.angya-pics{position:relative;display:block;flex:0 0 132px;height:118px}
.angya-pics img{position:absolute;top:0;height:108px;width:auto;aspect-ratio:2/3;object-fit:cover;
  border:3px solid #fff;border-radius:4px;box-shadow:0 6px 14px rgba(58,42,33,.16);
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.angya-pics .angya-p2{right:0;top:8px;transform:rotate(6deg)}
.angya-pics .angya-p1{left:0;transform:rotate(-5deg)}
.angya-pics:hover .angya-p1{transform:rotate(-5deg) translateY(-3px)}
.angya-pics:hover .angya-p2{transform:rotate(6deg) translateY(-3px)}

.angya-copy{flex:1 1 auto;min-width:0}
.angya-br{display:none}   /* スマホだけ「社長が〜」の前で改行 */
.angya-eyebrow{margin:0 0 4px;font-size:13px;letter-spacing:.16em;color:var(--ag-gold)}
.angya-h{margin:0;font-family:var(--mincho,"Hiragino Mincho ProN",serif);font-weight:600;
  font-size:clamp(18px,1.9vw,22px);line-height:1.5;letter-spacing:.05em}
.angya-lead{margin:4px 0 0;font-size:15px;line-height:1.7;color:var(--ag-sub)}
/* 見出し「あなたの町へ、岩本が会いに行きます」を点滅（2026-10-10 ユーザー指定）。トップの「33年」と同じ点滅（1.8秒・薄いときは40%） */
.angya-blink{animation:angyaBlink 1.8s ease-in-out infinite}
@keyframes angyaBlink{0%,100%{opacity:1}50%{opacity:.4}}
.angya-nw{display:inline-block}   /* 「来てー！」〜は途中で折り返さない */
.angya-btns{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
/* LINEの友だち追加：LINEの緑。型1（リフト系） */
.angya-line{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;
  background:#06C755;color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),background .5s cubic-bezier(.22,.61,.36,1)}
.angya-line:hover{transform:translateY(-2px);background:#05a849}
.angya-line svg{width:22px;height:22px;flex:0 0 auto;color:#fff}
.angya-diary{font-size:14px;color:var(--ag-sub);border-bottom:1px solid var(--ag-line);line-height:1.6;text-decoration:none;white-space:nowrap}
.angya-diary:hover{color:var(--ag-gold);border-bottom-color:var(--ag-gold)}

/* ブログ：黒いフッターの中の頭に置く（波の継ぎ目を割らないため） */
.ftr .angya{padding:0 32px 48px}
/* トップ：バナーの帯の地色をヒーロー（と次の「お客様の声」）と同じ色に（2026-10-10 ユーザー指定） */
.hero-gap + .angya-top{background:var(--paper-2,#ebe2d4)}
/* ブログトップ：ヒーローの下は余白が元からあるので、バナーの上の余白はなし・下も詰める（2026-10-10「隙間が多い」） */
.blog-hero + .angya-top .angya{padding-top:0;padding-bottom:28px}
/* ヒーローのすぐ下に置いたページ（トップ・ブログトップ）では、フッターの中の同じバナーは出さない */
body:has(.angya-top) .ftr .angya{display:none}
/* 全国行脚のカテゴリページ：見出しの下（main.wrap の中）に置くので横の余白は親に任せる */
.angya-top--in .angya{padding:8px 0 28px}
.angya-top--in .angya-diary{display:none}   /* このページ自体が全国行脚の一覧なので出さない */

/* タブレット以下：ボタンは下の段に横並び */
@media (max-width:900px){
  .angya-in{flex-wrap:wrap;row-gap:14px}
  .angya-copy{flex:1 1 0}
  .angya-btns{flex:1 1 100%;flex-direction:row;justify-content:center;gap:12px 20px;flex-wrap:wrap}
}
/* スマホ：イラストは左に小さく、文字は右。ボタンは下に1行 */
@media (max-width:640px){
  .angya{padding:32px 16px}
  .ftr .angya{padding:0 16px 36px}
  .blog-hero + .angya-top .angya{padding-top:0;padding-bottom:24px}
  .angya-in{flex-wrap:wrap;gap:12px 16px;padding:16px}
  .angya-pics{flex:0 0 92px;height:86px}
  .angya-pics img{height:78px;border-width:2px}
  .angya-h{font-size:17px}
  .angya-br{display:inline}
  .angya-lead{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .angya-pics img,.angya-line{transition:none}
  .angya-blink{animation:none}
}