@charset "UTF-8";
/* ==========================================================================
   りらぶい — Vtuberのためのボーカル教室
   ---------------------------------------------------------------------------
   Concept : Vtuber事務所の「デビューする側」の高揚感を、教室に持ち込む。
             空・桜・すみれのパステルを重ねた光の中に、丸い文字と泡を浮かべる。
   Color   : 空 #A8DDF0 / 桃 #FFB3D0 / すみれ #C4B2F2 / 若葉 #A9E9D4。
             文字は濃い梅紫 #3E2E4F。ボタンだけ濃いマゼンタ #D12C72（白文字4.9:1）。
   Type    : Fredoka（欧文・見出し）× M PLUS Rounded 1c（和文）の2書体だけ。
   Motion  : transform / opacity のみ。prefers-reduced-motion では全部止める。
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* 光 */
  --sora:      #A8DDF0;
  --sora-lt:   #E4F6FD;
  --momo:      #FFB3D0;
  --momo-lt:   #FFE7F0;
  --sumire:    #C4B2F2;
  --sumire-lt: #EFE9FE;
  --mint:      #A9E9D4;
  --gold:      #FFD36E;

  /* 面 */
  --paper:  #FFFFFF;
  --cream:  #FDF8FC;
  --line:   rgba(120, 92, 150, .14);
  --line-hi:rgba(120, 92, 150, .28);

  /* 文字 */
  --ink:    #3E2E4F;
  --ink-2:  #6B5C7C;
  --ink-3:  #7A6E8C;

  /* 行動 */
  --cta:    #D12C72;
  --cta-dk: #B01F5E;
  --focus:  #2B6CB0;

  --sky: linear-gradient(150deg, #DCF2FB 0%, #EFE7FD 34%, #FFE3EE 62%, #E2F5FC 100%);
  --pop: linear-gradient(100deg, #7FC9EC 0%, #B49BEE 46%, #FF8FBC 100%);
  --pop-soft: linear-gradient(100deg, #DDF1FB 0%, #EDE4FD 48%, #FFE0EC 100%);

  --ff-en: "Fredoka", "M PLUS Rounded 1c", sans-serif;
  --ff-jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;

  --wrap: 1160px;
  --gut:  clamp(20px, 5vw, 48px);
  --sec:  clamp(76px, 10vw, 140px);

  --r:    24px;
  --r-lg: 36px;
  --r-sm: 14px;

  --sh:    0 18px 40px -22px rgba(94, 62, 128, .45);
  --sh-hi: 0 26px 54px -22px rgba(94, 62, 128, .55);

  --ease: cubic-bezier(.22,.61,.36,1);
  --expo: cubic-bezier(.16,1,.3,1);
  --back: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--momo); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:fixed; top:-100px; left:16px; z-index:400;
  padding:12px 22px; background:var(--cta); color:#fff;
  border-radius:0 0 12px 12px; font-weight:700;
}
.skip:focus{ top:0; }

.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto; }
.wrap-lg{ width:min(1320px, 100% - var(--gut)*2); margin-inline:auto; }

/* ==========================================================================
   Atmosphere — 全ページ共通の空。ここだけで「Vtuber事務所の空気」を作る。
   ========================================================================== */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--sky);
  background-attachment:fixed;
}
.sky::after{
  /* うっすらした光のにじみ */
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(255,255,255,.85) 0%, transparent 62%),
    radial-gradient(32% 26% at 84% 30%, rgba(255,208,232,.7) 0%, transparent 66%),
    radial-gradient(40% 34% at 50% 92%, rgba(206,240,252,.8) 0%, transparent 68%);
}
.bubbles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bubbles i{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.25) 42%, rgba(196,178,242,.22) 72%, rgba(255,255,255,0) 74%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.9);
  animation:float-up linear infinite;
  opacity:0;
}
@keyframes float-up{
  0%   { transform:translate3d(0,20vh,0) scale(.7); opacity:0; }
  12%  { opacity:.85; }
  88%  { opacity:.7; }
  100% { transform:translate3d(14px,-108vh,0) scale(1.05); opacity:0; }
}

/* 本文はいつも空の手前 */
.nav, .drawer, main, .foot{ position:relative; z-index:2; }

/* ==========================================================================
   Type — 見出し
   ========================================================================== */

