@charset "utf-8";

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #1a0822; }
body {
  font-family: 'Noto Sans JP', sans-serif;
  width: 390px;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* === Common Elements === */
section { position: relative; width: 390px; overflow: hidden; }
.sec-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.el { position: absolute; z-index:1; }
.el img { width:100%; height:100%; object-fit:contain; }
.el.stretch img { object-fit: fill; }
.txt { position: absolute; z-index:2; line-height:1.4; white-space: pre-wrap; }
.rounded { font-family: 'M PLUS Rounded 1c', sans-serif; }
.center { text-align: center; }
.card { position: absolute; z-index:1; }
.card .layer { position: absolute; top:0; left:0; width:100%; height:100%; }
.card .layer.stretch { object-fit: fill; }
.card .layer.fit { object-fit: contain; }

/* === Header (fixed) === */
header {
  position: fixed; top:0; left:50%; transform:translateX(-50%);
  width: 390px; height: 70px; z-index:100;
  border-bottom: 2px solid #D4AF37; overflow: hidden;
}
header .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#1A0822EE; }
header .icon { position:absolute; left:12px; top:10px; width:50px; height:50px; }
header .icon img { width:100%; height:100%; object-fit:contain; }
header .logo { position:absolute; left:72px; top:14px; font-size:18px; font-weight:900; color:#FFF; }
header .sub { position:absolute; left:72px; top:40px; font-family:'M PLUS Rounded 1c',sans-serif; font-size:11px; font-weight:700; color:#D4AF37; }

/* === CTA Bar (fixed) === */
.cta-bar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width: 390px; z-index:100;
  background: linear-gradient(135deg, #d4a017, #f0c040, #d4a017);
  padding: 10px 20px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display:flex; justify-content:center; text-decoration:none;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
}
.cta-button {
  display:block; width:100%; max-width:500px; padding:14px;
  background: linear-gradient(135deg, #e8353d, #ff5252);
  color:white; text-align:center; font-size:18px; font-weight:900;
  border-radius:50px; letter-spacing:2px;
  box-shadow: 0 4px 12px rgba(200,50,50,0.4);
}

/* === Section Heights (SP) === */
section.hero { height: 844px; }
section.points { height: 844px; }
section.system { height: 610px; }
section.flow { height: 1080px; }
section.products { height: 720px; }
section.qa { height: 730px; }
section.footer { height: 280px; background: #0F0519; }

/* === Heatwave Glow === */
.heatwave { position:absolute; left:50%; top:180px; width:700px; height:700px; transform:translate(-50%,-50%); pointer-events:none; z-index:0; }
.heatwave .rays-thin {
  position:absolute; inset:0;
  background: conic-gradient(from 0deg,
    rgba(255,200,40,0.85) 0deg, transparent 1.5deg, transparent 28.5deg, rgba(255,200,40,0.85) 30deg, transparent 31.5deg,
    transparent 58.5deg, rgba(255,200,40,0.85) 60deg, transparent 61.5deg, transparent 88.5deg, rgba(255,200,40,0.85) 90deg, transparent 91.5deg,
    transparent 118.5deg, rgba(255,200,40,0.85) 120deg, transparent 121.5deg, transparent 148.5deg, rgba(255,200,40,0.85) 150deg, transparent 151.5deg,
    transparent 178.5deg, rgba(255,200,40,0.85) 180deg, transparent 181.5deg, transparent 208.5deg, rgba(255,200,40,0.85) 210deg, transparent 211.5deg,
    transparent 238.5deg, rgba(255,200,40,0.85) 240deg, transparent 241.5deg, transparent 268.5deg, rgba(255,200,40,0.85) 270deg, transparent 271.5deg,
    transparent 298.5deg, rgba(255,200,40,0.85) 300deg, transparent 301.5deg, transparent 328.5deg, rgba(255,200,40,0.85) 330deg, transparent 331.5deg,
    transparent 360deg);
  mask: radial-gradient(circle at center, transparent 6%, rgba(0,0,0,0.9) 18%, rgba(0,0,0,0.6) 40%, transparent 70%);
  -webkit-mask: radial-gradient(circle at center, transparent 6%, rgba(0,0,0,0.9) 18%, rgba(0,0,0,0.6) 40%, transparent 70%);
  animation: rays-rotate-slow 22s linear infinite;
}
.heatwave .rays-thick {
  position:absolute; inset:0;
  background: conic-gradient(from 15deg,
    rgba(255,170,30,0.7) 0deg, transparent 8deg, transparent 52deg, rgba(255,170,30,0.7) 60deg, transparent 68deg,
    transparent 112deg, rgba(255,170,30,0.7) 120deg, transparent 128deg, transparent 172deg, rgba(255,170,30,0.7) 180deg, transparent 188deg,
    transparent 232deg, rgba(255,170,30,0.7) 240deg, transparent 248deg, transparent 292deg, rgba(255,170,30,0.7) 300deg, transparent 308deg,
    transparent 360deg);
  mask: radial-gradient(circle at center, transparent 8%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.45) 45%, transparent 72%);
  -webkit-mask: radial-gradient(circle at center, transparent 8%, rgba(0,0,0,0.85) 22%, rgba(0,0,0,0.45) 45%, transparent 72%);
  filter: blur(2px);
  animation: rays-rotate-fast 14s linear infinite reverse, rays-scale 4s ease-in-out infinite;
}
@keyframes rays-rotate-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes rays-rotate-fast { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes rays-scale { 0%,100%{transform:scale(0.95);opacity:0.6} 50%{transform:scale(1.1);opacity:1} }

/* === Responsive Toggle === */
.sp { display: block; }
.pc { display: none; }

/* === PC Overrides === */
@media (min-width: 769px) {
  body { width: 960px; }
  section { width: 960px; }
  header { width: 960px; }
  .cta-bar { width: 960px; }
  .cta-button { font-size: 20px; }
  .sp { display: none; }
  .pc { display: block; }

  /* Section Heights (PC) */
  .pc section.hero { height: 844px; }
  .pc section.points { height: 570px; }
  .pc section.system { height: 610px; }
  .pc section.flow { height: 610px; }
  .pc section.products { height: 560px; }
  .pc section.qa { height: 460px; }
  section.footer { height: 280px; }
}


.low_wrap{
    padding:100px 0 50px 0
}

.title_text_c{
    margin:20px auto;
    text-align: center;
}
.title_text_c h2{
    font-size:28px;
    color:#fff;
    text-align: center;
}
ul.service{
    margin-bottom:40px;
}
ul.service li{
    text-align: left;
    padding:20px 10px;
    box-sizing: border-box;
    font-size:16px;
    color:#fff;
    border-bottom:1px solid #fff;
    line-height: 1.6;
}
ul.service li h3{
    font-size:20px;
}
ul.company li{
    text-align: left;
    padding:20px 10px;
    box-sizing: border-box;
    font-size:16px;
    color:#fff;
    border-bottom:1px solid #fff;
}
ul.company li h3{
    font-size:20px;
    padding-bottom:7px;
}
.pp{
    text-align: left;
    padding:20px 10px;
    box-sizing: border-box;
    line-height: 1.6;
    font-size:16px;
    color:#fff;
    border-bottom:1px solid #fff;
    margin-bottom:40px;
}
.pp h3{
    font-size:20px;

}
.btn_f3{
    color:yellow;
}