/* ============================================================
   Gift Style — マニュアル（ドキュメント）用スタイル
   style.css のあとに読み込む。色・影などのトークンは style.css の
   :root を継承し、マニュアル固有のものだけここで追加する。
   ============================================================ */

:root{
  /* マニュアル固有のアクセント（ステップ番号の色） */
  --m-pink:#ff7aa2;
  --m-coral:#ff8a5c;
  --m-side:310px;
  --m-head:74px;
}

body.manual{background:var(--soft)}

/* ---------- ヘッダー ---------- */
.dochead{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 4px 14px rgba(40,30,70,.07)}
.dochead .nav{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);height:var(--m-head)}
.dochead .brand{text-decoration:none}
.docbadge{margin-left:4px;padding:3px 10px;border-radius:999px;background:var(--ink);
  color:#fff;font-size:0.88rem;font-weight:700;line-height:1.6}
.docmenu{display:none;align-items:center;gap:7px;margin-left:auto;background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  font-family:inherit;font-size:0.95rem;font-weight:700;color:var(--ink)}
.docmenu:hover{border-color:var(--teal);color:var(--teal-d)}

/* ---------- レイアウト ---------- */
.doclayout{display:grid;grid-template-columns:var(--m-side) 1fr;gap:36px;
  max-width:var(--wrap);margin:0 auto;padding:34px var(--gutter) 64px;align-items:start}

/* ---------- サイドバー ---------- */
.side{position:sticky;top:calc(var(--m-head) + 20px);align-self:start;
  max-height:calc(100vh - var(--m-head) - 40px);overflow:auto;padding-right:4px}

.snav{margin-top:18px;display:grid;gap:2px}
.snav .sec{font-size:0.88rem;font-weight:700;color:var(--muted);letter-spacing:.06em;
  margin:18px 0 6px;padding-left:6px;opacity:.75}
.snav a{display:flex;width:100%;justify-content:flex-start;text-align:left;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  color:var(--ink);font-size:1rem;font-weight:500;line-height:1.5}
.snav a:hover{background:#fff;color:var(--ink)}
.snav a.snav-sub{padding-left:30px;color:var(--muted);font-size:1rem}
.snav a.active{background:var(--ink);color:#fff;font-weight:700}


/* ---------- 本文 ---------- */
.doc{min-width:0}
.crumb{color:var(--muted);font-size:0.9rem;margin-bottom:12px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--teal-d)}
.doc h1{font-size:2rem;line-height:1.45}
.doc .lead{color:var(--muted);margin-top:14px;font-size:1rem}
.doc .updated{color:#a9a4b8;font-size:0.9rem;margin-top:8px}

/* ステップ一覧（目次カード） */
.steps{display:grid;gap:14px;margin-top:28px}
.step{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-s);
  transition:transform .15s ease, box-shadow .15s ease}
.step:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.stepnum{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:1.02rem}
.step__b{flex:1;min-width:0}
.doc .step__b h3{font-size:1.06rem;font-weight:700;color:var(--ink);line-height:1.5;margin-top:0}
.doc .step__b p{color:var(--muted);font-size:0.95rem;margin-top:3px;line-height:1.6}
.chev{color:#c9c2de;font-size:1.3rem;flex:none}

/* 番号の色（style.css のトークンを使用） */
.c1{background:var(--teal)}
.c2{background:var(--violet)}
.c3{background:var(--m-pink)}
.c4{background:var(--m-coral)}
.c5{background:var(--sky)}

/* 記事セクション */
.sec-art{margin-top:96px;scroll-margin-top:calc(var(--m-head) + 20px)}
.sec-art > h2{display:flex;align-items:center;gap:12px;font-size:1.34rem;line-height:1.5}
.sec-art > h2 .n{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:1rem;font-weight:700}
.doc p{margin-top:12px;line-height:1.95}
.doc h3{font-size:1.05rem;margin-top:26px}
.doc ul,.doc ol{margin:12px 0 0 22px;color:var(--ink)}
.doc li{margin:7px 0;line-height:1.9}
.doc ul ul{margin-top:6px}
.doc .ui{background:#fff;border:1px solid var(--line);border-radius:7px;padding:1px 8px;
  font-size:.92em;font-weight:700;white-space:nowrap}

/* 枠付きの補足カード */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin-top:18px;box-shadow:var(--shadow-s)}
.card > h3:first-child,.card > h4:first-child{margin-top:0}
.card h4{font-size:1rem}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.cards2 .card{margin-top:0}
.tag{display:inline-block;font-size:0.86rem;font-weight:700;border-radius:999px;
  padding:3px 10px;margin-bottom:8px}
.tag--rec{background:var(--ink);color:#fff}
.tag--alt{background:#fff;border:1px solid var(--line);color:var(--muted)}

/* 注意・ヒント */
.note{display:flex;gap:14px;background:#fff;border:1px dashed #d7cff0;border-radius:var(--radius);
  padding:20px 24px;margin-top:22px;align-items:flex-start;box-shadow:var(--shadow-s)}
.note .ic{width:38px;height:38px;border-radius:11px;background:var(--tint-violet);
  display:grid;place-items:center;font-size:19px;flex:none}
.note p{margin-top:0;font-size:1rem;color:var(--muted)}
.note p + p{margin-top:8px}
.note b{color:var(--ink)}
.note--warn{border-color:#ffd9b8}
.note--warn .ic{background:var(--tint-gold)}

/* 図版 */
/* 画像の上下はゆったり取る */
.figure{margin-top:40px;margin-bottom:40px}
/* PC では列幅の約半分。原寸が小さい画像も引き伸ばさない
   （width/height 属性があるので読み込み前も高さが確保される） */
.figure img{width:100%;height:auto;max-width:420px;margin-left:auto;margin-right:auto;
  border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow-s)}
/* 例外：全体像を見せたい画像は列幅いっぱい */
.figure--wide img{max-width:100%}
/* 例外：横長の帯は文字が読める大きさを保つ */
.figure--strip img{max-width:640px}
.figure figcaption{color:var(--muted);font-size:0.92rem;margin-top:10px;text-align:center}

/* インストール誘導 */
.install{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-top:44px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:var(--shadow-s)}
.install .ic{font-size:26px}
.install__logo{height:44px;width:auto;flex:none;border-radius:10px}
.install__t{flex:1;min-width:210px}
.install__t h4{font-size:1.05rem}
.install__t p{color:var(--muted);font-size:0.95rem;margin-top:4px}

/* ---------- レスポンシブ ---------- */
@media(max-width:1000px){
  .doclayout{grid-template-columns:1fr;gap:0;padding:24px var(--gutter) 56px}
  .dochead .nav__links{display:none}
  .docmenu{display:flex}
  /* モバイルの目次：ヘッダー直下に固定して開く。
     本文の流れの中で開くと、スクロール中は画面外（上）に出てしまうため。 */
  .side{position:fixed;top:var(--m-head);left:0;right:0;z-index:60;display:none;
    max-height:calc(100vh - var(--m-head));overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;
    margin:0;padding:18px var(--gutter);box-shadow:var(--shadow-s)}
  .side.open{display:block}
  .cards2{grid-template-columns:1fr}
}
@media(max-width:760px){
  :root{--gutter:22px}
  .dochead .nav{gap:12px}
  .dochead .nav > .btn--primary{display:none}
  .doc h1{font-size:1.6rem}
  .step{padding:16px 18px;gap:14px}
  .install{padding:20px 22px}
}
@media(max-width:520px){
  :root{--m-head:60px}
  .doc h1{font-size:1.42rem}
  .sec-art > h2{font-size:1.16rem}
  .card{padding:18px 18px}
  .note{padding:16px 18px;gap:12px}
}

/* ============================================================
   サイドバーのないドキュメントページ（プライバシーポリシーなど）
   ============================================================ */
.doclayout--single {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}
.doc h2 {
  font-size: 1.24rem;
  line-height: 1.55;
  margin-top: 36px;
}
.doc h2:first-of-type {
  margin-top: 22px;
}
.doc hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 52px 0;
}
.doc strong {
  font-weight: 700;
  color: var(--ink);
}
.doc .langsec + .langsec {
  margin-top: 0;
}

/* ---- サブページのヘッダー：サイト共通メニュー（ドロワー） ---- */
.dochead .nav {
  position: relative;
}
@media (max-width: 1000px) {
  /* 目次（.docmenu）とは別に、サイト共通メニューのハンバーガーを出す */
  .dochead .hamburger {
    display: flex;
  }
}
@media (max-width: 520px) {
  /* 横幅が足りないので、バッジとCTAはドロワーに任せる */
  .dochead .docbadge,
  .dochead .nav > .btn--primary {
    display: none;
  }
  .dochead .nav {
    gap: 8px;
  }
}

/* ドロワーはドキュメント用ヘッダーの高さに合わせる（--m-head はブレークポイントで変わる） */
.dochead .drawer {
  top: var(--m-head);
  max-height: calc(100vh - var(--m-head));
}

/* ============================================================
   スクリーンショット準備中のプレースホルダー
   実物の画像ができたら <div class="ph"> を <img> に差し替える。
   差し替え先のファイル名は枠の中に書いてある。
   ============================================================ */
.figure--ph img {
  display: none;
}
.ph {
  display: grid;
  place-items: center;
  gap: 7px;
  text-align: center;
  min-height: 200px;
  padding: 30px 22px;
  border: 2px dashed #d7cff0;
  border-radius: 14px;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 11px,
    var(--soft) 11px,
    var(--soft) 22px
  );
  color: var(--muted);
  font-size:0.95rem;
  line-height: 1.7;
}
.ph__ic {
  font-size: 26px;
  opacity: 0.75;
}
.ph b {
  color: var(--ink);
  font-size:1rem;
}
.ph code {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 9px;
  font-size:0.9rem;
  color: #a9a4b8;
}
@media (max-width: 520px) {
  .ph {
    min-height: 160px;
    padding: 22px 16px;
  }
  .ph code {
    font-size:0.86rem;
    word-break: break-all;
  }
}

/* ============================================================
   お問い合わせ・サポート
   ============================================================ */
.support {
  margin-top: 56px;
  padding: 34px 34px 30px;
  border: 2px dashed #d7cff0;
  border-radius: var(--radius);
  /* プレースホルダーと同じナナメ縞 */
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 11px,
    var(--soft) 11px,
    var(--soft) 22px
  );
}
.doc .support__head h2 {
  font-size: 1.34rem;
  line-height: 1.5;
  margin-top: 0;
}
.doc .support__head p {
  color: var(--muted);
  font-size:1rem;
  margin-top: 8px;
}
.support__list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
}
.support__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
}
.support__ic {
  font-size: 20px;
  line-height: 1.5;
  flex: none;
}
.support__list b {
  color: var(--ink);
  font-size:1.02rem;
}
.doc .support__list p {
  color: var(--muted);
  font-size:1rem;
  margin-top: 3px;
  line-height: 1.7;
}
.support__note {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  margin-top: 12px;
}
.doc .support__note p {
  font-size:1rem;
  color: var(--muted);
  margin-top: 0;
  line-height: 1.8;
}
.support__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.support__cta small {
  color: var(--muted);
  font-size:0.9rem;
}

