/* =============================================care.css
   お手入れページ専用スタイル
============================================= */

/* =====================ヒーロー
===================== */
.allbox {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	width:100%;
	padding-top: 20px;
}
.care-hero {
  padding: 28px 16px 24px;
  text-align: center;
  border-bottom: 3px solid #e0e0e0;
}

.care-hero__title {
  all: unset;
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}

.care-hero__lead {
  font-size: 13px;
  color: #777;
  margin: 0;line-height: 1.7;
}


/* =====================
   セクション共通
===================== */
.care-section {
  padding: 32px 16px 40px;
  background: #fff;
}

.care-section--alt {
  background: #faf7f5;
}

.care-section__header {
  border-bottom: 2px solid #333;
  margin-bottom: 24px;
  padding-bottom: 8px;
}

.care-section__title {
  all: unset;
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.05em;
}


/* =====================
   ブロック（動画＋テキスト）
===================== */
.care-block {
  margin-bottom: 40px;
}

.care-block__title {
  all: unset;
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  background: #CC4C92;
  padding: 8px 14px;
  margin-bottom: 16px;
  border-radius: 3px;
}

.care-block__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*動画エリア */
.care-block__video {
  width: 100%;
}

.care-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.care-video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* テキストエリア */
.care-block__text {
  width: 100%;
}


/* =====================
   チェックリスト
===================== */
.care-checklist {
  list-style: none !important;
  margin: 0 0 16px;
  padding: 0;
}

.care-checklist__item {
  position: relative;
  padding-left: 26px;
  font-size: 13px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 8px;
}

.care-checklist__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 7px;
  border-left: 2px solid #888;
  border-bottom: 2px solid #888;transform: rotate(-45deg);
}


/* =====================
   注意ボックス
===================== */
.care-caution-box {
  background: #fffbf0;
  border-left: 4px solid #f0c040;
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;margin-top: 12px;
}

.care-caution-box__text {
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.care-caution-box__label {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  background: #f0c040;
  color: #fff;
  padding: 1px 8px;
  border-radius: 3px;
  margin-right: 6px;
}

/* チェック項目 + 補足 セット */
.care-check-row {
  margin-bottom: 16px;padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.care-check-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/*補足文 */
.care-check-note {
  margin: 4px 0 0 26px; /* チェックマーク分だけ字下げ */
  font-size: 12px;
  color: #888;
  line-height: 1.7;
}
/* =====================
   アコーディオングループ
===================== */
.care-accordion-group {
  margin-top: 8px;
}
.repaircheck-unikawa-item {
border: 1px solid #000;
margin-bottom: 12px;
}


.repaircheck-unikawa-head {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
background: #fff;
border: none;
}


.repaircheck-unikawa-label {
font-size: 14px;
}


.repaircheck-unikawa-plus {
font-size: 20px;
color: #d38a91;
}


.repaircheck-unikawa-body {
display: none;
padding: 12px;
}


.repaircheck-unikawa-body.is-open {
display: block;
}


.repaircheck-unikawa-sub {
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}


.repaircheck-unikawa-list {
padding-left: 18px;
}


.repaircheck-unikawa-list li {
font-size: 13px;
margin-bottom: 4px;
}
.repaircost-unikawa-wrapper {
padding: 24px 16px 40px;
}


.repaircost-unikawa-title {
font-size: 18px;
text-align: center;
margin: 32px 0 20px;
}


.repaircost-unikawa-row {
  display: flex;
  flex-wrap: wrap;
}
.repaircost-unikawa-row.is-four .repaircost-unikawa-item {
  width: 25%;
}
.repaircost-unikawa-row.is-two {
  justify-content: center;
}

.repaircost-unikawa-row.is-two .repaircost-unikawa-item {
  width: 50%;
}
.repaircost-unikawa-item {
width: 25%;
text-align: center;
}


.repaircost-unikawa-circle {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}


.repaircost-unikawa-circle.is-blue {
background: #cfeaf4;
}


.repaircost-unikawa-circle.is-green {
background: #d7f0d9;
}


.repaircost-unikawa-text {
font-size: 12px;
line-height: 1.4;
 max-width: 120px;
  margin: 0 auto;
  text-align: center;
}


.repaircost-unikawa-text span {
font-size: 10px;
}


.repaircost-unikawa-cta {
margin: 40px 0 16px;
}


.repaircost-unikawa-cta .repaircost-unikawa-btn,
.repaircost-unikawa-cta .repaircost-unikawa-btn:visited,
.repaircost-unikawa-cta .repaircost-unikawa-btn:hover,
.repaircost-unikawa-cta .repaircost-unikawa-btn:active {
display: block;
background: #000;
color: #fff;
text-align: center;
padding: 16px 0;
font-size: 14px;
text-decoration: none;
}


.repaircost-unikawa-note {
text-align: center;
font-size: 12px;
margin-top: 12px;
}

.sv-repair-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  font-size: 14px;
}

/* ヘッダー */
.sv-repair-head {
  text-align: center;
  margin-bottom: 24px;
}

.sv-repair-head h1 {
  font-size: 22px;
  margin: 0 0 8px;
}

.sv-repair-head p {
  margin: 0;
}

/* タイトル */
.sv-repair-title {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 24px;
}

/* メイン */
.sv-repair-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 表 */
.sv-repair-table {
  width: 100%;
  border-collapse: collapse;
}

.sv-repair-table th,
.sv-repair-table td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

.sv-repair-table th {
  background: #000000;
}

/* 峨除 */
.sv-repair-imagebox {
  text-align: center;
}

.sv-repair-imagebox img {
  width: 100%;
  max-width: 180px;
}

.sv-repair-imagetext {
  font-size: 12px;
  margin-top: 8px;
}

/* 注・5・*/
.sv-repair-note {
  border: 1px solid #6fbf73;
  background: #f3fff4;
  padding: 16px;
  margin-top: 32px;
}

.sv-repair-productcell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sv-repair-productcell img{
  width: 100px;
}

.sv-repair-productimg {
  width: 100px;
  height: auto;
}

.sv-repair-productcode {
  display: inline-block;
  padding: 4px 8px;
  background: #f2f2f2;
  border: 1px solid #ccc;
  font-size: 12px;
  line-height: 1;
}
.sv-repair-productname {
  font-size: 14px;
  font-weight: bold;
}
.repaircheck-unikawa-check {
  position: relative;
  padding-left: 28px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.6;
}

.repaircheck-unikawa-check::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #333;
  text-align: center;
  font-size: 12px;
  line-height: 18px;
}