/* 英字の見出し。白フチ＋パステルのグラデ＋下に影で、つやのある看板文字にする。 */
.h-en{
  position:relative; display:inline-block;
  font-family:var(--ff-en); font-weight:600;
  font-size:clamp(38px, 8.2vw, 78px);
  line-height:1.05; letter-spacing:.055em;
  padding:0 .08em;
}
.h-en > span{
  position:relative; z-index:2;
  background:linear-gradient(178deg, #FFFFFF 0%, #E6F5FD 26%, #8FCDEE 52%, #B7A4EF 76%, #FFB3D0 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h-en::before,
.h-en::after{
  content:attr(data-t);
  position:absolute; left:.08em; top:0;
  -webkit-text-stroke:14px #fff; color:#fff;
}
.h-en::before{ z-index:1; }
.h-en::after{
  z-index:0;
  -webkit-text-stroke-width:20px;
  color:rgba(255,182,212,.9);
  -webkit-text-stroke-color:rgba(255,182,212,.9);
  transform:translateY(7px);
  filter:blur(.5px);
}
@supports not (-webkit-text-stroke: 1px #000){
  .h-en::before,.h-en::after{ display:none; }
  .h-en > span{ color:#7A5BB5; -webkit-text-fill-color:currentColor; }
}

.sec-head{ text-align:center; margin-bottom:clamp(34px,5vw,56px); }
.sec-head .lead{
  margin-top:14px;
  font-size:clamp(19px,2.6vw,27px); font-weight:700; line-height:1.7;
  letter-spacing:.02em;
}
.sec-head .note{ margin-top:12px; color:var(--ink-2); font-size:15px; }

/* 和文の小見出し */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ff-en); font-weight:500; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:#7B57B8;
}
.kicker::before{ content:""; width:22px; height:2px; border-radius:2px; background:var(--pop); }

.marker{
  background:linear-gradient(transparent 62%, rgba(255,179,208,.75) 62%);
  padding:0 .08em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 30px;
  font-weight:700; font-size:16px; letter-spacing:.04em;
  border-radius:999px; cursor:pointer;
  transition:transform .22s var(--back), box-shadow .22s var(--ease), background-color .22s var(--ease);
  will-change:transform;
}
.btn svg{ flex:none; }
.btn-main{
  background:var(--cta); color:#fff;
  box-shadow:0 10px 0 -2px var(--cta-dk), 0 22px 34px -18px rgba(209,44,114,.8);
}
.btn-main:hover{ transform:translateY(-3px); box-shadow:0 13px 0 -2px var(--cta-dk), 0 30px 40px -18px rgba(209,44,114,.85); }
.btn-main:active{ transform:translateY(3px); box-shadow:0 5px 0 -2px var(--cta-dk); }
.btn-sub{
  background:#fff; color:var(--ink);
  box-shadow:0 8px 0 -2px #E3D6F0, 0 18px 30px -20px rgba(94,62,128,.7);
}
.btn-sub:hover{ transform:translateY(-3px); box-shadow:0 11px 0 -2px #E3D6F0, 0 26px 36px -20px rgba(94,62,128,.75); }
.btn-sub:active{ transform:translateY(3px); box-shadow:0 4px 0 -2px #E3D6F0; }
.btn-lg{ min-height:66px; padding:0 32px; font-size:18px; }
.btn-sm{ min-height:46px; padding:0 22px; font-size:14px; }
.btn-ghost{
  background:rgba(255,255,255,.7); color:var(--ink);
  border:2px solid rgba(255,255,255,.9); backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); }

/* ==========================================================================
   Header
   ========================================================================== */
.nav{
  position:fixed; inset:14px 14px auto; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }

.brand{
  display:inline-flex; align-items:center; gap:11px;
  padding:9px 20px 9px 13px; border-radius:999px;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 26px -16px rgba(94,62,128,.7);
  backdrop-filter:blur(10px);
  transition:transform .25s var(--back);
}
.brand:hover{ transform:translateY(-2px); }
/* 画像ロゴを入れたとき。ロゴの中の英字まで読める大きさに取る。 */
.brand img{ max-height:56px; width:auto; }
.brand.has-logo{ padding:8px 18px; }
.foot-brand .brand img{ max-height:72px; }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-jp{ font-weight:800; font-size:17px; letter-spacing:.06em; }
.brand-en{ font-family:var(--ff-en); font-size:9.5px; letter-spacing:.28em; color:var(--ink-3); }

.nav-right{ display:flex; align-items:center; gap:10px; }
.nav-cta{ display:none; }

.burger{
  width:56px; height:56px; border-radius:20px;
  display:grid; place-items:center; gap:0;
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 26px -14px rgba(94,62,128,.7);
  backdrop-filter:blur(10px);
  transition:transform .25s var(--back), background-color .25s var(--ease);
}
.burger:hover{ transform:translateY(-2px); }
.burger span{
  grid-area:1/1; width:22px; height:2.5px; border-radius:2px; background:var(--ink);
  transition:transform .3s var(--expo), opacity .2s var(--ease);
}
.burger span:nth-child(1){ transform:translateY(-7px); }
.burger span:nth-child(3){ transform:translateY(7px); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg); }

/* ---------- Drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:110;
  background:var(--sky);
  display:grid; place-items:center;
  padding:96px var(--gut) 40px;
  opacity:0; visibility:hidden;
  transition:opacity .34s var(--ease), visibility .34s;
  overflow-y:auto;
}
.drawer[data-open="true"]{ opacity:1; visibility:visible; }
.drawer-in{ width:min(560px,100%); text-align:center; }
.drawer-menu li{
  opacity:0; transform:translateY(16px);
  transition:opacity .4s var(--expo), transform .4s var(--expo);
}
.drawer[data-open="true"] .drawer-menu li{ opacity:1; transform:none; }
.drawer-menu li:nth-child(1){ transition-delay:.06s; }
.drawer-menu li:nth-child(2){ transition-delay:.10s; }
.drawer-menu li:nth-child(3){ transition-delay:.14s; }
.drawer-menu li:nth-child(4){ transition-delay:.18s; }
.drawer-menu li:nth-child(5){ transition-delay:.22s; }
.drawer-menu li:nth-child(6){ transition-delay:.26s; }
.drawer-menu li:nth-child(7){ transition-delay:.30s; }
.drawer-menu li:nth-child(8){ transition-delay:.34s; }
.drawer-menu a{
  display:block; padding:13px 0;
  font-family:var(--ff-en); font-weight:600; font-size:clamp(24px,5vw,34px);
  letter-spacing:.06em; color:#5B4478;
  transition:color .2s var(--ease), transform .25s var(--back);
}
.drawer-menu a:hover{ color:var(--cta); transform:translateX(6px); }
.drawer-menu .jp{
  display:block; font-family:var(--ff-jp); font-size:12px; font-weight:500;
  letter-spacing:.16em; color:var(--ink-3); margin-top:-4px;
}
.drawer-foot{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:18px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(100svh, 900px);
  display:grid; align-items:center;
  padding:120px 0 clamp(80px,12vw,140px);
  overflow:clip;
}
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(20px,4vw,48px);
  align-items:center;
}
.hero-copy{ position:relative; z-index:3; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px 8px 10px; border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 26px -18px rgba(94,62,128,.9);
  font-size:13px; font-weight:700; letter-spacing:.06em;
}
.hero-badge b{ color:var(--cta); }
.hero-badge .dot{
  width:9px; height:9px; border-radius:50%; background:var(--cta); flex:none;
  box-shadow:0 0 0 0 rgba(209,44,114,.55);
  animation:live 2.2s var(--ease) infinite;
}
@keyframes live{ 70%,100%{ box-shadow:0 0 0 11px rgba(209,44,114,0); } }

.hero h1{
  margin:22px 0 0;
  font-weight:800; letter-spacing:.01em; line-height:1.28;
  font-size:clamp(32px, 5.2vw, 62px);
  text-shadow:0 2px 0 rgba(255,255,255,.9), 0 14px 30px rgba(255,255,255,.55);
}
.hero h1 .grad{
  background:linear-gradient(96deg, #1E6FA8 0%, #6C3FC4 48%, #C41E6E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* 親の白い影が乗ると色が飛ぶので、ここだけ影を切る。 */
  text-shadow:none;
}
.hero h1 .big{ font-size:1.18em; }
.hero-sub{
  margin-top:22px; max-width:34em;
  font-size:clamp(15px,1.7vw,17px); line-height:2.1; color:#4C3C5E;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.hero-btns{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-meta{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 10px;
}
.hero-meta li{
  padding:6px 15px; border-radius:999px;
  background:rgba(255,255,255,.78); border:1.5px solid rgba(255,255,255,.95);
  font-size:12.5px; font-weight:700; color:#5B4478;
}

