@charset "utf-8";
/* リサイクルOPPテープ No.3061RC 特集ページ専用CSS
   数値はFigma（SufQhBZlilh08XBUiws62D）の実測値。PC＝6357:177（本文幅1000）／SP＝6401:3342（幅524・本文504）
   サイト共通CSSは html{font-size:62.5%} のため 1rem=10px。
   スタイルはすべて .rc3061 の中に閉じ、ヘッダー・サイドバー・フッター等の共通部分には当てない。
   モバイルファースト：既定値＝SP、PCは min-width:768px（サイト共通の .pc/.sp 切替と同じ境目）の中で上書きする。 */

.rc3061 {
  --rc3061-text: #333;
  --rc3061-blue: #0050b4;
  --rc3061-link-blue: #0068b7;
  --rc3061-navy: #004c8c;
  --rc3061-red: #c00;
  --rc3061-cv-red: #cf1225;
  --rc3061-pale-blue: #f2f6ff;
  --rc3061-line: #dadfeb;
  --rc3061-gray-bg: #f2f2f2;
  --rc3061-bar-gray: #bfbfbf;
  /* CO2グラフの基準長さ（当社従来OPPテープ＝100） */
  --rc3061-bar-base: 19.3rem;
  padding-bottom: 7rem;
  color: var(--rc3061-text);
}

/* サイト共通CSSの p{margin:20px 0 0} を打ち消す（余白はgap等でFigmaどおりに付ける）
   ※このページに p を足したら、ここにクラスを追加する */
.rc3061-txt,
.rc3061-co2__headline,
.rc3061-co2__chart-title,
.rc3061-co2__name,
.rc3061-co2__reduction,
.rc3061-co2__note,
.rc3061-cost__item-text,
.rc3061-summary__lead,
.rc3061-summary__closing,
.rc3061-cv__title {
  margin: 0;
}

/* ===== 共通 ===== */
.rc3061-sec {
  max-width: 100rem;
  margin: 7rem auto 0;
}
.rc3061-sec__body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 見出し（左に青いバー） */
.rc3061-hdg {
  padding-left: 2rem;
  border-left: 0.6rem solid var(--rc3061-blue);
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--rc3061-blue);
}
.rc3061-hdg.m--small {
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  font-size: 2rem;
}
/* 見出しの改行はPCだけ（SPは自然な折り返し） */
.rc3061-hdg__br {
  display: none;
}

.rc3061-txt {
  font-size: 1.6rem;
  line-height: 1.5;
}
.rc3061-txt.m--loose {
  line-height: 1.8;
}
/* 段落の間に1行分のアキ（原稿の空行） */
.rc3061-prose > .rc3061-txt + .rc3061-txt {
  margin-top: 1.5em;
}

/* 中黒付きの箇条書き（原稿の「・」をCSSで付ける） */
.rc3061-dots {
  font-size: 1.6rem;
  line-height: 1.5;
}
.rc3061-dots__item::before {
  content: "・";
}

/* 赤いボタン（製品詳細を確認する）
   Figmaの白っぽい縁（4px #f5f8fa）は白地では赤が内側に縮んで見えるため付けない。
   縁の分を内側の余白に足して、ボタンの高さはFigmaと同じにする */
.rc3061-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  width: 100%;
  padding: 2rem;
  border-radius: 0.4rem;
  background: var(--rc3061-red);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
}
.rc3061-btn::after {
  content: "";
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/3061rc/icon_arrow.svg) no-repeat center / contain;
  transition: transform 0.25s ease;
}
/* サイト共通の a:hover{opacity:.7} を打ち消し、矢印の動きで反応させる */
.rc3061-btn:hover {
  opacity: 1;
  color: #fff;
}
.rc3061-btn:hover::after {
  transform: translateX(0.4rem);
}

/* ===== MV ===== */
.rc3061-mv {
  padding-top: 2rem;
}
.rc3061-mv__img {
  display: block;
  width: 100%;
  height: auto;
}
.rc3061-mv__img.m--pc {
  display: none;
}

/* ===== sec01 課題提起 ===== */
.rc3061-issue__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}
.rc3061-issue__voices {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--rc3061-gray-bg);
  line-height: 1.8;
}

