/* 株式会社丸静商店（提案サンプル） style.css */
body{
  font-family:var(--ff-body);
  font-size:var(--fz-body);
  line-height:var(--lh-body);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;}
a{color:inherit;}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-3);}

/* ---------- SAMPLEバナー ---------- */
.sample-bar{
  background:var(--c-accent);color:#fff;text-align:center;
  font-size:12.5px;letter-spacing:.12em;padding:6px var(--sp-2);
}

/* ---------- ヘッダー ---------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{
  max-width:var(--container);margin-inline:auto;padding:14px var(--sp-3);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
}
.brand{display:flex;flex-direction:column;line-height:1.3;}
.brand-name{font-family:var(--ff-head);font-weight:700;font-size:19px;color:var(--c-main);letter-spacing:.06em;}
.brand-sub{font-size:10.5px;color:var(--c-text-soft);letter-spacing:.18em;}
.gnav{display:flex;gap:var(--sp-3);align-items:center;}
.gnav a{font-size:14px;text-decoration:none;letter-spacing:.05em;padding:6px 2px;}
.gnav a:hover{color:var(--c-accent);}
.header-tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.35;text-decoration:none;}
.header-tel strong{font-family:var(--ff-en);font-size:20px;color:var(--c-main);letter-spacing:.03em;}
.header-tel span{font-size:10.5px;color:var(--c-text-soft);}
@media(max-width:900px){.gnav{display:none;}}
@media(max-width:600px){
  .header-tel strong{font-size:16px;white-space:nowrap;}
  .header-tel span{font-size:9.5px;}
  .brand-name{font-size:16px;}
}

/* ---------- ヒーロー（実写真＋ネイビーオーバーレイ＋緩やかなズーム） ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--c-main);
  color:#fff;
  padding:calc(var(--sp-12) + 8px) 0 var(--sp-12);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(17,34,56,.92) 0%,rgba(20,41,66,.84) 46%,rgba(30,58,95,.55) 100%),
    url(../images/hero-warehouse.jpg?v=20260704) center/cover no-repeat;
  animation:heroZoom 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.07);}}
.hero::after{ /* 右下の朱のグロー＝視線の引き（closest-sideで縁を出さない） */
  content:"";position:absolute;right:-120px;bottom:-140px;width:460px;height:460px;
  background:radial-gradient(closest-side circle,rgba(193,80,46,.42),transparent);
  pointer-events:none;
}
.hero-inner{position:relative;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-3);}
.hero-en{font-family:var(--ff-en);font-size:12.5px;letter-spacing:.34em;color:#cfd9e6;text-transform:uppercase;margin-bottom:var(--sp-2);}
.hero h1{
  font-family:var(--ff-head);font-weight:700;font-size:var(--fz-h1);
  line-height:1.42;letter-spacing:.06em;margin-bottom:var(--sp-3);
}
.hero h1 em{font-style:normal;color:#f0b8a4;}
.hero-lead{max-width:34em;color:#dfe6ee;font-size:15.5px;margin-bottom:var(--sp-4);}
.hero-ctas{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-head);font-weight:700;font-size:15px;letter-spacing:.08em;
  padding:14px 30px;border-radius:var(--radius);text-decoration:none;
  transition:opacity .2s ease,transform .2s ease;
}
.btn:hover{opacity:.88;transform:translateY(-1px);}
.btn-accent{background:var(--c-accent);color:#fff;}
.btn-ghost{border:1px solid rgba(255,255,255,.55);color:#fff;}
.hero-note{margin-top:var(--sp-3);font-size:12.5px;color:#b8c4d2;letter-spacing:.06em;}

/* ---------- 共通セクション ---------- */
.section{padding:var(--sp-12) 0;}
.section-alt{background:var(--c-bg-alt);}
.sec-head{margin-bottom:var(--sp-6);}
.sec-en{font-family:var(--ff-en);font-size:12px;letter-spacing:.3em;color:var(--c-accent);text-transform:uppercase;display:block;margin-bottom:6px;}
.sec-head h2{font-family:var(--ff-head);font-weight:700;font-size:var(--fz-h2);letter-spacing:.08em;color:var(--c-main);line-height:1.4;}
.sec-lead{margin-top:var(--sp-2);color:var(--c-text-soft);max-width:38em;}

/* ---------- 数字で見る ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.stat{
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-3);text-align:center;
}
.stat-num{font-family:var(--ff-en);font-size:clamp(34px,5vw,46px);font-weight:600;color:var(--c-main);line-height:1.1;}
.stat-num small{font-size:.45em;font-family:var(--ff-head);margin-left:2px;color:var(--c-accent);}
.stat-label{margin-top:6px;font-size:13.5px;color:var(--c-text-soft);letter-spacing:.06em;}
.stats-note{margin-top:var(--sp-2);font-size:12px;color:var(--c-text-soft);text-align:right;}
@media(max-width:700px){.stats{grid-template-columns:1fr;gap:var(--sp-2);}}

/* ---------- 取扱商品 ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);}
.cat{
  background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-3);
}
.cat-icon{width:44px;height:44px;color:var(--c-accent);margin-bottom:var(--sp-2);}
.cat h3{font-family:var(--ff-head);font-weight:700;font-size:var(--fz-h3);color:var(--c-main);letter-spacing:.06em;margin-bottom:8px;}
.cat p{font-size:14px;color:var(--c-text-soft);}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cats{grid-template-columns:1fr;}}

/* ---------- 写真フレーム（形状＝角丸＋朱のオフセット額縁） ---------- */
.photo-frame{position:relative;isolation:isolate;margin:0;}
.photo-frame::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border:1px solid var(--c-accent);border-radius:var(--radius);
  transform:translate(10px,10px);opacity:.5;pointer-events:none;
}
.photo-clip{display:block;overflow:hidden;border-radius:var(--radius);}
.photo-clip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;}
.photo-frame:hover .photo-clip img{transform:scale(1.04);}
/* 画像リビール（左からクリップで現れる） */
.img-reveal{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.4,0,.2,1) .15s;}
.img-reveal.is-visible{clip-path:inset(0 0 0 0);}

/* ---------- 選ばれる理由 ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);counter-reset:reason;}
.reason{position:relative;padding-top:var(--sp-2);}
.reason .photo-frame{margin-bottom:var(--sp-3);}
.reason .photo-clip{aspect-ratio:4/3;}
.reason::before{
  counter-increment:reason;content:"0" counter(reason);
  font-family:var(--ff-en);font-size:44px;font-weight:600;color:var(--c-line);
  position:absolute;top:-18px;left:0;line-height:1;
}
.reason h3{font-family:var(--ff-head);font-weight:700;font-size:var(--fz-h3);color:var(--c-main);letter-spacing:.05em;margin:var(--sp-2) 0 10px;border-left:3px solid var(--c-accent);padding-left:12px;}
.reason p{font-size:14.5px;color:var(--c-text-soft);}
@media(max-width:800px){.reasons{grid-template-columns:1fr;gap:var(--sp-6);}}

/* ---------- 会社案内 ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-8);align-items:start;}
.about-msg{font-size:15px;}
.about-msg .photo-frame{margin-bottom:var(--sp-4);}
.about-msg .photo-clip{aspect-ratio:3/2;}
.about-msg p+p{margin-top:var(--sp-2);}
.about-sign{margin-top:var(--sp-3);font-family:var(--ff-head);font-size:14px;color:var(--c-text-soft);}
.about-sign strong{font-size:17px;color:var(--c-text);margin-left:10px;}
.company-table{width:100%;border-collapse:collapse;background:var(--c-white);border:1px solid var(--c-line);font-size:14px;}
.company-table th,.company-table td{padding:13px 16px;border-bottom:1px solid var(--c-line);text-align:left;vertical-align:top;}
.company-table th{width:7.5em;color:var(--c-main);font-family:var(--ff-head);font-weight:700;letter-spacing:.06em;background:var(--c-bg-alt);}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:var(--sp-6);}}

/* ---------- 取引の流れ ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);}
.flow-step{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--radius);padding:var(--sp-3);position:relative;}
.flow-no{font-family:var(--ff-en);font-size:13px;letter-spacing:.2em;color:var(--c-accent);display:block;margin-bottom:8px;}
.flow-step h3{font-family:var(--ff-head);font-weight:700;font-size:16px;color:var(--c-main);margin-bottom:8px;letter-spacing:.04em;}
.flow-step p{font-size:13.5px;color:var(--c-text-soft);}
@media(max-width:900px){.flow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.flow{grid-template-columns:1fr;}}

/* ---------- お知らせ ---------- */
.news-list{border-top:1px solid var(--c-line);}
.news-list li{display:flex;gap:var(--sp-3);padding:16px 4px;border-bottom:1px solid var(--c-line);font-size:14.5px;flex-wrap:wrap;}
.news-date{font-family:var(--ff-en);color:var(--c-text-soft);letter-spacing:.05em;flex-shrink:0;}
.news-tag{font-size:11px;background:var(--c-main);color:#fff;padding:2px 10px;border-radius:2px;letter-spacing:.1em;align-self:center;}

/* ---------- お問い合わせCTA ---------- */
.contact{background:var(--c-main);color:#fff;text-align:center;}
.contact .sec-en{color:#f0b8a4;}
.contact h2{color:#fff;}
.contact-lead{color:#dfe6ee;max-width:36em;margin:var(--sp-2) auto var(--sp-4);font-size:15px;}
.contact-box{
  display:flex;justify-content:center;align-items:stretch;gap:var(--sp-4);
  max-width:760px;margin-inline:auto;flex-wrap:wrap;
}
.contact-tel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);flex:1;min-width:280px;
  display:flex;flex-direction:column;justify-content:center;text-decoration:none;color:#fff;
}
.contact-tel strong{font-family:var(--ff-en);font-size:32px;letter-spacing:.04em;line-height:1.2;}
.contact-tel span{font-size:12.5px;color:#c7d2df;margin-top:4px;}
.contact-form-btn{flex:1;min-width:280px;display:flex;}
.contact-form-btn .btn{width:100%;font-size:16px;padding:22px;}

/* ---------- フッター ---------- */
.footer{background:var(--c-main-deep);color:#aebccb;padding:var(--sp-6) 0 calc(var(--sp-8) + env(safe-area-inset-bottom));font-size:13px;}
.footer-inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-3);display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.footer-brand{font-family:var(--ff-head);font-weight:700;font-size:16px;color:#fff;letter-spacing:.08em;}
.footer-addr{margin-top:8px;line-height:1.8;}
.footer-nav{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-start;}
.footer-nav a{text-decoration:none;font-size:13px;}
.footer-nav a:hover{color:#fff;}
.copyright{margin-top:var(--sp-4);text-align:center;font-size:11.5px;color:#7b8ba0;letter-spacing:.08em;}

/* ---------- モバイル固定CTA ---------- */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 10px rgba(0,0,0,.12);
}
.mobile-cta a{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:.06em;
  padding:15px 8px;text-decoration:none;color:#fff;
}
.mobile-cta .m-tel{background:var(--c-main);}
.mobile-cta .m-form{background:var(--c-accent);}
@media(max-width:900px){
  .mobile-cta{display:grid;}
  body{padding-bottom:64px;}
}

/* ---------- reveal（FVには掛けない・JS死亡時フェイルセーフはJS側） ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:hover{transform:none;}
  .hero::before{animation:none;}
  .img-reveal{clip-path:none;transition:none;}
  .photo-clip img{transition:none;}
  .photo-frame:hover .photo-clip img{transform:none;}
}

/* ---------- フォーカス可視 ---------- */
a:focus-visible,.btn:focus-visible{
  outline:3px solid var(--c-accent);outline-offset:2px;border-radius:var(--radius);
}