/* 立ち絵 */
.hero-art{ position:relative; justify-self:center; align-self:center; display:flex; justify-content:center; }
.hero-art img{
  position:relative; z-index:2;
  /* 高さで決める。横幅で決めると縦長の立ち絵が画面からはみ出す。 */
  height:min(68vh, 620px); width:auto; max-width:100%;
  filter:drop-shadow(0 34px 40px rgba(120,90,160,.28));
  animation:sway 7s ease-in-out infinite;
}
@keyframes sway{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(-.6deg); } }
.hero-art::before{
  /* 立ち絵の後ろの光の輪 */
  content:""; position:absolute; z-index:1;
  left:50%; bottom:8%; translate:-50% 0;
  width:min(430px,42vw); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,214,236,.72) 40%, rgba(196,178,242,.42) 66%, rgba(255,255,255,0) 72%);
}
.hero-art .ring{
  position:absolute; z-index:1; left:50%; bottom:4%; translate:-50% 0;
  width:min(390px,38vw); aspect-ratio:1; border-radius:50%;
  border:2px dashed rgba(255,255,255,.9);
  animation:spin 42s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.hero-name{
  position:absolute; z-index:3; right:-6px; bottom:16%;
  padding:9px 17px; border-radius:14px;
  background:rgba(255,255,255,.92); box-shadow:var(--sh);
  font-size:12.5px; font-weight:800; line-height:1.5; text-align:right;
}
.hero-name small{ display:block; font-family:var(--ff-en); font-weight:500; font-size:10px; letter-spacing:.14em; color:var(--ink-3); }

/* 波形 */
.wavebar{
  position:absolute; left:0; right:0; bottom:26px; z-index:1;
  display:flex; align-items:flex-end; justify-content:center; gap:5px;
  height:52px; opacity:.55; pointer-events:none;
}
.wavebar i{
  width:5px; border-radius:3px; background:var(--pop);
  animation:vu 1.15s ease-in-out infinite alternate;
}
@keyframes vu{ from{ height:8px; } to{ height:46px; } }

/* ==========================================================================
   Marquee — 流れる帯
   ========================================================================== */
.marquee{
  position:relative; z-index:2;
  padding:15px 0; overflow:hidden;
  background:var(--pop);
  transform:rotate(-1.4deg) scaleX(1.06);
  box-shadow:0 16px 34px -22px rgba(94,62,128,.9);
}
.marquee-track{ display:flex; width:max-content; animation:slide 26s linear infinite; }
.marquee-track span{
  display:inline-flex; align-items:center; gap:20px;
  padding-right:20px; white-space:nowrap;
  font-family:var(--ff-en); font-weight:600; font-size:19px; letter-spacing:.08em; color:#fff;
}
.marquee-track span::after{ content:"★"; font-size:13px; opacity:.85; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Section shell
   ========================================================================== */
.sec{ padding:var(--sec) 0; position:relative; }
.sec-white{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(8px);
  border-block:1px solid rgba(255,255,255,.9);
}
.sec-tint{ background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.62) 18%, rgba(255,255,255,.62) 82%, rgba(255,255,255,0)); }

/* ==========================================================================
   About
   ========================================================================== */
.about-lead{
  max-width:38em; margin:0 auto; text-align:center; text-wrap:pretty;
  font-size:clamp(15px,1.8vw,17px); line-height:2.2; color:#4C3C5E;
}
.about-cards{
  margin-top:clamp(38px,6vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px);
}
.about-card{
  padding:34px 26px 30px; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh); text-align:center;
  border:2px solid rgba(255,255,255,.9);
}
.about-card .ic{
  width:64px; height:64px; margin:0 auto 16px; border-radius:22px;
  display:grid; place-items:center; background:var(--pop-soft);
}
.about-card h3{ font-size:18px; font-weight:800; letter-spacing:.02em; }
.about-card p{ margin-top:10px; font-size:14.5px; line-height:1.95; color:var(--ink-2); }

/* ==========================================================================
   Merit — 6つの売り
   ========================================================================== */
