/* ============================================
   Service / Duvet Reform & Cleaning page
   Loaded after pillow.css to extend / override.
   ============================================ */

/* ===== Common ===== */
.logo-space {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #8f8d86;
  padding: 6px 14px;
  border: 1px dashed #c0bcb4;
  border-radius: 4px;
  margin-right: 12px;
}
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #434243;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
  margin-right: 12px;
}

/* ===== Reform Problem (Check List) ===== */
.reform-problem {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-problem { padding: 60px 0; } }

.problem-row {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}
@media (max-width: 1023px) {
  .problem-row { grid-template-columns: 1fr; gap: 32px; }
}
.problem-row__image {
  aspect-ratio: 480 / 320;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
.problem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
@media (max-width: 599px) { .problem-list { grid-template-columns: 1fr; } }
.problem-list li {
  display: flex;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #434243;
}

.reform-problem__note {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: #8f8d86;
  margin: 48px 0 0;
}

/* ===== Reform Q&A ===== */
.reform-qa {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-qa { padding: 60px 0; } }

.reform-qa__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 1023px) {
  .reform-qa__grid { grid-template-columns: 1fr; }
}

.reform-qa-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.reform-qa-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #434243;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.reform-qa-card__q {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: #434243;
  margin: 0;
  line-height: 1.5;
}
.reform-qa-card__a {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.85;
  color: #434243;
  margin: 0;
}

.reform-qa__caption {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: #8f8d86;
  margin: 48px 0 0;
}

/* ===== Reform About ===== */
.reform-about {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-about { padding: 60px 0; } }

.reform-about__lead {
  display: flex;
  gap: 16px;
  margin: 48px auto;
  max-width: 1080px;
}
.reform-about__lead p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 2;
  color: #434243;
  margin: 0;
}
@media (max-width: 767px) {
  .reform-about__lead { flex-direction: column; align-items: flex-start; }
}

.reform-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 767px) { .reform-steps { grid-template-columns: 1fr; } }
.reform-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.reform-step__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f9f8f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.reform-step__text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: #434243;
  margin: 0;
}

.reform-about__conclusion {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #434243;
  margin: 48px 0 0;
}
@media (max-width: 767px) { .reform-about__conclusion { font-size: 17px; } }

/* ===== Factory ===== */
.reform-factory {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-factory { padding: 60px 0; } }

.factory-row {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
}
.factory-row__image {
  aspect-ratio: 560 / 380;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
.factory-row__text { display: flex; flex-direction: column; gap: 16px; }
.factory-row__text h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #434243;
  margin: 0;
}
.factory-row__text p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 2;
  color: #434243;
  margin: 0;
}
@media (max-width: 1023px) {
  .factory-row { grid-template-columns: 1fr; gap: 32px; }
  .factory-row__text h3 { font-size: 22px; }
}

/* ===== Before / After ===== */
.reform-ba {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-ba { padding: 60px 0; } }

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 599px) { .ba-grid { grid-template-columns: 1fr; } }

.ba-item { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ba-item figcaption {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: #434243;
  text-align: center;
  margin: 0;
}
.ba-item__image {
  aspect-ratio: 628 / 360;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}

.reform-ba__video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 48px auto 0;
  max-width: 480px;
  padding: 24px;
  background: linear-gradient(135deg, #4a4943 0%, #2a2926 100%);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-zen);
  font-size: 15px;
  letter-spacing: 0.08em;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.reform-ba__video:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
.reform-ba__video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.6);
  font-size: 16px;
  padding-left: 3px;
}

/* ===== Points (3 alternating rows) ===== */
.reform-points {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-points { padding: 60px 0; } }

.point-row {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
}
.point-row:first-of-type { margin-top: 56px; }
.point-row--reverse { grid-template-columns: 1fr 560px; }
.point-row--reverse .point-row__image { order: 2; }
.point-row--reverse .point-row__text { order: 1; }

.point-row__image {
  aspect-ratio: 560 / 320;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
}
.point-row__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.point-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #434243;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
}
.point-row__text h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #434243;
  margin: 8px 0 4px;
}
.point-row__text p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: #434243;
  margin: 0;
}
.point-row__notice {
  font-size: 12px !important;
  color: #8f8d86 !important;
  margin-top: 4px !important;
}
@media (max-width: 1023px) {
  .point-row,
  .point-row--reverse { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .point-row--reverse .point-row__image { order: 0; }
  .point-row--reverse .point-row__text { order: 0; }
  .point-row__text h3 { font-size: 18px; }
}

/* ===== Recommend block ===== */
.recommend-block {
  max-width: 920px;
  margin: 56px auto 32px;
  padding: 32px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
}
.recommend-block__title {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #8f8d86;
  margin: 0 0 16px;
}
.chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.chip-list li {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border: 1px solid #c0bcb4;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #434243;
  background: #fff;
}
.recommend-block__sub {
  font-family: var(--font-serif);
  font-size: 13px;
  color: #8f8d86;
  margin: 16px 0 0;
}

/* Course header (店頭受付コース banner) */
.course-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px auto 32px;
  padding: 16px 32px;
  max-width: 480px;
  background: #434243;
  border-radius: 999px;
  color: #fff;
}
.course-header__icon {
  display: inline-flex;
  width: 24px; height: 24px;
}
.course-header__icon svg { width: 100%; height: 100%; }
.course-header h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  margin: 0;
}

/* ===== Courses ===== */
.reform-courses {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-courses { padding: 60px 0; } }

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .course-grid { grid-template-columns: 1fr; } }