/* ===== sec02 PCRとPIRの違い ===== */
.rc3061-recycle__types {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rc3061-recycle__type {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2rem;
  background: var(--rc3061-pale-blue);
}
.rc3061-recycle__type-name {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--rc3061-blue);
}
.rc3061-recycle__table {
  width: 100%;
  border: 1px solid var(--rc3061-line);
  border-collapse: collapse;
  table-layout: fixed;
  background: #fff;
}
.rc3061-recycle__cell {
  padding: 1.2rem 0.8rem;
  border: 1px solid var(--rc3061-line);
  font-size: 1.4rem;
  line-height: 1.6;
  text-align: left;
  vertical-align: middle;
}
.rc3061-recycle__cell.m--head {
  background: var(--rc3061-blue);
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #fff;
}
.rc3061-recycle__cell.m--term {
  background: var(--rc3061-pale-blue);
  font-weight: bold;
  color: var(--rc3061-blue);
}
.rc3061-recycle__cell.m--product {
  font-weight: bold;
  color: var(--rc3061-blue);
}

/* ===== sec03 新発売 No.3061RC ===== */
.rc3061-product__detail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rc3061-product__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 504 / 369;
  border-radius: 1rem;
  object-fit: cover;
}
.rc3061-product__spec {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}
.rc3061-product__spec-title {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7;
  color: var(--rc3061-blue);
}
.rc3061-product__spec-box {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  background: var(--rc3061-pale-blue);
}
.rc3061-product__spec-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.rc3061-product__spec-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.7;
}
.rc3061-product__spec-item::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--rc3061-link-blue);
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
}

/* ===== sec04 CO2約49%削減 ===== */
.rc3061-co2__figure {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.rc3061-co2__panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background: var(--rc3061-blue);
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.rc3061-co2__headline {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.rc3061-co2__rate {
  font-size: 5.6rem;
  line-height: 1.2;
}
.rc3061-co2__rate-label {
  font-size: 2rem;
  line-height: 1.5;
}
.rc3061-co2__chart {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem;
  border: 1px solid var(--rc3061-line);
  border-radius: 1.4rem;
  background: #fff;
  text-align: left;
}
.rc3061-co2__chart-title {
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.6;
  color: #666;
}
/* 名前とバーが1行に入らない幅では、バーを名前の下に回す（2本のバーの左端は常に揃う） */
.rc3061-co2__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
}
.rc3061-co2__name {
  flex: 1 1 auto;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--rc3061-text);
}
.rc3061-co2__track {
  display: flex;
  flex: 0 0 21rem;
  align-items: center;
  gap: 1.2rem;
}
.rc3061-co2__bar {
  flex-shrink: 0;
  width: var(--rc3061-bar-base);
  height: 2.8rem;
  border-radius: 0.4rem;
  background: var(--rc3061-bar-gray);
}
/* 比率を崩さないこと：No.3061RC は従来品（100）に対して 51（＝約49％削減） */
.rc3061-co2__row.m--rc .rc3061-co2__name,
.rc3061-co2__reduction {
  color: var(--rc3061-blue);
}
.rc3061-co2__row.m--rc .rc3061-co2__bar {
  width: calc(var(--rc3061-bar-base) * 51 / 100);
  background: var(--rc3061-blue);
}
.rc3061-co2__reduction {
  font-size: 1.8rem;
  line-height: 1.6;
  white-space: nowrap;
}
.rc3061-co2__note {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ===== sec05 環境対応とコストの両立 ===== */
.rc3061-cost__compare {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rc3061-cost__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--rc3061-line);
}
.rc3061-cost__item.m--featured {
  border: 0.4rem solid var(--rc3061-blue);
}
.rc3061-cost__item-name {
  padding: 1.6rem 2rem;
  background: var(--rc3061-pale-blue);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--rc3061-blue);
}
.rc3061-cost__item-material {
  font-size: 1.6rem;
}
.rc3061-cost__item-text {
  flex: 1;
  padding: 2rem;
  font-size: 1.6rem;
  line-height: 1.8;
}
.rc3061-cost__item-em {
  font-weight: bold;
  color: var(--rc3061-blue);
}
.rc3061-cost__target {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rc3061-cost__figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

/* ===== sec06 まとめ ===== */
.rc3061-summary__box {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2.4rem;
  border: 1px solid var(--rc3061-line);
  background: var(--rc3061-pale-blue);
}
.rc3061-summary__lead {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--rc3061-blue);
}
.rc3061-summary__features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.rc3061-summary__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
/* POINT番号と本文の間：Figmaは文字の上下を詰めた（垂直トリミング）状態で12px／PC24px。
   実装では詰めないため、行間の分（番号14px×0.25＋本文17px×0.25、PCは本文20px×0.25）を引いた値にして見た目を合わせる（2026/10/7 松永さん指摘） */