/* ============================================================
   モバイル（〜760px）
   ============================================================ */
@media (max-width: 760px) {
  /* 画像は横100%のまま（PCの半分指定を解除） */
  .figure img,
  .figure--wide img,
  .figure--strip img {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
  /* 目次は左寄せ（中央寄せにしない） */
  .side,
  .snav .sec {
    text-align: left;
  }
  .snav {
    justify-items: stretch;
  }
  .snav a {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
  }
  /* ボタンは中央寄せ */
  .install,
  .support__cta {
    justify-content: center;
    text-align: center;
  }
  .install__t,
  .support__cta small {
    text-align: center;
  }
  .support {
    padding: 26px 20px 24px;
  }
  .support__cta {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---- サポート：見出しとボタンは中央寄せ、内側の箱は幅・余白をそろえる ---- */
.support {
  padding: 40px 34px 36px;
}
.support__head {
  text-align: center;
}
.doc .support__head p {
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
.doc .support__list {
  margin: 26px 0 0;
  padding-left: 0;
}
.support__list li,
.support__note {
  padding: 16px 20px;
}
.support__note {
  margin-top: 12px;
}
.support__cta {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-top: 28px;
}


/* ---- サポート：注記も他の箱と同じ幅で、中は中央寄せ ---- */
.support__note {
  text-align: center;
}
.doc .support__note p {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   目次のアイコン（大＝ページ／小＝矢印）
   mask で描くので、文字色（現在地の白など）にそのまま追従する。
   ============================================================ */
.snav a {
  --snav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
  position: relative;
}
.snav a::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: var(--snav-ic) center / contain no-repeat;
  mask: var(--snav-ic) center / contain no-repeat;
}
.snav a.snav-sub {
  --snav-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.snav a.snav-sub::before {
  width: 11px;
  height: 11px;
  opacity: 0.35;
}
.snav a.active::before {
  opacity: 1;
}
.snav a:hover::before {
  opacity: 0.75;
}
/* 大項目の前だけ少し離して、まとまりを作る */
.snav a:not(.snav-sub) {
  margin-top: 6px;
}
.snav .sec + a {
  margin-top: 0;
}

/* ---- 目次：アイコンを大きく、サブは上を詰めて下を広く ---- */
.snav a::before {
  width: 19px;
  height: 19px;
}
.snav a.snav-sub::before {
  width: 15px;
  height: 15px;
}
.snav a.snav-sub {
  /* 上の見出しにくっつけ、下にゆとりを残す */
  margin-top: -2px;
  padding-top: 5px;
  padding-bottom: 11px;
}

/* ============================================================
   機能の紹介などで、画像を2枚並べて見せる
   （手順の①②は縦積み。ここは見比べるための並列）
   ============================================================ */
.figpair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
  margin: 40px 0;
}
.figpair .figure {
  margin: 0;
}
/* 並べる2枚は高さをそろえる（縦横比が違っても箱の高さを合わせる） */
.figpair .figure img {
  max-width: 100%;
  height: 360px;
  object-fit: contain;
  background: #fff;
  padding: 10px;
}
@media (max-width: 760px) {
  .figpair {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .figpair .figure {
    margin: 24px 0;
  }
  /* 縦積みでは高さ固定を解除して、横100%で見せる */
  .figpair .figure img {
    height: auto;
    padding: 0;
  }
}


/* ---- 並列にしない画像ペア（細かくて縮めたくないもの） ---- */
.figstack .figure {
  margin: 40px 0;
}