.merits{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.6vw,28px);
}
.merit{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  padding:38px 28px 32px; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh);
  border:2px solid rgba(255,255,255,.9);
  overflow:hidden;
  transition:transform .3s var(--back), box-shadow .3s var(--ease);
}
.merit::before{
  content:""; position:absolute; z-index:-1; inset:auto -30% -55% auto;
  width:230px; height:230px; border-radius:50%;
  background:var(--m-bg, var(--pop-soft));
  right:-70px; bottom:-90px;
  transition:transform .45s var(--expo);
}
.merit:hover{ transform:translateY(-8px); box-shadow:var(--sh-hi); }
.merit:hover::before{ transform:scale(1.5); }
.merit-no{
  font-family:var(--ff-en); font-weight:600; font-size:15px; letter-spacing:.14em;
  color:var(--m-ink, #8E6FC4);
}
.merit-ic{
  width:76px; height:76px; margin:14px 0 18px; border-radius:26px;
  display:grid; place-items:center;
  background:var(--m-bg, var(--pop-soft));
  box-shadow:inset 0 -3px 8px rgba(255,255,255,.9);
}
.merit h3{
  font-size:clamp(19px,2.1vw,22px); font-weight:800; line-height:1.55; letter-spacing:.01em;
}
.merit p{ margin-top:14px; font-size:14.5px; line-height:1.98; color:var(--ink-2); }
.merit-tag{
  margin-top:auto; padding-top:20px;
  display:flex; flex-wrap:wrap; gap:7px;
}
.merit-tag span{
  padding:4px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
  background:var(--m-bg, var(--pop-soft)); color:var(--m-ink, #6F55A8);
}

/* ==========================================================================
   Flow — レッスンの流れ
   ========================================================================== */
.flow{ position:relative; display:grid; gap:18px; }
.flow::before{
  content:""; position:absolute; left:41px; top:40px; bottom:60px; width:3px;
  border-radius:3px; background:linear-gradient(180deg, var(--sora), var(--sumire) 50%, var(--momo));
  opacity:.6;
}
.flow li{
  position:relative; display:grid; grid-template-columns:84px 1fr; gap:20px; align-items:start;
  padding:24px 26px; border-radius:var(--r);
  background:rgba(255,255,255,.92); box-shadow:var(--sh);
}
.flow .num{
  width:84px; height:84px; border-radius:28px; display:grid; place-items:center;
  background:var(--pop); color:#fff; font-family:var(--ff-en); font-weight:600; font-size:26px;
  box-shadow:0 12px 24px -14px rgba(94,62,128,.9);
}
.flow h3{ font-size:19px; font-weight:800; margin-top:6px; }
.flow p{ margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }

/* ==========================================================================
   Studio — ルームレンタル
   ========================================================================== */
.studio{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,52px); align-items:center; }
.studio-vis{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--sh-hi);
  background:linear-gradient(150deg,#2A2140 0%, #3E3060 46%, #59386B 100%);
  display:grid; place-items:center;
}
.studio-vis::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 46% at 50% 26%, rgba(255,190,225,.36), transparent 70%);
}
.studio-vis img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.studio-mic{ position:relative; z-index:2; width:min(46%,220px); opacity:.96; }
.studio-eq{ margin-top:24px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.studio-eq li{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:16px;
  background:rgba(255,255,255,.92); box-shadow:0 12px 26px -22px rgba(94,62,128,.9);
  font-size:13.5px; font-weight:700;
}
.studio-eq .tick{ width:22px; height:22px; flex:none; }

/* ==========================================================================
   Talent — 専属VTuber
   ========================================================================== */
.talent-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,26px);
}
.talent{
  position:relative; display:block;
  border-radius:190px 190px var(--r-lg) var(--r-lg);
  padding:14px 14px 22px;
  background:linear-gradient(170deg, var(--t1,#CFE9FA) 0%, var(--t2,#FFD5E6) 100%);
  box-shadow:var(--sh);
  transition:transform .32s var(--back), box-shadow .32s var(--ease);
  overflow:hidden;
}
.talent:hover{ transform:translateY(-9px) rotate(-.7deg); box-shadow:var(--sh-hi); }
.talent-ph{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  border-radius:170px 170px 20px 20px;
  background:rgba(255,255,255,.55);
}
.talent-ph img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .5s var(--expo); }
.talent:hover .talent-ph img{ transform:scale(1.05); }
.talent-ph .none{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-en); font-size:13px; letter-spacing:.16em; color:#fff;
}
.talent-name{
  margin-top:14px; text-align:center;
  padding:9px 10px; border-radius:14px; background:rgba(255,255,255,.94);
  box-shadow:0 8px 18px -14px rgba(94,62,128,.9);
}
.talent-name b{ display:block; font-size:16px; font-weight:800; letter-spacing:.04em; }
.talent-name small{ display:block; font-family:var(--ff-en); font-size:10px; letter-spacing:.2em; color:var(--ink-3); }
.talent-cat{
  position:absolute; top:22px; left:22px; z-index:3;
  padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.92);
  font-size:11px; font-weight:800; letter-spacing:.06em;
}
.talent-sns{ margin-top:10px; display:flex; justify-content:center; gap:8px; }
.talent-sns a, .sns-i{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--ink);
  transition:transform .22s var(--back), background-color .22s var(--ease);
}
.talent-sns a:hover, .sns-i:hover{ transform:translateY(-3px); background:#fff; }

.empty{
  padding:52px 24px; text-align:center; border-radius:var(--r-lg);
  background:rgba(255,255,255,.8); border:2px dashed var(--line-hi);
  color:var(--ink-2);
}

/* ==========================================================================
   Teacher
   ========================================================================== */
.teachers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); }
.teacher{
  display:flex; flex-direction:column;
  border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh);
  transition:transform .3s var(--back), box-shadow .3s var(--ease);
}
.teacher:hover{ transform:translateY(-7px); box-shadow:var(--sh-hi); }
.teacher-ph{ aspect-ratio:1/1; background:var(--pop-soft); position:relative; overflow:hidden; }
.teacher-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--expo); }
.teacher:hover .teacher-ph img{ transform:scale(1.04); }
.teacher-ph .ini{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-en); font-size:42px; font-weight:600; color:#fff;
}
.teacher-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.teacher-role{
  display:inline-block; padding:5px 13px; border-radius:14px;
  background:var(--pop-soft); color:#6F55A8; font-size:11.5px; font-weight:800; letter-spacing:.04em;
  line-height:1.7; max-width:100%;
}
.teacher h3{ margin-top:12px; font-size:19px; font-weight:800; }
.teacher h3 small{ display:block; font-family:var(--ff-en); font-size:10.5px; letter-spacing:.2em; color:var(--ink-3); font-weight:500; }
.teacher p{ margin-top:10px; font-size:14px; line-height:1.95; color:var(--ink-2); }
.teacher-more{
  display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px;
  background:var(--pop-soft); color:#6F55A8;
  font-family:var(--ff-jp); font-size:11.5px; font-weight:800; letter-spacing:.02em;
  vertical-align:middle;
}
.teacher-more-link{
  margin-top:auto; padding-top:16px;
  font-size:13px; font-weight:800; color:var(--cta);
}

