/* ページ全体フェードイン */

body {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


:root{--bg:#f6f8fb;--ink:#0f172a;--muted:#64748b;--card:#ffffff;--ring:0 10px 30px rgba(15,23,42,.07);--radius:18px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;line-height:1.65}
a{color:#0ea5e9;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1080px;margin:auto;padding:clamp(20px,6vw,64px)}
.nav{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{font-weight:800;letter-spacing:.02em}
.navlinks{display:flex;gap:14px;flex-wrap:wrap}
.hero{background:var(--card);border:1px solid rgba(100,116,139,.15);border-radius:var(--radius);box-shadow:var(--ring);overflow:hidden;margin-bottom:16px}
.hero img{width:100%;height:auto;display:block}
.hero .inner{padding:clamp(16px,3vw,28px)}
h1{margin:.2em 0 .4em;font-size:clamp(22px,2.6vw,28px)}
.sub{color:var(--muted);font-size:14px;margin:0}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid rgba(100,116,139,.15);border-radius:16px;box-shadow:var(--ring);padding:18px;display:grid;gap:8px}
.card h3{margin:0;font-size:16px}
.small{font-size:12px;color:var(--muted)}
.cta{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(100,116,139,.22);border-radius:12px;padding:10px 14px;background:#fff;font-weight:700}
footer{margin-top:28px;color:var(--muted);font-size:12px;text-align:center}
.sep{height:1px;background:rgba(100,116,139,.2);margin:18px 0}
.notice{font-size:12px;color:var(--muted)}
/* profile */
.profile{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid rgba(100,116,139,.15);border-radius:16px;box-shadow:var(--ring);padding:16px;margin:16px 0}
.profile img{width:90px;height:90px;border-radius:50%;object-fit:cover}
.profile .meta{display:grid;gap:2px}
.profile .name{font-weight:800}
.profile .bio{font-size:14px;color:var(--muted);margin:10px 0 10px 0}


/* ソーシャルボタン */


.profile .actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  flex-wrap:wrap;             /* 収まらなければ改行 */
}
.social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;           /* モバイル寄りの控えめパディング */
  border:1px solid rgba(100,116,139,.25);
  border-radius:999px;
  background:#fff;
  font-weight:700;
  color:inherit;
  text-decoration:none;
  max-width:100%;             /* 画面幅を超えない */
  white-space:nowrap;         /* 1行に固定 */
  overflow:hidden;            /* はみ出しを隠す */
  text-overflow:ellipsis;     /* 末尾を…で省略 */
}
.social:hover{
  transform:scale(1.04);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  text-decoration:none;
}
.profile .actions .social img{
  height:20px;                /* 16〜20pxで調整可 */
  width:auto;                 /* 縦基準で比率維持 */
  display:block;
  flex:0 0 auto;              /* アイコンは縮めない */
  object-fit:contain;
  border-radius:0;
}
.social span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:480px){
  .social{ padding:8px 12px; }
}


/* PR表記*/

.pr-note{
  margin:6px 0 10px;
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.pr-note .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ef4444;
  color:#fff;
  font-weight:800;
  border-radius:999px;
  font-size:10px;
  padding:2px 6px;
}


/* ナビリンク */

.navlinks a{
  color:inherit;
  text-decoration:none;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  font-weight:700;
}
.navlinks a:hover{
  background:#ffffff;
  border-color:rgba(100,116,139,.20);
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  .navlinks a:hover{background:#171a22;border-color:rgba(148,163,184,.28);box-shadow:0 6px 16px rgba(0,0,0,.3)}
}



.section-title{
  font-size:18px;
  margin:14px 14px 0 0;
  color:black;
  font-weight:800;
  letter-spacing:.06em;
}


/* スライドショー関連 */

.marquee-page .container{max-width:1100px;margin:0 auto;padding:24px}
.marquee-page header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 0}
.marquee-page header .title{font-weight:700}

.showcase.marquee{
  position:relative;
  overflow:hidden;
  margin:10px 0 10px;
  padding:46px 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 80px,
    black calc(100% - 80px),
    transparent 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

.showcase.marquee .track{
  display:inline-flex;
  gap:40px;
  align-items:center;
  will-change:transform;
  animation: marquee-scroll 30s linear infinite, fadeInTrack 700ms ease-out both;
}
.showcase.marquee .track > *{flex:0 0 auto}
.showcase.marquee:hover .track,
.showcase.marquee:focus-within .track{animation-play-state:paused}

@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* 初回ふわっと */
@keyframes fadeInTrack {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}
/* 端フェード幅のSP最適化＋速度最適化 */
@media (max-width:640px){
  .showcase.marquee .track{animation-duration:22s;gap:28px}
  .showcase.marquee{
    -webkit-mask-image:linear-gradient(to right,transparent 0,black 48px,black calc(100% - 48px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,black 48px,black calc(100% - 48px),transparent 100%);
  }
}

/* ===== Lightbox (modal) ===== */

.lightbox{
  position: fixed;
  inset: 0;
  display: none;                 /* is-open で flex に */
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55); /* 暗転 */
  -webkit-backdrop-filter: blur(6px);  /* 背景ぼかし（Safari対応含む） */
  backdrop-filter: blur(6px);          /* 背景ぼかし */
  z-index: 9999;                       /* 十分に前面へ */
  cursor: zoom-out;                    /* クリックで閉じると分かるように */
  opacity: 0;
  transition: opacity .18s ease-out;
}

.lightbox.is-open{
  display: flex;
  opacity: 1;
}

.lightbox__img{
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  user-select: none;
  pointer-events: none;  /* 親のクリックで閉じられるように */
}

@media (prefers-reduced-motion: reduce){
  .lightbox { transition: none; }
}


/* ====== Shot (light card for gallery) ====== */
.shot{
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:10px;
  margin:0;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.shot img{width:260px;height:auto;display:block;border-radius:12px;cursor:zoom-in}
.shot:hover,.shot:focus-within{
  transform:translateY(-8px) scale(1.04) rotate(-.4deg);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  filter:saturate(1.05);
}
@media (max-width:640px){.shot img{width:220px}}


/* ====== Profile 背景イラスト（既存 .profile に加算） ====== */
.profile{position:relative;overflow:hidden;isolation:isolate}
.profile::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  right:-20px;
  width:auto;
  aspect-ratio:1 / 1; /* 画像比率に合わせて変更可 */
  background:url('assets/avatar2.png') no-repeat right bottom;
  background-size:auto 100%;
  opacity:.18;
  pointer-events:none;
  z-index:-1;
}
@media (max-width:640px){
  .profile::after{right:-50px;opacity:.20}
}


/* ====== 外部リンクボタン ====== */

.eiai-extlinks{--ink:#0f172a;--muted:#667085;--card:#fff;--ring:0 10px 30px rgba(15,23,42,.07)}
@media (prefers-color-scheme:dark){
  .eiai-extlinks{--ink:#f8fafc;--muted:#94a3b8;--card:#111317;--ring:0 10px 30px rgba(0,0,0,.4)}
}
.eiai-extlinks__wrap{max-width:980px;margin:auto;padding:clamp(12px,4vw,24px)}
.eiai-extlinks__grid{display:grid;grid-template-columns:1fr;gap:12px;margin:10px 10px;}
@media (min-width:720px){.eiai-extlinks__grid{grid-template-columns:repeat(3,1fr)}}

.eiai-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:66px; /* 64/66の二重定義を統一 */
  padding:14px 16px;border-radius:14px;text-decoration:none;
  color:var(--ink);background:linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid rgba(100,116,139,.22);box-shadow:var(--ring);font-weight:700;
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
@media (prefers-color-scheme:dark){
  .eiai-btn{background:linear-gradient(180deg,rgba(31,32,36,.95),rgba(22,23,27,.95))}
}
.eiai-btn:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.12);filter: brightness(.9);text-decoration:none;}
.eiai-btn img{
  height:28px; width:auto; display:block; object-fit:contain; max-width:100%;
}
@media (min-resolution:2dppx){
  .eiai-btn img{height:30px}
}
.eiai-btn__brand{display:flex;align-items:center;gap:10px}
.eiai-badge{
  position:absolute;top:-6px;left:-6px;pointer-events:none;user-select:none;
  padding:4px 8px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 6px 16px rgba(239,68,68,.35);letter-spacing:.02em;
}
.eiai-extlinks__note{font-size:12px;color:var(--muted);margin:6px 2px 0}

/* Xの .x-icon に揃える */
.pixiv-icon{
  width:16px; height:16px; display:inline-block; object-fit:contain;
}


/* CTAボタン */
/* ===========================
   Bottom CTA（FANZA専用）
   =========================== */
:root{
  --cta-bg:#ff7a1a;        /* オレンジ（初期） */
  --cta-bg-hover:#e66c12;  /* 少し暗く */
  --cta-bg-active:#cc5f10; /* 押下時さらに暗く */
  --cta-text:#fff;
  --cta-shadow:0 6px 18px rgba(255,122,26,.35);
  --cta-shadow-md:0 10px 24px rgba(255,122,26,.45);
  --cta-radius:14px;
  --cta-height:68px;       /* 大きめ・タップしやすく */
  --cta-gap:14px;
  --cta-fw:800;
}

/* 下部余白を確保しつつ中央寄せ */
.cta-area{
  margin: 24px auto 32px;
  padding: 0 16px;
  max-width: 980px; /* LP幅に合わせて調整可 */
}

.cta-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cta-gap);
  width: 100%;
  min-height: var(--cta-height);
  padding: 0 clamp(16px,4vw,28px);
  border-radius: var(--cta-radius);
  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  font-weight: var(--cta-fw);
  font-size: clamp(17px,2.2vw,20px);
  line-height: 1;
  box-shadow: var(--cta-shadow);
  transform: translateY(0);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
  will-change: transform, box-shadow;
  outline: none;
  margin:10px auto;
}

