/* デジタル表紙フレーム 共通スタイル（全キャンペーン共通） */
:root{
  --dark:#1a1a1a;
  --accent:#b8935a; /* キャンペーンの campaign.json の theme.accent で上書きされる */
  --light:#ffffff;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; height:100%;
  /* スワイプでのリロード（プルリフレッシュ）をブラウザに任せられるよう、
     スクロール自体は禁止しない（以前はposition:fixedで完全に止めていた） */
  overflow-y:auto; overscroll-behavior-y:auto;
  background:#ffffff; /* トップ画面（白背景）に合わせる。画面遷移時にJSで切り替える */
  font-family:"Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--light);
}
/* 撮影中はページ自体を動かさない（app.js の setPageLock） */
html.pageLocked, html.pageLocked body{
  position:fixed; inset:0; width:100%; height:100%;
  overflow:hidden; overscroll-behavior:none;
}
#app{
  max-width:480px; margin:0 auto;
  height:100vh; height:100dvh; height:calc(var(--vh, 1vh) * 100);
  position:relative; overflow:hidden; background:#000;
}

/* ---------- 撮影画面 ---------- */
#shootScreen{ position:absolute; inset:0; display:flex; flex-direction:column; }
#stageWrap{
  position:relative; flex:1; overflow:hidden; background:#000;
  display:flex; align-items:center; justify-content:center;
}
/* video/canvasは常に「アスペクト比4:5の窓」の中に収める */
/* サイズはCSSのaspect-ratioに頼らず、JS側で明示的にpx指定して確定させる
   （一部環境でaspect-ratioの再計算タイミングがズレ、起動直後に映像が
     一瞬ずれて見える不具合があったための対策） */
#cropBox{
  position:relative; overflow:hidden; background:#000;
  margin:0 auto;
  /* 横方向のフリックはJSで処理する。指定が無いとブラウザが横ジェスチャー
     （履歴の戻る／進む等）を横取りし、操作が途切れてフレームが消える。
     縦方向もこの領域ではページを引っ張らせない（引っ張られた状態で指を離すと
     フレームが消える不具合があったため）。プルリフレッシュは他の領域から可能 */
  touch-action:none;
}
video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* --zoom はデジタルズーム時だけ app.js が設定する（カメラ本体のズーム時は 1） */
  transform:scale(var(--zoom, 1));
}
/* 端末内の画像を当てはめるときの表示（位置と大きさは app.js が指定する） */
#photoLayer{
  display:none; position:absolute; left:0; top:0; max-width:none; max-height:none;
  transform-origin:0 0; pointer-events:none; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; will-change:transform;
}
/* フロントカメラのときだけ鏡像表示にする（外部カメラでは反転しない） */
video.mirrored{ transform:scaleX(-1) scale(var(--zoom, 1)); }

/* ズーム倍率の表示（ピンチ中と直後だけ見せる） */
#zoomBadge{
  position:absolute; left:50%; bottom:12px; z-index:6;
  transform:translateX(-50%);
  padding:3px 10px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-size:13px; letter-spacing:.5px;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
}

/* ---------- カメラ準備中のローディング表示 ---------- */
#camLoading{
  position:absolute; inset:0; z-index:8; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:#000; color:#999; font-size:12px; letter-spacing:2px;
  transition:opacity .25s ease;
}
#photoNotice{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:30; /* 画面全体の上下中央 */
  width:max-content; max-width:calc(100% - 32px); padding:9px 18px; border-radius:999px;
  background:rgba(0,0,0,.78); color:#fff; font-size:13px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#photoNotice.show{ opacity:1; }
#photoLoading{
  position:absolute; inset:0; z-index:9; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:rgba(0,0,0,.6); color:#ddd; font-size:12px; letter-spacing:2px;
}
#photoLoading .spinner, #camLoading .spinner{
  width:26px; height:26px; border-radius:50%;
  border:2px solid #333; border-top-color:var(--accent);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- オーバーレイ（フレーム） ---------- */
