/*
Theme Name: Second Life Parallel
Theme URI: https://example.com/
Author: Dreaman
Description: Second Life：Parallel Life Platform TOPページ用オリジナルテーマ
Version: 1.0.0
Text Domain: second-life-parallel
*/

:root{
  --sl-bg:#07172f;
  --sl-bg2:#102a55;
  --sl-white:#fff;
  --sl-text:#16213a;
  --sl-muted:#67718b;
  --sl-purple:#8b63dc;
  --sl-pink:#ee69b7;
  --sl-blue:#4f85ff;
  --sl-cyan:#54d4d0;
  --sl-line:rgba(255,255,255,.18);
  --sl-shadow:0 20px 60px rgba(20,30,70,.14);
  --sl-radius:24px;
  --sl-max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--sl-text);
  background:#fff;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button,input{font:inherit}

.sl-container{
  width:min(calc(100% - 40px),var(--sl-max));
  margin-inline:auto;
}

.sl-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:.3s ease;
}
.sl-header.is-scrolled{
  background:rgba(7,23,47,.88);
  backdrop-filter:blur(14px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.sl-header-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.sl-brand{
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:215px;
}
.sl-logo-mark{
  width:44px;
  aspect-ratio:1;
  position:relative;
}
.sl-logo-mark::before,
.sl-logo-mark::after{
  content:"";
  position:absolute;
  inset:8px;
  border:4px solid;
  border-color:#b783ed #5d98ff #65d7ce #f174ba;
  border-radius:50% 50% 48% 52%;
  transform:rotate(35deg);
}
.sl-logo-mark::after{
  transform:rotate(-35deg);
  opacity:.8;
}
.sl-brand strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:27px;
  letter-spacing:.03em;
  line-height:1;
}
.sl-brand small{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:.18em;
  opacity:.8;
}
.sl-nav{
  display:flex;
  align-items:center;
  gap:24px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}
.sl-nav a{opacity:.9;transition:.2s}
.sl-nav a:hover{opacity:1;color:#d7c4ff}
.sl-header-actions{display:flex;gap:10px;align-items:center}
.sl-btn{
  border:0;
  border-radius:999px;
  min-height:52px;
  padding:0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  cursor:pointer;
  transition:.25s ease;
}
.sl-btn:hover{transform:translateY(-2px)}
.sl-btn-primary{
  color:#fff;
  background:linear-gradient(110deg,var(--sl-pink),var(--sl-blue));
  box-shadow:0 14px 30px rgba(102,95,244,.34);
}
.sl-btn-outline{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.72);
}
.sl-btn-light{
  color:#6d4bbb;
  background:#fff;
  border:1px solid #d9caf5;
}
.sl-menu-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
}