.course-card {
  background: #f9f8f5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.course-card__image {
  aspect-ratio: 400 / 200;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.course-card__body {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.course-card__badge {
  align-self: flex-start;
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid #434243;
  border-radius: 999px;
  font-family: var(--font-zen);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #434243;
  margin-bottom: 4px;
}
.course-card__badge--popular { background: #434243; color: #fff; }
.course-card__lead {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8f8d86;
  margin: 0;
}
.course-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #434243;
  margin: 0;
}
.course-card__desc {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.85;
  color: #434243;
  margin: 8px 0 0;
  flex: 1;
}
.course-card__prices {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid #cfccc2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.course-card__prices > div {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 13px;
}
.course-card__prices dt { color: #8f8d86; margin: 0; }
.course-card__prices dd { color: #434243; font-weight: 500; margin: 0; }

.reform-courses__apply {
  text-align: center;
  margin-top: 48px;
}

/* ===== Process ===== */
.reform-process {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-process { padding: 60px 0; } }

.reform-process__heading {
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: #434243;
  margin: 48px 0 32px;
}

.process-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 1023px) { .process-features { grid-template-columns: 1fr; } }

.process-feature {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.process-feature h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: #434243;
  margin: 0;
}
.process-feature p {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.85;
  color: #434243;
  margin: 0;
}

.process-divider {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.16em;
  color: #434243;
  margin: 48px 0 32px;
}

.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1023px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .process-steps { grid-template-columns: 1fr; } }

.process-step {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.process-step__image {
  aspect-ratio: 400 / 200;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.process-step__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.process-step__num {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: #8f8d86;
}
.process-step__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: #434243;
  margin: 0;
  border-bottom: 1px solid #cfccc2;
  padding-bottom: 12px;
}
.process-step__text {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.85;
  color: #434243;
  margin: 4px 0 0;
}

.reform-process__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 960px;
  margin: 48px auto 0;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: #434243;
}
@media (max-width: 767px) {
  .reform-process__footer { flex-direction: column; align-items: flex-start; }
}

/* ===== Apply Steps (horizontal flow with arrows) ===== */
.reform-flow {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .reform-flow { padding: 60px 0; } }

.apply-steps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  justify-content: center;
}
.apply-step {
  flex: 1 1 0;
  min-width: 180px;
  background: #f9f8f5;
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  align-items: center;
}
.apply-step__num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.16em;
  color: #fff;
  background: #434243;
  border-radius: 50%;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.apply-step h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #434243;
  margin: 0;
}
.apply-step p {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.7;
  color: #434243;
  margin: 0;
}
.apply-step__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: #c0bcb4;
  list-style: none;
}
@media (max-width: 1023px) {
  .apply-steps { flex-direction: column; }
  .apply-step__arrow { transform: rotate(90deg); justify-content: center; }
  .apply-step { width: 100%; }
}

.reform-flow__cta {
  text-align: center;
  margin-top: 48px;
}

/* ===== Cleaning Feature ===== */
.cleaning-feature {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .cleaning-feature { padding: 60px 0; } }

/* ===== Cleaning Worries ===== */
.cleaning-worries {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .cleaning-worries { padding: 60px 0; } }

.worries-list {
  list-style: none;
  margin: 56px auto 0;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.worries-list li {
  display: flex;
  align-items: center;
  padding: 20px 28px;
  background: #fff;
  border-radius: 12px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: #434243;
}
@media (max-width: 599px) {
  .worries-list li { padding: 16px 20px; font-size: 14px; }
}

/* ===== Cleaning Points ===== */
.cleaning-points {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .cleaning-points { padding: 60px 0; } }

.cleaning-points__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
@media (max-width: 1023px) { .cleaning-points__grid { grid-template-columns: 1fr; } }

.cleaning-point-card {
  background: #f9f8f5;
  border-radius: 16px;
  overflow: hidden;
}
.cleaning-point-card__image {
  aspect-ratio: 624 / 320;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cleaning-point-card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cleaning-point-card__num {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #8f8d86;
}
.cleaning-point-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #434243;
  margin: 0;
}
.cleaning-point-card__text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: #434243;
  margin: 8px 0 0;
}
@media (max-width: 767px) {
  .cleaning-point-card__title { font-size: 18px; }
}

/* ===== Cleaning Flow (uses .apply-steps) ===== */
.cleaning-flow {
  background: #f9f8f5;
  padding: 100px 0;
}
@media (max-width: 1023px) { .cleaning-flow { padding: 60px 0; } }

.cleaning-flow .apply-step { background: #fff; }

.cleaning-flow__video {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 48px auto 0;
  max-width: 480px;
  padding: 24px;
  background: linear-gradient(135deg, #4a4943 0%, #2a2926 100%);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-zen);
  font-size: 15px;
  letter-spacing: 0.08em;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.cleaning-flow__video:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
.cleaning-flow__video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.6);
  font-size: 16px;
  padding-left: 3px;
}

/* ===== Cleaning Trivia ===== */
.cleaning-trivia {
  background: #fff;
  padding: 100px 0;
}
@media (max-width: 1023px) { .cleaning-trivia { padding: 60px 0; } }

.trivia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 1023px) { .trivia-grid { grid-template-columns: 1fr; } }

.trivia-card {
  background: #f9f8f5;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.trivia-card__image {
  aspect-ratio: 4 / 3;
  background-color: #d8d3c5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.trivia-card p {
  padding: 28px 24px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #434243;
  text-align: center;
  margin: 0;
  flex: 1;
}