/* ==========================================================================
   Price
   ========================================================================== */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:34px 28px 30px; border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh); border:2px solid rgba(255,255,255,.9);
}
.plan.is-pick{ border-color:var(--momo); box-shadow:0 26px 54px -24px rgba(209,44,114,.55); }
.plan-pick{
  position:absolute; top:-15px; left:50%; translate:-50% 0;
  padding:6px 18px; border-radius:999px; background:var(--cta); color:#fff;
  font-size:12px; font-weight:800; letter-spacing:.06em; white-space:nowrap;
  box-shadow:0 12px 22px -14px rgba(209,44,114,.9);
}
.plan h3{ font-size:20px; font-weight:800; }
.plan .yen{ margin-top:14px; font-family:var(--ff-en); font-weight:600; color:var(--ink); }
.plan .yen b{ font-size:40px; letter-spacing:.01em; }
.plan .yen span{ font-size:14px; color:var(--ink-2); font-family:var(--ff-jp); }
.plan .desc{ margin-top:14px; font-size:14px; color:var(--ink-2); line-height:1.9; }
.plan ul{ margin-top:20px; display:grid; gap:9px; }
.plan li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:14px; line-height:1.8; }
.plan li svg{ margin-top:5px; }
.plan .btn{ margin-top:26px; width:100%; }
.price-note{ margin-top:22px; text-align:center; font-size:13px; color:var(--ink-2); }

/* 2枚だけ並べるとき（オンライン／対面） */
.duo{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,26px);
  max-width:880px; margin-inline:auto;
}
.duo .about-card{ text-align:left; padding:34px 30px 32px; }
.duo .about-card .ic{ margin:0 0 18px; }

/* どのコースにも入っているもの */
.allin{
  max-width:900px; margin:0 auto clamp(30px,4vw,44px);
  padding:clamp(26px,3.4vw,36px) clamp(22px,3vw,40px);
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border:2px solid rgba(255,255,255,.95);
  box-shadow:var(--sh);
}
.allin-head{
  text-align:center; font-size:clamp(17px,2.2vw,21px); font-weight:800; line-height:1.7;
  margin-bottom:20px;
}
.allin-head strong{
  position:relative; padding:0 .12em;
  background:linear-gradient(transparent 58%, rgba(255,179,208,.8) 58%);
  color:var(--cta);
}
.allin-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px 22px; }
.allin-list li{
  display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start;
  font-size:14.5px; font-weight:700; line-height:1.7;
}
.allin-list .tick{ color:var(--cta); margin-top:2px; }

