/* ============================================================
   product-photography.html — page-specific styles
   Shared design system lives in assets/css/common.css
   (left nav / mobile drawer / footer / sticky CTA are NOT
   touched by this file — see index.html / common.css for those)

   Updated to match the Claude Design revision received 2026-09-07
   (CritLab_Product_Photography_dc.html). Classes prefixed `pp-`
   are specific to this revision's new components.
   ============================================================ */

/* ---- Sub-page FV ---- */
.subfv{
  position:relative;
  min-height:620px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#8a8578;
}
.subfv-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
}
.subfv-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,5,1,.12) 30%, rgba(0,5,1,.7) 100%);
}
.subfv-inner{
  position:relative;z-index:1;
  color:var(--white);
  padding:0 clamp(20px,4.5vw,72px) 64px;
  max-width:900px;
}
.subfv-inner .label{color:var(--white);opacity:1;margin-bottom:.9em;}
.subfv-inner h1{
  margin:16px 0 0;
  font-size:clamp(30px,4vw,56px);
  font-weight:700;
  line-height:1.28;
}
.subfv-lead{margin:20px 0 0;font-size:19px;line-height:1.8;font-weight:500;}
.subfv-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

/* ---- Section intro paragraph ---- */
.section-intro{font-size:16px;line-height:1.9;max-width:760px;margin:18px 0 0;}

/* ============================================================
   02: 対応できる商品撮影 — white bordered cards + numbered badge
   ============================================================ */
.capability-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  margin-top:40px;
}
.capability-card{
  background:var(--white);
  border:1px solid rgba(0,5,1,.1);
  border-radius:14px;
  padding:26px 24px 24px;
}
.capability-num{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--yellow);
  font-family:"Poppins",sans-serif;font-weight:600;font-size:15px;
}
.capability-card h3{margin:18px 0 10px;font-size:17.5px;font-weight:700;line-height:1.6;}
.capability-card p{margin:0;font-size:14px;line-height:1.9;color:#33332D;}
.capability-highlight{
  background:var(--yellow);border-radius:14px;padding:26px 24px;
  display:flex;flex-direction:column;justify-content:space-between;gap:18px;
}
.capability-highlight p{margin:0;font-size:15px;line-height:1.9;font-weight:500;}
.capability-highlight .btn{align-self:flex-start;margin-top:auto;}

/* ============================================================
   03: 撮影方法 — photo + numbered badge + heading
   ============================================================ */
.method-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px 28px;
  margin-top:40px;
}
.method-photo-wrap{position:relative;}
.method-photo{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  height:210px;
  background:repeating-linear-gradient(45deg, rgba(0,5,1,.06) 0 10px, transparent 10px 20px);
  font-size:.78rem;color:#9a9a8f;
}
.method-badge{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;background:var(--yellow);
  font-family:"Poppins",sans-serif;font-weight:600;font-size:18px;
}
.method-item h3{margin:18px 0 10px;font-size:21px;font-weight:700;}
.method-item p{margin:0;font-size:14.5px;line-height:1.9;color:#33332D;}

/* ============================================================
   04: 撮影料金 — plan cards (not a table)
   ============================================================ */
.price-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;
  margin-top:40px;
}
.price-card2{
  border:1px solid rgba(0,5,1,.12);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;background:var(--white);
}
.price-card2-head{padding:16px 20px;}
.price-card2-head span{font-size:16px;font-weight:700;letter-spacing:.06em;}
.price-card2-body{padding:26px 20px 24px;display:flex;flex-direction:column;gap:18px;flex:1;}
.price-card2-amount{font-family:"Poppins",sans-serif;font-weight:600;line-height:1.25;letter-spacing:-.01em;}
.price-card2-meta{
  display:flex;flex-direction:column;gap:10px;
  padding-top:16px;border-top:1px dashed rgba(0,5,1,.22);
}
.price-card2-meta .lbl{
  display:block;font-family:"Poppins",sans-serif;font-size:10.5px;
  letter-spacing:.16em;color:var(--blue-text);font-weight:600;
}
.price-card2-meta .val{display:block;margin-top:4px;font-size:14.5px;line-height:1.8;}
.price-note{margin:26px 0 0;font-size:13.5px;line-height:1.9;color:#5E5A4C;}
.price-cta{display:flex;justify-content:flex-start;margin-top:32px;}

/* ============================================================
   05: 納品写真の主な用途 — two column, photo with yellow frame
   ============================================================ */
.usage-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:48px 72px;
  align-items:start;
}
.usage-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
  margin-top:32px;
  list-style:none;
  padding:0;
}
.usage-list li{
  display:flex;align-items:center;gap:12px;
  background:var(--white);border:1px solid rgba(0,5,1,.1);border-radius:12px;
  padding:16px 18px;font-size:14.5px;line-height:1.7;
}
.usage-list li::before{
  content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--yellow);
}
.simple-note{margin:20px 0 0;font-size:14px;line-height:1.9;color:#5E5A4C;}
.usage-media{position:relative;padding:0 24px 24px 0;}
.usage-media .frame-offset{position:absolute;right:0;bottom:0;width:76%;height:80%;background:var(--yellow);}
.usage-media .method-photo{position:relative;height:380px;}

/* ============================================================
   06: 商品撮影の流れ — 3-column grid with connecting line
   ============================================================ */
.flow-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 32px;
  margin-top:44px;
  max-width:1180px;
}
.flow-item-head{display:flex;align-items:center;gap:8px;}
.flow-num{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--yellow);
  font-family:"Poppins",sans-serif;font-weight:600;font-size:15px;
}
.flow-line{flex:1;height:1px;background:rgba(0,5,1,.22);}
.flow-item h3{margin:18px 0 10px;font-size:17px;font-weight:700;line-height:1.6;}
.flow-item p{margin:0;font-size:13.5px;line-height:1.9;color:#33332D;}

/* ============================================================
   07: 撮影前の準備 — white card wrapper + checklist
   ============================================================ */
.prep-card{
  background:var(--white);border:1px solid rgba(0,5,1,.1);border-radius:16px;
  padding:clamp(28px,3.5vw,56px) clamp(24px,3.5vw,56px) clamp(28px,3.4vw,52px);
}
.prep-card .section-head{margin-bottom:0;}
.prep-card h2{margin:12px 0 32px;font-size:clamp(23px,2.2vw,30px);line-height:1.45;}
.prep-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 48px;
}
.prep-item{
  display:flex;align-items:flex-start;gap:12px;
  padding-bottom:14px;border-bottom:1px dashed rgba(0,5,1,.2);
}
.prep-check{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--yellow);margin-top:2px;
}
.prep-item span.txt{font-size:14.5px;line-height:1.8;}