.overlay{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
#frameTrack{ position:absolute; inset:0; }
/* 各フレームは独立した合成レイヤーにして、位置の変更だけで動かす（切替時のちらつき対策） */
.frameSlide{
  position:absolute; top:0; left:0; height:100%;
  object-fit:contain; pointer-events:none;
  will-change:transform; backface-visibility:hidden;
}

/* ---------- 操作説明エリア ---------- */
#instructionArea{
  background:#1a1a1a; display:flex; flex-direction:row; align-items:center;
  justify-content:center; gap:8px; flex-shrink:0;
  /* 左右の余白は、下の段の左右のボタン（画像選択・カメラ切替）の外側の端とそろえる（#photoBtn / #switchCamBtn と同じ式） */
  /* 上の余白を広げ、ボタンとドットを、画像エリアの下端と下の説明文のあいだの上下中央に置く */
  padding:17.7px calc((100% - 480px) / 2 + (480px - 76px) / 4) 4.3px;
  width:100%;
}

/* ---------- 矢印ボタン ---------- */
.navBtn{
  pointer-events:auto; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}

/* ---------- 中央エリア（ドットと説明文） ---------- */
#instructionCenter{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; flex:1; min-width:0;
}

/* ---------- フレーム切替 ---------- */
#frameDots{
  display:flex; flex-wrap:nowrap; gap:5px; justify-content:center; pointer-events:none;
}
.dot{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.35); }
.dot.active{ background:var(--accent); }

/* ---------- 下部コントロール ---------- */
#controls{
  height:120px; background:var(--dark); display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0;
}
#photoBtn{
  position:absolute; left:calc((100% - 480px) / 2 + (480px - 76px) / 4); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
/* テンプレート選択は、矢印のある段の左端に置く */
#templateBtn{
  width:32px; height:32px; border-radius:50%; flex:0 0 auto; margin-right:22px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#switchCamBtn{
  position:absolute; right:calc((100% - 480px) / 2 + (480px - 76px) / 4); width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#shutter{
  width:76px; height:76px; border-radius:50%; background:var(--light);
  border:4px solid var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
/* 画像を当てはめているあいだ：シャッターは「確定」、カメラ切替は「カメラに戻る」になる */
#shootScreen.photoMode #shutter{ background:var(--accent); border-color:var(--light); }
#shootScreen.photoMode #shutter::after{
  content:''; width:16px; height:30px; margin-bottom:7px;
  border:solid #fff; border-width:0 6px 6px 0; transform:rotate(45deg);
}
#switchCamBtn .icoCam{ display:none; }
#shootScreen.photoMode #switchCamBtn .icoSwitch{ display:none; }
#shootScreen.photoMode #switchCamBtn .icoCam{ display:block; }
/* 操作説明は、矢印の段と撮影ボタンの段のあいだに置く */
#camMsg{
  text-align:center; font-size:11px; color:#999; background:#1a1a1a;
  /* 説明文を、テンプレート選択ボタンの下端と撮影ボタンの上端の、上下中央に置く（下は #controls に 6.3px 重ねる） */
  position:relative; z-index:1; padding:12.3px 12px 0; margin-bottom:-6.3px; line-height:15px; flex-shrink:0;
}

/* ---------- プレビュー画面 ---------- */
#resultScreen{
  position:absolute; inset:0; background:var(--dark); display:none;
  flex-direction:column; align-items:center; justify-content:flex-start; padding:20px 20px 32px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; /* 下にサービス一覧が続くので、縦にスクロールできる */
}
#resultScreen > *{ flex-shrink:0; }
#resultImg{ width:100%; max-width:340px; border-radius:2px; margin-top:10px; }
.resultBtns{ display:flex; flex-direction:column; gap:10px; margin-top:22px; width:100%; max-width:340px; }
.btn{
  padding:13px 0; text-align:center; border-radius:2px; font-size:14px; font-weight:700;
  cursor:pointer; border:1px solid var(--accent);
}
.btn.primary{ background:var(--accent); color:var(--dark); }
.btn.secondary{ background:transparent; color:#aaaaaa; border-color:#444444; font-weight:600; }

#hashtagHint{
  margin-top:16px; font-size:12px; color:#999; text-align:center; line-height:1.6;
}
#hashtagHint b{ color:var(--accent); }

