@import url(https://smt.fuji.co.jp/wp-content/themes/fss/assets/css/style4.css);

.blue_circle_btn {
    color: white !important;
    background-color: #004098;
    color: #fff;
    width: calc(206 / var(--view-size) * 100vw);
    margin: 0 auto;
    margin-top: calc(20 / var(--view-size) * 100vw);
    font-family: "Noto Sans JP", serif;
    padding: calc(4 / var(--view-size) * 100vw) 0;
    transition: .3s;
    cursor: pointer;
    font-size: calc(16 / var(--view-size) * 100vw);
}

.blue_circle_big_btn {
    color: white !important;
    background-color: #004098;
    color: #fff;
    width: calc(450 / var(--view-size) * 100vw);
    margin: 0 auto;
    margin-top: calc(70 / var(--view-size) * 100vw);
    font-family: "Noto Sans JP", serif;
    padding: calc(4 / var(--view-size) * 100vw) 0;
    transition: .3s;
    cursor: pointer;
    font-size: calc(26 / var(--view-size) * 100vw);
}

[lang="zh-CN"] .blue_circle_btn,
[lang="zh-CN"] .blue_circle_big_btn {
    font-family: "Noto Sans CN";
}

.min_content,
#detail_body {
    display: none;
}

.product_top_row img {
    padding-right: 30px;
}

/*----------------*/
.hero-badge {
    /* レイアウト */
    width: min(520px, 92vw);
    aspect-ratio: 1 / 1;
    margin: 24px auto;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 24px;

    /* 画像が映える土台 */
    background: #071a2b;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

/* 画像は前面 */
.hero-img {
    width: 92%;
    height: auto;
    position: relative;
    z-index: 2;

    /* くっきり感（好みで調整） */
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .35));
}

/* 動く背景：2層のグラデ＋ぼかし＋マスク */
.hero-bg {
    position: absolute;
    inset: -40%;
    z-index: 1;

    /* オーロラっぽい色玉を複数重ねる */
    background:
        radial-gradient(closest-side, rgba(0, 255, 214, .32), transparent 60%),
        radial-gradient(closest-side, rgba(94, 167, 255, .30), transparent 60%),
        radial-gradient(closest-side, rgba(125, 92, 255, .26), transparent 65%),
        conic-gradient(from 180deg, rgba(0, 255, 214, .10), rgba(94, 167, 255, .10), rgba(125, 92, 255, .10), rgba(0, 255, 214, .10));

    /* 大きくぼかして“光の動き”にする */
    filter: blur(28px) saturate(1.2);
    opacity: .95;

    /* 背景だけが動く */
    animation: bg-drift 10s ease-in-out infinite alternate;
    transform: translate3d(0, 0, 0);
}

/* さらに“光の掃引”を追加（上に薄いハイライトが流れる） */
.hero-badge::after {
    content: "";
    position: absolute;
    inset: -60%;
    z-index: 1;
    background: linear-gradient(120deg,
            transparent 0%,
            rgba(255, 255, 255, .10) 45%,
            rgba(255, 255, 255, .22) 50%,
            rgba(255, 255, 255, .10) 55%,
            transparent 100%);
    filter: blur(6px);
    animation: sheen 5.8s linear infinite;
    mix-blend-mode: screen;
}

/* 画像の周りに淡いリング（目立たせ） */
.hero-badge::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 999px;
    z-index: 1;
    border: 2px solid rgba(120, 190, 255, .18);
    box-shadow:
        0 0 0 10px rgba(0, 255, 214, .06),
        0 0 40px rgba(94, 167, 255, .18);
    animation: ring-pulse 3.6s ease-in-out infinite;
}

/* アニメーション */
@keyframes bg-drift {
    0% {
        transform: translate(-6%, -4%) rotate(-8deg) scale(1.05);
    }

    100% {
        transform: translate(6%, 4%) rotate(8deg) scale(1.12);
    }
}

@keyframes sheen {
    0% {
        transform: translateX(-30%) rotate(0deg);
        opacity: .0;
    }

    15% {
        opacity: .35;
    }

    50% {
        opacity: .18;
    }

    100% {
        transform: translateX(30%) rotate(0deg);
        opacity: .0;
    }
}

@keyframes ring-pulse {

    0%,
    100% {
        transform: scale(1.00);
        opacity: .85;
    }

    50% {
        transform: scale(1.03);
        opacity: 1;
    }
}