.rc3061-summary__point {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 2.1rem 1.7rem;
  border: 1px solid var(--rc3061-line);
  border-radius: 1.4rem;
  background: #fff;
  font-weight: bold;
  line-height: 1.5;
}
.rc3061-summary__point-num {
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--rc3061-blue);
}
.rc3061-summary__point-text {
  font-size: 1.7rem;
}
.rc3061-summary__closing {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* ===== CVボックス（サンプル等のお問合せ） ===== */
.rc3061-cv {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.6rem;
  padding: 2rem;
  border-radius: 1.4rem;
  background: var(--rc3061-navy);
  text-align: center;
  color: #fff;
}
.rc3061-cv__title {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.rc3061-cv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2.4rem;
  padding: 1.9rem 0.3rem;
  border: 0.3rem solid #fff;
  border-radius: 3.2rem;
  background: var(--rc3061-cv-red);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
}
.rc3061-cv__btn:hover {
  color: #fff;
}

/* ===== sec08・sec09 関連するコンテンツ／関連する製品 ===== */
.rc3061-related {
  padding: 2.4rem 2rem;
  background: var(--rc3061-pale-blue);
}
/* SPは1カラム（2026/10/6 松永さん指示。SPデザインの2カラムから変更） */
.rc3061-related__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.rc3061-related__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  height: 100%;
  padding: 1.6rem;
  border: 1px solid var(--rc3061-line);
  border-radius: 1.4rem;
  background: #fff;
  color: var(--rc3061-text);
  text-decoration: none;
}
.rc3061-related__label {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.5;
  color: var(--rc3061-blue);
}
.rc3061-related__title {
  font-size: 1.6rem;
  line-height: 1.8;
}

/* =====================================================================
   PC（768px以上）
   ===================================================================== */
