/* =========================================================
   茄子しゅば Official Site  共通スタイル
   配色や角丸はここでまとめて調整できます
   ========================================================= */
:root{
  --page-bg:#C2ADDB;      /* 外側の薄紫 */
  --screen-bg:#C7B4E0;    /* スマホ画面内の薄紫 */
  --phone:#1C1C1E;        /* スマホ枠の黒 */
  --icon-bg:rgba(255,255,255,.45); /* アイコンの角丸背景 */
  --ink:#1C1C1E;          /* 黒文字 */
  --card:#DDD3EE;         /* 軌跡・目標カード */
  --radius-screen:34px;
  --radius-card:26px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

body{
  font-family:'M PLUS Rounded 1c','Hiragino Maru Gothic ProN',sans-serif;
  font-weight:700;
  background:var(--page-bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

.stage{
  max-width:560px;
  margin:0 auto;
  padding:28px 14px 40px;
}

/* ---------- スマホ風フレーム ---------- */
.phone{
  position:relative;
  background:var(--phone);
  border-radius:56px;
  padding:20px 16px 26px;
  box-shadow:0 18px 50px rgba(40,20,70,.35);
}
.phone-notch{
  display:block;width:34%;height:16px;
  background:var(--phone);
  border-radius:0 0 14px 14px;
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  z-index:3;
}
.phone-btn{
  position:absolute;left:-6px;width:6px;background:var(--phone);border-radius:4px 0 0 4px;
}
.btn-1{top:120px;height:56px}
.btn-2{top:190px;height:88px}

.screen{
  position:relative;
  background:var(--screen-bg);
  border-radius:var(--radius-screen);
  overflow:hidden;
  padding:44px 18px 34px;
  min-height:640px;
}

/* ---------- トップ：タイトル ---------- */
.site-title{position:relative;z-index:2;text-align:right;padding:8px 6px 0}
.site-title h1{
  font-weight:800;
  font-size:clamp(28px,7.4vw,40px);
  letter-spacing:.03em;
  line-height:1.25;
}
.site-title small{font-size:.5em;font-weight:800}
.sp-only{display:none}
@media (max-width:430px){ .sp-only{display:inline} }

/* ---------- トップ：メインビジュアル ---------- */
/* 立ち絵は画面幅いっぱいに全体を表示する（トリミングしない） */
.main-visual{
  position:absolute;top:0;left:0;width:100%;
  z-index:1;pointer-events:none;
  /* 画像の下端をどこからぼかし始めるか（%を小さくするとぼかしが長くなる） */
  --fade-start:78%;
}
.main-visual img{
  display:block;width:100%;height:auto;
  /* 下端を透明へグラデーションさせて背景に溶け込ませる */
  -webkit-mask-image:linear-gradient(to bottom, #000 var(--fade-start), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 var(--fade-start), transparent 100%);
}

/* ---------- ちびキャラ（ほうき） ---------- */
.chibi{
  position:relative;z-index:2;
  display:block;margin:6px 0 6px auto;
  max-width:260px;height:auto;
  filter:drop-shadow(0 4px 8px rgba(40,20,70,.25));
  /* width はPHP側の設定値（インラインstyle）で指定されます */
}
/* 左上へ飛んでいくアニメーション
   速さ・距離は --fly-dur / --fly-x / --fly-y（管理画面から設定）で決まる */
@keyframes chibi-fly{
  0%  {transform:translate(0,0) rotate(0deg);opacity:1}
  10% {transform:translate(calc(var(--fly-x,-260px)*.08), calc(var(--fly-y,-180px)*.12)) rotate(-3deg)}
  50% {transform:translate(calc(var(--fly-x,-260px)*.5),  calc(var(--fly-y,-180px)*.45)) rotate(-6deg)}
  85% {opacity:1}
  100%{transform:translate(var(--fly-x,-260px), var(--fly-y,-180px)) rotate(-10deg);opacity:0}
}
.chibi.fly{
  animation:chibi-fly var(--fly-dur,8s) ease-in-out infinite;
  will-change:transform,opacity;
}
/* 繰り返しOFFのときは1回飛んで消えたまま */
.chibi.fly.once{
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
/* 端末側で「視差効果を減らす」設定の人にはアニメーションを止めて表示だけする */
@media (prefers-reduced-motion: reduce){
  .chibi.fly{animation:none;opacity:1}
}

/* ---------- トップ：アイコングリッド ---------- */
.icon-grid{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px 12px;
  /* 立ち絵との重なり位置。%指定なので画面幅が変わっても比率が保たれる */
  margin-top:32%;
}
@media (max-width:430px){
  .icon-grid{grid-template-columns:repeat(4,1fr);gap:12px 8px}
}
.icon-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:var(--ink);
}
.icon-img{
  width:100%;aspect-ratio:1/1;max-width:96px;
  background:var(--icon-bg);
  border-radius:24%;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
  transition:transform .15s ease, background .15s ease;
}
.icon-img svg{width:62%;height:62%;color:var(--ink)}
.icon-img img{
  width:100%;height:100%;object-fit:cover;
  border-radius:inherit; /* 角丸をアイコン枠に合わせる */
}
.icon-btn:hover .icon-img,
.icon-btn:focus-visible .icon-img{
  transform:translateY(-3px) scale(1.04);
  background:rgba(255,255,255,.65);
}
.icon-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
.icon-label{
  font-size:clamp(12px,3.4vw,17px);
  font-weight:800;letter-spacing:.02em;white-space:nowrap;
}

/* ---------- アプリ風の画面遷移アニメーション ---------- */
/* タップした瞬間、アイコンが少し沈む（iOS風の押し込み） */
.icon-btn:active .icon-img{transform:scale(.88)}

/* アイコンから画面全体へ拡大する板（app.jsが生成） */
.app-zoom{
  position:absolute;z-index:50;
  background:rgba(246,241,251,.96);
  border-radius:24%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(40,20,70,.35);
  transition:
    left .45s cubic-bezier(.32,.72,.25,1),
    top .45s cubic-bezier(.32,.72,.25,1),
    width .45s cubic-bezier(.32,.72,.25,1),
    height .45s cubic-bezier(.32,.72,.25,1),
    border-radius .45s cubic-bezier(.32,.72,.25,1);
}
.app-zoom svg{width:62%;height:62%;max-width:120px;max-height:120px;color:var(--ink);transition:opacity .3s ease,transform .45s ease}
.app-zoom img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease,transform .45s ease}
/* 拡大しきるときは画面の角丸に合わせて、中のアイコンはふわっと消す */
.app-zoom.zoomed{border-radius:var(--radius-screen)}
.app-zoom.zoomed svg,
.app-zoom.zoomed img{opacity:0;transform:scale(1.5)}
/* 拡大中は背面のコンテンツを少し暗く沈ませる */
.screen.launching > :not(.app-zoom){
  transition:opacity .4s ease,transform .4s ease;
  opacity:.35;transform:scale(.97);
}

/* 自己紹介ページ：アプリ起動風にスッと現れる */
@keyframes app-open{
  from{opacity:0;transform:scale(.92)}
  to  {opacity:1;transform:scale(1)}
}
/* 背景立ち絵は元から薄い（45%）ので、専用のキーフレームで45%着地にする。
   共用すると一瞬100%まで濃くなってから薄く戻る「チラつき」が起きる */
@keyframes app-open-bg{
  from{opacity:0;transform:scale(.92)}
  to  {opacity:.45;transform:scale(1)}
}
body.app-opening .profile-content{
  animation:app-open .45s cubic-bezier(.32,.72,.25,1) both;
}
body.app-opening .bg-standing{
  animation:app-open-bg .45s cubic-bezier(.32,.72,.25,1) both;
}

/* Return：閉じるように縮んで消える */
body.app-closing .profile-content,
body.app-closing .bg-standing{
  transition:opacity .35s ease,transform .35s cubic-bezier(.5,0,.75,.4);
  opacity:0;transform:scale(.9);
}

@media (prefers-reduced-motion: reduce){
  .icon-btn:active .icon-img{transform:none}
}

/* ---------- フッター注意書き ---------- */
.notice{
  text-align:center;
  font-size:12.5px;font-weight:700;
  color:var(--ink);
  margin-top:22px;letter-spacing:.02em;
}

/* =========================================================
   自己紹介ページ
   ========================================================= */
/* トップページと同じ幅（560px）に統一。
   広げたくなったらここに .stage-wide{max-width:760px} を足すだけで戻せます */

.profile-screen{padding-top:40px;padding-bottom:34px}

.bg-standing{
  position:absolute;top:30px;left:-4%;
  width:70%;height:auto;z-index:1;
  opacity:.45;pointer-events:none;
}

.profile-content{
  position:relative;z-index:2;
  text-align:right;
  font-size:clamp(14.5px,3.9vw,18px);
}

.about-title{
  text-align:center;
  font-size:clamp(22px,5.8vw,30px);
  font-weight:800;margin-bottom:26px;letter-spacing:.04em;
}
.about-lead{margin-bottom:30px}
.about-catch{margin-bottom:30px;font-weight:800}
.about-stream{margin-bottom:34px}

.ureshii-title{
  text-align:center;
  font-size:clamp(17px,4.6vw,21px);
  font-weight:800;margin-bottom:20px;
}
.ureshii-list{list-style:none;margin-bottom:30px}
.ureshii-list li{margin-bottom:6px}

.logo{
  display:block;width:72%;max-width:340px;
  margin:0 auto 30px;height:auto;
}

/* ---------- カード（軌跡・目標） ---------- */
.card{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:22px 22px 26px;
  margin-bottom:26px;
  text-align:left;
}
.card-title{
  text-align:center;
  font-size:clamp(20px,5.4vw,26px);
  font-weight:800;margin-bottom:14px;
}
.kiseki-list,.goal-list{list-style:none}
.kiseki-list li,.goal-list li{margin-bottom:4px}
.kiseki-list .year{font-weight:800;margin-top:6px}

/* ---------- Returnボタン ---------- */
.return-btn{
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--card);
  border-radius:var(--radius-card);
  padding:20px;
  margin:34px auto 0;
  max-width:340px;
  text-decoration:none;color:var(--ink);
  font-size:clamp(22px,6vw,30px);font-weight:800;
  transition:transform .15s ease;
}
.return-btn span{text-decoration:underline;text-underline-offset:5px}
.return-btn svg{width:52px;height:52px}
.return-btn:hover,.return-btn:focus-visible{transform:translateY(-2px)}
.return-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}