.sl-hero{
  position:relative;
  min-height:790px;
  overflow:hidden;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    radial-gradient(circle at 78% 24%,rgba(95,143,255,.52),transparent 34%),
    radial-gradient(circle at 70% 82%,rgba(238,105,183,.34),transparent 35%),
    linear-gradient(118deg,#06142d 0%,#0b2449 46%,#1d3c73 100%);
}
.sl-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,16,36,.92) 0%,rgba(4,16,36,.64) 42%,rgba(4,16,36,.1) 78%),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1800&q=88") center/cover no-repeat;
  opacity:.7;
}
.sl-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  background:linear-gradient(transparent,rgba(5,16,36,.38));
}
.sl-stars{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle,#b8d6ff 0 1px,transparent 1.5px);
  background-size:90px 90px,140px 140px;
  background-position:0 0,30px 40px;
  opacity:.18;
}
.sl-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:48px;
  align-items:center;
  padding:150px 0 90px;
}
.sl-eyebrow{
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  color:#c9b2ff;
  margin:0 0 14px;
}
.sl-hero h1{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-weight:500;
  font-size:clamp(40px,5vw,70px);
  line-height:1.34;
  letter-spacing:.03em;
}
.sl-hero-copy{
  max-width:620px;
  margin:28px 0 0;
  color:rgba(255,255,255,.86);
  font-size:17px;
}
.sl-feature-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin:34px 0 36px;
}
.sl-mini-feature{text-align:center;font-size:12px;font-weight:700}
.sl-mini-icon{
  width:54px;height:54px;margin:0 auto 8px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  font-size:21px;
}
.sl-hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.sl-world-panel{
  min-height:520px;
  position:relative;
}
.sl-door{
  position:absolute;
  width:150px;
  height:350px;
  border:10px solid rgba(250,231,206,.88);
  border-bottom-width:14px;
  border-radius:4px 4px 0 0;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
  overflow:hidden;
}
.sl-door::before{
  content:"";
  position:absolute;inset:0;
  background:var(--door-image) center/cover no-repeat;
  transform:scale(1.05);
}
.sl-door::after{
  content:"";
  position:absolute;
  top:50%;right:10px;
  width:8px;height:8px;border-radius:50%;
  background:#ffd49b;
  box-shadow:0 0 8px rgba(255,212,155,.8);
}
.sl-door-1{left:0;top:70px;transform:perspective(700px) rotateY(8deg);--door-image:url("https://images.unsplash.com/photo-1499346030926-9a72daac6c63?auto=format&fit=crop&w=700&q=80")}
.sl-door-2{left:155px;top:10px;height:420px;--door-image:url("https://images.unsplash.com/photo-1514924013411-cbf25faa35bb?auto=format&fit=crop&w=700&q=80")}
.sl-door-3{right:30px;top:40px;height:400px;--door-image:url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=700&q=80")}
.sl-orbit{
  position:absolute;
  right:-10px;bottom:10px;
  width:168px;aspect-ratio:1;
  border-radius:50%;
  display:grid;place-items:center;
  text-align:center;
  padding:24px;
  font-weight:800;
  background:linear-gradient(145deg,#f172b7,#685cf1);
  box-shadow:0 20px 50px rgba(99,82,223,.42),inset 0 0 0 1px rgba(255,255,255,.35);
}
.sl-orbit::before{
  content:"";
  position:absolute;inset:-12px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
}
.sl-person{
  position:absolute;
  left:50%;bottom:0;
  transform:translateX(-50%);
  font-size:118px;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.35));
}

.sl-section{padding:92px 0}
.sl-section-soft{
  background:
    radial-gradient(circle at 50% 0,#f2edff,transparent 35%),
    #fbfcff;
}
.sl-section-head{text-align:center;max-width:760px;margin:0 auto 42px}
.sl-section-head h2{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(32px,4vw,48px);
  font-weight:500;
}
.sl-section-head p{margin:12px 0 0;color:var(--sl-muted)}
.sl-theme-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.sl-theme-card{
  overflow:hidden;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--sl-shadow);
  transition:.25s ease;
}
.sl-theme-card:hover{transform:translateY(-7px)}
.sl-theme-image{
  height:154px;
  background:var(--card-image) center/cover no-repeat;
}
.sl-theme-body{padding:20px 16px 22px;text-align:center}
.sl-theme-icon{
  width:46px;height:46px;
  margin:-44px auto 12px;
  position:relative;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--card-color,#8b63dc);
  box-shadow:0 8px 18px rgba(30,40,80,.18);
}
.sl-theme-card h3{font-size:16px;margin:0 0 8px}
.sl-theme-card p{font-size:12px;color:var(--sl-muted);margin:0;line-height:1.75}

.sl-how{
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.94) 58%,rgba(255,255,255,.3)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1800&q=82") center/cover no-repeat;
}
.sl-step-grid{
  max-width:760px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}
