/*
  国分寺商店 共通スタイルシート
  index.html（トップページ）・products.html（商品一覧ページ）で共有する。
  デザイントークン（色・書体・角丸・余白）は既存 index.html の :root をそのまま踏襲。
  新しい値は追加していない。
*/
:root{
  --bg:#FFFFFF;
  --bg-tint:#FFF6EF;
  --bg-gray:#F6F4F2;
  --accent:#FF5A1F;
  --accent-deep:#E03C00;
  --accent-light:#FFF1E8;
  --text:#1F1D1B;
  --text-sub:#7A736D;
  --text-mute:#9A9490;
  --border:#EDE9E6;

  --radius-card:10px;
  --radius-btn:8px;
  --radius-pill:999px;

  --space-section-mobile:40px;
  --space-section-pc:56px;
  --gap-grid-mobile:14px;
  --gap-grid-pc:18px;

  --font-heading:'Zen Maru Gothic', sans-serif;
  --font-body:'Zen Kaku Gothic New', sans-serif;
  --font-en:'Quicksand', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{opacity:.8;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{margin:0;font-family:var(--font-heading);line-height:1.35;}
p{margin:0;}
.container{max-width:1080px;margin:0 auto;padding:0 20px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(90deg,#FF5A1F,#FF8A2B);
}
.header-inner{
  max-width:1080px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.logo{
  display:flex;align-items:center;gap:12px;
  color:#fff;font-family:'Shippori Mincho',var(--font-heading),serif;
  font-weight:800;font-size:clamp(1.6rem,5vw,2.6rem);
  letter-spacing:.03em;
  flex:none;
}
.logo .logo-mark{
  width:52px;height:52px;flex:none;border-radius:8px;
  background:#fff;
  display:block;
}
.header-nav{
  width:100%;
  display:flex;flex-wrap:wrap;gap:6px 16px;
  color:#fff;font-size:.85rem;font-weight:500;
}
.header-nav a{display:inline-flex;align-items:center;min-height:44px;}

@media (min-width:900px){
  .header-inner{gap:24px;flex-wrap:nowrap;}
  .logo .logo-mark{width:60px;height:60px;}
  .header-nav{width:auto;margin-left:auto;flex-wrap:nowrap;gap:18px;font-size:.85rem;}
}

/* ---------- カテゴリ ---------- */
.categories{
  position:relative;
  border-bottom:1px solid var(--border);
}
.category-row{
  max-width:1080px;margin:0 auto;padding:12px 20px;
  display:flex;gap:10px;overflow-x:auto;
  scrollbar-width:none;
}
.category-row::-webkit-scrollbar{display:none;}
/* 横スクロールでカテゴリが隠れていることを示すフェード（JS未動作時は右側を常時表示） */
.categories::before,
.categories::after{
  content:"";
  position:absolute;
  top:0;bottom:1px;
  width:28px;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.categories::before{
  left:0;
  background:linear-gradient(90deg, var(--bg), transparent);
}
.categories::after{
  right:0;
  opacity:1;
  background:linear-gradient(270deg, var(--bg), transparent);
}
.categories.is-scrolled::before{opacity:1;}
.categories.is-at-end::after{opacity:0;}
.chip{
  flex:none;display:inline-flex;align-items:center;min-height:40px;
  padding:0 16px;border-radius:var(--radius-pill);
  background:var(--bg-gray);font-size:.85rem;white-space:nowrap;
  border:none;font-family:inherit;cursor:pointer;color:inherit;
}
.chip.is-current{background:var(--accent-light);color:var(--accent-deep);font-weight:700;}

/* ---------- ヒーロー ---------- */
/* 背景色（左：bg-tint／右：オレンジグラデーション）は、テキスト・イラストの内容だけを
   .hero-innerで他セクション（.concept-grid等）と同じmax-width:1080pxに収める
   （.concept背景bg-gray全幅＋.concept-grid内側1080pxと同じ二重構造）。
   1080pxを超える画面幅では左右に余白ができるが、以前はここを.hero::before/::afterの
   単色（左：クリーム／右：ディープオレンジ）で敷いていたところ、900〜1080px付近で
   縦方向のサイズがヒーローの高さに正しく追従せず、次セクションまで巨大な色塊が
   突き抜ける不具合が発生した。再発リスクを避けるため、左右の余白は装飾せず
   ページの白背景（--bg）のまま見せる方針に変更（2026-09-09）。 */
.hero{position:relative;}
.hero-inner{
  position:relative;
  display:grid;grid-template-columns:1fr;
  max-width:1080px;margin:0 auto;
}
.hero-copy{
  background:var(--bg-tint);
  padding:36px 20px;
  display:flex;flex-direction:column;gap:16px;
}
.hero-badge{
  align-self:flex-start;
  background:var(--accent-deep);color:#fff;
  font-weight:700;font-size:.72rem;letter-spacing:.08em;
  padding:6px 12px;border-radius:4px;
}
.hero h1{
  font-weight:700;font-size:clamp(1.7rem,6vw,2.5rem);
  word-break:keep-all;
}
.hero-lead{max-width:440px;color:#5B554F;}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;
  border-radius:var(--radius-btn);
  font-family:var(--font-body);font-weight:700;font-size:1rem;
  border:none;cursor:pointer;
}
.btn-fill{background:var(--accent);color:#fff;}
.btn-outline{
  background:transparent;color:var(--accent-deep);
  border:2px solid var(--accent);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:16px;
  font-size:.8rem;color:var(--text-sub);
}
.hero-visual{
  min-height:220px;
  aspect-ratio:2400/1792;
  background:linear-gradient(150deg,#FFB877,#E03C00);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.hero-visual img{
  width:100%;height:100%;object-fit:contain;
}
@media (min-width:900px){
  .hero-inner{grid-template-columns:1.15fr .85fr;}
  .hero-copy{padding:52px 40px;gap:18px;}
  .hero-visual{padding:20px;}
}

/* ---------- コンセプトセクション ---------- */
.concept{background:var(--bg-gray);padding:var(--space-section-mobile) 0;}
@media (min-width:900px){ .concept{padding:var(--space-section-pc) 0;} }
.concept-grid{
  max-width:1080px;margin:0 auto;
  display:flex;flex-direction:column;
  gap:var(--space-section-mobile);
}
@media (min-width:900px){
  .concept-grid{gap:var(--space-section-pc);}
}
.concept-block{
  display:grid;grid-template-columns:1fr;gap:16px;align-items:center;
}
.concept-block h2{font-weight:700;font-size:clamp(1.15rem,3.6vw,1.4rem);margin-bottom:8px;}
.concept-text p{color:var(--text-sub);font-size:.95rem;margin-bottom:8px;}
.concept-text p:last-child{margin-bottom:0;}
.concept-text strong{color:var(--text);}
.concept-visual{
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  aspect-ratio:1/1;
}
.concept-visual img{width:100%;height:100%;object-fit:contain;}
.concept-visual--hero{
  aspect-ratio:2400/1792;
  background:linear-gradient(150deg,#FFB877,#E03C00);
}
@media (min-width:900px){
  .concept-block{grid-template-columns:1fr 1fr;gap:28px;}
  .concept-block--reverse .concept-visual{order:2;}
  .concept-block--reverse .concept-text{order:1;}
}

/* 段落5（運営について）：軽量な1カラム表示 */
.concept-block--light{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
}
.concept-logo{width:60px;height:60px;border-radius:8px;flex:none;}
@media (min-width:900px){
  .concept-block--light{flex-direction:row;justify-content:center;text-align:left;gap:16px;}
}

/* 段落6（CTA）：ボタン中心、絵は添える程度 */
.concept-block--cta{display:block;}
.concept-cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.concept-cta-icon{width:64px;height:64px;object-fit:contain;flex:none;border-radius:var(--radius-card);}
.concept-note{font-size:.85rem;color:var(--text-sub);}
.concept-note a{text-decoration:underline;color:var(--accent-deep);}

/* ---------- 商品一覧 ---------- */
.products{padding:var(--space-section-mobile) 0;}
@media (min-width:900px){ .products{padding:var(--space-section-pc) 0;} }
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:20px;
}
.section-head h1,.section-head h2{font-weight:700;font-size:clamp(1.35rem,4vw,1.65rem);}

/* モバイルは1列固定。タブレット幅からグリッド化する */
.product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-grid-mobile);
}
@media (min-width:600px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
}
@media (min-width:900px){
  .product-grid{grid-template-columns:repeat(4,1fr);gap:var(--gap-grid-pc);}
}
.product-card{
  display:flex;flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;background:#fff;
}
.product-photo{
  position:relative;
  height:0;
  padding-top:100%;
  overflow:hidden;
}
.product-photo img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.photo-a{background:linear-gradient(135deg,#F0C48C,#C87A2E);}
.photo-b{background:linear-gradient(135deg,#8FA98C,#3F5E48);}
.badge{
  position:absolute;top:10px;left:10px;
  color:#fff;font-weight:700;font-size:.68rem;
  padding:4px 8px;border-radius:4px;
}
.badge-hot{background:var(--accent-deep);}

.product-body{
  padding:12px;display:flex;flex-direction:column;gap:7px;flex:1;
}
.product-body h2,.product-body h3{font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1.5;}
.product-note{font-size:.78rem;color:var(--text-sub);line-height:1.6;}
.price{font-weight:700;font-size:1.25rem;color:var(--accent-deep);}
.price-unit{font-size:.68rem;font-weight:500;color:var(--text-sub);}
.tag-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.shop-name{font-size:.7rem;color:var(--text-mute);}
.category-tag{
  font-size:.68rem;color:var(--text-sub);
  background:var(--bg-gray);padding:2px 9px;border-radius:var(--radius-pill);
}
.btn-buy{
  margin-top:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;
  background:var(--accent);color:#fff;
  border-radius:6px;font-weight:700;font-size:.85rem;
}
.buy-note{font-size:.7rem;color:var(--text-mute);line-height:1.5;}

.pickup-more{margin-top:24px;display:flex;justify-content:center;}
@media (min-width:900px){ .pickup-more{margin-top:32px;} }

/* ---------- FAQ ---------- */
.faq{padding:var(--space-section-mobile) 0;}
@media (min-width:900px){ .faq{padding:var(--space-section-pc) 0;} }
.faq-layout{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:900px){
  .faq-layout{grid-template-columns:200px 1fr;gap:28px;}
}
.faq h2{font-weight:700;font-size:1.35rem;}
.faq li{
  display:flex;flex-direction:column;gap:5px;
  border-top:1px solid var(--border);padding:14px 0;
}
.faq li:last-child{border-bottom:1px solid var(--border);}
.faq li strong{font-size:.95rem;}
.faq li p{font-size:.85rem;color:var(--text-sub);}

/* ---------- 商品を載せたいお店の方へ ---------- */
.contact{
  background:var(--accent);color:#fff;
  padding:36px 0;
}
.contact-inner{
  display:flex;flex-direction:column;gap:16px;
}
.contact h2{font-weight:700;font-size:1.4rem;color:#fff;}
.contact p{font-size:.9rem;max-width:520px;}
.contact .btn{background:#fff;color:var(--accent-deep);align-self:flex-start;}
@media (min-width:900px){
  .contact{padding:44px 0;}
  .contact-inner{
    flex-direction:row;align-items:center;justify-content:space-between;gap:28px;
  }
}

/* ---------- お問い合わせフォーム（contact.html） ---------- */
.form-main{padding:32px 0 56px;}
@media (min-width:900px){ .form-main{padding:48px 0 64px;} }
.form-main h1{
  font-weight:700;font-size:clamp(1.5rem,6vw,2rem);
  margin-bottom:12px;
  padding-bottom:16px;border-bottom:2px solid var(--accent);
}
.form-intro{color:var(--text-sub);font-size:.95rem;margin:16px 0 28px;max-width:560px;}
.form-error-notice{
  max-width:640px;margin:0 0 24px;padding:1em 1.3em;
  border:1px solid var(--accent-deep);color:var(--accent-deep);
  background:var(--accent-light);font-size:.88rem;line-height:1.8;
  border-radius:var(--radius-card);
}
.form-field{margin-bottom:20px;max-width:520px;}
.form-field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;}
.form-field .required{
  color:#fff;background:var(--accent-deep);
  font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:var(--radius-pill);margin-left:8px;
}
.form-field .optional{
  color:var(--text-mute);background:var(--bg-gray);
  font-size:.68rem;font-weight:500;
  padding:2px 8px;border-radius:var(--radius-pill);margin-left:8px;
}
.form-field input,.form-field textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);border-radius:var(--radius-btn);
  font-family:var(--font-body);font-size:.95rem;color:var(--text);
  background:#fff;
}
.form-field textarea{resize:vertical;min-height:140px;}
.form-field input:focus,.form-field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;
}
.form-submit{margin-top:28px;}
.form-submit .btn{border-radius:var(--radius-btn);}
.form-note{font-size:.82rem;color:var(--text-sub);margin-top:28px;max-width:520px;}
.form-note a{text-decoration:underline;color:var(--accent-deep);}
/* ハニーポット項目（迷惑メール対策）。実際の利用者には見えない位置に飛ばす */
.hp-field{
  position:absolute;left:-9999px;top:-9999px;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- お問い合わせ完了ページ（contact-thanks.html） ---------- */
.thanks-main{padding:56px 0;text-align:center;}
@media (min-width:900px){ .thanks-main{padding:80px 0;} }
.thanks-main h1{font-weight:700;font-size:clamp(1.5rem,6vw,2rem);margin-bottom:16px;}
.thanks-main p{color:var(--text-sub);font-size:.95rem;margin-bottom:8px;}
.thanks-actions{margin-top:28px;}

/* ---------- フッター ---------- */
.site-footer{
  padding:22px 0;font-size:.75rem;color:var(--text-mute);
}
.footer-inner{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a{
  text-decoration:underline;
  display:inline-flex;align-items:center;min-height:44px;
}