/* =============================================================================
   css-only.css
   ページ固有スタイル — SCSSコンパイル不要・直接編集してください
   共通スタイルは /yomimono/common/css/style.min.css に定義済み
   ※SP切り替えは共通CSSに合わせて850px
   ============================================================================= */

/* 各セクション：中身が短くても640pxで中央に置く */
.page-clothing-recycle .l-contents {
   width: 100%;
}

/* 見出し：すべて中央寄せ */
.page-clothing-recycle .l-contents h2.c-heading {
   text-align: center;
}

/* -----------------------------------------------------------------------------
   本文（段落の間隔）
   ----------------------------------------------------------------------------- */
.page-clothing-recycle .c-text {
   display: flex;
   flex-direction: column;
   gap: 16px;  /* PC */
}
/* 太字（共通CSSのリセットで打ち消されるため指定し直す） */
.page-clothing-recycle .c-paragraph strong {
   font-weight: 700;
}
/* 箇条書き：折り返したときに「・」の右からそろえる */
.page-clothing-recycle .c-text__list li {
   padding-left: 1em;
   text-indent: -1em;
}

/* 小見出し（洗濯してあれば…／送り先） */
.page-clothing-recycle .c-ok__title,
.page-clothing-recycle .c-point__title {
   color: #000;
   text-align: center;
   font-feature-settings: 'palt' on;
   font-size: 1.5rem;  /* 24px */
   font-weight: 700;
   line-height: 150%;
}

/* -----------------------------------------------------------------------------
   洗濯してあれば… 大丈夫！バッジ
   ----------------------------------------------------------------------------- */
.page-clothing-recycle .c-ok {
   display: flex;
   flex-direction: column;
   gap: 16px;  /* 見出しとバッジの間（送り先と同じ） */
   padding-bottom: 16px;  /* PC：下だけ少し広げる */
}
.page-clothing-recycle .c-ok__list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;  /* 2段目を中央に */
   gap: 16px 24px;
   width: 100%;
}
.page-clothing-recycle .c-ok__item {
   width: calc((100% - 48px) / 3);  /* PC：3列 */
   padding: 16px 0;
   border-radius: 8px;
   background-color: #EAF2E6;
   color: #323C2D;
   text-align: center;
   font-feature-settings: 'palt' on;
   font-size: 1rem;  /* 16px */
   font-weight: 700;
   line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   送り先（セクション2の中）
   ----------------------------------------------------------------------------- */
.page-clothing-recycle .c-address {
   width: 100%;  /* max-width:640pxは共通CSSで指定済み */
   box-sizing: border-box;  /* 余白・枠線込みで640pxに収める */
}
.page-clothing-recycle .c-address__text {
   font-size: 1rem;  /* 16px */
   line-height: 1.5;
}
.page-clothing-recycle .c-address__text + .c-address__text {
   margin-top: 10px;  /* PC */
}

/* -----------------------------------------------------------------------------
   ボタン（セクション3）
   ----------------------------------------------------------------------------- */
.page-clothing-recycle .section_03 .c-button {
   width: 100%;
   max-width: 493px;
   box-sizing: border-box;
}

/* =============================================================================
   SP（〜850px）
   ============================================================================= */
@media screen and (max-width: 850px) {

   /* 本文の段落間 */
   .page-clothing-recycle .c-text {
      gap: 8px;
   }

   /* 小見出し */
   .page-clothing-recycle .c-ok__title,
   .page-clothing-recycle .c-point__title {
      font-size: 1.25rem;  /* 20px */
   }

   /* 大丈夫！バッジ：2列 */
   .page-clothing-recycle .c-ok {
      padding-bottom: 24px;  /* SP：下だけ少し広げる */
   }
   .page-clothing-recycle .c-ok__list {
      gap: 16px;
   }
   .page-clothing-recycle .c-ok__item {
      width: calc((100% - 16px) / 2);
      line-height: 1.4;
   }

   /* 送り先：住所は箱の中で左揃え */
   .page-clothing-recycle .c-address__body {
      align-self: stretch;
   }
   .page-clothing-recycle .c-address__text + .c-address__text {
      margin-top: 16px;
   }
}