/* ============================================================
   IPS（page-ips.php）
   トップと同じトンマナ。top2.css のトークンを利用する。
   このファイルは ipx- 名前空間のみを定義する。
   ※ ips- は main.css が .ips-lead 等で既に使っているため衝突する。使わないこと。
   ============================================================ */

/* 会社案内・取扱商品と同じ 1200px。ここだけ 980px だったため、
   ページを行き来したときに IPS だけ狭く見えていた。
   本文の可読性は .ipx-lead 側の max-width: 40em で担保しているので、
   コンテナを広げても文章の行長は変わらない。 */
.ipx-inner { max-width: var(--t2-max); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 3rem); }

/* ---------- リード ---------- */
.ipx-lead {
  padding: clamp(2.6rem, 5vw, 4.4rem) 0 clamp(2rem, 4vw, 3.2rem);
  background: #f9f7f3;
  text-align: center;
}
.ipx-lead__en {
  font-family: 'D-DIN', sans-serif; font-weight: 700; font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .06em;
  color: var(--t2-green); opacity: .8; margin-bottom: .7rem;
}
.ipx-lead__catch {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem); line-height: 1.5;
  color: var(--t2-text); margin-bottom: 1.4rem;
}
.ipx-lead__body {
  font-size: 1.02rem; line-height: 2.1; color: var(--t2-text-s);
  max-width: 40em; margin: 0 auto .9rem;
  text-align: left;
  /* 「イシモト・パ／ッケージング」のようにカタカナ語の途中で折れるのを防ぐ。
     未対応ブラウザでは無視されるだけなので上乗せとして入れている */
  word-break: auto-phrase;
  text-wrap: pretty;
}
.ipx-lead__body:last-child { margin-bottom: 0; }

/* ---------- 5サービス ---------- */
.ipx-services { padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.ipx-bridge {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); line-height: 1.85;
  color: var(--t2-green-d); text-align: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  word-break: auto-phrase;
  text-wrap: balance;   /* 改行が消えたときも行長が偏らないように */
}

/* 目次 */
.ipx-nav {
  list-style: none; margin: 0 0 clamp(2.4rem, 5vw, 4rem); padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem;
}
.ipx-nav a {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  height: 100%; text-align: center;
  padding: .9rem .6rem;
  background: #fff; border: 1.5px solid var(--t2-green-l); border-radius: 12px;
  transition: border-color .2s, background .2s, transform .2s var(--t2-ease);
}
.ipx-nav a:hover { border-color: var(--t2-green); background: #f9f7f3; transform: translateY(-3px); }
.ipx-nav__no {
  font-family: 'D-DIN', sans-serif; font-weight: 700; font-style: italic;
  font-size: 1.4rem; line-height: 1; color: var(--t2-green); opacity: .4;
}
.ipx-nav__name { font-size: .82rem; font-weight: 700; line-height: 1.5; color: var(--t2-text); }

/* 各サービス */
.ipx-item {
  scroll-margin-top: 90px;      /* 追従ヘッダーに隠れないよう、アンカー着地位置をずらす */
  padding-top: clamp(1.8rem, 3.4vw, 2.6rem);
}
.ipx-item + .ipx-item {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  border-top: 1px solid var(--t2-green-l);
}
.ipx-item__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.ipx-item__no {
  font-family: 'D-DIN', sans-serif; font-weight: 700; font-style: italic;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: .85;
  color: var(--t2-green); opacity: .28; flex: none;
}
.ipx-item__en {
  font-family: 'D-DIN', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .1em; color: var(--t2-orange);
  margin-bottom: .2rem;
}
.ipx-item__name {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 900;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem); line-height: 1.45; color: var(--t2-text);
}

/* 写真と本文の2カラム。奇数番は左右反転して単調さを避ける */
.ipx-item__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
.ipx-item--rev .ipx-item__cols > .ipx-item__media { order: 2; }
/* 合成写真を3分割したコラージュ。上に横長1枚、下に正方形2枚。
   横長1枚だけだと縦に長い本文との高さ差が空白として目立つため */
.ipx-item__media {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  align-content: start;
}
.ipx-shot {
  margin: 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(70,55,25,.13);
  background: #f2efe9;
}
.ipx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipx-shot--a { grid-column: 1 / -1; aspect-ratio: 16/9; }
.ipx-shot--b, .ipx-shot--c { aspect-ratio: 1; }
.ipx-item__catch {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(1.02rem, 2.1vw, 1.18rem); line-height: 1.8;
  color: var(--t2-green-d); margin-bottom: .8rem;
  padding-left: .85rem; border-left: 4px solid var(--t2-green);
  word-break: auto-phrase;
}
.ipx-item__body { font-size: .98rem; line-height: 2; color: var(--t2-text-s); word-break: auto-phrase; }
.ipx-item__body + .ipx-item__body { margin-top: .8rem; }