/* 既存ボタンのトーンに合わせ、ホバーで“少し暗く・持ち上がる” */
.cta-button:hover{
  background: var(--cta-bg-hover);
  transform: translateY(-1.5px);
  box-shadow: var(--cta-shadow-md);
  filter: saturate(1.08);
}

.cta-button:active{
  background: var(--cta-bg-active);
  transform: translateY(0);
  box-shadow: var(--cta-shadow);
  filter: saturate(1);
}

/* フォーカス可視化（キーボード操作配慮） */
.cta-button:focus-visible{
  outline: 3px solid rgba(255,255,255,0);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.95),
    0 0 0 8px rgba(255,122,26,.65),
    var(--cta-shadow-md);
}

/* ラベルと矢印 */
.cta-button__label{ letter-spacing:.02em; }
.cta-button__icon{
  width: 26px; height: 26px; flex: 0 0 auto;
  transition: transform 180ms ease;
}
.cta-button:hover .cta-button__icon{ transform: translateX(3px); }

/* 角丸に沿う控えめな光沢 */
.cta-button::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%);
  pointer-events:none;
  mix-blend-mode: soft-light;
  opacity:.65;
}

/* 動作軽減ユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .cta-button, .cta-button__icon{ transition:none; }
}

/* LPが広い場合も可読域を維持 */
@media (min-width:1040px){
  .cta-area{ max-width: 840px; }
}