/* アクセシビリティ：動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

    .hero-bg,
    .hero-badge::after,
    .hero-badge::before {
        animation: none !important;
    }
}

/**************************************/
.nexim-map {
    position: relative;
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
    /* 画像が正方形なら推奨 */
}

.nexim-map img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ハイライトは透明で待機 */
.nexim-map .hl {
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
    /* 画像自体にマウス判定を持たせない */
}

/* ホットスポット（透明の当たり判定） */
/* hotspot 常時アニメーション付きCSS */
.nexim-map .hotspot {
    position: absolute;
    display: block;
    z-index: 2;
    cursor: pointer;

    /* 視認用 */
    background: rgba(0, 160, 255, 0.12);
    outline: 2px solid rgba(0, 160, 255, 0.55);
    border-radius: 100%;

    /* アニメーション */
    animation: hotspotPulse 1.6s ease-in-out infinite;
    transition: background .2s ease, outline-color .2s ease;
}

/* マウスオーバー時（強調・停止） */
.nexim-map .hotspot:hover {
    animation-play-state: paused;
    background: rgba(0, 160, 255, 0.22);
    outline-color: rgba(0, 160, 255, 0.95);
}

/* パルスアニメーション（控えめ） */
@keyframes hotspotPulse {
    0% {
        opacity: .6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }

    100% {
        opacity: .6;
        transform: scale(1);
    }
}

/* 中心に「操作ポイント」を出す（推奨） */
.nexim-map .hotspot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(0, 160, 255, 0.9);
    box-shadow: 0 0 0 0 rgba(0, 160, 255, 0.5);
    animation: ripple 1.6s ease-out infinite;
    pointer-events: none;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 160, 255, 0.45);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(0, 160, 255, 0);
    }
}

/* Neximの色味に寄せたい場合（簡単カスタム） */
:root {
    --nexim-accent: 0, 84, 166;
    /* NeximブルーっぽいRGB */
}

.nexim-map .hotspot {
    background: rgba(var(--nexim-accent), .12);
    outline-color: rgba(var(--nexim-accent), .55);
}

.nexim-map .hotspot::after {
    background: rgba(var(--nexim-accent), .9);
}

/* 例：左上の工程（時計アイコン付近）あたりをざっくり四角で指定
   ※ ここは実画像に合わせて調整してください */
.nexim-map .hotspot-1 {
    left: 16%;
    top: 32%;
    width: 17%;
    height: 17%;
    cursor: pointer;

    /* 四角ではなく「扇形っぽく」したいなら clip-path を使えます */
    /* clip-path: polygon(10% 100%, 0% 40%, 45% 0%, 100% 35%, 90% 100%); */
}