.sl-step{text-align:center;position:relative}
.sl-step:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:54px;right:-24px;
  font-size:30px;
  color:#9a77dc;
}
.sl-step-num{
  width:38px;height:38px;
  display:grid;place-items:center;
  margin:0 auto -10px;
  position:relative;z-index:2;
  border-radius:50%;
  color:#fff;
  font-weight:800;
  background:linear-gradient(135deg,#7c5bd4,#a673df);
}
.sl-step-icon{
  width:118px;aspect-ratio:1;
  display:grid;place-items:center;
  margin:0 auto 18px;
  border-radius:50%;
  font-size:42px;
  border:1px solid #eadcfb;
  background:linear-gradient(145deg,#f9f5ff,#fff0f7);
}
.sl-step h3{font-size:17px;margin:0 0 8px}
.sl-step p{font-size:13px;color:var(--sl-muted);margin:0}

.sl-story{
  background:#081a39;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.sl-story::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 80% 30%,rgba(131,91,220,.36),transparent 35%);
}
.sl-story-grid{
  position:relative;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:60px;
  align-items:center;
}
.sl-story-visual{
  min-height:440px;
  position:relative;
}
.sl-story-card{
  position:absolute;
  width:240px;
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}
.sl-story-card strong{display:block;font-size:20px;margin-bottom:8px}
.sl-story-card span{font-size:13px;color:rgba(255,255,255,.7)}
.sl-story-card:nth-child(1){left:20px;top:30px;transform:rotate(-6deg)}
.sl-story-card:nth-child(2){right:10px;top:130px;transform:rotate(5deg)}
.sl-story-card:nth-child(3){left:110px;bottom:10px;transform:rotate(-2deg)}
.sl-story h2{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(34px,4vw,54px);
  line-height:1.35;
  font-weight:500;
  margin:0 0 20px;
}
.sl-story p{color:rgba(255,255,255,.78)}
.sl-tag-list{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px}
.sl-tag{
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-size:13px;
  background:rgba(255,255,255,.06);
}

.sl-stats{
  background:
    radial-gradient(circle at 60% 30%,rgba(134,83,217,.45),transparent 30%),
    linear-gradient(120deg,#0c2452,#52296f);
  color:#fff;
  padding:46px 0;
}
.sl-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.sl-stat{text-align:center;padding:4px 24px;border-right:1px solid rgba(255,255,255,.18)}
.sl-stat:last-child{border-right:0}
.sl-stat small{display:block;opacity:.72}
.sl-stat strong{
  display:block;
  font-family:Georgia,serif;
  font-size:38px;
  margin:6px 0;
}
.sl-stat span{font-size:12px;opacity:.7}

.sl-cta{
  padding:90px 0;
  text-align:center;
  color:#fff;
  background:
    linear-gradient(120deg,rgba(10,30,70,.9),rgba(94,55,145,.88)),
    url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1800&q=82") center/cover;
}
.sl-cta h2{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(34px,4vw,52px);
  margin:0 0 14px;
}
.sl-cta p{margin:0 0 28px;color:rgba(255,255,255,.82)}

.sl-footer{background:#050f22;color:#fff;padding:54px 0 22px}
.sl-footer-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  gap:50px;
}
.sl-footer h4{margin:0 0 14px}
.sl-footer ul{list-style:none;padding:0;margin:0}
.sl-footer li{margin:8px 0;color:rgba(255,255,255,.65);font-size:13px}
.sl-footer-note{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:12px;
  color:rgba(255,255,255,.52);
  text-align:center;
}

@media (max-width:1100px){
  .sl-nav{display:none}
  .sl-menu-toggle{display:grid;place-items:center}
  .sl-header-actions .sl-btn{display:none}
  .sl-theme-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .sl-header-inner{min-height:70px}
  .sl-brand strong{font-size:22px}
  .sl-hero{min-height:auto}
  .sl-hero-inner{grid-template-columns:1fr;padding:120px 0 70px}
  .sl-world-panel{min-height:430px}
  .sl-door{width:31%;height:300px}
  .sl-door-1{left:2%;top:80px}
  .sl-door-2{left:34%;top:30px;height:350px}
  .sl-door-3{right:2%;top:60px;height:320px}
  .sl-person{font-size:88px}
  .sl-orbit{width:130px;right:3%;font-size:13px}
  .sl-story-grid{grid-template-columns:1fr}
  .sl-story-visual{order:2}
  .sl-step-grid{grid-template-columns:1fr;max-width:460px}
  .sl-step:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-34px;transform:translateX(-50%)}
  .sl-stats-grid{grid-template-columns:repeat(2,1fr)}
  .sl-stat:nth-child(2){border-right:0}
  .sl-stat:nth-child(-n+2){margin-bottom:30px}
  .sl-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .sl-container{width:min(calc(100% - 24px),var(--sl-max))}
  .sl-section{padding:68px 0}
  .sl-hero h1{font-size:39px}
  .sl-feature-row{grid-template-columns:repeat(2,1fr)}
  .sl-hero-actions{display:grid}
  .sl-btn{width:100%}
  .sl-theme-grid{grid-template-columns:1fr 1fr}
  .sl-theme-image{height:128px}
  .sl-world-panel{min-height:340px}
  .sl-door{height:240px;border-width:7px}
  .sl-door-2{height:280px}
  .sl-orbit{width:105px;padding:16px;font-size:11px}
  .sl-story-visual{min-height:390px}
  .sl-story-card{width:205px}
  .sl-story-card:nth-child(3){left:30px}
  .sl-stats-grid{grid-template-columns:1fr}
  .sl-stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.16);padding:18px}
  .sl-stat:nth-child(-n+3){margin-bottom:0}
  .sl-footer-grid{grid-template-columns:1fr}
}