@media screen and (min-width: 768px) {

  /* ===== 共通 ===== */
  .rc3061 {
    /* グラフの内幅が足りない幅では、内幅いっぱいまで縮める（比率51％は維持） */
    --rc3061-bar-base: min(42.9rem, 100cqi);
    padding-bottom: 8rem;
  }
  .rc3061-sec {
    margin-top: 8rem;
  }
  .rc3061-sec__body {
    gap: 3.2rem;
  }

  .rc3061-hdg {
    padding-left: 3.2rem;
    border-left-width: 0.8rem;
    font-size: 4rem;
  }
  .rc3061-hdg.m--small {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 2.8rem;
  }
  .rc3061-hdg__br {
    display: inline;
  }

  .rc3061-txt,
  .rc3061-txt.m--loose,
  .rc3061-dots {
    line-height: 1.7;
  }
  .rc3061-prose > .rc3061-txt + .rc3061-txt {
    margin-top: 1.7em;
  }

  .rc3061-btn {
    gap: 2rem;
    padding: 3.6rem;
    font-size: 2.4rem;
  }

  /* ===== MV ===== */
  .rc3061-mv__img.m--pc {
    display: block;
  }
  .rc3061-mv__img.m--sp {
    display: none;
  }

  /* ===== sec01 課題提起 ===== */
  .rc3061-issue__photo {
    border-radius: 1.2rem;
  }
  .rc3061-issue__voices {
    gap: 1.6rem;
    padding: 3.2rem;
    line-height: 1.7;
  }

  /* ===== sec02 PCRとPIRの違い ===== */
  .rc3061-recycle__types {
    gap: 3.2rem;
  }
  .rc3061-recycle__type {
    padding: 3.2rem;
  }
  .rc3061-recycle__type-name {
    font-size: 2.6rem;
  }
  .rc3061-recycle__cell {
    padding: 2rem 3.2rem;
    font-size: 1.6rem;
  }
  .rc3061-recycle__cell.m--head {
    font-size: 2rem;
  }

  /* ===== sec03 新発売 No.3061RC ===== */
  /* 右の水色ボックスの下端を、左の写真の下端に揃える（2026/10/6 松永さん指示） */
  .rc3061-product__detail {
    flex-direction: row;
    align-items: stretch;
    gap: 3.2rem;
  }
  /* 右側の文字量が増えても、写真の下端が水色ボックスの下端に揃うよう縦に伸ばす */
  /* 本文が1000pxより狭い幅では、写真と右カラムをデザインの幅（465:503）の比で縮める */
  .rc3061-product__photo {
    flex: 1 1 46.5rem;
    align-self: stretch;
    width: auto;
    min-width: 0;
    min-height: 34rem;
    aspect-ratio: auto;
    border-radius: 1.2rem;
  }
  .rc3061-product__spec {
    flex: 1 1 50.3rem;
    gap: 1.6rem;
  }
  .rc3061-product__spec-title {
    font-size: 2rem;
  }
  .rc3061-product__spec-box {
    flex: 1;
    justify-content: center;
    gap: 1.6rem;
    padding: 2.4rem 3.2rem;
  }
  .rc3061-product__spec-list {
    gap: 1.6rem;
  }

  /* ===== sec04 CO2約49%削減 ===== */
  .rc3061-co2__figure {
    width: 84.5rem;
    max-width: 100%;
  }
  .rc3061-co2__panel {
    gap: 3.2rem;
    padding: 4.4rem 4rem;
  }
  .rc3061-co2__headline {
    gap: 1.6rem;
  }
  .rc3061-co2__rate {
    font-size: 8.8rem;
  }
  .rc3061-co2__rate-label {
    font-size: 2.8rem;
  }
  .rc3061-co2__chart {
    container-type: inline-size;
    gap: 1.6rem;
    padding: 3.2rem 4rem;
    border-radius: 1.6rem;
  }
  .rc3061-co2__chart-title {
    font-size: 2.4rem;
  }
  .rc3061-co2__row {
    gap: 0.4rem 1.6rem;
  }
  /* グラフの内幅が足りるときは1行に並べる。62rem＝名前24rem＋余白1.6rem×2＋「約49％削減」約16rem＋青バー（残りの51％）が入る最小幅の目安
     Figmaは内幅683pxに名前240＋余白16＋バー429＝685pxで2pxはみ出しているため、バーは内幅に収まる長さまで縮める（比率51％は維持） */
  @container (min-width: 62rem) {
    .rc3061-co2__row {
      flex-wrap: nowrap;
    }
    .rc3061-co2__bar {
      --rc3061-bar-base: min(42.9rem, calc(100cqi - 25.6rem));
    }
  }
  .rc3061-co2__name {
    flex: 0 0 24rem;
    font-size: 2.4rem;
  }
  .rc3061-co2__track {
    flex: 0 1 auto;
    gap: 1.6rem;
  }
  .rc3061-co2__bar {
    height: 4rem;
  }
  .rc3061-co2__reduction {
    font-size: 2.6rem;
  }
  .rc3061-co2__note {
    line-height: 1.7;
  }

  /* ===== sec05 環境対応とコストの両立 ===== */
  .rc3061-cost__compare {
    flex-direction: row;
    gap: 3.2rem;
  }
  .rc3061-cost__item {
    flex: 1;
  }
  .rc3061-cost__item-name {
    padding: 2rem 3.2rem;
    font-size: 2.4rem;
  }
  .rc3061-cost__item-text {
    padding: 3.2rem;
    line-height: 1.7;
  }
  .rc3061-cost__target {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3.2rem;
  }
  .rc3061-cost__target-text {
    flex: 1 1 47.5rem;
    min-width: 0;
  }
  .rc3061-cost__figure {
    flex: 1 1 49.3rem;
    width: auto;
    min-width: 0;
    border-radius: 1.2rem;
  }

  /* ===== sec06 まとめ ===== */
  .rc3061-summary__box {
    gap: 4rem;
    padding: 6rem;
  }
  .rc3061-summary__lead {
    font-size: 2.8rem;
  }
  .rc3061-summary__features {
    gap: 3.2rem;
  }
  /* 5つのBOXは一番高いものに揃えて全部同じ高さにする（grid-auto-rows:1fr） */
  .rc3061-summary__points {
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.6rem;
  }
  .rc3061-summary__point {
    gap: 1.6rem;
    min-height: 14.6rem;
    padding: 3.3rem 2.5rem;
    border-radius: 1.6rem;
  }
  .rc3061-summary__point-text {
    font-size: 2rem;
  }

  /* ===== CVボックス（サンプル等のお問合せ） ===== */
  .rc3061-cv {
    align-items: center;
    gap: 2rem;
    padding: 3.6rem;
    border-radius: 1.6rem;
  }
  .rc3061-cv__title {
    font-size: 2.3rem;
    line-height: 1.4;
  }
  .rc3061-cv__btn {
    width: 26.2rem;
    height: 6rem;
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }

  /* ===== sec08・sec09 関連するコンテンツ／関連する製品 ===== */
  .rc3061-related {
    padding: 6rem 4rem;
  }
  .rc3061-related__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
  }
  .rc3061-related__link {
    min-height: 11.8rem;
    padding: 2rem 3.2rem;
    border-radius: 1.6rem;
  }
  .rc3061-related__title {
    line-height: 1.6;
  }
}