.nexim-map .hotspot-2 {
    left: 29%;
    top: 17%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-3 {
    left: 49%;
    top: 17%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-4 {
    left: 64%;
    top: 29%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-5 {
    left: 64%;
    top: 49%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-6 {
    left: 52%;
    top: 64%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-7 {
    left: 32%;
    top: 64%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}

.nexim-map .hotspot-8 {
    left: 18%;
    top: 51%;
    width: 17%;
    height: 17%;
    cursor: pointer;
}



/* ホットスポットにホバーしたら、対応するハイライト画像を表示 */
/* ===== Nexim 8工程：ホバーで該当ハイライト表示 ===== */
.nexim-map .hotspot-1:hover ~ .hl-1,
.nexim-map .hotspot-2:hover ~ .hl-2,
.nexim-map .hotspot-3:hover ~ .hl-3,
.nexim-map .hotspot-4:hover ~ .hl-4,
.nexim-map .hotspot-5:hover ~ .hl-5,
.nexim-map .hotspot-6:hover ~ .hl-6,
.nexim-map .hotspot-7:hover ~ .hl-7,
.nexim-map .hotspot-8:hover ~ .hl-8 {
    opacity: 1;
}


/* キーボード操作（Tabフォーカス）でも同様に表示したい場合 */
.nexim-map .hotspot-1:focus-visible ~ .hl-1,
.nexim-map .hotspot-2:focus-visible ~ .hl-2,
.nexim-map .hotspot-3:focus-visible ~ .hl-3,
.nexim-map .hotspot-4:focus-visible ~ .hl-4,
.nexim-map .hotspot-5:focus-visible ~ .hl-5,
.nexim-map .hotspot-6:focus-visible ~ .hl-6,
.nexim-map .hotspot-7:focus-visible ~ .hl-7,
.nexim-map .hotspot-8:focus-visible ~ .hl-8 {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/**********************************************/

/* =========================
   右側説明ボックス（追加）
   ========================= */

/* 左：円グラフ / 右：説明 を横並び */
.nexim-interactive {
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(260px, 1fr);
    gap: 28px;
    align-items: start;
}

/* 右側パネル */
.nexim-desc {
    position: relative;
    min-height: 220px; /* 少しコンパクトに */
}

/* 各説明ボックスは重ねて、必要なものだけ表示 */
.nexim-desc .desc {
    position: absolute;
    inset: 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);

    opacity: 0;
    transform: translateX(16px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

/* デフォルト表示（ホバーしてない時） */
.nexim-desc .desc-default {
    opacity: 1;
    transform: translateX(0);
}

/* タイトル/本文の簡易スタイル */
.nexim-desc h3 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.35;
}

.nexim-desc p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

.desc-default{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.desc-default-ttl{
  font-size:20px;
  font-weight:700;
  color:#0b2f66;
}

.desc-default-text{
  font-size:14px;
  line-height:1.7;
  color:#555;
}

/* =========================
   hotspot hover → 対応する説明を表示
   ※ :has() を使う版（HTML構造に依存せず安定）
   ========================= */

.nexim-interactive:has(.hotspot-1:hover) .desc-1,
.nexim-interactive:has(.hotspot-2:hover) .desc-2,
.nexim-interactive:has(.hotspot-3:hover) .desc-3,
.nexim-interactive:has(.hotspot-4:hover) .desc-4,
.nexim-interactive:has(.hotspot-5:hover) .desc-5,
.nexim-interactive:has(.hotspot-6:hover) .desc-6,
.nexim-interactive:has(.hotspot-7:hover) .desc-7,
.nexim-interactive:has(.hotspot-8:hover) .desc-8 {
    opacity: 1;
    transform: translateX(0);
}

/* ホバー中はデフォルトを隠す */
.nexim-interactive:has(.hotspot:hover) .desc-default {
    opacity: 0;
    transform: translateX(16px);
}

.nexim-interactive:has(.hotspot:hover) .hotspot {
    animation-play-state: paused;
}

/* レスポンシブ：狭い画面は縦並び */
@media (max-width: 860px) {
    .nexim-interactive {
        grid-template-columns: 1fr;
    }

    .nexim-desc {
        min-height: 0;
    }

    .nexim-desc .desc {
        position: relative;
        inset: auto;
        margin-top: 14px;
    }

    /* SPでは「重ね表示」より1つだけ表示が難しいので、
     ここは必要ならJS対応にするか、常にdefaultだけ出すなど運用で調整 */
}

.nexim-desc .desc {
    transform: translateX(16px) scale(.98);
}

.nexim-interactive:has(.hotspot-1:hover) .desc-1,
.nexim-interactive:has(.hotspot-2:hover) .desc-2,
.nexim-interactive:has(.hotspot-3:hover) .desc-3,
.nexim-interactive:has(.hotspot-4:hover) .desc-4,
.nexim-interactive:has(.hotspot-5:hover) .desc-5,
.nexim-interactive:has(.hotspot-6:hover) .desc-6,
.nexim-interactive:has(.hotspot-7:hover) .desc-7,
.nexim-interactive:has(.hotspot-8:hover) .desc-8 {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* =========================
   線（SVG）表示
   ========================= */

.nexim-interactive {
    position: relative;
    /* SVG絶対配置の基準 */
}

/* 線SVGは全体にかぶせる */
.nexim-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* hover邪魔しない */
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 4;
    /* 図と吹き出しより上に */
}

/* 線のスタイル */
/* ======================
   上品な発光ライン
   ====================== */

.nexim-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 4;
}

.nexim-link .line-glow {
    stroke: rgba(var(--nexim-accent), .18);
    stroke-width: 10px;
    /* ぼかし用の“面”なので太めでOK（px固定になる） */
    stroke-linecap: round;
    filter: blur(6px);
}

.nexim-link .line-core {
    stroke: rgba(var(--nexim-accent), .65);
    stroke-width: 2px;
    /* ここが主役の細線 */
    stroke-linecap: round;
}

/* 点もほんのり光らせる */
.nexim-link circle {
    fill: rgba(var(--nexim-accent), .85);
    filter: drop-shadow(0 0 6px rgba(var(--nexim-accent), .35));
}

.nexim-interactive:has(.hotspot:hover) .line-glow {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: .7;
    }

    50% {
        opacity: 1;
    }
}

/* =========================
   hover中だけ、該当の線を出す
   ========================= */

.nexim-interactive:has(.hotspot-1) .link-1 {
    opacity: 1;
}

/* 2～8も追加していく */
.nexim-interactive:has(.hotspot-2:hover) .link-2 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-3:hover) .link-3 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-4:hover) .link-4 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-5:hover) .link-5 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-6:hover) .link-6 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-7:hover) .link-7 {
    opacity: 1;
}