/* コースの回数と時間 */
.plan-min{
  margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
}
.plan .yen{ margin-top:10px; display:flex; align-items:baseline; gap:4px; flex-wrap:wrap; }
.plan-allin{
  margin-top:auto; padding-top:18px;
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:800; color:var(--cta);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,26px); }
.post{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh);
  transition:transform .3s var(--back), box-shadow .3s var(--ease);
}
.post:hover{ transform:translateY(-7px); box-shadow:var(--sh-hi); }
.post-ph{ aspect-ratio:16/10; overflow:hidden; background:var(--pop-soft); position:relative; }
.post-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--expo); }
.post:hover .post-ph img{ transform:scale(1.05); }
.post-ph .no{ position:absolute; inset:0; display:grid; place-items:center; }
.post-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-meta{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--ink-3); }
.post-meta time{ font-family:var(--ff-en); letter-spacing:.08em; }
.post-cat{ padding:3px 11px; border-radius:999px; background:var(--pop-soft); color:#6F55A8; font-weight:800; }
.post h3{ margin-top:12px; font-size:17px; font-weight:800; line-height:1.65; }
.post p{ margin-top:10px; font-size:13.5px; color:var(--ink-2); line-height:1.9; }
.post .more{ margin-top:auto; padding-top:16px; font-size:13px; font-weight:800; color:var(--cta); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ display:grid; gap:12px; max-width:840px; margin-inline:auto; }
.faq details{
  border-radius:var(--r); background:rgba(255,255,255,.94); box-shadow:var(--sh);
  overflow:hidden;
}
.faq summary{
  display:grid; grid-template-columns:34px 1fr 24px; gap:14px; align-items:center;
  padding:20px 24px; cursor:pointer; font-weight:800; font-size:15.5px; line-height:1.7;
  list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .q{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:var(--pop); color:#fff; font-family:var(--ff-en); font-size:15px;
}
.faq summary .pm{ position:relative; width:20px; height:20px; justify-self:end; }
.faq summary .pm::before,
.faq summary .pm::after{
  content:""; position:absolute; inset:50% 0 auto; height:2.5px; border-radius:2px;
  background:var(--ink-2); translate:0 -50%;
  transition:transform .28s var(--expo);
}
.faq summary .pm::after{ transform:rotate(90deg); }
.faq details[open] summary .pm::after{ transform:rotate(0deg); }
.faq .a{ padding:0 24px 24px 72px; font-size:14.5px; line-height:2; color:var(--ink-2); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
  position:relative; overflow:hidden;
  border-radius:clamp(28px,5vw,48px);
  padding:clamp(44px,7vw,76px) clamp(24px,5vw,64px);
  background:var(--pop);
  box-shadow:0 34px 70px -34px rgba(94,62,128,.9);
  text-align:center; color:#fff;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 20% 10%, rgba(255,255,255,.42), transparent 62%),
             radial-gradient(46% 56% at 84% 88%, rgba(255,255,255,.32), transparent 66%);
}
.cta > *{ position:relative; z-index:2; }
.cta h2{ font-size:clamp(24px,3.6vw,38px); font-weight:800; line-height:1.6; }
.cta p{ margin-top:16px; font-size:15px; line-height:2; color:rgba(255,255,255,.94); }
.cta .btns{ margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta .btn-main{ background:#fff; color:var(--cta); box-shadow:0 10px 0 -2px rgba(0,0,0,.12); }
.cta .btn-main:hover{ box-shadow:0 13px 0 -2px rgba(0,0,0,.12); }
.cta-note{ margin-top:20px; font-size:12.5px; color:rgba(255,255,255,.86); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{
  margin-top:var(--sec);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.95);
  padding:clamp(46px,6vw,68px) 0 30px;
}
.foot-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:34px; }
.foot-brand .brand{ box-shadow:none; background:none; padding:0; }
.foot-brand p{ margin-top:16px; font-size:13.5px; color:var(--ink-2); line-height:1.95; max-width:26em; }
.foot-sns{ margin-top:18px; display:flex; gap:9px; }
.foot h3{ font-family:var(--ff-en); font-size:12px; letter-spacing:.2em; color:var(--ink-3); font-weight:500; }
.foot-menu{ margin-top:14px; display:grid; gap:9px; }
.foot-menu a{ font-size:14px; font-weight:500; transition:color .2s var(--ease); }
.foot-menu a:hover{ color:var(--cta); }
.foot-info{ margin-top:14px; font-size:13.5px; color:var(--ink-2); line-height:1.95; }
.foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-3);
}
.foot-bottom .copy{ font-family:var(--ff-en); letter-spacing:.06em; }

/* 追従CTA（スマホ） */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:none; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  box-shadow:0 -10px 30px -20px rgba(94,62,128,.9);
}
.dock .btn{ flex:1; min-height:52px; padding:0 10px; font-size:14px; }

/* ==========================================================================
   下層ページ共通
   ========================================================================== */
.page-head{
  padding:calc(96px + clamp(40px,7vw,80px)) 0 clamp(34px,5vw,56px);
  text-align:center;
}
.page-head .h-en{ font-size:clamp(34px,7vw,64px); }
.page-head .jp{ margin-top:10px; font-size:16px; font-weight:800; letter-spacing:.06em; }
.page-head .desc{ margin-top:14px; font-size:14.5px; color:var(--ink-2); }

.crumbs{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  font-size:12px; color:var(--ink-3); margin-top:18px;
}
.crumbs a:hover{ color:var(--cta); }

.card-box{
  background:rgba(255,255,255,.94); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:clamp(26px,4vw,54px);
}

.entry{ max-width:760px; margin-inline:auto; }
.entry-head{ text-align:center; margin-bottom:clamp(26px,4vw,42px); }
.entry-head h1{ margin-top:14px; font-size:clamp(23px,3.4vw,34px); font-weight:800; line-height:1.6; }
.entry-thumb{ margin-bottom:clamp(24px,4vw,40px); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); }

