@charset "utf-8";
/* 紅白薬業協同組合（紅白会）案4 — 基本スタイルはHTML側のインラインstyle。
   本ファイルはインラインで書けないもの（擬似クラス・キーフレーム・レスポンシブ）のみ。 */

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#FAF8F4;font-family:"Noto Sans JP",sans-serif;color:#1F1B1A;word-break:keep-all;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:#9B2335;text-decoration:none}
a:hover{color:#6E1725}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none !important}

@keyframes mizuhiki{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}

/* スクロール表示 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ホバー・フォーカス */
.nav-link:hover{color:#9B2335}
.btn-outline:hover{background:#9B2335;color:#fff}
.btn-primary:hover{background:#6E1725;color:#fff}
.faq-q:hover{color:#9B2335}
input:focus,textarea:focus,select:focus{border-bottom:1.5px solid #9B2335;outline:none}
.member-card a:hover{color:#6E1725}

/* FAQ */
.faq-a[hidden]{display:none}

/* ハンバーガー */
.burger{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:8px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:1px;background:#1F1B1A}

@media (max-width:1080px){
  .hero-title h1{font-size:26px !important}
}

@media (max-width:980px){
  .hdr{padding:0 20px !important}
  .nav{display:none !important}
  .nav.is-open{display:flex !important;position:fixed;top:80px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0 !important;background:#FAF8F4;border-bottom:1px solid #E3DED6;padding:8px 20px 24px;font-size:14px !important}
  .nav.is-open a{padding:16px 0}
  .nav.is-open .btn-outline{text-align:center;margin-top:12px}
  .burger{display:flex}
  .sec{padding-left:20px !important;padding-right:20px !important}
  .grid3,.grid2,.msg-grid,.about-grid,.footer-grid{grid-template-columns:1fr !important;gap:40px !important}
  .msg-portrait{width:100% !important;height:auto !important;aspect-ratio:4/5}
  .flow-grid{grid-template-columns:1fr !important;border-left:none !important}
  .flow-grid>div{border-right:none !important;border-bottom:1px solid #E3DED6;padding:24px 0 !important}
  .flow-grid>div:last-child{border-bottom:none}
  .band{height:360px !important}
  .band-inner{width:100%;padding:0 20px}
  .about-map{height:260px !important}
}

@media (max-width:640px){
  .sec{padding-top:88px !important;padding-bottom:88px !important}
  .hero{min-height:600px}
  .hero-title{right:28px !important;max-height:calc(100% - 200px) !important;gap:20px !important}
  .hero-title h1{font-size:22px !important;letter-spacing:.16em !important}
  .hero-title span{font-size:12px !important}
  .hero-meta{left:20px !important;bottom:48px !important}
  .h2{font-size:22px !important;line-height:1.9 !important}
  .lead{font-size:14px !important}
  .band p.band-h{font-size:20px !important}
  .form-grid{grid-template-columns:1fr !important;gap:24px !important}
  .wa{width:180px !important;height:180px !important}
  .wa-char{font-size:76px !important}
  input,textarea,select{font-size:16px !important}
  .fab{right:16px !important;bottom:16px !important;padding:14px 20px !important;font-size:12px !important}
  .footer{padding:80px 20px 0 !important}
}