.nexim-interactive:has(.hotspot-8:hover) .link-8 {
    opacity: 1;
}

/* =========================
   吹き出し内：開発者の声
   ========================= */

.desc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.desc-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: rgb(var(--nexim-accent));
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.desc-icon img{
  object-fit: contain;
}

.desc-body {
    margin: 0 0 14px;
}

/* 開発者の声 */
.dev-voice {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, .08);
}

.dev-voice-title {
    font-size: 12px;
    font-weight: 700;
    color: #0b2f66;
    margin-bottom: 8px;
}

.dev-voice-box {
    display: grid;
    grid-template-columns: 1fr 72px;
    gap: 12px;
    align-items: center;
}

.dev-voice-catch {
    font-weight: 800;
    color: #0b2f66;
    margin-bottom: 6px;
}

.dev-voice-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.65;
    color: #333;
}

.dev-voice-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .14);
    border: 2px solid rgba(255, 255, 255, .8);
}

.nexim-interactive {
    position: relative;
}

.nexim-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.nexim-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(var(--nexim-accent), .85);
    box-shadow: 0 0 10px rgba(var(--nexim-accent), .25);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

/* 例：link-1 の左右端に合わせて % で配置（viewBoxと同じ感覚） */
.dot-1a {
    left: 12%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.dot-1b {
    left: 50%;
    top: 8%;
    transform: translate(-50%, -50%);
}

/* hover中だけ表示 */
.nexim-interactive:has(.hotspot-1:hover) .dot-1a,
.nexim-interactive:has(.hotspot-1:hover) .dot-1b {
    opacity: 1;
}

.nexim-link-dynamic{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 6;
  opacity: 0;
  transition: opacity .15s ease;
}

.nexim-interactive.is-link-on .nexim-link-dynamic{
  opacity: 1;
}

.nexim-link-dynamic .line-glow{
  stroke: rgba(var(--nexim-accent), .16);
  stroke-width: 10px;
  stroke-linecap: round;
  filter: blur(6px);
}

.nexim-link-dynamic .line-core{
  stroke: rgba(var(--nexim-accent), .60);
  stroke-width: 2px;
  stroke-linecap: round;
}

/* 線幅が拡大縮小されないように */
.nexim-link-dynamic line{
  vector-effect: non-scaling-stroke;
}

/* =========================
   動画セクション
   ========================= */

.youtube_ct{
  max-width: 1000px;
  margin: 80px auto;
}

/* 見出し */
.youtube_ct_ttl{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:22px;
}

/* 小ラベル */
.youtube_ct_label{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:#5ea7ff;
}

/* メインタイトル */
.youtube_ct_main{
  font-size:34px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0b2f66;

  text-shadow:0 2px 8px rgba(0,0,0,.08);

  position:relative;
}

/* 左アクセントライン */
.youtube_ct_main::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:28px;
  border-radius:4px;
  background:linear-gradient(#0b2f66,#5ea7ff);
  box-shadow:0 0 10px rgba(94,167,255,.35);
}

/* 動画フレーム */

.youtube_ct_frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  background:#000;
}

.youtube_ct_frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* SP */

@media (max-width:860px){

.youtube_ct{
  margin:56px auto;
}

.youtube_ct_main{
  font-size:26px;
}

.youtube_ct_main::before{
  left:-14px;
  height:22px;
}

}


.dev_thoughts {
  margin-top: 80px;
  padding: 40px 0 10px;
  border-top: 1px solid rgba(11,47,102,.18);
}