/* 認証バッジ */
.ipx-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 700; color: var(--t2-green-d);
  background: var(--t2-green-l); border-radius: 999px;
  padding: .35rem .85rem; margin-bottom: .9rem;
}
.ipx-badge svg { width: 15px; height: 15px; flex: none; }

/* 取扱例・対応範囲のタグ */
.ipx-tags {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.ipx-tags li {
  font-size: .84rem; line-height: 1.5; color: var(--t2-text);
  background: #f9f7f3; border: 1px solid var(--t2-green-l);
  border-radius: 999px; padding: .3rem .8rem;
}

/* キャッチ内の強調（<em> で囲んだ部分に蛍光ペン風のマーカー） */
.ipx-item__catch em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(232,118,42,.32) 62%);
  padding: 0 .06em;
}

/* ポイント（本文から抜き出した3項目） */
.ipx-points {
  list-style: none; margin: 0 0 clamp(1.4rem, 2.8vw, 2rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
}
.ipx-points li {
  background: #f9f7f3; border-radius: 12px;
  padding: 1.1rem 1.1rem 1.2rem;
  border-top: 3px solid var(--t2-green-l);
}
.ipx-points__title {
  font-size: .96rem; font-weight: 700; color: var(--t2-green-d);
  line-height: 1.6; margin-bottom: .4rem;
}
.ipx-points__desc { font-size: .87rem; line-height: 1.85; color: var(--t2-text-s); }

/* 進め方のステップ */
.ipx-steps {
  list-style: none; margin: 0 0 clamp(1.4rem, 2.8vw, 2rem); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem;
  counter-reset: ipxstep;
}
.ipx-steps li {
  position: relative;
  background: #f9f7f3; border-radius: 12px; padding: 1rem 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .4rem;
}
/* 次のステップへの矢印 */
.ipx-steps li:not(:last-child)::after {
  content: ''; position: absolute; right: -.55rem; top: 50%;
  width: 0; height: 0; transform: translateY(-50%);
  border-left: 7px solid var(--t2-green-l);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ipx-steps__no {
  font-family: 'D-DIN', sans-serif; font-weight: 700; font-style: italic;
  font-size: 1.3rem; line-height: 1; color: var(--t2-green); opacity: .45;
}
.ipx-steps__text { font-size: .88rem; line-height: 1.7; font-weight: 700; color: var(--t2-text); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 780px) {
  .ipx-nav { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ipx-item__cols { grid-template-columns: 1fr; }
  .ipx-item--rev .ipx-item__cols > .ipx-item__media { order: 0; }
  .ipx-points { grid-template-columns: 1fr; }
  .ipx-steps { grid-template-columns: repeat(2, 1fr); }
  /* 2列に折れると横矢印が意味を成さないので消す */
  .ipx-steps li:not(:last-child)::after { display: none; }
}
@media (max-width: 600px) {
  .ipx-steps { grid-template-columns: 1fr; }
  .ipx-nav { grid-template-columns: 1fr; gap: .5rem; }
  /* 1列のときは番号と名前を横並びにして高さを抑える */
  .ipx-nav a { flex-direction: row; justify-content: flex-start; gap: .7rem; text-align: left; padding: .7rem .9rem; }
  .ipx-nav__no { font-size: 1.15rem; }
  .ipx-item__head { gap: .7rem; }
  .ipx-item__catch { padding-left: .7rem; border-left-width: 3px; }
}

/* ---------- ハブ図（中心のIPSを5サービスが公転） ---------- */
.ipx-hub { max-width: 620px; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.ipx-hub-svg { width: 100%; height: auto; display: block; }
.ipx-hub-svg a { cursor: pointer; }
.ipx-hub-svg a:hover circle[fill="white"],
.ipx-hub-svg a:focus-visible circle[fill="white"] { stroke: var(--t2-green); stroke-width: 2.5; }
.ipx-hub-svg a:focus-visible { outline: none; }

/* PCでの意図的な改行。狭い画面では消して自然に流す */
@media (max-width: 780px) {
  .ipx-br-pc { display: none; }
  /* 図は文字が小さくなりすぎるので隠し、下の目次に任せる */
  .ipx-hub { display: none; }
}
@media (min-width: 781px) {
  /* 図がナビを兼ねるので、PCでは文字の目次は出さない */
  .ipx-nav { display: none; }
}

/* サービス名の直下に出る定義文（旧サイトでは見出し画像に焼き込まれていた文言） */
.ipx-item__tagline {
  margin-top: .35rem;
  font-size: .92rem; line-height: 1.7; color: var(--t2-text-s);
  word-break: auto-phrase;
}