/* トップページ限定スタイル。design-e-config.yaml の inject: top: css: で
 * top.html のみに読み込む */

@keyframes beamPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}
@keyframes beamPulse2 {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.68; }
}
@keyframes scanLine {
  0%   { transform: translateY(0px);   opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 0.5; }
  100% { transform: translateY(620px); opacity: 0; }
}

@keyframes burnPulse {
  0%, 100% { opacity: 0.62; transform: scale(0.86); }
  50%       { opacity: 1;    transform: scale(1.18); }
}

@keyframes spark1 {
  0%   { opacity: 1;    transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate( 30px, -74px) scale(0.1); }
}
@keyframes spark2 {
  0%   { opacity: 0.9;  transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate(-26px, -82px) scale(0.1); }
}
@keyframes spark3 {
  0%   { opacity: 0.85; transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate( 54px, -46px) scale(0.1); }
}
@keyframes spark4 {
  0%   { opacity: 0.9;  transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate(-46px, -56px) scale(0.1); }
}
@keyframes spark5 {
  0%   { opacity: 0.8;  transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate( 13px, -95px) scale(0.1); }
}
@keyframes spark6 {
  0%   { opacity: 0.85; transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate( -9px, -80px) scale(0.1); }
}
@keyframes spark7 {
  0%   { opacity: 0.7;  transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate( 92px, -16px) scale(0.1); }
}
@keyframes spark8 {
  0%   { opacity: 0.65; transform: translate(  0px,   0px) scale(1);   }
  100% { opacity: 0;    transform: translate(-82px, -11px) scale(0.1); }
}
@keyframes drip1 {
  0%   { opacity: 0.75; transform: translate( 0,    0) scaleY(1);   }
  100% { opacity: 0;    transform: translate( 4px, 34px) scaleY(3); }
}
@keyframes drip2 {
  0%   { opacity: 0.55; transform: translate(  0,    0) scaleY(1);   }
  100% { opacity: 0;    transform: translate(-3px, 27px) scaleY(2.5); }
}
@keyframes impactMove {
  0%   { transform: translate(  0px,   0px); opacity: 0; }
  5%   { opacity: 1; }
  88%  { opacity: 0.9; }
  100% { transform: translate(225px, 620px); opacity: 0; }
}


.ma-hero-section {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(140deg, #080C20 0%, #0E1C48 55%, #142855 100%);
}

/* ヒーロー写真版（design-e-config.yamlのtop_hero:参照、演出版と切り替え
   可能）。写真の上に暗いグラデーションを重ねてテキストの可読性を確保 */
.ma-hero-photo { min-height: 480px; }
.ma-hero-photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ma-hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(8,12,32,0.82) 0%, rgba(14,28,72,0.72) 55%, rgba(20,40,85,0.55) 100%);
}

.ma-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,180,30,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,180,30,0.032) 1px, transparent 1px);
  background-size: 64px 64px;
}

.ma-beam-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.d-beam {
  position: absolute;
  height: 300%;
  top: -100%;
  transform-origin: center center;
}

.ma-scanline {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent, rgba(255,248,190,0.24) 18%,
    rgba(255,255,230,0.9) 50%, rgba(255,248,190,0.24) 82%, transparent);
  pointer-events: none;
  animation: scanLine 10s linear infinite;
}

.d-impact {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
  animation: impactMove 10s linear infinite;
}

.ma-impact-glow {
  position: absolute;
  top: -28px; left: -65px;
  width: 130px; height: 56px;
  background: radial-gradient(ellipse at center,
    rgba(255,185,30,0.38) 0%, rgba(255,130,10,0.12) 52%, transparent 76%);
  filter: blur(9px);
  animation: burnPulse 0.88s ease-in-out infinite;
}

