:root{
  /* ベーストーン */
  --base:#66A9FF;
  --base-2:#7CB7FF;

  /* UI */
  --text:#fff;
  --card:#fff;
  --ink:#101114;
  --accent:#65A5FC;

  /* 立体感（影を“段差”に見せる） */
  --lift: 10px;                 /* 通常時の段差 */
  --lift-press: 2px;            /* 押下時の段差 */
  --shadow: rgba(63, 123, 204, 1);

  --radius: 24px;
  --max: 560px;

  /* 背景透かしの濃度 */
  --doodle: rgba(255,255,255,.22);
  --doodle-2: rgba(255,255,255,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:var(--text);
  background: var(--base);
}

/* ===== Layout ===== */
.page{
  min-height:100svh;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:center;
  padding: 34px 16px 44px;
}

/* 背景：画像 + グラデ + 透かしパターン（画像なしでも成立） */
.bg{
  position:absolute;
  inset:0;
  z-index:0;

  /* 1) ベースのグラデ */
  background:
    radial-gradient(1100px 700px at 50% 10%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--base-2), var(--base));

  /* 2) 仮背景画像（任意で差し替え） */
  /* 画像がある場合は下の background-image に追加されるように after で重ねる */
}

.bg::after{
  content:"";
  position:absolute;
  inset:0;

  /* 仮背景画像（必要なら差し替え）
     画像が無い場合でもOK。ファイルが無いと 404 になるだけで見た目は維持されます。 */
  background:
    url("images/bg.png") center/cover no-repeat;

  opacity:.25;
  filter: saturate(1.05) contrast(1.02);
}

/* 透かしドゥードゥル：SVGパターンをデータURIで生成（画像不要） */
.bg::before{
  content:"";
  position:absolute;
  inset:-40px; /* 少しはみ出して端の継ぎ目を隠す */
  opacity:1;
  background-size: 520px 520px;
  background-repeat: repeat;
  transform: rotate(-2deg) scale(1.02);
  mix-blend-mode: soft-light;
}

/* 中央コンテンツ */
.container{
  position:relative;
  z-index:1;

  width:100%;
  max-width:var(--max);

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

/* ===== Header ===== */
.header{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top: 6px;
}

.avatar{
  width:130px;
  height:130px;
  border-radius:999px;
  background:#f2f2f2;
  overflow:hidden;

  /* “縁取り＋段差” */
  border: 2px solid rgba(255,255,255,.92);
  /*box-shadow: 0 var(--lift) 0 var(--shadow);*/
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.title{
  margin: 18px 0 4px;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .6px;
  /*text-shadow: 0 4px 0 rgba(0,0,0,.12);*/
}

.subtitle{
  margin:0;
  font-size: 1rem;
  font-weight: 700;
  opacity:.95;
  /*text-shadow: 0 2px 0 rgba(0,0,0,.10);*/
}

/* ===== Buttons ===== */
.buttons{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top: 8px;
}

/* “立体ボタン”＝カード本体 + 疑似要素で段差をコントロール */
.link-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 22px 18px;
  min-height: 1rem;

  border: 2px solid rgba(0,0,0,.06);

  /* 影を“段差”に */
  box-shadow: 0 var(--lift) 0 var(--shadow);

  /* 反射っぽさ */
  background-image:
    radial-gradient(1200px 220px at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%);
  background-blend-mode: overlay;

  transform: translateY(0);
  transition: transform .10s ease, box-shadow .10s ease, filter .10s ease;
  outline:none;
}

/* PC hover：ほんの少しだけ上げる（やりすぎ注意） */
@media (hover:hover){
  .link-card:hover{
    transform: translateY(-2px);
    filter: brightness(1.01);
  }
}

/* 押下：段差を縮めて“押した感” */
.link-card:active{
  transform: translateY(calc(var(--lift) - var(--lift-press)));
  box-shadow: 0 var(--lift-press) 0 var(--shadow);
}

/* キーボードフォーカス：白い外枠＋段差維持 */
.link-card:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255,255,255,.72),
    0 var(--lift) 0 var(--shadow);
}

.primary{
  margin:0;
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: .4px;
  line-height: 1.12;
  color :#333333;
}

.secondary{
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .2px;
}

/* ===== Responsive ===== */
/* PC：タイトル・ボタンを少し大きく、余白も増やす */
@media (min-width: 900px){
  .page{ padding: 42px 16px 64px; }
  .container{ gap: 22px; }
  .title{ font-size: 54px; }
  .buttons{ gap: 26px; }
  .link-card{ min-height: 164px; }
}

/* 小さめSP：可読性とタップ領域を維持しつつ詰める */
@media (max-width: 380px){
  .page{ padding: 26px 14px 34px; }
  .avatar{ width:132px; height:132px; }
  .title{ font-size: 38px; }
  .primary{ font-size: 2rem; }
  .link-card{ min-height: 1rem; }
}

/* 端末の“安全領域”（ノッチ）対策：下余白を少し確保 */
@supports (padding: max(0px)){
  .page{
    padding-bottom: max(44px, env(safe-area-inset-bottom));
  }
}