/* =========================================================
   EC-CUBE2.17 コスプレ衣装レンタルLP（実装向けHTML版）
   承認済みデザイン準拠 / flexbox対応
   ========================================================= */

.flc-cosplay,
.flc-cosplay *,
.flc-cosplay *::before,
.flc-cosplay *::after {
  box-sizing: border-box !important;
}

.flc-cosplay {
  width: 100% !important;
  max-width: 871px !important;
  margin: 0 auto !important;
  color: #5f4a43 !important;
  font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif !important;
  line-height: 1.75 !important;
}

.flc-cosplay img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border: 0 !important;
}

.flc-cosplay a {
  color: inherit !important;
  text-decoration: none !important;
}

.flc-cosplay p,
.flc-cosplay h2,
.flc-cosplay h3,
.flc-cosplay ul {
  margin: 0 !important;
  padding: 0 !important;
}

.flc-cosplay__hero {
  margin-bottom: 14px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.flc-cosplay__hero img {
  width: 100% !important;
}

.flc-cosplay__summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-bottom: 18px !important;
  border: 1px solid #f0d9dd !important;
  border-radius: 12px !important;
  background: #fffdfd !important;
  overflow: hidden !important;
}

.flc-cosplay__summary-item {
  flex: 1 1 160px !important;
  min-width: 150px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 14px !important;
  border-right: 1px dashed #ecd1d7 !important;
  border-bottom: 1px dashed #ecd1d7 !important;
}

.flc-cosplay__summary-item:nth-child(5n) {
  border-right: 0 !important;
}

.flc-cosplay__summary-item:nth-last-child(-n+5) {
  border-bottom: 0 !important;
}

.flc-cosplay__summary-icon {
  flex: 0 0 52px !important;
  width: 52px !important;
}

.flc-cosplay__summary-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.flc-cosplay__summary-title {
  display: block !important;
  margin-bottom: 2px !important;
  color: #f06d84 !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
}

.flc-cosplay__summary-body {
  color: #5f4a43 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.flc-cosplay__summary-price {
  color: #ef617f !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

.flc-cosplay__summary-price strong {
  font-size: 23px !important;
  line-height: 1 !important;
}

.flc-cosplay__summary-note {
  display: block !important;
  margin-top: 2px !important;
  color: #8f7a75 !important;
  font-size: 11px !important;
}

.flc-cosplay__section {
  margin-bottom: 18px !important;
}

.flc-cosplay__heading-wrap {
  margin-bottom: 10px !important;
  background: #f5f3f3 !important;
  border-top: 1px solid #efeaea !important;
  border-bottom: 1px solid #efeaea !important;
  padding: 7px 10px !important;
  text-align: center !important;
}

.flc-cosplay__heading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  color: #a96b64 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
}

.flc-cosplay__heading::before,
.flc-cosplay__heading::after {
  content: "♡" !important;
  color: #efb1c0 !important;
  font-size: 16px !important;
  font-weight: normal !important;
}

.flc-cosplay__categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.flc-cosplay__cat {
  flex: 1 1 200px !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border: 1px solid #edd9dc !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.flc-cosplay__cat img {
  width: 50px !important;
  flex: 0 0 50px !important;
}