/* 記事本文 */
.prose{ font-size:16px; line-height:2.15; color:#4A3A5C; }
.prose > * + *{ margin-top:1.5em; }
.prose h2{
  margin-top:2.4em; padding:14px 20px; border-radius:16px;
  background:var(--pop-soft); font-size:clamp(19px,2.4vw,23px); font-weight:800; line-height:1.6;
}
.prose h3{
  margin-top:2.2em; padding-left:16px; border-left:5px solid var(--momo);
  font-size:clamp(17px,2vw,20px); font-weight:800; line-height:1.65;
}
.prose h4{ margin-top:2em; font-size:16.5px; font-weight:800; }
.prose a{ color:var(--cta); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.prose a:hover{ text-decoration-thickness:2.5px; }
.prose strong{ font-weight:800; }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin-top:.5em; }
.prose li::marker{ color:var(--sumire); }
.prose img, .prose figure img{ border-radius:20px; box-shadow:var(--sh); }
.prose figcaption{ margin-top:10px; font-size:12.5px; color:var(--ink-3); text-align:center; }
.prose blockquote{
  padding:20px 24px; border-radius:18px; background:rgba(255,255,255,.9);
  border-left:5px solid var(--sumire); color:var(--ink-2); font-size:15px;
}
.prose blockquote > * + *{ margin-top:1em; }
.prose hr{ border:0; height:2px; background:var(--line); border-radius:2px; margin:2.6em 0; }
.prose code{
  padding:.15em .5em; border-radius:7px; background:rgba(196,178,242,.2);
  font-size:.9em; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre{
  padding:20px; border-radius:18px; background:#332844; color:#F2ECFA;
  overflow-x:auto; font-size:13.5px; line-height:1.8;
}
.prose pre code{ background:none; padding:0; color:inherit; }
.prose table{ width:100%; border-collapse:collapse; font-size:14px; display:block; overflow-x:auto; }
.prose th, .prose td{ padding:12px 14px; border:1px solid var(--line); text-align:left; }
.prose th{ background:var(--pop-soft); font-weight:800; }
.prose .wp-block-embed__wrapper{ position:relative; }
.prose iframe{ max-width:100%; border-radius:18px; }
.alignwide{ margin-inline:calc(-1 * clamp(0px,4vw,80px)); }
.aligncenter{ margin-inline:auto; }

/* ページ送り */
.pager{ margin-top:clamp(36px,5vw,56px); display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.pager .page-numbers{
  min-width:46px; height:46px; padding:0 14px; border-radius:16px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.9); box-shadow:0 10px 22px -18px rgba(94,62,128,.9);
  font-family:var(--ff-en); font-weight:500;
  transition:transform .22s var(--back), background-color .2s var(--ease);
}
.pager .page-numbers:hover{ transform:translateY(-3px); background:#fff; }
.pager .current{ background:var(--cta); color:#fff; }

.post-nav{
  margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.post-nav a{
  padding:20px 24px; border-radius:var(--r); background:rgba(255,255,255,.92);
  box-shadow:var(--sh); font-size:14px; font-weight:700; line-height:1.7;
  transition:transform .25s var(--back);
}
.post-nav a:hover{ transform:translateY(-4px); }
.post-nav small{ display:block; font-family:var(--ff-en); font-size:11px; letter-spacing:.16em; color:var(--ink-3); margin-bottom:6px; }
.post-nav .next{ text-align:right; }

/* 絞り込みタブ */
.tabs{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-bottom:clamp(28px,4vw,44px); }
.tabs a{
  padding:9px 20px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:rgba(255,255,255,.86); box-shadow:0 10px 22px -18px rgba(94,62,128,.9);
  transition:transform .22s var(--back), background-color .2s var(--ease), color .2s var(--ease);
}
.tabs a:hover{ transform:translateY(-3px); background:#fff; }
.tabs a[aria-current="page"]{ background:var(--cta); color:#fff; }

/* VTuber個別 */
.vt-hero{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,4vw,52px); align-items:center; }
.vt-ph{
  border-radius:200px 200px var(--r-lg) var(--r-lg); overflow:hidden;
  aspect-ratio:3/4; box-shadow:var(--sh-hi);
  background:linear-gradient(170deg, var(--t1,#CFE9FA), var(--t2,#FFD5E6));
}
.vt-ph img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.vt-info h1{ margin-top:12px; font-size:clamp(28px,4.4vw,44px); font-weight:800; letter-spacing:.03em; }
.vt-info .latin{ font-family:var(--ff-en); font-size:13px; letter-spacing:.24em; color:var(--ink-3); }
.vt-info .catch{ margin-top:16px; font-size:17px; font-weight:700; color:#5B4478; line-height:1.85; }
.vt-facts{ margin-top:22px; display:grid; gap:10px; max-width:420px; }
.vt-facts div{ display:grid; grid-template-columns:96px 1fr; gap:12px; font-size:14px; }
.vt-facts dt{ color:var(--ink-3); font-weight:700; font-size:12.5px; letter-spacing:.08em; padding-top:2px; }
.vt-sns{ margin-top:24px; display:flex; gap:9px; }

/* 検索フォーム */
.searchform{ display:flex; gap:8px; max-width:520px; margin-inline:auto; }
.searchform input[type="search"]{
  flex:1; min-height:52px; padding:0 20px; border-radius:999px; border:2px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.92); font:inherit; font-size:15px; color:var(--ink);
  box-shadow:0 10px 24px -20px rgba(94,62,128,.9);
}
.searchform input::placeholder{ color:var(--ink-3); }

/* ==========================================================================
   スクロールで出てくる（JSが無いときは最初から見えている）
   ========================================================================== */
.js .rv{ opacity:0; transform:translateY(22px); }
.rv.is-in{ opacity:1; transform:none; transition:opacity .6s var(--expo), transform .6s var(--expo); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .talent-grid{ grid-template-columns:repeat(3,1fr); }
  .merits, .teachers, .posts, .about-cards, .plans{ grid-template-columns:repeat(2,1fr); }
  .plan.is-pick{ grid-column:1 / -1; }
  .duo{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .hero-art img{ height:min(46vh,400px); }
  .hero-art::before, .hero-art .ring{ width:min(300px,66vw); }
  .hero-name{ right:-4px; bottom:8%; }
  .hero{ padding-top:104px; text-align:left; }
  .studio, .vt-hero{ grid-template-columns:1fr; }
  .studio-eq{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  body{ font-size:15.5px; }
  .talent-grid{ grid-template-columns:repeat(2,1fr); }
  .merits, .teachers, .posts, .about-cards, .plans, .duo{ grid-template-columns:1fr; }
  .allin-list{ grid-template-columns:1fr; }
  .flow li{ grid-template-columns:1fr; gap:12px; padding:22px; }
  .flow .num{ width:60px; height:60px; border-radius:20px; font-size:20px; }
  .flow::before{ display:none; }
  .post-nav{ grid-template-columns:1fr; }
  .faq .a{ padding-left:24px; }
  .dock{ display:flex; }
  .foot{ padding-bottom:96px; }
  .nav{ inset:10px 10px auto; }
  .burger{ width:50px; height:50px; border-radius:18px; }
  .brand img{ max-height:40px; }
  .foot-brand .brand img{ max-height:58px; }
  .prose h2{ padding:12px 16px; }
  .alignwide{ margin-inline:0; }
}
@media (max-width:400px){
  .brand-jp{ font-size:15px; }
  .brand{ padding:8px 15px 8px 10px; }
  .brand.has-logo{ padding:7px 12px; }
}

/* ==========================================================================
   動きを減らす設定のとき
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .rv{ opacity:1; transform:none; }
  .bubbles{ display:none; }
  .marquee-track{ animation:none; }
  .wavebar i{ height:24px; }
}

/* 印刷 */
@media print{
  .nav,.drawer,.dock,.bubbles,.sky,.marquee{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ==========================================================================
   WordPress の作法ぶん
   ========================================================================== */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.screen-reader-text:focus{
  position:fixed !important; top:12px; left:12px; z-index:400;
  width:auto; height:auto; padding:12px 20px; margin:0;
  clip:auto; clip-path:none; background:var(--cta); color:#fff; border-radius:12px;
}
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:8px; }
.sticky .post-cat::after{ content:" / 固定"; }
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.comment-list{ list-style:none; padding:0; }

/* ==========================================================================
   お問い合わせフォーム（Contact Form 7）
   ---------------------------------------------------------------------------
   プラグインが出す素の入力欄は、このサイトの中だと浮いてしまうので、
   ここでテーマの色と丸みに合わせています。
   Contact Form 7 を入れていないときは、このブロックは何もしません。
   ========================================================================== */
.wpcf7{ margin-top:8px; }
.wpcf7 form > p{ margin:0 0 22px; }
.wpcf7 form > p:last-of-type{ margin-bottom:0; }

/* 項目名 */
.wpcf7 .f-label{
  display:block; margin-bottom:9px;
  font-size:14.5px; font-weight:800; letter-spacing:.02em; color:var(--ink);
}
.wpcf7 .f-req,
.wpcf7 .f-any{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:800; vertical-align:middle;
}
.wpcf7 .f-req{ background:#FFE0EC; color:#A82B64; }
.wpcf7 .f-any{ background:var(--muted, #F1EEF5); color:var(--ink-2); }
.wpcf7 .f-note{ display:block; margin-top:8px; font-size:12.5px; color:var(--ink-2); line-height:1.8; }

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;
  /* iOSで勝手に拡大されないよう16pxを下回らせない */
  font-family:inherit; font-size:16px; line-height:1.7; color:var(--ink);
  padding:14px 16px;
  background:#fff;
  border:2px solid #E7DFF2;
  border-radius:16px;
  box-shadow:inset 0 2px 5px rgba(94,62,128,.05);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.wpcf7 textarea{ min-height:170px; resize:vertical; }
.wpcf7 select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5C7C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{ color:#A99CBA; }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  outline:none;
  border-color:var(--sumire);
  box-shadow:0 0 0 4px rgba(196,178,242,.32);
}
.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* チェックボックスとラジオ */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-acceptance{ display:block; }
.wpcf7 .wpcf7-list-item{
  display:inline-block; margin:0 10px 10px 0;
}
.wpcf7 .wpcf7-list-item label{ cursor:pointer; }
.wpcf7 .wpcf7-list-item-label{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  background:#fff; border:2px solid #E7DFF2;
  font-size:14.5px; font-weight:700;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--back);
}
.wpcf7 .wpcf7-list-item input{
  width:19px; height:19px; margin:0; accent-color:var(--cta); flex:none;
}
.wpcf7 .wpcf7-list-item label:hover .wpcf7-list-item-label{ transform:translateY(-2px); border-color:var(--sumire); }
.wpcf7 .wpcf7-list-item input:checked + .wpcf7-list-item-label{
  border-color:var(--cta); background:#FFF0F6; color:#A82B64;
}
.wpcf7 .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label{ outline:3px solid var(--focus); outline-offset:2px; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{ border-radius:16px; }

/* 送信ボタン */
.wpcf7 .wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:66px; padding:0 44px; margin-top:6px;
  font-family:inherit; font-size:18px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--cta); border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 0 -2px var(--cta-dk), 0 22px 34px -18px rgba(209,44,114,.8);
  transition:transform .22s var(--back), box-shadow .22s var(--ease);
}
.wpcf7 .wpcf7-submit:hover{ transform:translateY(-3px); box-shadow:0 13px 0 -2px var(--cta-dk), 0 30px 40px -18px rgba(209,44,114,.85); }
.wpcf7 .wpcf7-submit:active{ transform:translateY(3px); box-shadow:0 5px 0 -2px var(--cta-dk); }
.wpcf7 .wpcf7-submit:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.wpcf7 .f-submit{ text-align:center; margin-top:34px; }

/* 送信中のぐるぐる */
.wpcf7 .wpcf7-spinner{ margin:0 0 0 14px; background-color:var(--sumire); }

/* エラーと結果の表示 */
.wpcf7 .wpcf7-not-valid-tip{
  margin-top:9px; padding:9px 14px; border-radius:12px;
  background:#FFF0F4; color:#B01F5E;
  font-size:13px; font-weight:700; line-height:1.7;
}
.wpcf7 .wpcf7-not-valid{ border-color:#F0A5C3; }
.wpcf7 .wpcf7-response-output{
  margin:26px 0 0; padding:16px 20px;
  border:2px solid var(--line-hi); border-radius:16px;
  background:#fff; font-size:14.5px; line-height:1.9;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:#8FD9BE; background:#F1FBF7; color:#1F6B53; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{ border-color:#F0A5C3; background:#FFF3F7; color:#B01F5E; }

@media (max-width:720px){
  .wpcf7 .wpcf7-submit{ width:100%; padding:0 20px; }
  .wpcf7 .wpcf7-list-item{ display:block; margin-right:0; }
  .wpcf7 .wpcf7-list-item-label{ display:flex; }
}