@charset "utf-8";
/* ==========================================================================
   リア透過スクリーン・フィルム ハブ  /p_rear-projection/

   ・common.css が素のセレクタで余白と装飾を当ててくるため、.rp 配下でリセットしてから組む
   ・SCSSは稼働中CSSと同期していないので、このCSSを直接編集する
   ========================================================================== */

/* --- 0. トークン（オレンジはカテゴリCTA専用。構造色は濃紺） --- */
.rp {
  --rp-brand: #ff4f01;
  --rp-brand-d: #d93f00;
  --rp-navy: #1f3a5f;
  --rp-navy-d: #16293f;
  --rp-navy-s: #eef2f7;
  --rp-ink: #1a1a1a;
  --rp-mute: #5b6472;
  --rp-line: #dfe3e8;
  --rp-soft: #f5f6f8;
  --rp-r: 8px;

  margin: 0 0 50px;
  color: var(--rp-ink);
  font-size: 16px;
  line-height: 1.85;
}

/* --- 1. リセット（共通CSSの素のセレクタを打ち消す） --- */
.rp *,
.rp *::before,
.rp *::after {
  box-sizing: border-box;
}

.rp h1,
.rp h2,
.rp h3,
.rp p,
.rp ul,
.rp li,
.rp figure,
.rp figcaption,
.rp section,
.rp details,
.rp summary,
.rp b,
.rp em,
.rp span {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  list-style: none;
  text-indent: 0;
}

.rp li::before,
.rp li::after,
.rp h2::before,
.rp h2::after,
.rp h3::before,
.rp h3::after {
  content: none;
  display: none;
}

.rp img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.rp a {
  color: inherit;
  text-decoration: none;
}

.rp b,
.rp strong {
  font-weight: 700;
}

.rp summary {
  display: block;
  cursor: pointer;
  list-style: none;
}

.rp summary::-webkit-details-marker {
  display: none;
}

.rp a:focus-visible,
.rp summary:focus-visible {
  outline: 3px solid var(--rp-brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.rp .rp-i {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  vertical-align: -.15em;
}

/* --- 2. 導入 --- */
.rp .rp-intro__banner img {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.rp .rp-intro__lead {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.8;
}

/* --- 3. セクションと見出し --- */
.rp .rp-sec {
  margin-top: 48px;
}

.rp .rp-sec--main {
  margin-top: 32px;
}

.rp .rp-h2 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--rp-navy);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rp-navy);
}

.rp .rp-sec--main .rp-h2 {
  font-size: 25px;
}

/* --- 4. カテゴリ入口（2カード）--- */
.rp .rp-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.rp .rp-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  overflow: hidden;
  background: #fff;
}

.rp .rp-cat:hover {
  border-color: var(--rp-navy);
}

/* CTAリンクをカード全面に広げる。入れ子を避けるため画像側は <a> にしない */
.rp .rp-cat__cta a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rp .rp-cat:focus-within {
  outline: 3px solid var(--rp-navy);
  outline-offset: 2px;
}

.rp .rp-cat__cta a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

.rp .rp-cat__media {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rp-soft);
}

/* 絶対配置。flex項目のままだと min-height:auto と食い合って2カードで高さがずれる */
.rp .rp-cat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp .rp-cat__media--contain img {
  object-fit: contain;
  padding: 8px;
  background: #fff;
}

.rp .rp-cat__body {
  flex: 1 1 auto;
  padding: 16px 18px 0;
}

.rp .rp-cat__axis {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /* カード全面のリンクの上に乗るので、クリックを食わせない */
  pointer-events: none;
  padding: 7px 14px;
  border-radius: 0 0 var(--rp-r) 0;
  background: var(--rp-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.rp .rp-cat__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.rp .rp-cat__desc {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.8;
}

.rp .rp-cat__use {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--rp-mute);
}

.rp .rp-cat__cta {
  margin-top: auto;
  padding: 16px 18px 18px;
}

.rp .rp-cat__cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: var(--rp-r);
  background: var(--rp-brand);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.rp .rp-cat:hover .rp-cat__cta a {
  background: var(--rp-brand-d);
}

.rp .rp-keynote {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 4px solid var(--rp-navy);
  background: var(--rp-navy-s);
  font-size: 15px;
  line-height: 1.8;
}

.rp .rp-keynote b {
  font-weight: 700;
}

/* --- 5. 仕組み図と、設置前の確認 --- */
.rp .rp-fig {
  margin-top: 32px;
  margin-bottom: 36px;
}

.rp .rp-checkitems {
  margin-top: 26px;
}

.rp .rp-checkitems__item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.rp .rp-checkitems__item + .rp-checkitems__item {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rp-line);
}

/* 図中の焼き込み文字が読める下限。これ以上は縮めない */
.rp .rp-checkitems__fig {
  flex: 0 0 330px;
  width: 330px;
}

/* 縦長の図だけ突出しないよう、高さで頭を揃える */
.rp .rp-checkitems__fig img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 235px;
  height: auto;
  margin: 0 auto;
}

.rp .rp-checkitems__body {
  flex: 1 1 auto;
  min-width: 0;
}

.rp .rp-checkitems h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rp-navy);
}

/* .rp-checkitems__fig も p 要素なので、本文側だけに当てる */
.rp .rp-checkitems__body p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.85;
}