/* ============================================================
   08: 撮影事例 — gallery
   ============================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  margin-top:40px;
}
.gallery-thumb{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  height:300px;
  background:repeating-linear-gradient(45deg, rgba(0,5,1,.06) 0 10px, transparent 10px 20px);
  font-size:.78rem;color:#9a9a8f;
}
.gallery-caption{display:flex;align-items:baseline;gap:12px;margin-top:14px;}
.gallery-caption .t{font-size:16px;font-weight:700;}
.gallery-caption .d{font-size:13.5px;color:#5E5A4C;}

/* ============================================================
   09: よくある質問 — accordion (native details/summary)
   ============================================================ */
.pp-faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:0 48px;
  margin-top:32px;
}
.pp-faq-grid details{border-top:1px solid rgba(0,5,1,.16);}
.pp-faq-grid summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;cursor:pointer;padding:14px 0;
  list-style:none;
}
.pp-faq-grid summary::-webkit-details-marker{display:none;}
.pp-faq-q-row{display:flex;align-items:baseline;gap:12px;}
.pp-faq-q-row .q{font-family:"Poppins",sans-serif;font-weight:600;font-size:16px;color:var(--blue-text);}
.pp-faq-q-row .qtext{font-size:16.5px;font-weight:700;line-height:1.6;}
.pp-faq-plus{
  flex:0 0 auto;position:relative;width:34px;height:34px;border-radius:50%;
  background:var(--yellow);transition:transform .22s ease;
}
.pp-faq-plus span{position:absolute;background:var(--text);}
.pp-faq-plus span:nth-child(1){left:11px;top:16.5px;width:12px;height:1.6px;}
.pp-faq-plus span:nth-child(2){left:16.2px;top:11px;width:1.6px;height:12px;}
.pp-faq-grid details[open] .pp-faq-plus{transform:rotate(45deg);}
.pp-faq-grid summary + p{margin:0;padding:0 46px 24px 24px;font-size:15px;line-height:1.95;color:#33332D;}

/* ============================================================
   10: 最終CTA — dark photo overlay (page-specific; the shared
   .final-cta on the top page uses a yellow tint, this page uses
   a dark scrim per the new design, so it gets its own classes)
   ============================================================ */
.pp-final-cta{position:relative;min-height:440px;display:flex;overflow:hidden;}
.pp-final-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pp-final-cta-scrim{position:absolute;inset:0;background:rgba(0,5,1,.62);}
.pp-final-cta-inner{
  position:relative;z-index:1;flex:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px 56px;align-items:center;
  padding:80px clamp(20px,4.5vw,72px);color:var(--white);
}
.pp-final-cta-inner h2{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.5;}
.pp-final-cta-inner p{margin:16px 0 0;font-size:15.5px;line-height:1.9;max-width:720px;}
.pp-final-cta-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.pp-final-cta-chips span{
  font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);
}
.pp-final-cta-ctas{display:flex;flex-direction:column;gap:12px;}

/* ================================================================
   Mobile / responsive
   ================================================================ */
@media (max-width:1024px){
  .subfv{min-height:auto;}
  .subfv-img{aspect-ratio:1/1;position:static;object-position:center;}
  .subfv-scrim{position:absolute;}
  .subfv{display:block;}
  .subfv-inner{padding:28px 20px 40px;max-width:none;}
  .subfv-ctas{flex-direction:column;}
  .subfv-ctas .btn{width:100%;}

  .price-cta{justify-content:flex-start;}
}

@media (max-width:860px){
  .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:560px){
  .flow-grid{grid-template-columns:minmax(0,1fr);}
  .prep-grid{grid-template-columns:minmax(0,1fr);}
}