@charset "utf-8";
/* 共通の見出し・ボタン・画像文章レイアウトはstyle.cssを使用 */
.order-page .section-heading > p { color: #285084; }
.order-page .concept-brand { text-align: center; }
.order-page .concept-brand img { margin-inline: auto; }
.order-page .concept-gallery { background: rgba(250,248,244,.7); }
.order-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.order-card { min-width: 0; }
.order-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.order-card h3 { margin: 16px 0 6px; font-weight: 400; }

.order-flow { background: #f5f3ef; }
/* flow_a.cssの構造を維持し、配色と写真の角だけ調整 */
.order-flow .flow_h .circle { border-color: #8fa8c4; justify-content: center; }
.order-flow .flow_h .circle p { color: #285084; line-height: 1.2; }
.order-flow .flow_h h3 { color: #333; }
.order-flow .flow_h .imgbox { border-radius: 0; }
.order-flow .flow_h .txtbox { min-width: 0; }
.order-archive__intro { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8%; align-items: start; }
.order-archive .order-card img { aspect-ratio: 1.5; }
.order-before { background: #285084; }
.order-before__inner { max-width: 1100px; margin: auto; background: #fff; text-align: center; }
.order-before__note { padding: 24px; background: #f5f3ef; text-align: left; }
.order-page .more_f p { margin: 0; color: inherit; font: inherit; }
@media(max-width:1080px) and (min-width:769px) {
  .order-flow .flow_h .item { grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); }
}
@media(max-width:768px) {
  .order-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 16px; }
  .order-archive__intro { grid-template-columns: minmax(0,1fr); gap: 0; }
  .order-before__inner > p { text-align: left; }
}
/* order.css の末尾に追加 */

/* オーダーできること：3ブロックを中央配置 */
.order-options > .order-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px 24px;
  max-width: 1100px;
  margin-inline: auto;
}
.order-options > .order-grid > .order-card {
  flex: 0 1 calc((100% - 48px) / 3);
  min-width: 0;
}

/* ご依頼の前に：背景の青・内側の白は維持し、余白を調整 */
.order-before {
  padding: clamp(56px, 7vw, 100px) clamp(20px, 5vw, 80px);
}
.order-before > .order-before__inner {
  padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px);
}
.order-before .order-before__note {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  margin: 32px auto 0;
  text-align: left;
}
.order-before .order-before__note > p {
  margin: 0;
  line-height: 2.2;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .order-options > .order-grid > .order-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media screen and (max-width: 576px) {
  .order-options > .order-grid > .order-card {
    flex-basis: 100%;
    max-width: 360px;
  }
  .order-before .order-before__note {
    margin-top: 24px;
  }
  .order-before .order-before__note > p {
    line-height: 2;
  }
}
/* オーダー制作：制作事例を正方形に */
.order-archive .order-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
}