/* 撮影後の画面のサービス一覧：区切り線の下に、見出しと、アイコン＋短い名称を5列で並べる */
.resultServices{ width:100%; max-width:340px; margin-top:28px; padding-top:24px; border-top:1px solid #444444; text-align:left; }
.resultServices h2{ margin:0 0 14px; font-size:14px; line-height:1.4; font-weight:700; color:#ffffff; }
.resultServices ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.resultServices a{ display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none; -webkit-tap-highlight-color:rgba(255,255,255,.12); }
.resultServices img{ display:block; width:100%; aspect-ratio:1; border-radius:12px; border:1px solid #444444; object-fit:cover; background:#ffffff; }
.resultServices a > span{ font-size:10.5px; line-height:1.4; color:#ffffff; text-align:center; white-space:pre-line; }

/* ---------- テンプレート選択モーダル ---------- */
#templateModal{
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.5);
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* 表示領域は画面の高さの40%まで。候補が収まらないときは、領域の中（#templateScroll）でスクロールする */
#templateListContainer{
  position:relative; display:flex; flex-direction:column;
  background:var(--dark); border-radius:12px 12px 0 0;
  max-height:40vh; overflow:hidden;
}
#templateScroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
/* スクロールできることを示す上下の影。スクロール位置に応じて JS が canScrollUp / canScrollDown を付ける */
.tplFade{
  position:absolute; left:0; right:0; height:44px; pointer-events:none;
  opacity:0; transition:opacity .15s ease;
  display:flex; align-items:flex-end; justify-content:center;
}
.tplFade.top{ top:0; background:linear-gradient(to bottom, var(--dark) 15%, rgba(26,26,26,0)); }
.tplFade.bottom{ bottom:0; background:linear-gradient(to top, var(--dark) 15%, rgba(26,26,26,0)); }
.tplFade span{ color:rgba(255,255,255,.75); font-size:20px; line-height:1; margin-bottom:2px; animation:tplBounce 1.4s ease-in-out infinite; }
#templateListContainer.canScrollUp .tplFade.top{ opacity:1; }
#templateListContainer.canScrollDown .tplFade.bottom{ opacity:1; }
@keyframes tplBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }
#templateList{
  display:flex; flex-direction:column; gap:8px;
}
.templateItem{
  padding:12px 16px; background:rgba(255,255,255,.1); border-radius:6px;
  border:1px solid rgba(255,255,255,.2); color:#fff; text-align:left;
  font-size:14px; cursor:pointer; transition:all .2s;
}
.templateItem:active{ background:rgba(255,255,255,.2); }

#permBox{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:#ffffff; overflow-x:hidden; overflow-y:auto; /* 1画面目の下にサービス一覧が続くので、縦にスクロールできる */
}
#carouselArea{
  flex:0 0 50%; flex-shrink:0; position:relative; overflow:hidden;
  background:#ffffff;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:22px;
  padding:10px 0;
}
.marqueeRow{ overflow:hidden; width:100%; }
.marqueeTrack{
  display:flex; width:max-content; gap:0;
  animation-duration:38s; animation-timing-function:linear; animation-iteration-count:infinite;
}
.marqueeTrack.dir-ltr{ animation-name:scrollLTR; }
.marqueeTrack.dir-rtl{ animation-name:scrollRTL; }
@keyframes scrollLTR { from{ transform:translateX(-50%); } to{ transform:translateX(0%); } }
@keyframes scrollRTL { from{ transform:translateX(0%); } to{ transform:translateX(-50%); } }
.cover{
  height:17vh; max-height:135px; min-height:70px;
  aspect-ratio:4/5; flex:none;
  box-shadow:0 3px 10px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
  background-size:cover; background-position:top center;
}
#carouselLogo{ width:150px; max-width:42%; height:auto; flex:none; margin:2px 0; }