.flc-cosplay__cat span {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

.flc-cosplay__cat--sailor span { color: #55656f !important; }
.flc-cosplay__cat--maid span { color: #8d6548 !important; }
.flc-cosplay__cat--china span { color: #7ba14b !important; }
.flc-cosplay__cat--idol span { color: #ea8097 !important; }

.flc-cosplay__intro {
  margin-bottom: 12px !important;
  text-align: center !important;
  color: #7e6d66 !important;
  font-size: 11px !important;
}

.flc-cosplay__products {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.flc-cosplay__product {
  flex: 1 1 calc(25% - 8px) !important;
  min-width: 115px !important;
  border: 1px solid #efe2e3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.flc-cosplay__product-link {
  display: block !important;
}

.flc-cosplay__product-image {
  width: 100% !important;
  aspect-ratio: 0.72 !important;
  object-fit: cover !important;
  object-position: center top !important;
  background: #faf5f5 !important;
}

.flc-cosplay__product-body {
  padding: 8px 8px 10px !important;
}

.flc-cosplay__product-title {
  min-height: 42px !important;
  margin-bottom: 6px !important;
  color: #554743 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.flc-cosplay__product-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.flc-cosplay__tag {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

.flc-cosplay__tag--blue { background: #eef7fb !important; color: #6f95a8 !important; }
.flc-cosplay__tag--pink { background: #fff1ec !important; color: #b38872 !important; }
.flc-cosplay__tag--green { background: #eff7e8 !important; color: #79a05d !important; }

.flc-cosplay__size {
  color: #7e6e67 !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

.flc-cosplay__product-price {
  margin-top: 7px !important;
  color: #ef7286 !important;
  font-size: 13px !important;
  font-weight: bold !important;
  line-height: 1.2 !important;
}

.flc-cosplay__product-price span {
  font-size: 10px !important;
  font-weight: normal !important;
}

.flc-cosplay__scenes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.flc-cosplay__scene {
  flex: 1 1 160px !important;
  min-height: 110px !important;
  padding: 13px 12px !important;
  border: 1px solid #e9dddf !important;
  border-radius: 10px !important;
  background: #fff !important;
  text-align: center !important;
}

.flc-cosplay__scene img {
  width: 40px !important;
  margin: 0 auto 6px !important;
}

.flc-cosplay__scene-title {
  margin-bottom: 4px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.flc-cosplay__scene p {
  color: #61514c !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.flc-cosplay__scene--orange .flc-cosplay__scene-title { color: #ef9048 !important; }
.flc-cosplay__scene--blue .flc-cosplay__scene-title { color: #7b8cdc !important; }
.flc-cosplay__scene--green .flc-cosplay__scene-title { color: #72a861 !important; }
.flc-cosplay__scene--teal .flc-cosplay__scene-title { color: #6da7b0 !important; }
.flc-cosplay__scene--purple .flc-cosplay__scene-title { color: #a485d4 !important; }

.flc-cosplay__about {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  border: 1px solid #f0dfe0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(90deg, #fff9f8 0%, #fff 62%) !important;
}

.flc-cosplay__about-body {
  flex: 1 1 440px !important;
  padding: 20px 22px !important;
}

.flc-cosplay__about-title {
  margin-bottom: 10px !important;
  color: #a76c62 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

.flc-cosplay__about-body p {
  color: #6b5b55 !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
}

.flc-cosplay__checklist {
  list-style: none !important;
  margin: 10px 0 !important;
}

.flc-cosplay__checklist li {
  position: relative !important;
  padding-left: 30px !important;
  margin-bottom: 7px !important;
  color: #ef667b !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
}

.flc-cosplay__checklist li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #ef8093 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  color: #ef8093 !important;
}

.flc-cosplay__checklist small {
  color: #ef7b90 !important;
  font-size: 11px !important;
  font-weight: normal !important;
}

.flc-cosplay__about-visual {
  flex: 1 1 250px !important;
  min-height: 190px !important;
  background: #fff !important;
}

.flc-cosplay__about-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.flc-cosplay__faq {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
}

.flc-cosplay__faq details {
  flex: 1 1 calc(50% - 14px) !important;
  min-width: 280px !important;
  border: 1px solid #eadfe0 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

.flc-cosplay__faq summary {
  position: relative !important;
  list-style: none !important;
  padding: 10px 34px 10px 12px !important;
  color: #514440 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}
.flc-cosplay__faq summary::-webkit-details-marker { display: none !important; }
.flc-cosplay__faq summary::before { content: "Q." !important; font-weight: bold !important; margin-right: 5px !important; }
.flc-cosplay__faq summary::after { content: "▾" !important; position: absolute !important; right: 12px !important; top: 9px !important; color: #8c7b75 !important; }
.flc-cosplay__faq details[open] summary::after { content: "▴" !important; }
.flc-cosplay__faq p { padding: 0 12px 12px 30px !important; color: #71635f !important; font-size: 11px !important; line-height: 1.7 !important; }

.flc-cosplay__cta {
  margin-top: 6px !important;
  text-align: center !important;
}

.flc-cosplay__cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(526px, 100%) !important;
  min-height: 56px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #f07da0 0%, #eb6d87 100%) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: bold !important;
  box-shadow: 0 6px 16px rgba(234, 115, 140, 0.18) !important;
}

.flc-cosplay__cta-arrow {
  font-size: 24px !important;
  font-weight: normal !important;
  line-height: 1 !important;
}

@media only screen and (max-width: 767px) {
  .flc-cosplay__summary-item {
    flex: 1 1 calc(50% - 1px) !important;
  }
  .flc-cosplay__summary-item:nth-child(odd) {
    border-right: 1px dashed #ecd1d7 !important;
  }
  .flc-cosplay__summary-item:nth-child(even) {
    border-right: 0 !important;
  }
  .flc-cosplay__product {
    flex: 1 1 calc(50% - 8px) !important;
  }
  .flc-cosplay__faq details {
    min-width: 100% !important;
  }
}

@media only screen and (max-width: 540px) {
  .flc-cosplay__summary-item {
    flex: 1 1 100% !important;
    border-right: 0 !important;
  }
  .flc-cosplay__cat {
    flex: 1 1 100% !important;
  }
  .flc-cosplay__scene {
    flex: 1 1 100% !important;
  }
  .flc-cosplay__about-body,
  .flc-cosplay__about-visual {
    flex: 1 1 100% !important;
  }
  .flc-cosplay__about-visual { min-height: 150px !important; }
  .flc-cosplay__cta a { font-size: 16px !important; }
}