/* --- 6. 開閉ブロック --- */
.rp .rp-fold {
  margin-top: 12px;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  overflow: hidden;
  background: #fff;
}

.rp .rp-fold > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rp-navy);
}

.rp .rp-fold > summary:hover {
  background: var(--rp-soft);
}

.rp .rp-fold > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--rp-navy);
  border-bottom: 2px solid var(--rp-navy);
  transform: translateY(-2px) rotate(45deg);
}

.rp .rp-fold[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.rp .rp-fold[open] > summary {
  border-bottom: 1px solid var(--rp-line);
}

.rp .rp-fold__body {
  padding: 14px 16px;
}

.rp .rp-fold__body p {
  margin-top: 0;
  font-size: 15px;
  line-height: 1.85;
}

/* --- 7. サンプル案内モジュール（.rp の外。見た目は parts_sample_rear.css） --- */
.p-rear-projection .sample {
  margin-top: 0;
  margin-bottom: 45px;
}

/* --- 8. 末尾のカテゴリ入口（冒頭の2カードの縮小版） ---
   ここは再確認の受け皿なので、オレンジのベタは使わず枠だけで見せる。 */
.rp .rp-tail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.rp .rp-tail__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--rp-line);
  border-radius: var(--rp-r);
  background: #fff;
}

.rp .rp-tail__item:hover {
  border-color: var(--rp-navy);
  background: var(--rp-navy-s);
}

.rp .rp-tail__media {
  position: relative;
  flex: none;
  width: 150px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--rp-soft);
}

.rp .rp-tail__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp .rp-tail__media--contain img {
  object-fit: contain;
  padding: 4px;
  background: #fff;
}

.rp .rp-tail__body {
  flex: 1 1 auto;
  min-width: 0;
}

.rp .rp-tail__axis {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rp-mute);
}

.rp .rp-tail__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rp-navy);
}

/* --- ハブページ共通パーツ（.rp の外側。p_electric-screen から複製） --- */
#container .other-link .main-link-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

#container .other-link .other-link__ttl {
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: normal;
  text-align: center;
}

#container .other-link .main-link-wrap .box-title {
  font-size: .8rem;
  margin-bottom: 5px;
}

.foot-common-nav-wrap {
  width: 100%;
  margin-bottom: 100px;
}

.foot-common-nav-wrap .foot-common-nav ul {
  grid-template-columns: 1fr 1fr 1fr;
}

.foot-common-nav-wrap .foot-common-nav ul:after {
  display: none;
}

/* ========================= media query : 767px 以下 ========================= */
@media screen and (max-width: 767px) {

  .rp {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .rp .rp-intro__ttl {
    margin-top: 14px;
    font-size: 22px;
  }

  .rp .rp-sec {
    margin-top: 36px;
  }

  .rp .rp-sec--main {
    margin-top: 26px;
  }

  .rp .rp-h2 {
    font-size: 19px;
  }

  .rp .rp-sec--main .rp-h2 {
    font-size: 21px;
  }

  /* SPは縦積み。2枚とも一画面に入るよう、写真を左に小さく置き、
     右に軸と本文、下にCTAという配置へ組み替える。 */
  .rp .rp-cats {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rp .rp-cat {
    display: grid;
    grid-template-columns: 124px 1fr;
    column-gap: 12px;
    padding: 12px;
  }

  /* 写真が小さくなり帯を載せられないので、軸は見出しの上に置く。
     ベタ塗りをやめて文字だけにし、画面内の色数も抑える。 */
  .rp .rp-cat__axis {
    position: static;
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--rp-navy);
    font-size: 13px;
  }

  .rp .rp-cat__media {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    border-radius: 4px;
  }

  .rp .rp-cat__media--contain img {
    padding: 4px;
  }

  .rp .rp-cat__body {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
  }

  .rp .rp-cat__name {
    font-size: 18px;
  }

  .rp .rp-cat__desc {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.7;
  }

  .rp .rp-cat__use {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
  }

  .rp .rp-cat__cta {
    grid-column: 1 / 3;
    grid-row: 3;
    margin-top: 0;
    padding: 12px 0 0;
  }

  .rp .rp-cat__cta a {
    min-height: 48px;
    font-size: 16px;
  }

  .rp .rp-keynote {
    padding: 12px 14px;
    font-size: 15px;
  }

  .rp .rp-tail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rp .rp-tail__media {
    width: 120px;
  }

  .rp .rp-tail__name {
    font-size: 16px;
  }

  .rp .rp-checkitems h3 {
    font-size: 17px;
  }

  .rp .rp-checkitems__item {
    display: block;
  }

  .rp .rp-checkitems__fig {
    flex: none;
    width: 100%;
    margin-bottom: 12px;
  }

  .rp .rp-checkitems__fig img {
    width: 100%;
    max-height: none;
  }

  .p-rear-projection .sample {
    margin-bottom: 35px;
  }

  /* --- 共通パーツ --- */
  #container .other-link .main-link-wrap {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-common-nav-wrap .foot-common-nav {
    margin-bottom: 60px;
  }

  .foot-common-nav-wrap .foot-common-nav ul {
    grid-template-columns: 1fr 1fr;
  }

  .foot-common-nav-wrap .foot-common-nav ul li {
    width: 100%;
  }

}