.ma-impact-core {
  position: absolute;
  top: -8px; left: -9px;
  width: 18px; height: 14px;
  background: radial-gradient(ellipse,
    rgba(255,255,255,1) 0%, rgba(255,255,205,0.88) 38%,
    rgba(255,215,75,0.28) 72%, transparent 100%);
  filter: blur(1.8px);
  animation: burnPulse 0.88s ease-in-out infinite;
}

.ma-impact-line {
  position: absolute;
  top: 0; left: -160px;
  width: 320px; height: 1px;
  background: linear-gradient(90deg,
    transparent 10%, rgba(255,248,200,0.07) 38%,
    rgba(255,255,240,0.95) 48%, rgba(255,255,255,1) 50%,
    rgba(255,255,240,0.95) 52%, rgba(255,248,200,0.07) 62%, transparent 90%);
}

.spark { position: absolute; top: 0; border-radius: 50%; }

.ma-hero-content { position: relative; z-index: 1; width: 100%; }
.ma-hero-inner { max-width: 1200px; margin: 0 auto; padding: 80px 40px; }
.ma-hero-text-block { max-width: 640px; }

.ma-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.ma-hero-rule { display: block; width: 28px; height: 1px; background: #F5C030; }
.ma-hero-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: #F5C030;
}

.ma-hero-h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 58px;
  font-weight: 400;
  color: #EDF0FF;
  line-height: 1.5;
  margin: 0 0 18px;
  letter-spacing: 0.03em;
  text-wrap: pretty;
}

.ma-hero-gold { font-style: normal; color: #F5C030; }

.ma-hero-desc {
  font-size: 15px; color: #7A82A8; margin: 0; line-height: 1.9; max-width: 480px;
}

.ma-hero-buttons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  padding: 14px 34px;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  color: #9096B4;
  padding: 13px 28px;
  border-radius: 2px;
  font-size: 15px;
}

/* main の max-width を突き破って全幅にする */
.d-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.btn-primary,
.btn-ghost { position: relative; overflow: hidden; }

.btn-primary       { transition: filter 0.2s, box-shadow 0.2s; }
.btn-primary:hover { filter: brightness(1.16);
                     box-shadow: 0 0 28px rgba(220, 220, 220, 0.70); }

.btn-ghost         { transition: all 0.2s; }
.btn-ghost:hover   { border-color: rgba(255, 255, 255, 0.35) !important;
                     color: #EDF0FF !important; }

.btn-primary::after,
.btn-ghost::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  width: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 1.0),
    transparent
  );
  filter: blur(1px);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

.btn-primary:hover::after,
.btn-ghost:hover::after {
  animation: ma-laser-scan 0.38s ease-out forwards;
}

/* ヒーロー直後のセクションとの間を詰めてつなぐ */
.ma-hero-section + :is(.ma-col, .ma-grid, .ma-steps) {
  margin-top: -30px;
}

@media screen and (max-width: 768px) {
  /* 右側のレーザーが画面外にカットされないよう右寄せ表示 */
  .ma-hero-photo-image { object-position: 80% center; }
  .d-radial-glow { top: 0 !important; transform: none !important; }
  .d-beam { top: 0 !important; height: 100% !important; transform-origin: top center !important; }
  .d-beam:nth-child(1) { left: calc(50% - 100px) !important; }
  .d-beam:nth-child(2) { left: calc(50% - 9px)   !important; }
  .d-beam:nth-child(3) { left: 50%               !important; }
  .d-beam:nth-child(4) { left: calc(52% - 3px)   !important; }
  .d-impact            { left: 50%               !important; }
  .ma-hero-section     { min-height: auto; }
  .ma-hero-h1          { font-size: 38px; }
}

@media print {
  .ma-hero-section {
    min-height: auto;
    border: 1px solid #000;
  }
  .ma-hero-inner { padding: 10px; }
  .ma-hero-grid  { display: none !important; }

  /* -30pxが残ると印刷時に次セクションがヒーロー枠内に食い込むため解除 */
  .ma-hero-section + :is(.ma-col, .ma-grid, .ma-steps) {
    margin-top: 10px !important;
  }
}