@charset "UTF-8";
/* ============================================================
   WeChat 誘導ページ（固定ページ スラッグ: wechat）
   ------------------------------------------------------------
   デザイン: wechat資料/WeChat遷移先ページ02.pdf（390 x 847 / SP基準）
   ・単独ページのため、テーマ共通CSS（layout/under等）は読み込まない
   ・PC は 390px 幅を中央寄せし、周囲は大理石背景で埋める
   ============================================================ */

:root {
  --wc-text: #686868;
  --wc-accent: #ed9790;
  --wc-accent-title: #f39181;
  --wc-notice-bg: #fdf8f6;
  --wc-notice-border: #f6d1cd;
  --wc-bracket: #f6cbc8;
  --wc-card-radius: 8px;
  --wc-shadow: 0 2px 20px rgba(0, 0, 0, .05);
  --wc-grad: linear-gradient(90deg, #ebccae 0%, #ec9791 100%);
  --wc-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --wc-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  /* 390px 基準の左右余白（33px）。狭い端末では比例して詰める */
  --wc-gutter: clamp(16px, 8.4615vw, 33px);
}

/* ── 最小リセット ───────────────────────────────
   単独ページなので共通の reset.css は読み込まず、必要な初期化だけを
   ここで完結させる（reset.css の word-break:break-all や
   letter-spacing:.08em など、このページに不要な指定を持ち込まないため）。
   ------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* すべて :where() で詳細度 0 にする。
   .wechat-page h1 のように書くと詳細度 (0,1,1) となり、
   下の .wc-title / .wc-lead など (0,1,0) の指定を上書きしてしまう */
:where(.wechat-page) :where(h1, h2, p) {
  margin: 0;
  padding: 0;
}

:where(.wechat-page) :where(img) {
  max-width: 100%;
  vertical-align: top;
  border: 0;
}

:where(.wechat-page) :where(button) {
  font: inherit;
  color: inherit;
}

:where(.wechat-page) :where(a) {
  text-decoration: none;
}

body.wechat-page {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--wc-text);
  font-family: var(--wc-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: normal;
  word-break: normal;
  /* 全角約物をプロポーショナル字形に（テーマ共通の reset.css と同じ設定）。
     デザイン（Illustrator）も約物を詰めた字送りのため、これが前提。
     各所の letter-spacing は palt 有効時の実測値に合わせてある */
  font-feature-settings: "palt";
  overflow-wrap: break-word;
  background-color: #fbfbfb;
  background-image: url("../img/common/bg_marble_wechat.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* PC でも 390px 幅を中央寄せ。背景の大理石は body 側で全面に敷く */
.wc-page {
  width: 100%;
  max-width: 390px;
  margin-inline: auto;
  padding: 32px var(--wc-gutter) 32px;
}

/* ── ロゴ ───────────────────────────────────── */
.wc-logo {
  display: block;
  width: 125px;
  height: auto;
  margin: 0 auto;
}

/* ── 見出し ─────────────────────────────────── */
.wc-title {
  margin: 15px 0 0;
  font-family: var(--wc-serif);
  font-size: min(30px, 7.692vw); /* 30 / 390 = 7.692vw。狭い端末でも1行を維持 */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .096em; /* デザインの字面幅 260.2px に一致する実測値 */
  text-indent: .048em;    /* letter-spacing の半分。中央寄せのズレを補正 */
  text-align: center;
  color: var(--wc-text);
}

.wc-title__accent {
  color: var(--wc-accent-title);
}

.wc-lead {
  margin: 12px -12px 0; /* 字送りが広くカードより外へ出るため、左右に食い込ませる */
  font-size: min(17px, 4.36vw); /* 17 / 390 = 4.36vw。狭い端末でも1行を維持 */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .172em; /* デザインの字面幅 338.7px に一致する実測値 */
  text-indent: .086em;
  text-align: center;
  color: var(--wc-text);
}

/* ── 白カード共通 ───────────────────────────── */
.wc-card {
  background: #fff;
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-shadow);
}

/* ── QRカード ───────────────────────────────── */
.wc-qr-card {
  margin-top: 37px;
  padding: 21px 16px 16px;
  text-align: center;
}

/* カギ括弧の枠（225 x 225）内に QR（192 x 192）を中央配置 */
.wc-qr-frame {
  position: relative;
  width: 225px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wc-qr-frame__img {
  display: block;
  width: 88%; /* 余白込み198px。コード本体が191pxになる比率 */
  height: auto;
  margin-inline: auto;
  mix-blend-mode: multiply; /* JPEG の白背景をカード白に馴染ませる */
}

/* WebP Express（設定 alter-html.replacement = "picture"）は出力バッファで
   <img> を「属性なしの <picture>」で包む。するとフレックスアイテムが
   <img> ではなく <picture> になり、<picture> が 225px いっぱいに広がった
   内側で width:88% の <img> が左端に張り付いてしまう。
   包まれても包まれなくても 198px・中央になるよう <picture> 側にも幅を持たせる。
   （SVGは変換対象外＝包まれないため、アイコン類はこの対策不要） */
.wc-qr-frame > picture {
  display: block;
  width: 88%;
  margin-inline: auto;
}

.wc-qr-frame > picture > .wc-qr-frame__img {
  width: 100%; /* 幅は <picture> 側で確定しているため */
}

.wc-qr-frame__corner {
  position: absolute;
  width: 21px;
  height: 21px;
  border: 1px solid var(--wc-bracket);
  pointer-events: none;
}

.wc-qr-frame__corner--tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}

.wc-qr-frame__corner--tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 6px;
}

.wc-qr-frame__corner--bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 6px;
}