#permBoxContent{
  position:relative; flex:1 0 auto; min-height:50%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; /* 1画面目は、画面の下半分（残り）を使う */
  padding:14px 24px 14px; text-align:center; gap:0; background:#ffffff;
  --accent-deep:#8f6b35; /* ボタン・リンクの色。白い文字との読みやすさのため、アクセント色を少し暗くしたもの */
}
#permBoxContent > *{ flex-shrink:0; } /* 高さが足りない端末でも、ボタンなどを潰さない（はみ出す分は下で切れる） */
@supports (background:color-mix(in srgb, red, blue)){
  #permBoxContent{ --accent-deep:color-mix(in srgb, var(--accent) 74%, #000); }
}
/* コピー（小さめの太字）。文字の下半分にかかる、手書き風の金色のマーカーを敷く（marker.svg）。
   上の端は、共有アイコンの上の端（上から14px）にそろえる */
#permBoxContent .topLead{
  margin:0; font-size:clamp(13px, 4vw, 15.5px); line-height:1.5; font-weight:700; letter-spacing:.12em;
  white-space:nowrap; color:#222222;
}
#topLead{
  display:inline-block; padding:0 8px 2px calc(8px + .12em);
  background:url("marker.svg") no-repeat -2px .58em / calc(100% + 4px) 1.03em;
}
/* タイトル（明朝の極太）。端末にある明朝体を使う（外部フォントは読み込まない） */
#permBoxContent #topTitle{
  margin:14px 0 0;
  font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","Source Han Serif JP",serif;
  font-size:clamp(23px, 7.5vw, 30px); line-height:1.3; font-weight:900; letter-spacing:.06em; padding-left:.06em; color:#141413;
}
/* タイトルをロゴ画像にする場合（campaign.json の top.titleImage）。文字用の字間・余白は打ち消す */
#permBoxContent #topTitle:has(img){ padding-left:0; line-height:0; margin-top:10px; }
#topTitle img{ display:block; width:clamp(240px, 78vw, 310px); max-width:100%; height:auto; }
#permBoxContent .desc{
  margin-top:26px; font-size:clamp(11.5px, 3.3vw, 12.5px); white-space:nowrap; /* 幅360px前後でも1行に収める */ color:#666666; line-height:1.8;
}
#permBoxContent #startBtn{
  margin-top:14px; min-width:248px; height:48px; padding:0 32px; border:none; border-radius:3px;
  background:var(--accent-deep); color:#ffffff; font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.1em;
  box-shadow:0 6px 14px rgba(143,107,53,.28);
}
#permBoxContent .note{
  font-size:10px; line-height:1.3; color:#767676;
  /* 左揃え。先頭の「※」だけを左に出し、「※」を除いた文字の左端（折り返した行・改行後の行も）をそろえる */
  text-align:left; padding-left:1em; text-indent:-1em;
}
/* 注意書きは、画面の下に寄せる */
#permBoxContent .notes{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; max-width:100%; margin:14px 0 38px; } /* 起動ボタンのすぐ下に置く（「利用規約に同意する」と起動ボタンの間と同じ14px）。下は、見出しとの間 */