/* 幅80%・中央寄せ（親の幅に対して） */
.lp-cta-wrap .cta-button,
.lp-cta-wrap--bottom .cta-button,
.cta-sticky .cta-button {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* きらめきアニメ（sparkle） */
.cta-button--sparkle{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* 擬似要素をボタン内に閉じ込める */
}

/* 斜めに走る“シーン（光の帯）” */
.cta-button--sparkle::before{
  content: "";
  position: absolute;
  top: -60%;
  left: -30%;
  width: 45%;
  height: 220%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 80%);
  transform: translateX(-120%) rotate(20deg);
  animation: cta-sheen 2.6s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* 小さな星屑の“瞬き” */
.cta-button--sparkle::after{
  content: "";
  position: absolute;
  inset: -2px;
  /* 複数の放射グラデーションで星屑を表現 */
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.85), transparent 38%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.75), transparent 34%),
    radial-gradient(circle at 62% 72%, rgba(255,255,255,.80), transparent 36%),
    radial-gradient(circle at 32% 82%, rgba(255,255,255,.65), transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.5),  transparent 42%);
  opacity: .55;
  filter: blur(.4px);
  animation: cta-twinkle 1.8s ease-in-out infinite alternate;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes cta-sheen{
  0%   { transform: translateX(-120%) rotate(20deg); opacity: .85; }
  60%  { transform: translateX(260%)  rotate(20deg); opacity: 1; }
  100% { transform: translateX(260%)  rotate(20deg); opacity: .0; }
}

@keyframes cta-twinkle{
  0%   { transform: translateY(0);     opacity: .35; }
  100% { transform: translateY(-2px);  opacity: .85; }
}

/* ホバー時はキラメキを少し早く＆濃く */
.cta-button--sparkle:hover::before{ animation-duration: 1.9s; }
.cta-button--sparkle:hover::after { opacity: .9; }

/* 動きを苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce){
  .cta-button--sparkle::before,
  .cta-button--sparkle::after{ animation: none; }
}

/* 任意：PCで幅を広げすぎたくない場合の上限 */
@media (min-width: 900px){
  .lp-cta-wrap .cta-button,
  .lp-cta-wrap--bottom .cta-button{
    max-width: 720px; /* 好みで調整 */
  }
}