.wc-qr-frame__corner--br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}

/* ── 保存ボタン（グラデーション） ───────────── */
.wc-btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 240px;
  max-width: 100%;
  height: 40px;
  margin: 19px auto 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--wc-grad);
  color: #fff;
  font-family: var(--wc-sans);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .2s;
  -webkit-appearance: none;
  appearance: none;
}

.wc-btn-save:hover,
.wc-btn-save:focus-visible {
  opacity: .8;
}

.wc-btn-save__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.wc-btn-save__label {
  letter-spacing: .093em; /* デザインの字面幅 91.3px に一致する実測値 */
  margin-right: -.093em;  /* 末尾の字送り分を打ち消して光学的に中央へ */
}

/* ── 注意書き ───────────────────────────────── */
.wc-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  padding: 11px 14px;
  border: 1px solid var(--wc-notice-border);
  border-radius: var(--wc-card-radius);
  background: var(--wc-notice-bg);
}

.wc-notice__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.wc-notice__text {
  margin: 0;
  font-size: min(15px, 3.85vw); /* 15 / 390 = 3.85vw */
  line-height: 1.4;
  letter-spacing: .046em; /* デザインの1行目 251.8px に一致する実測値 */
  color: var(--wc-text);
}

/* ── 微信号カード ───────────────────────────── */
.wc-idlabel {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .045em; /* デザインの字面幅 116.4px に一致する実測値 */
  color: var(--wc-text);
}

.wc-id-card {
  margin-top: 12px;
  padding: 21px 16px 18px;
}

.wc-id-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* 行の高さを16pxに固定（tclinic の 21px 字面は上下に僅かにはみ出すが中央揃え）。
     カード高さをデザインの104pxに一致させるため */
  line-height: 16px;
}

.wc-id-row__label {
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--wc-text);
}

.wc-id-row__sep {
  width: 1px;
  height: 16px;
  background: var(--wc-accent);
}

.wc-id-row__value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--wc-text);
}

/* ── コピーボタン（線） ─────────────────────── */
.wc-btn-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 250px;
  max-width: 100%;
  height: 34px;
  margin: 15px auto 0;
  padding: 0;
  border: 1px solid var(--wc-accent);
  border-radius: 17px;
  background: transparent;
  color: var(--wc-accent);
  font-family: var(--wc-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .2s, color .2s;
  -webkit-appearance: none;
  appearance: none;
}

.wc-btn-copy:hover,
.wc-btn-copy:focus-visible {
  background: var(--wc-accent);
  color: #fff;
}

.wc-btn-copy__icon {
  flex: none;
  width: 14px;
  height: 16px;
}

/* 背景がピンクになる状態ではアイコン（#ED9790 固定塗り）を白へ反転 */
.wc-btn-copy:hover .wc-btn-copy__icon,
.wc-btn-copy:focus-visible .wc-btn-copy__icon,
.wc-btn-copy.is-copied .wc-btn-copy__icon {
  filter: brightness(0) invert(1);
}

.wc-btn-copy__label {
  letter-spacing: 0; /* デザインの字面幅 69.1px ＝ 字送りなし */
}

.wc-btn-copy.is-copied {
  background: var(--wc-accent);
  color: #fff;
}

/* ── トースト ───────────────────────────────── */
.wc-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 100;
  max-width: calc(100% - 40px);
  padding: 10px 20px;
  border-radius: 20px;
  background: rgba(60, 60, 60, .88);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}

.wc-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.wc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wc-toast,
  .wc-btn-save,
  .wc-btn-copy {
    transition: none;
  }
}