/* =====================
   CTA
===================== */
.care-cta {
  background: #333;
  padding: 32px 16px;
  text-align: center;
}

.care-cta__text {
  font-size: 13px;
  color: #ccc;
  margin: 0 0 16px;
  line-height: 1.7;
}

.care-cta__btn {
  text-decoration: none !important;
  color: #fff !important;
  display: inline-block;
  background: #c97a7a;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  letter-spacing: 0.05em;
  transition: background 0.2s;
}

.care-cta__btn:hover {
  background: #b56060;
}

/*=====================縦動画（ショート・9:16）
===================== */
.care-video-wrap--short {
  position: relative;
  width: 100%;
  max-width: 220px;      /* 幅の上限 */
  margin: 0 auto;
  padding-top: 0;/* padding-topは使わない */
  aspect-ratio: 9 / 16;  /* 縦長固定 */
}

.care-video-wrap--short iframe {
  position: static;
  width: 100%;
  height: 100%;display: block;
  border: none;
}

/* =====================
   通常横動画（16:9）
===================== */
.care-video-wrap--wide {
  position: relative;
  width: 100%;
  padding-top: 56.25%;/* スマホ用はそのまま */
}

.care-video-wrap--wide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =====================
   MANIPro 動画エリア
   縦動画＋横動画 横並び
===================== */
.care-block__videos {
  display: flex;
  flex-direction: column; /* スマホは縦積み */
  gap: 16px;
  width: 100%;
}
/* =====================ケビン・スリーク横並び
===================== */
.care-block__two-videos {
  display: flex;
  flex-direction: column;
  gap: 24px;
　 width: 100%;  /* ←追加 */
}

.care-block__two-videos__item {
  width: 100%;
}

/* =====================================================
   @media (min-width: 820px) PC対応
===================================================== */
@media (min-width: 820px) {
 .care-hero {
    padding: 20px 32px 40px;
  }

  .care-hero__title {
    font-size: 26px;
  }

  .care-section {
    padding: 48px 32px 56px;
  }

  .care-section__title {
    font-size: 22px;
  }

  /* ケビン・スリーク：動画を中央寄せ */
  .care-section:not(.care-section--alt) .care-block__video {
    max-width: 320px;
    margin: 0 auto;
  }

  .care-cta {
    padding: 48px 32px;
  }

  .care-cta__text {
    font-size: 14px;
  }

  .care-cta__btn {
    padding: 16px 48px;
    font-size: 15px;
  }

  .care-check-note {
    font-size: 12px;
  }

  /* MANIProだけ縦積みに上書き */
  .care-section--alt .care-block__inner {
    flex-direction: column;
  }

  /* MANIProの動画エリア（縦＋横）は横並び */
  .care-block__videos {
    flex-direction: row;
    align-items: flex-start;
  }

  .care-block__videos .care-video-wrap--short {
    width: 30%;
    max-width: none;
    margin: 0;
  }

  .care-block__videos .care-video-wrap--wide {
    flex: 1;
    min-width: 0;
    aspect-ratio: 16 / 9;
    padding-top: 0;
    height: auto;
  }
	  .care-block__two-videos {
    flex-direction: row;
    align-items: flex-start;
  }

  .care-block__two-videos__item {
    width: 50%;
  }
}