/* サービスへのリンク（1画面目の下に続く）。見出しは、1画面目の最下行のリンク（.servicesHint）が兼ねる */
.topServices{
  flex:none; box-sizing:border-box; margin:0 32px; padding:16px 0 28px; text-align:left; /* 上の16pxは、見出し（最下行のリンク）と一覧の間をあけるぶん */
}
.topServices ul{ list-style:none; margin:0; padding:0; }
.topServices li + li{ margin-top:12px; }
.topServices a{ display:flex; align-items:center; gap:var(--svc-gap, 12px); text-decoration:none; color:inherit; -webkit-tap-highlight-color:rgba(184,147,90,.15); }
.topServices img{ flex:none; width:56px; height:56px; border-radius:10px; border:1px solid #d6d6d6; object-fit:cover; background:#ffffff; }
.topServices a > span{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.topServices strong{ font-size:13px; line-height:1.3; font-weight:700; color:#141413; }
.topServices a > span > span{ font-size:10px; line-height:1.5; color:#666666; }

/* 1画面目の最下行：下のサービス一覧の見出しを兼ねる、タップで一覧へスクロールするリンク。注意書きとの間を広めにあける */
#permBoxContent .servicesHint{
  position:relative; align-self:center; display:inline-block; margin-top:auto; padding:2px 0;
  font-size:15px; line-height:1.4; font-weight:700; letter-spacing:.04em; color:var(--accent-deep); text-decoration:none;
  scroll-margin-top:16px; -webkit-tap-highlight-color:rgba(184,147,90,.15);
}
/* 矢印は文字の右に出す（文字だけを中央にそろえるため、矢印は幅に含めない） */
#permBoxContent .servicesHint svg{ position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%); }
/* バージョン表記（キャンペーンページの見分け用）。小さく目立たないように置く。一覧があるときは、ページの最下部（一覧のあと）に移す */
#permBoxContent .topVersion{
  position:absolute; right:12px; bottom:4px; font-size:9px; line-height:1; letter-spacing:.04em; color:#b5b5b5;
  pointer-events:none; user-select:none;
}
/* フッター（ページ最下部）：一覧の下に区切り線、その下にリンク（左）とバージョン表記（右） */
.topFooter{ position:relative; margin-top:44px; padding-top:14px; border-top:1px solid #d6d6d6; display:flex; justify-content:center; align-items:center; gap:16px; min-height:18px; }
.topFooter a{ font-size:11px; line-height:1.4; color:#b5b5b5; text-decoration:none; -webkit-tap-highlight-color:rgba(184,147,90,.15); }
.topFooter a:hover{ text-decoration:underline; }
.topFooter .topVersion{ position:absolute; right:0; bottom:2px; font-size:9px; line-height:1; letter-spacing:.04em; color:#b5b5b5; user-select:none; }

/* ---------- 撮影した瞬間の暗転 ---------- */
#shutterFlash{
  position:absolute; inset:0; z-index:7; background:#000;
  opacity:0; pointer-events:none;
}
#shutterFlash.on{ opacity:1; transition:opacity .04s linear; }

/* ---------- 横向きのときの案内（縦向き固定の代わり） ----------
   ブラウザからは端末の向きを固定できない（iOS は非対応、Android も全画面時のみ）ため、
   スマホが横向きになったら画面全体を覆って「縦向きに戻して」と案内する。
   カメラは止めず、縦向きに戻れば元の画面にそのまま戻る。
   対象は「横向き かつ 高さが低い かつ タッチ端末」＝スマホの横向き。
   タブレット（高さが十分ある）やPCのブラウザは対象外 */
#rotateGuard{
  display:none; position:fixed; inset:0; z-index:1000;
  background:#000; color:#fff; font-size:14px; letter-spacing:.5px; text-align:center;
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
#rotateGuard .rotateIcon{
  width:26px; height:44px; border:3px solid #fff; border-radius:6px;
  animation:rotateHint 2.4s ease-in-out infinite;
}
@keyframes rotateHint{
  0%, 20%{ transform:rotate(-90deg); }
  50%, 100%{ transform:rotate(0deg); }
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  #rotateGuard{ display:flex; }
}

/* ---------- 利用規約への同意（トップ画面） ---------- */
#termsRow{
  margin-top:32px;
  display:flex; align-items:flex-start; gap:8px; max-width:320px; text-align:left;
  font-size:12px; line-height:1.6; color:#333333; cursor:pointer;
}
#termsRow input{ flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent-deep); }
#termsRow a{ color:var(--accent-deep); text-decoration:underline; }
#termsRow .termsAge{ display:inline-block; margin-left:4px; font-size:11px; color:#767676; white-space:nowrap; }
#permBoxContent button:disabled{ opacity:.35; cursor:not-allowed; }

/* ---------- 利用規約のモーダル ---------- */
#termsModal{
  display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.55);
  align-items:center; justify-content:center; padding:16px;
}
#termsPanel{
  display:flex; flex-direction:column; width:100%; max-width:480px; max-height:100%;
  background:#ffffff; color:#222222; border-radius:6px; overflow:hidden;
}
#termsHead{
  flex:none; display:flex; align-items:baseline; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid #e5e5e5; font-size:15px;
}
#termsVer{ font-size:11px; color:#999999; }
#termsBody{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 18px;
  font-size:12px; line-height:1.8; touch-action:pan-y;
}
#termsBody h3{ font-size:13px; margin:18px 0 6px; }
#termsBody p{ margin:0 0 8px; }
#termsBody ol{ margin:0 0 8px; padding-left:1.6em; }
#termsBody ul{ margin:4px 0; padding-left:1.4em; }
#termsBody li{ margin-bottom:4px; }
/* (1)(2)… の番号の下位リスト（第7条・第12条） */
#termsBody ol.termsParen{ list-style:none; counter-reset:tp; margin:4px 0; padding-left:0; }
#termsBody ol.termsParen > li{ counter-increment:tp; position:relative; padding-left:2.4em; }
#termsBody ol.termsParen > li::before{ content:"(" counter(tp) ")"; position:absolute; left:0; }
#termsBody .termsTable{ border-collapse:collapse; width:100%; margin:6px 0; font-size:11px; }
#termsBody .termsTable th, #termsBody .termsTable td{ border:1px solid #dddddd; padding:5px 7px; vertical-align:top; text-align:left; }
#termsBody .termsTable th{ background:#f5f5f5; width:28%; }
#termsBody .termsThird{ margin:6px 0 10px; padding:8px 10px; background:#fafafa; border:1px solid #eeeeee; border-radius:4px; }
#termsBody .termsThird p{ margin:0 0 4px; }
#termsBody .termsThird .termsSub{ margin-top:10px; font-weight:700; }
#termsBody .termsThird ul{ margin:2px 0 4px; }
#termsBody .termsThird a{ color:var(--accent); word-break:break-all; }
#termsBody .termsDate{ margin-top:16px; color:#777777; }
#termsFoot{ flex:none; padding:10px 18px; border-top:1px solid #e5e5e5; text-align:center; }
#termsClose{
  background:var(--accent); color:#ffffff; border:none; padding:10px 32px; border-radius:2px;
  font:inherit; font-size:13px; font-weight:700; letter-spacing:1px;
}

