/*
Theme Name: Arekore
Author: Amadeus Data Works
Description: Arekore official site theme.
Version: 1.1.29
Text Domain: arekore
*/
:root {
      --pink: #ff6b9d;
      --pink-deep: #ee4d86;
      --cyan: #4ec6e8;
      --mint: #7ad3b0;
      --lilac: #b08cff;
      --ink: #2a2a33;
      --muted: #5c5c6a;
      --card: rgba(255, 255, 255, 0.92);
      --line: rgba(255, 255, 255, 0.7);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    #top, #about, #feature, #apply {
      scroll-margin-top: 84px;
    }
    body {
      font-family: "M PLUS Rounded 1c", sans-serif;
      color: var(--ink);
      background: #f7e9f2 url("assets/arekore-bg.jpg") center top / cover no-repeat fixed;
      min-height: 100vh;
    }
    a { color: inherit; }
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      padding: 10px 28px;
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    }
    .logo {
      display: flex;
      align-items: center;
    }
    .logo img {
      display: block;
      height: 48px;
      width: auto;
    }
    h2.brand-h {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.12em;
      line-height: 1;
    }
    h2.brand-h .brand-word img {
      display: block;
      height: 1.05em;
      width: auto;
    }
    h2.brand-h .tail {
      font-weight: 900;
    }
    nav { display: flex; align-items: center; gap: 22px; }
    nav a {
      text-decoration: none;
      font-weight: 800;
      font-size: 15px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--pink);
      color: #fff !important;
      text-decoration: none;
      border-radius: 999px;
      font-weight: 900;
      padding: 12px 28px;
      box-shadow: 0 8px 18px rgba(238, 77, 134, 0.28);
    }
    .btn:hover { background: var(--pink-deep); }
    .btn-lg { padding: 16px 40px; font-size: 18px; }
    .btn-apply {
      position: relative;
      overflow: hidden;
      padding: 20px 56px;
      font-size: 20px;
      letter-spacing: 0.06em;
      background: #fff;
      color: var(--pink-deep) !important;
      box-shadow:
        0 16px 36px rgba(80, 16, 60, 0.28),
        0 0 0 4px rgba(255, 255, 255, 0.35);
    }
    .btn-apply:hover { background: #fff4f8; }
    .btn-apply::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 35%, rgba(255, 107, 157, 0.38) 50%, transparent 65%);
      transform: translateX(-120%);
      animation: shine 2.8s ease-in-out 0.6s infinite;
    }
    @keyframes shine {
      0%, 55% { transform: translateX(-120%); }
      75% { transform: translateX(120%); }
      100% { transform: translateX(120%); }
    }

    .hero { position: relative; }
    @media (min-width: 801px) {
      .hero {
        max-width: min(1080px, calc(100% - 40px));
        margin: 20px auto 0;
      }
      .slides {
        border-radius: 28px;
        box-shadow: 0 16px 40px rgba(80, 40, 80, 0.08);
      }
    }
    .slides {
      position: relative;
      overflow: hidden;
      width: 100%;
      aspect-ratio: 16 / 9;
      height: auto;
      background: #111;
    }
    .slides img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    main { padding-bottom: 80px; }
    section { padding: 72px 20px; }
    .wrap { max-width: 1080px; margin: 0 auto; }
    .label {
      color: var(--pink-deep);
      font-weight: 900;
      letter-spacing: 0.18em;
      font-size: 13px;
    }
    h2 {
      font-weight: 900;
      font-size: clamp(28px, 5vw, 42px);
      margin: 6px 0 20px;
    }
    .catch {
      font-weight: 900;
      font-size: clamp(22px, 4vw, 34px);
      line-height: 1.45;
      margin-bottom: 22px;
    }
    .body {
      font-size: 16px;
      line-height: 1.95;
      color: var(--muted);
      font-weight: 700;
    }
    .panel {
      background: var(--card);
      border-radius: 28px;
      padding: 40px 36px;
      box-shadow: 0 16px 40px rgba(80, 40, 80, 0.08);
    }
    .world {
      position: relative;
      margin-top: 28px;
      border-radius: 20px;
      overflow: hidden;
      border: 6px solid #fff;
      isolation: isolate;
    }
    .world-desk {
      display: none;
    }
    .world img { width: 100%; display: block; position: relative; z-index: 1; }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 28px;
    }
    .card {
      border-radius: 22px;
      color: #fff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 16px 28px rgba(80, 40, 80, 0.12);
    }
    .card.p { background: linear-gradient(165deg, #ff9ec0, #ee4d86); }
    .card.c { background: linear-gradient(165deg, #8ae6f7, #2aa8d4); }
    .card.m { background: linear-gradient(165deg, #cdb4ff, #8a62e8); }
    .feat-art {
      position: relative;
      width: calc(100% - 28px);
      aspect-ratio: 4 / 3;
      height: auto;
      margin: 14px 14px 0;
      border-radius: 16px;
      overflow: hidden;
    }
    .feat-art .feat-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .feat-art .feat-fg {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      padding: 6% 5%;
      box-sizing: border-box;
    }
    .feat-body { padding: 16px 20px 28px; }
    .card .num {
      font-weight: 900;
      font-size: 11px;
      letter-spacing: 0.2em;
      opacity: 0.75;
    }
    .card h3 {
      margin: 6px 0 14px;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.35;
      letter-spacing: 0.04em;
      color: #fff;
      text-shadow: 0 2px 10px rgba(40, 16, 50, 0.22);
    }
    .card .lead {
      font-size: 16px;
      font-weight: 900;
      line-height: 1.65;
      margin-bottom: 8px;
    }
    .card .lead em {
      font-style: normal;
      background: rgba(255, 255, 255, 0.24);
      padding: 0.05em 0.28em;
      border-radius: 6px;
    }
    .card .sub {
      margin-top: 2px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.8;
      opacity: 0.92;
    }

    .apply-sec {
      padding: 72px 20px 96px;
    }
    .apply-sec .brand-h {
      margin-bottom: 28px;
    }
    .apply-glow {
      position: relative;
      border-radius: 40px;
      padding: 4px;
      background: linear-gradient(120deg, #ffe27a, #fff, #ff6b9d, #b08cff, #ffe27a);
      background-size: 220% 220%;
      animation: borderShift 8s linear infinite;
      box-shadow:
        0 32px 64px rgba(90, 20, 80, 0.28),
        0 8px 24px rgba(238, 77, 134, 0.22);
    }
    @keyframes borderShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .apply-stage {
      position: relative;
      overflow: hidden;
      text-align: center;
      background:
        radial-gradient(ellipse at 50% -8%, rgba(255, 255, 255, 0.42), transparent 46%),
        linear-gradient(165deg, #ff7eb3 0%, #ee4d86 48%, #a85cff 100%);
      border-radius: 36px;
      padding: 64px 32px 56px;
    }
    .apply-stage::before,
    .apply-stage::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    .apply-stage::before {
      width: 16px;
      height: 16px;
      top: 26px;
      left: 34px;
      background: #fff;
      box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.95);
    }
    .apply-stage::after {
      width: 9px;
      height: 9px;
      top: 42px;
      right: 48px;
      background: #fff;
      box-shadow: 0 0 14px 4px rgba(255, 255, 255, 0.9);
    }
    .spark {
      position: absolute;
      color: #ffd86b;
      font-size: 22px;
      line-height: 1;
      pointer-events: none;
      text-shadow: 0 0 12px rgba(255, 220, 120, 0.95);
      animation: twinkle 2.4s ease-in-out infinite;
    }
    .spark.s1 { top: 22px; left: 16%; }
    .spark.s2 { top: 18px; right: 18%; font-size: 16px; animation-delay: 0.4s; }
    .spark.s3 { bottom: 28px; left: 10%; font-size: 14px; animation-delay: 0.9s; }
    .spark.s4 { bottom: 36px; right: 12%; animation-delay: 1.3s; }
    .spark.s5 { top: 46%; left: 7%; font-size: 12px; animation-delay: 0.2s; }
    .spark.s6 { top: 42%; right: 8%; font-size: 13px; animation-delay: 1.6s; }
    @keyframes twinkle {
      0%, 100% { opacity: 0.35; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.15); }
    }
    .apply-stage .label {
      position: relative;
      display: inline-block;
      background: rgba(255, 255, 255, 0.22);
      color: #fff;
      letter-spacing: 0.22em;
      font-size: 12px;
      padding: 7px 18px;
      border-radius: 999px;
      margin-bottom: 16px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    }
    .apply-stage h2 {
      position: relative;
      margin: 0 0 14px;
      font-size: clamp(26px, 4.6vw, 40px);
      line-height: 1.4;
      letter-spacing: 0.06em;
      color: #fff;
      text-shadow: 0 4px 18px rgba(80, 10, 60, 0.28);
    }
    .apply-lead {
      position: relative;
      font-weight: 800;
      font-size: 15px;
      line-height: 1.75;
      color: rgba(255, 255, 255, 0.92);
      margin: 0 auto 28px;
      max-width: 36em;
    }
    .apply-rest {
      margin-top: 40px;
      text-align: center;
    }
    .apply-rest h2 {
      font-size: 28px;
      margin-bottom: 18px;
    }
    .flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin: 0 0 8px;
      text-align: left;
    }
    .step {
      background: #fff;
      border-radius: 18px;
      padding: 20px 16px;
      box-shadow: 0 8px 18px rgba(80, 40, 80, 0.05);
    }
    .step b {
      display: block;
      color: var(--pink-deep);
      font-size: 13px;
      margin-bottom: 6px;
    }
    .caution {
      margin-top: 28px;
      text-align: left;
      background: #fff;
      border-radius: 18px;
      padding: 22px 24px;
    }

    footer {
      background: rgba(42, 42, 51, 0.92);
      color: #fff;
      padding: 28px 20px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
    }
    footer a { color: #ffd0e2; }
    .privacy-doc h3 {
      margin: 28px 0 10px;
      font-size: 18px;
    }
    body.is-privacy .intro { display: none !important; }

    @media (max-width: 800px) {
      header { padding: 10px 14px; min-height: 60px; }
      .logo img { height: 36px; }
      nav { gap: 10px; }
      nav a.nav-home { display: none; }
      .btn { padding: 10px 16px; font-size: 13px; }
      .btn-apply { padding: 16px 32px; font-size: 16px; }
      .apply-glow { border-radius: 30px; }
      .apply-stage { padding: 44px 20px 40px; border-radius: 27px; }
      .panel { padding: 28px 20px; }
      .cards, .flow { grid-template-columns: 1fr; }
      .card h3 { font-size: 24px; }
    }

body.admin-bar header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar header { top: 46px; }
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.intro-desk {
  display: none;
}
.intro picture {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.intro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(22px) brightness(1.45);
}
.intro-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  pointer-events: none;
}
.intro.is-in img {
  animation: introSmokeIn 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.intro.is-in .intro-veil {
  animation: introVeilDown 2s ease forwards;
}
.intro.is-out {
  background: transparent;
}
.intro.is-out img,
.intro.is-out .intro-veil {
  opacity: 0 !important;
  animation: none;
  visibility: hidden;
}
.intro-dust,
.intro-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.intro.is-gone {
  animation: introFadeOut 0.7s ease forwards;
  pointer-events: none;
}
@keyframes introSmokeIn {
  0% { opacity: 0; transform: scale(1.08); filter: blur(24px) brightness(1.5); }
  35% { opacity: 0.45; filter: blur(12px) brightness(1.28); }
  70% { opacity: 0.85; filter: blur(4px) brightness(1.08); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); }
}
@keyframes introVeilDown {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* スマホ導入：専用縦KV（机込み合成）を全面。PCは cover のまま */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px) {
  .intro {
    background: #5a3a28;
  }
  .intro img {
    object-fit: cover;
    object-position: center;
  }
}


body.intro-lock {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}
/* ABOUT世界観：スマホでも横KV全体＋机の余白でフレーム */
@media (max-width: 720px) {
  .world {
    padding: 16px 10px 18px;
    border: 0;
    border-radius: 22px;
    background: #5a3a28;
  }
  .world-desk {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 90% 60% at 50% 48%, rgba(255, 244, 220, 0.35) 0%, transparent 70%),
      radial-gradient(ellipse 100% 36% at 50% 0%, rgba(170, 210, 255, 0.2) 0%, transparent 55%),
      repeating-linear-gradient(
        180deg,
        #6a452f 0px,
        #7b5438 10px,
        #5e3c28 20px,
        #8a6344 30px,
        #6a452f 40px
      );
  }
  .world img {
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(30, 16, 10, 0.35);
  }
}