@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.pharma-background {
  width: 100vw;
  height: 70vh;
  position: relative;
  overflow: hidden;
  perspective: 1200px;
  background: #B5D0F5;
  font-family: 'Rajdhani', sans-serif;
}
/* 背景色レイヤー */
.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* 青系の揺らぎ（明るい青〜中間色） */
.bg-blue-dark {
  background: radial-gradient(ellipse at 30% 40%, #5A92EE 0%, transparent 60%),
              radial-gradient(ellipse at 70% 60%, #7FAEF2 0%, transparent 55%);
  animation: blueWaveDark 20s ease-in-out infinite;
}
.bg-blue-light {
  background: radial-gradient(ellipse at 60% 30%, #93BCF5 0%, transparent 50%),
              radial-gradient(ellipse at 25% 70%, #4180EE 0%, transparent 55%);
  animation: blueWaveLight 18s ease-in-out infinite 3s;
}
@keyframes blueWaveDark {
  0%, 100% { opacity: 0.9; }
  25% { opacity: 0.5; }
  50% { opacity: 0.8; }
  75% { opacity: 0.4; }
}
@keyframes blueWaveLight {
  0%, 100% { opacity: 0.3; }
  30% { opacity: 0.7; }
  60% { opacity: 0.4; }
  85% { opacity: 0.6; }
}
/* 緑系の揺らぎ（明るい緑〜中間色） */
.bg-green-dark {
  background: radial-gradient(ellipse at 40% 50%, #4DD9AA 0%, transparent 55%),
              radial-gradient(ellipse at 75% 35%, #7FE3C2 0%, transparent 50%);
  animation: greenWaveDark 55s ease-in-out infinite;
}
.bg-green-light {
  background: radial-gradient(ellipse at 55% 65%, #2FD199 0%, transparent 50%),
              radial-gradient(ellipse at 20% 40%, #6BDDB0 0%, transparent 55%);
  animation: greenWaveLight 50s ease-in-out infinite 5s;
}
@keyframes greenWaveDark {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.3; }
  35% { opacity: 0.7; }
  50% { opacity: 0.5; }
  65% { opacity: 0.8; }
  80% { opacity: 0.4; }
  90% { opacity: 0.1; }
}
@keyframes greenWaveLight {
  0%, 100% { opacity: 0; }
  15% { opacity: 0.2; }
  30% { opacity: 0.5; }
  45% { opacity: 0.3; }
  60% { opacity: 0.6; }
  75% { opacity: 0.4; }
  88% { opacity: 0.15; }
}
/* 赤系の揺らぎ（明るい赤〜中間色） */
.bg-red-dark {
  background: radial-gradient(ellipse at 50% 45%, #E8595E 0%, transparent 55%),
              radial-gradient(ellipse at 30% 70%, #EE8488 0%, transparent 50%);
  animation: redWaveDark 60s ease-in-out infinite 25s;
}
.bg-red-light {
  background: radial-gradient(ellipse at 65% 55%, #EB6E74 0%, transparent 50%),
              radial-gradient(ellipse at 40% 30%, #E34349 0%, transparent 55%);
  animation: redWaveLight 55s ease-in-out infinite 30s;
}
@keyframes redWaveDark {
  0%, 100% { opacity: 0; }
  15% { opacity: 0.2; }
  30% { opacity: 0.6; }
  45% { opacity: 0.4; }
  60% { opacity: 0.75; }
  75% { opacity: 0.5; }
  88% { opacity: 0.15; }
}
@keyframes redWaveLight {
  0%, 100% { opacity: 0; }
  20% { opacity: 0.15; }
  35% { opacity: 0.45; }
  50% { opacity: 0.3; }
  65% { opacity: 0.55; }
  80% { opacity: 0.25; }
  92% { opacity: 0.08; }
}

/* ============================================
   3D透過画像レイヤー
   ============================================ */
.image-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1500px;
  z-index: 3;              /* 化学式(2)の上・オーバーレイ(10)の下 */
  pointer-events: none;
}
.image-3d {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;    /* delay中は0% */
}
.image-3d img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
}

/* 画像用の透明度ゆらぎ */
@keyframes imgOpacity1 {
  0%, 100% { opacity: 0.35; }
  35% { opacity: 0.72; }
  65% { opacity: 0.4; }
  88% { opacity: 0.6; }
}
@keyframes imgOpacity2 {
  0%, 100% { opacity: 0.4; }
  30% { opacity: 0.7; }
  60% { opacity: 0.35; }
  85% { opacity: 0.6; }
}
@keyframes imgOpacity3 {
  0%, 100% { opacity: 0.3; }
  35% { opacity: 0.72; }
  65% { opacity: 0.4; }
  88% { opacity: 0.6; }
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 左側 */
.image-1 {
  top: 28%;
  left: 12%;
  width: 220px;
  animation:
    image3d-1 30s ease-in-out 1s infinite backwards,
    imgOpacity1 16s ease-in-out 1s infinite backwards;
}
.image-1 img { opacity: 0; animation: imgFadeIn 1.2s ease-out 1s forwards; }


@keyframes image3d-1 {
  0%   { transform: translate(-50%, -50%) translateZ(-220px) rotateY(0deg)   rotateX(6deg)  scale(0.8); }
  30%  { transform: translate(-50%, -50%) translateZ(90px)   rotateY(120deg) rotateX(-8deg) scale(1.15); }
  60%  { transform: translate(-50%, -50%) translateZ(-120px) rotateY(230deg) rotateX(10deg) scale(0.85); }
  100% { transform: translate(-50%, -50%) translateZ(-220px) rotateY(360deg) rotateX(6deg)  scale(0.8); }
}

/* 下部中央 */
.image-2 {
  top: 82%;
  left: 50%;
  width: 200px;
  animation:
    image3d-2 26s ease-in-out 1.6s infinite backwards,
    imgOpacity2 14s ease-in-out 1.6s infinite backwards;
}
.image-2 img { opacity: 0; animation: imgFadeIn 1.2s ease-out 1.6s forwards; }

@keyframes image3d-2 {
  0%   { transform: translate(-50%, -50%) translateZ(60px)   rotateY(-40deg) rotateX(-10deg) scale(1); }
  35%  { transform: translate(-50%, -50%) translateZ(-200px) rotateY(70deg)  rotateX(14deg)  scale(0.6); }
  70%  { transform: translate(-50%, -50%) translateZ(100px)  rotateY(190deg) rotateX(-6deg)  scale(1.2); }
  100% { transform: translate(-50%, -50%) translateZ(60px)   rotateY(320deg) rotateX(-10deg) scale(1); }
}

/* 右側 */
.image-3 {
  top: 32%;
  left: 86%;
  width: 180px;
  animation:
    image3d-3 34s ease-in-out 2.2s infinite backwards,
    imgOpacity3 18s ease-in-out 2.2s infinite backwards;
}
.image-3 img { opacity: 0; animation: imgFadeIn 1.2s ease-out 2.2s forwards; }

@keyframes image3d-3 {
  0%   { transform: translate(-50%, -50%) translateZ(-160px) rotateY(80deg)  rotateX(-14deg) scale(0.7); }
  40%  { transform: translate(-50%, -50%) translateZ(120px)  rotateY(190deg) rotateX(12deg)  scale(1.25); }
  70%  { transform: translate(-50%, -50%) translateZ(-40px)  rotateY(270deg) rotateX(-5deg)  scale(0.9); }
  100% { transform: translate(-50%, -50%) translateZ(-160px) rotateY(440deg) rotateX(-14deg) scale(0.7); }
}

/* レスポンシブ */
@media (max-width: 767px) {
  .image-1 { width: 100px; top: 24%; left: 18%; }
  .image-2 { width: 120px; top: 85%; }
  .image-3 { width: 85px;  top: 26%; left: 82%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .image-1 { width: 150px; }
  .image-2 { width: 175px; }
  .image-3 { width: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-3d {
    animation: none;
    opacity: 0.5;
    transform: translate(-50%, -50%);
  }
}


/* 3D化学式コンテナ */
.formula-3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1500px;
  z-index: 2;
}
.formula-3d {
  position: absolute;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: rgb(255, 255, 255);
  text-shadow: 
    0 0 6px currentColor,
    0 0 12px currentColor;
  transform-style: preserve-3d;
  white-space: nowrap;
}
/* 文字の揺らぎアニメーション */
@keyframes textWobble1 {
  0%, 100% { filter: blur(0px); letter-spacing: 0px; }
  25% { filter: blur(0.3px); letter-spacing: 1px; }
  50% { filter: blur(0.5px); letter-spacing: -0.5px; }
  75% { filter: blur(0.2px); letter-spacing: 0.5px; }
}
@keyframes textWobble2 {
  0%, 100% { filter: blur(0.2px); letter-spacing: 0.5px; }
  30% { filter: blur(0px); letter-spacing: -0.3px; }
  60% { filter: blur(0.4px); letter-spacing: 1.2px; }
  85% { filter: blur(0.1px); letter-spacing: 0px; }
}
@keyframes textWobble3 {
  0%, 100% { filter: blur(0.3px); letter-spacing: -0.2px; }
  20% { filter: blur(0.5px); letter-spacing: 0.8px; }
  45% { filter: blur(0px); letter-spacing: 0px; }
  70% { filter: blur(0.4px); letter-spacing: 0.6px; }
}
/* 白ベースの透明度変化（背景に同化） */
@keyframes opacityWave1 {
  0%, 100% { opacity: 0.15; }
  20% { opacity: 0.35; }
  40% { opacity: 0.2; }
  60% { opacity: 0.45; }
  80% { opacity: 0.25; }
}
@keyframes opacityWave2 {
  0%, 100% { opacity: 0.2; }
  25% { opacity: 0.4; }
  50% { opacity: 0.18; }
  75% { opacity: 0.38; }
}
@keyframes opacityWave3 {
  0%, 100% { opacity: 0.18; }
  30% { opacity: 0.42; }
  55% { opacity: 0.22; }
  80% { opacity: 0.35; }
}
@keyframes opacityWave4 {
  0%, 100% { opacity: 0.22; }
  20% { opacity: 0.12; }
  45% { opacity: 0.4; }
  70% { opacity: 0.28; }
}
@keyframes opacityWave5 {
  0%, 100% { opacity: 0.17; }
  35% { opacity: 0.45; }
  60% { opacity: 0.2; }
  85% { opacity: 0.32; }
}
/* 中央の化学式 */
.formula-1 {
  top: 50%;
  left: 50%;
  font-size: 160px;
  animation: 
    formula3d-1 26s ease-in-out infinite,
    opacityWave1 14s ease-in-out infinite,
    textWobble1 8s ease-in-out infinite;
}
@keyframes formula3d-1 {
  0% { transform: translate(-50%, -50%) translateZ(-350px) rotateY(0deg) rotateX(0deg) scale(0.55); }
  25% { transform: translate(-50%, -50%) translateZ(120px) rotateY(90deg) rotateX(-8deg) scale(1.3); }
  50% { transform: translate(-50%, -50%) translateZ(-80px) rotateY(180deg) rotateX(12deg) scale(0.85); }
  75% { transform: translate(-50%, -50%) translateZ(80px) rotateY(270deg) rotateX(-6deg) scale(1.15); }
  100% { transform: translate(-50%, -50%) translateZ(-350px) rotateY(360deg) rotateX(0deg) scale(0.55); }
}
/* 左上から */
.formula-2 {
  top: 15%;
  left: 10%;
  font-size: 120px;
  opacity: 0;
  animation: 
    formula3d-2 30s ease-in-out infinite 4s,
    opacityWave2 16s ease-in-out infinite 2s,
    textWobble2 10s ease-in-out infinite 1s,
    fadeInStart 1.5s ease-out 4s forwards;
}
@keyframes formula3d-2 {
  0% { transform: translateZ(60px) rotateY(45deg) rotateX(-12deg) scale(1); }
  35% { transform: translateZ(-200px) rotateY(130deg) rotateX(18deg) scale(0.5); }
  65% { transform: translateZ(100px) rotateY(220deg) rotateX(-8deg) scale(1.2); }
  100% { transform: translateZ(60px) rotateY(405deg) rotateX(-12deg) scale(1); }
}
/* 右上から */
.formula-3 {
  top: 20%;
  left: 75%;
  font-size: 130px;
  opacity: 0;
  animation: 
    formula3d-3 28s ease-in-out infinite 8s,
    opacityWave3 18s ease-in-out infinite 5s,
    textWobble3 9s ease-in-out infinite 2s,
    fadeInStart 1.5s ease-out 8s forwards;
}
@keyframes formula3d-3 {
  0% { transform: translate(-50%, -50%) translateZ(-180px) rotateY(100deg) rotateX(20deg) scale(0.6); }
  40% { transform: translate(-50%, -50%) translateZ(140px) rotateY(180deg) rotateX(-15deg) scale(1.35); }
  70% { transform: translate(-50%, -50%) translateZ(20px) rotateY(260deg) rotateX(8deg) scale(0.95); }
  100% { transform: translate(-50%, -50%) translateZ(-180px) rotateY(460deg) rotateX(20deg) scale(0.6); }
}
/* 左下から */
.formula-4 {
  top: 75%;
  left: 15%;
  font-size: 140px;
  opacity: 0;
  animation: 
    formula3d-4 24s ease-in-out infinite 2s,
    opacityWave4 15s ease-in-out infinite 1s,
    textWobble1 11s ease-in-out infinite 3s,
    fadeInStart 1.5s ease-out 2s forwards;
}
@keyframes formula3d-4 {
  0% { transform: translateZ(50px) rotateY(-35deg) rotateX(8deg) scale(0.95); }
  50% { transform: translateZ(-250px) rotateY(125deg) rotateX(-12deg) scale(0.45); }
  100% { transform: translateZ(50px) rotateY(325deg) rotateX(8deg) scale(0.95); }
}
/* 右下から */
.formula-5 {
  top: 70%;
  left: 80%;
  font-size: 115px;
  opacity: 0;
  animation: 
    formula3d-5 32s ease-in-out infinite 6s,
    opacityWave5 17s ease-in-out infinite 4s,
    textWobble2 12s ease-in-out infinite 2s,
    fadeInStart 1.5s ease-out 6s forwards;
}
@keyframes formula3d-5 {
  0% { transform: translateZ(-120px) rotateY(70deg) rotateX(-18deg) scale(0.65); }
  35% { transform: translateZ(130px) rotateY(160deg) rotateX(12deg) scale(1.25); }
  65% { transform: translateZ(40px) rotateY(250deg) rotateX(-5deg) scale(0.9); }
  100% { transform: translateZ(-120px) rotateY(430deg) rotateX(-18deg) scale(0.65); }
}
/* 上部中央から */
.formula-6 {
  top: 8%;
  left: 45%;
  font-size: 100px;
  opacity: 0;
  animation: 
    formula3d-6 34s ease-in-out infinite 10s,
    opacityWave1 13s ease-in-out infinite 6s,
    textWobble3 9s ease-in-out infinite 4s,
    fadeInStart 1.5s ease-out 10s forwards;
}
@keyframes formula3d-6 {
  0% { transform: translate(-50%, 0) translateZ(70px) rotateY(-60deg) rotateX(15deg) scale(1.1); }
  45% { transform: translate(-50%, 0) translateZ(-220px) rotateY(80deg) rotateX(-10deg) scale(0.5); }
  75% { transform: translate(-50%, 0) translateZ(90px) rotateY(180deg) rotateX(8deg) scale(1.15); }
  100% { transform: translate(-50%, 0) translateZ(70px) rotateY(300deg) rotateX(15deg) scale(1.1); }
}
/* 下部中央から */
.formula-7 {
  top: 88%;
  left: 55%;
  font-size: 110px;
  opacity: 0;
  animation: 
    formula3d-7 29s ease-in-out infinite 12s,
    opacityWave2 14s ease-in-out infinite 8s,
    textWobble1 10s ease-in-out infinite 5s,
    fadeInStart 1.5s ease-out 12s forwards;
}
@keyframes formula3d-7 {
  0% { transform: translate(-50%, -100%) translateZ(-100px) rotateY(50deg) rotateX(-20deg) scale(0.7); }
  40% { transform: translate(-50%, -100%) translateZ(110px) rotateY(140deg) rotateX(15deg) scale(1.2); }
  70% { transform: translate(-50%, -100%) translateZ(-50px) rotateY(230deg) rotateX(-8deg) scale(0.85); }
  100% { transform: translate(-50%, -100%) translateZ(-100px) rotateY(410deg) rotateX(-20deg) scale(0.7); }
}
/* 左中央から */
.formula-8 {
  top: 45%;
  left: 5%;
  font-size: 95px;
  opacity: 0;
  animation: 
    formula3d-8 27s ease-in-out infinite 14s,
    opacityWave3 12s ease-in-out infinite 7s,
    textWobble2 8s ease-in-out infinite 3s,
    fadeInStart 1.5s ease-out 14s forwards;
}
@keyframes formula3d-8 {
  0% { transform: translateZ(40px) rotateY(-80deg) rotateX(10deg) scale(0.9); }
  50% { transform: translateZ(-180px) rotateY(60deg) rotateX(-15deg) scale(0.5); }
  80% { transform: translateZ(80px) rotateY(150deg) rotateX(6deg) scale(1.1); }
  100% { transform: translateZ(40px) rotateY(280deg) rotateX(10deg) scale(0.9); }
}
/* 右中央から */
.formula-9 {
  top: 55%;
  left: 92%;
  font-size: 105px;
  opacity: 0;
  animation: 
    formula3d-9 31s ease-in-out infinite 16s,
    opacityWave4 15s ease-in-out infinite 9s,
    textWobble3 11s ease-in-out infinite 6s,
    fadeInStart 1.5s ease-out 16s forwards;
}
@keyframes formula3d-9 {
  0% { transform: translate(-100%, -50%) translateZ(-140px) rotateY(90deg) rotateX(-12deg) scale(0.6); }
  35% { transform: translate(-100%, -50%) translateZ(100px) rotateY(170deg) rotateX(18deg) scale(1.2); }
  65% { transform: translate(-100%, -50%) translateZ(30px) rotateY(260deg) rotateX(-6deg) scale(0.95); }
  100% { transform: translate(-100%, -50%) translateZ(-140px) rotateY(450deg) rotateX(-12deg) scale(0.6); }
}
@keyframes fadeInStart {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* SVG（軌道のみ） */
.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.orbital {
  fill: none;
  stroke: rgba(100, 200, 255, 0.08);
  stroke-width: 1;
}
.orbital-center {
  fill: none;
  stroke: rgba(100, 200, 255, 0.05);
  stroke-width: 0.8;
}
.particle {
  fill: rgba(255, 255, 255, 0.5);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinReverse { to { transform: rotate(-360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.5; } }
@keyframes fade { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.35; } }
.spin { animation: spin 25s linear infinite; }
.spin-reverse { animation: spinReverse 30s linear infinite; }
.spin-slow { animation: spin 40s linear infinite; }
.spin-center1 { animation: spin 35s linear infinite; }
.spin-center2 { animation: spinReverse 45s linear infinite; }
.pulse1 { animation: pulse 6s ease-in-out infinite; }
.pulse2 { animation: pulse 7s ease-in-out infinite 2s; }
.fade1 { animation: fade 10s ease-in-out infinite; }
.fade2 { animation: fade 12s ease-in-out infinite 4s; }
/* レスポンシブ */
@media (max-width: 767px) {
  .pharma-background { height: 75vh; min-height: 500px; }
  .formula-1 { font-size: 60px; }
  .formula-2 { font-size: 45px; }
  .formula-3 { font-size: 50px; }
  .formula-4 { font-size: 52px; }
  .formula-5 { font-size: 42px; }
  .formula-6 { font-size: 38px; }
  .formula-7 { font-size: 40px; }
  .formula-8 { font-size: 35px; }
  .formula-9 { font-size: 38px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .pharma-background { height: 500px; }
  .formula-1 { font-size: 110px; }
  .formula-2 { font-size: 80px; }
  .formula-3 { font-size: 88px; }
  .formula-4 { font-size: 95px; }
  .formula-5 { font-size: 78px; }
  .formula-6 { font-size: 68px; }
  .formula-7 { font-size: 75px; }
  .formula-8 { font-size: 65px; }
  .formula-9 { font-size: 72px; }
}
@media (min-width: 1024px) {
  .pharma-background { height: 500px; }
}
/* オーバーレイ */
.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at 10% 90%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 10;
}
.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 2px, rgba(255, 255, 255, 0.02) 4px);
  pointer-events: none;
  opacity: 0.25;
  z-index: 11;
}
/* ============================================
   JPS コンセプトオーバーレイ CSS
   ============================================ */
/* コンセプトオーバーレイ コンテナ */
.concept-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.drop-shadow {
  filter: drop-shadow(2px 0 3px rgba(0,0,0,.2))
        drop-shadow(-2px 0 3px rgba(0,0,0,.2))
        drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

/* 共通スタイル */
.concept-box {
  position: absolute;
  left: 50%;
  width: 80%;
  max-width: 900px;
  text-align: center;
  padding: 20px 40px;
  background:rgba(255, 255, 255, 0.7);
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  opacity: 0;
  pointer-events: auto;
  font-family: 'Noto Sans JP', sans-serif;
  box-sizing: border-box;
}
/* ============================================
   concept_2: 上部・大きめ・赤い光る枠（5px）
   ============================================ */
.concept-2 {
  top: 15%;
  transform: translateX(-150%);
  font-size: 32px;
  font-weight: 700;
  color: rgb(12, 51, 136);
  letter-spacing: 0.12em;
  animation: slideFromLeft 1s ease-out 0.5s forwards;
}
/* 赤い光る枠（5px） */
.concept-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    #f9a825 20deg,
    #ffc14d 40deg,
    #ffd97a 60deg,
    #ffc14d 80deg,
    #f9a825 100deg,
    transparent 120deg,
    transparent 360deg
  );
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  animation: rotateBorder 3s linear infinite;
}
/* ============================================
   concept_1: 下部・小さめ・金色の枠線（2px）
   ============================================ */
.concept-1 {
  top: 52%;
  transform: translateX(150%);
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  text-align: left;
  letter-spacing: 0.08em;
  line-height: 1.6;
  animation: slideFromRight 1s ease-out 1.8s forwards;
}
/* ============================================
   CSS @property（光の回転用）
   ============================================ */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}
/* ============================================
   スライドアニメーション
   ============================================ */
@keyframes slideFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
@keyframes slideFromRight {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(-50%);
    opacity: 1;
  }
}
/* ============================================
   レスポンシブ
   ============================================ */
/* スマホ */
@media (max-width: 767px) {
  .concept-box {
    width: 90%;
    padding: 1.5rem 2rem;
   
  }
  
  .concept-2 {
    font-size: 1.6rem;
    top: 5%;
  }
   .concept-2 span {
     color: #e83817;
    font-size: 2.0rem;
    display: block;
  }
  
  .concept-2::before {
    padding: 4px;
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  }
  
  .concept-1 {
    font-size: 1rem;
    top: 37%;
    line-height: 2;
  }
}
/* タブレット */
@media (min-width: 768px) and (max-width: 1023px) {
  .concept-box {
    width: 85%;
    padding: 18px 35px;
  }
    .concept-2 span {
     color: #e83817;
    font-size: 2.2rem;
    display: block;
  }
  .concept-1 {
    font-size: 1.2rem;
  }
}
 @media (min-width: 1024px) {
    .concept-1 {
      top: 42%;
    font-size: 1.2rem;
     line-height: 2;
  }
   .concept-2 {
    top: 10%;
      }
   .concept-2 span {
     color: #e83817;
     
   }
}