/* ---------- トップ画面：このページをシェア（アイコン） ----------
   コピーと同じ高さ（コピーの行の中央にそろえる）、右端寄りに、絶対配置で小さく置く */
#permBoxContent button.pageShareIcon{
  position:absolute; right:14px; top:11px;
  width:30px; height:30px; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#ffffff; color:var(--accent-deep); border:1px solid var(--accent);
}
#permBoxContent button.pageShareIcon:active{ background:rgba(184,147,90,.12); }
@media (max-width:340px){ #permBoxContent button.pageShareIcon{ right:8px; } }

/* 高さが低い端末（高さ700px以下）では、余白を詰めて、1画面に収める */
@media (max-height:700px){
  #permBoxContent{ padding-top:8px; padding-bottom:0; }
  #permBoxContent .servicesHint{ padding:0; }
  #permBoxContent .notes{ margin:10px 0 6px; }
  #permBoxContent #topTitle{ margin-top:8px; }
  #permBoxContent .desc{ margin-top:16px; }
  #termsRow{ margin-top:18px; }
  #permBoxContent #startBtn{ margin-top:10px; height:44px; }
  #permBoxContent button.pageShareIcon{ top:7px; }
}

/* ---------- シェアのシート（撮影後のシェア／トップのページシェア共用）とトースト ---------- */
#shareSheet{
  display:none; position:fixed; inset:0; z-index:900; background:rgba(0,0,0,.55);
  align-items:flex-end; justify-content:center;
}
#sharePanel{
  width:100%; max-width:480px; background:#ffffff; color:#222222; border-radius:12px 12px 0 0;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
}
#sharePanel h2{ font-size:15px; margin:0 0 12px; text-align:center; }
.shareAct{
  display:block; width:100%; text-align:left; padding:12px 14px; margin:0 0 8px;
  background:#f6f6f6; color:#222222; border:1px solid #e5e5e5; border-radius:6px;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.shareAct small{ display:block; margin-top:2px; font-size:11px; font-weight:400; color:#888888; }
#shareClose{
  display:block; width:100%; padding:11px 0; background:transparent; color:#777777;
  border:none; font:inherit; font-size:13px; cursor:pointer;
}
#toast{
  position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
  z-index:1100; padding:9px 18px; border-radius:999px; background:rgba(0,0,0,.82); color:#ffffff;
  font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
#toast.show{ opacity:1; }