@charset "utf-8";
/* ============================================================
   シリーズ下層ページ共通スタイル
   series-*.html から読み込みます（他ページには影響しません）
   ============================================================ */

/* --- 汎用アイコン --- */
.ic{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-tc{stroke:#4FD1C5}

/* --- リード文 --- */
.sr-lead{margin:0;font-size:clamp(13.5px,1.4vw,15px);line-height:2.05;
  color:rgba(255,255,255,.8)}
.sr-lead + .sr-lead{margin-top:18px}
.sr-em{color:#4FD1C5}

/* --- 2カラム（説明＋図／写真） --- */
.sr-two{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:30px}
.sr-fig{margin:0;border:1px solid var(--line);border-radius:0;overflow:hidden;
  background:repeating-linear-gradient(45deg,#28303F,#28303F 10px,#232B39 10px,#232B39 20px)}
.sr-fig img{width:100%;height:auto;display:block;border-radius:0}

/* --- コンセプト図（放射型ダイアグラム） --- */
.sr-tri{position:relative;width:100%;max-width:470px;margin:0 auto}
.sr-tri-svg{width:100%;height:auto;display:block;overflow:visible}

.sr-ring{fill:none;stroke:url(#srG);stroke-width:1.6;opacity:.5;
  transform-box:view-box;transform-origin:360px 430px}
.sr-ring-a{stroke-dasharray:46 26;animation:srSpin 48s linear infinite}
.sr-ring-b{stroke-dasharray:3 15;stroke-width:1.2;opacity:.38;
  animation:srSpin 34s linear infinite reverse}
@keyframes srSpin{to{transform:rotate(360deg)}}

.sr-link line{stroke:#4FD1C5;stroke-width:1.6;stroke-dasharray:7 7;opacity:.85}
.sr-tdot{fill:#4FD1C5;opacity:.7}
.sr-core{fill:none;stroke:rgba(255,255,255,.26);stroke-width:1.4}

.sr-node{transform-box:fill-box;transform-origin:center;
  transition:transform .35s var(--ease)}
.sr-node:hover{transform:translateY(-6px)}
.sr-node-c{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.3);stroke-width:1.4;
  transition:stroke .3s,fill .3s}
.sr-node:hover .sr-node-c{stroke:#4FD1C5;fill:rgba(79,209,197,.06)}
.sr-tic{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.sr-drop{fill:#4FD1C5}
.sr-wave{fill:none;stroke:#4FD1C5;stroke-width:3;stroke-linecap:round;opacity:.8}

.sr-c-jp{fill:#fff;font-size:42px;font-weight:700;letter-spacing:.14em;text-anchor:middle}
.sr-c-en{fill:#4FD1C5;font-size:15px;font-weight:500;letter-spacing:.28em;text-anchor:middle}
.sr-n-jp{fill:#fff;font-size:32px;font-weight:700;letter-spacing:.2em;text-anchor:middle}
.sr-n-en{fill:#4FD1C5;font-size:13px;font-weight:500;letter-spacing:.26em;text-anchor:middle}

/* --- 特長カード（アイコン3点） --- */
.sr-point{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,22px);margin:30px 0 0;padding:0}
.sr-point li{border:1px solid var(--line);border-radius:0;
  background:rgba(255,255,255,.02);padding:clamp(22px,2.6vw,30px);text-align:center;
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.sr-point li:hover{border-color:rgba(79,209,197,.6);transform:translateY(-4px)}
.sr-point svg{display:block;width:48px;height:auto;margin:0 auto 18px}
.sr-point li:hover .ic{stroke:#4FD1C5}
.sr-point b{display:block;font-size:14.5px;letter-spacing:.04em;color:#fff}
.sr-point p{margin:10px 0 0;font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.7)}

/* --- 特長 / ご留意点 --- */
.sr-mk{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);margin-top:28px}
.sr-mk>div{border:1px solid var(--line);border-radius:0;
  background:rgba(255,255,255,.02);padding:clamp(22px,2.6vw,32px)}
.sr-mk>div.g{border-color:rgba(79,209,197,.4);
  background:linear-gradient(150deg,rgba(79,209,197,.07),rgba(124,108,255,.03))}
.sr-mk h4{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);
  font-size:13.5px;letter-spacing:.08em;color:#fff}
.sr-mk h4 i{font-style:normal;margin-right:8px;font-weight:700}
.sr-mk .g h4 i{color:#4FD1C5}
.sr-mk .b h4 i{color:rgba(255,255,255,.45)}
.sr-mk ul{list-style:none;margin:0;padding:0}
.sr-mk li{position:relative;padding-left:22px;margin-bottom:14px;
  font-size:13px;line-height:1.9;color:rgba(255,255,255,.78)}
.sr-mk li:last-child{margin-bottom:0}
.sr-mk li::before{position:absolute;left:0;top:0;font-size:12px}
.sr-mk .g li::before{content:"◎";color:#4FD1C5}
.sr-mk .b li::before{content:"△";color:rgba(255,255,255,.4)}

/* ============================================================
   商品一覧（PC・タブレット 横4列／角丸なし・余白なし）
   style.css の .ph（padding:14px / display:grid）を打ち消して、
   写真の周囲に枠や下地が出ないようにしています。
   ============================================================ */
.sr-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,24px);margin:34px 0 0;padding:0}
.sr-grid li{margin:0}
.sr-grid figure{margin:0}
.sr-grid .ph{
  display:block;                 /* ← .ph の grid を解除 */
  padding:0;                     /* ← .ph の 14px 余白を解除 */
  border:0;                      /* ← 枠線なし */
  background:none;               /* ← ストライプの下地なし */
  border-radius:0;
  position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  font-size:0;line-height:0;
}
.sr-grid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
  transition:transform .7s var(--ease)}
.sr-grid li:hover img{transform:scale(1.05)}
.sr-grid figcaption{margin-top:10px;font-family:Montserrat,sans-serif;
  font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.sr-gnote{margin:26px 0 0;font-size:11.5px;line-height:1.9;color:rgba(255,255,255,.5)}

/* --- 他シリーズへのナビ --- */
.sr-other{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;margin:30px 0 0;padding:0}
.sr-other a{display:block;border:1px solid var(--line);border-radius:0;
  background:rgba(255,255,255,.02);padding:16px 12px;text-align:center;
  text-decoration:none;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.78);
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.sr-other a:hover{border-color:rgba(79,209,197,.6);color:#4FD1C5}
.sr-other li.now a{border-color:rgba(79,209,197,.6);color:#4FD1C5;
  background:rgba(79,209,197,.08);pointer-events:none}

/* --- 戻るリンク --- */
.sr-back{margin:clamp(40px,6vw,70px) auto 0;text-align:center}
.sr-back a{font-family:Montserrat,sans-serif;font-size:11.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .3s var(--ease)}
.sr-back a:hover{color:#4FD1C5}

/* --- 画像が無い枠は非表示（main.js が付与） --- */
.is-noimg{display:none !important}

/* --- タブレット --- */
@media(max-width:1024px){
  .sr-point{gap:12px}
  .sr-point li{padding:20px 12px}
  .sr-point b{font-size:13px}
  .sr-point p{font-size:11.5px;line-height:1.75}
  .sr-mk li{font-size:12.5px}
}
@media(max-width:900px){
  .sr-two{grid-template-columns:1fr;gap:28px}
  .sr-point{grid-template-columns:1fr}
  .sr-mk{grid-template-columns:1fr}
  .sr-point li:hover{transform:none}
}

/* --- スマホ --- */
@media(max-width:680px){
  .sr-tri{max-width:340px}
  .sr-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sr-grid figcaption{font-size:10px;margin-top:8px}
  .sr-other{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  .sr-ring-a,.sr-ring-b{animation:none}
  .sr-node,.sr-node:hover{transition:none;transform:none}
  .sr-point li,.sr-grid img{transition:none}
  .sr-point li:hover{transform:none}
  .sr-grid li:hover img{transform:none}
}