@charset "UTF-8";
/* コンポジット制作LP（/promotion/composite/）。.p-composite にスコープしテーマ共通CSSと衝突させない */

.p-composite {
  font-family: 'Google Sans', 'Noto Sans JP', sans-serif;
  color: #1A1A1A;
  line-height: 1.8;
}
.p-composite section { padding: 4em 0; }
.p-composite .l-container {
  width: min(92%, 80em);
  margin: 0 auto;
}
.p-composite h1, .p-composite h2, .p-composite h3 { line-height: 1.4; letter-spacing: 0.04em; }

/* ヒーロー */
.p-composite__hero {
  background: linear-gradient(135deg, #f7f4ee 0%, #efe9dd 100%);
  text-align: center;
}
.p-composite__hero h1 { font-size: 2em; font-weight: 700; }
.p-composite__hero h1 span { color: #8d7b5c; }
.p-composite__hero p {
  margin: 1.25em auto 0;
  max-width: 38em;
  font-size: 0.9375em;
}
.p-composite__cta {
  display: inline-block;
  margin-top: 2em;
  background: #b5985a;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625em;
  padding: 0.9375em 3em;
  border-radius: 3em;
  letter-spacing: 0.06em;
  transition: opacity 0.2s;
}
.p-composite__cta:hover { opacity: 0.85; }
.p-composite__cta--sub {
  background: transparent;
  color: #6b6455;
  border: 0.0625em solid #b5985a;
  margin-left: 1em;
}
.p-composite__hero-note { font-size: 0.75em; color: #8a8272; margin-top: 1em; }
@media (max-width: 769px) {
  .p-composite__hero h1 { font-size: 1.5em; }
  .p-composite__cta { display: block; margin-left: 0; margin-right: 0; }
  .p-composite__cta--sub { margin-top: 1em; }
}

/* 見出し共通 */
.p-composite .c-heading-composite {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 1.75em;
}
.p-composite .c-heading-composite small {
  display: block;
  font-size: 0.5em;
  color: #8d7b5c;
  letter-spacing: 0.2em;
  margin-top: 0.375em;
}

/* コンポジットとは */
.p-composite__about .l-container { max-width: 46em; }
.p-composite__about p + p { margin-top: 1em; }

/* 特徴カード */
.p-composite__features { background: #f7f4ee; }
.p-composite__features ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
}
@media (max-width: 769px) {
  .p-composite__features ul { grid-template-columns: 1fr; }
}
.p-composite__features li {
  background: #fff;
  border-radius: 0.5em;
  padding: 1.75em 1.5em;
  box-shadow: 0 0.125em 0.5em rgba(0, 0, 0, 0.05);
}
.p-composite__features h3 {
  font-size: 1em;
  margin-bottom: 0.625em;
  padding-left: 0.875em;
  border-left: 0.25em solid #b5985a;
}
.p-composite__features p { font-size: 0.8125em; color: #4a453c; }

/* 使い方ステップ */
.p-composite__steps ol {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
}
@media (max-width: 769px) {
  .p-composite__steps ol { grid-template-columns: 1fr; }
}
.p-composite__steps li {
  counter-increment: step;
  background: #fff;
  border: 0.0625em solid #e5e1d8;
  border-radius: 0.5em;
  padding: 1.75em 1.5em 1.5em;
  position: relative;
}
.p-composite__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.75em;
  left: 1.25em;
  background: #b5985a;
  color: #fff;
  font-weight: 700;
  font-size: 0.875em;
  padding: 0.25em 0.75em;
  border-radius: 1em;
  letter-spacing: 0.1em;
}
.p-composite__steps h3 { font-size: 0.9375em; margin-bottom: 0.5em; }
.p-composite__steps p { font-size: 0.8125em; color: #4a453c; }

/* 撮影CTA */
.p-composite__shoot {
  background: #1f1c17;
  color: #f5f2ea;
  text-align: center;
}
.p-composite__shoot h2 { font-size: 1.375em; margin-bottom: 0.75em; }
.p-composite__shoot p {
  max-width: 40em;
  margin: 0 auto;
  font-size: 0.875em;
  color: #cfc8b8;
}
.p-composite__shoot .p-composite__cta { margin-top: 2em; }
.p-composite__shoot .p-composite__cta--sub { color: #f5f2ea; border-color: #cfc8b8; }