@charset "utf-8";
/* ============================================================
   TESCOM TS800A-W  プロテクトイオン ワイドストレートアイロン LP
   ------------------------------------------------------------
   すべて .ts800a 配下にスコープしています。
   TESCOM側で付与されるヘッダー・フッターには影響しません。

   PC : 1280px 固定（コーポレートサイトの .con に合わせる）
   SP : 768px 以下で切り替え
   ============================================================ */

/* ------------------------------------------------------------
   1. トークン
   ------------------------------------------------------------ */
.ts800a{
  /* 地 */
  --paper:#FFFFFF;
  --mist:#FBF7F0;          /* 統一背景色（先方指定） */
  --line:#EDE3CE;

  /* 淡色（案3はグレージュ） */
  --pale:#E6D8BB;
  --pink:#D9C6A5;          /* 装飾専用グレージュ（案3）。文字には使わない */
  --pink-mid:#C2AA82;
  --deep:#7C6540;          /* 文字用の深ミルクティー AA 5.5 */
  --auth:#A2885C;          /* バッジ起点のミルクティーゴールド。大きめ数値・CTA面用（白文字3.4=太字大サイズ向け） */

  /* イエロー／ゴールド（バッジの黄に統一） */
  --champ:#D9C6A5;         /* グレージュ（装飾用） */
  --champ-hi:#E8DCC2;
  --champ-mid:#D9C6A5;
  --champ-lo:#C2AA82;
  --gold:#C2AA82;
  --gold-d:#7C6540;        /* 文字用の深グレージュ AA 5.4 */

  /* 文字 */
  --ink:#634B3B;           /* 実測：公式Instagram AA 8.08 */
  --ink-mute:#7A6355;      /* AA 5.61 */
  --ink-faint:#A99384;

  /* グラデーション
     ------------------------------------------------------------
     --g-mesh : 四隅メッシュ（ELIMS方式）。REASONの白カード下に使用
     --g-bloom: センターブルーム（boy.co.jp方式）。KVに使用
       周辺をほぼ白に保ち、中央だけ彩度を上げる。明度を92〜98%に
       閉じ込めることで、色を置いても窮屈にならない
     ------------------------------------------------------------ */
  /* 四隅すべてに色を置く。白のままだと、上に重なる半透明の白カードの
     輪郭が消えてしまうため（特に左下） */
  --g-mesh:
    radial-gradient(at 0% 0%,    #F7E3BC 0%, rgba(247,227,188,0) 62%),
    radial-gradient(at 100% 0%,  #FFE9C9 0%, rgba(255,233,201,0) 62%),
    radial-gradient(at 0% 100%,  #E3F2FC 0%, rgba(227,242,252,0) 62%),
    radial-gradient(at 100% 100%,#E8F7DF 0%, rgba(232,247,223,0) 62%),
    #FEFAF1;
  --g-bloom:
    radial-gradient(64% 58% at 40% 44%, #F7E7C4 0%, rgba(247,231,196,.55) 42%, rgba(247,231,196,0) 78%),
    radial-gradient(52% 46% at 70% 64%, #FFEFD0 0%, rgba(255,239,208,.5) 44%, rgba(255,239,208,0) 80%),
    radial-gradient(40% 36% at 14% 84%, #E9F5FD 0%, rgba(233,245,253,0) 76%),
    #FEFBF4;
  --g-metal:linear-gradient(115deg,#E8325A 0%,#FF7A3C 38%,#FFC23D 70%,#FFD66B 100%);
  --g-metal-txt:linear-gradient(100deg,#7C6540 0%,#C2AA82 55%,#D9C6A5 100%);
  --g-cta:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#FF7A3C);  /* POINT01バッジとまったく同じ（白挟み） */

  /* 書体 */
  --sans:"Shippori Mincho","游明朝体",YuMincho,"游明朝",
         "Hiragino Mincho ProN","ヒラギノ明朝 ProN W3",serif;  /* 全文明朝化 */
  --gothic:"Shippori Mincho","游明朝体",YuMincho,"游明朝",
           "Hiragino Mincho ProN","ヒラギノ明朝 ProN W3",serif;  /* 全文明朝化（旧ゴシック枠も明朝へ） */
  --mincho:"Shippori Mincho","游明朝体",YuMincho,"游明朝",
           "Hiragino Mincho ProN","ヒラギノ明朝 ProN W3",serif;
  --latin:"Shippori Mincho","游明朝体",YuMincho,"游明朝",
          "Hiragino Mincho ProN","ヒラギノ明朝 ProN W3",serif;  /* 英字・数値も和文と同じ明朝で統一 */
  --script:"Sacramento",cursive;

  /* 寸法 */
  --con:1280px;
  --inner:1040px;
  --gutter:40px;
  --sec-pc:84px;
  --sec-sp:52px;
}

/* ------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------ */
.ts800a{
  font-family:var(--sans);
  /* Zen Maru Gothic は 500/700 の実ウェイトを読込。疑似ボールドは禁止し、
     本文=500、強調・見出し=700（600指定は700に解決される） */
  font-synthesis-weight:none;
  font-size:16px;
  font-weight:500;
  line-height:1.85;
  letter-spacing:.03em;  /* 本文系は少し開く（見出しは各自の指定が優先） */
  color:var(--ink);
  background:#FBF7F0;  /* ページ全体を単色に */
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
.ts800a *{ box-sizing:border-box; }
.ts800a img{ max-width:100%; height:auto; display:block; }
/* リセットは :where() で詳細度を0にする。
   `.ts800a p`（0,1,1）のままだと `.ts800a__lead`（0,1,0）より強く、
   コンポーネント側の margin がすべて無効化されてしまうため。 */
.ts800a :where(p,h1,h2,h3,h4,ul,ol,figure){ margin:0; }
.ts800a :where(ul,ol){ list-style:none; padding:0; }
:where(.ts800a a){ color:inherit; }
.ts800a :where(p,li,figcaption){ text-align:justify; }  /* 文章は均等割付け */  /* 詳細度0に落とし、.ts800a__btn等の文字色指定が勝てるように */
.ts800a sup{ font-size:.62em; vertical-align:super; line-height:0; }
.ts800a :focus-visible{ outline:2px solid var(--auth); outline-offset:3px; }

/* ------------------------------------------------------------
   3. レイアウト
   ------------------------------------------------------------ */
/* ヘッダーロゴ：帯にせずKV背景の上に重ねる（外してもレイアウトが動かない絶対配置） */
.ts800a{ position:relative; }
.ts800a__header{ position:absolute; top:0; left:0; z-index:5; padding:18px 28px; background:none; }
.ts800a__header a{ display:inline-block; line-height:0; }
.ts800a__header img{ width:148px; height:auto; display:block; }
@media (max-width:768px){
  .ts800a__header{ padding:12px 10px; }
  .ts800a__header img{ width:112px; }
}

.ts800a__sec{ position:relative; padding:var(--sec-pc) var(--gutter); overflow:hidden; }
.ts800a__con{ width:var(--con); max-width:100%; margin-inline:auto; }
.ts800a__inner{ max-width:var(--inner); margin-inline:auto; }

.ts800a__sec--tint{ background:var(--mist); }
.ts800a__sec--mesh{ background:var(--g-mesh); }
/* KV背景：支給のゴールドリキッド画像（25111953）。CTA側はブルームのまま */
.ts800a__sec--bloom{ background:#FBF7F0; }
.ts800a__sec--cta{ background:#FBF7F0; }
.ts800a__kv-bg{ background:#FBF7F0; }  /* 単色統一（旧: 画像背景） */

/* グラデの上に白カードを浮かせる（ELIMS方式） */
.ts800a__sec--card{ background:#FBF7F0; padding:40px 16px; }
/* POINT01・03はゴールド系の画像背景（--cardのメッシュより後置きで上書き） */
.ts800a__p01-bg{ background-image:none; }
.ts800a__p03-bg{ background-image:none; }  /* POINT03だけ白さを一段戻す */
.ts800a__card{
  /* 不透明ではなく半透明。下のグラデが透けることで囲われ感が消える（boy.co.jp方式） */
  background:rgba(255,255,255,.5); border-radius:10px;
  padding:60px var(--gutter); max-width:1180px; margin-inline:auto;
  position:relative; z-index:1;
}

/* 製品ムービー：全幅の地は敷かず、白カードだけを浮かせる */
.ts800a__sec--movie{ padding-inline:16px; }
.ts800a__sec--movie .ts800a__card{
  background:none; box-shadow:none;  /* 背景なし（白地に動画だけ） */
  padding-top:0;
}
.ts800a__sec--movie .ts800a__eyebrow{ color:var(--auth); }
.ts800a__sec--movie .ts800a__h2{ text-align:center; }

/* KV：切り抜き写真を左カラム・セクション下端に接地 */
.ts800a__g2.ts800a__kv{ align-items:center; gap:38px; }
@media (min-width:769px){
  .ts800a__g2.ts800a__kv{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }  /* PCのみ: 写真5・テキスト7 */
}
/* 実写版：写真カラムをセクションの上端〜下端までフルブリード */
.ts800a__kv-photo{
  align-self:stretch; position:relative;
  margin-top:calc(var(--sec-pc) * -1);
  margin-bottom:calc(var(--sec-pc) * -1);
}
.ts800a__kv-photo .ts800a__reveal{ position:absolute; inset:0; }
.ts800a__kv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:768px){
  .ts800a__g2.ts800a__kv{ gap:10px; }  /* SPは写真上の空きを控えめに */
  /* SPのKVバッジは少し大きく */
  .ts800a__figs--kv2 .ts800a__fig{ width:128px; }
  /* 「髪にやさしく〜」の上下余白を約半分に */
  .ts800a__kv .ts800a__name{ margin-bottom:10px; }
  .ts800a__kv h1.ts800a__h2{ margin-bottom:18px; }
  .ts800a__kv-photo{ order:2; position:static; margin-top:0; margin-bottom:calc(24px - var(--sec-sp)); }  /* 下端から24px浮かせる */
  .ts800a__kv-photo .ts800a__reveal{ position:static; display:block; width:100%; border-radius:12px; overflow:hidden; }  /* SPはバッジ列と同じ全幅・角丸 */
  .ts800a__kv-photo img{ width:100%; height:auto; object-fit:unset; }

}

/* SPだけ改行するbr */
.ts800a__br-sp{ display:none; }
@media (max-width:768px){ .ts800a__br-sp{ display:inline; } }

/* メッシュ地のパネル（白セクション内で帯＋図解を包む） */
.ts800a__panel{
  background:var(--paper);  /* パネルは白カード */
  border-radius:14px;
  padding:36px 28px 34px; margin-top:56px;
}
.ts800a__panel--alt{ background:var(--paper); }
.ts800a__panel .ts800a__reveal{ --reveal-cover:var(--paper); }

/* 赤帯の小見出し（図解のタイトルなど） */
.ts800a__band{
  display:table; margin-inline:auto;
  background:var(--auth); color:#fff;
  font-size:clamp(16px,1.9vw,19px); font-weight:700; line-height:1.4;
  letter-spacing:.02em; padding:5px 20px; border-radius:8px;
}

/* スライダー用クローンはSPでだけ表示（PCグリッドに混ぜない） */
.ts800a__slide-sp > [aria-hidden="true"]{ display:none !important; }  /* g3のdisplay:block指定に勝たせる */

/* SPスライダーのラッパー（矢印の基準）。矢印はSPのみ表示 */
.ts800a__sl-wrap{ position:relative; }
.ts800a__sl-btn{ display:none; }

/* 仕様表の横スクロールヒント（表がはみ出す幅でだけ表示） */
.ts800a__scroll-hint{ display:none; font-size:12.5px; font-weight:500; color:var(--ink-faint); margin-bottom:8px; }
@media (max-width:620px){ .ts800a__scroll-hint{ display:block; } }

/* フッター：白帯・中央ロゴ */
.ts800a__footer{ background:#FBF7F0; padding:40px 20px; text-align:center; }
.ts800a__footer a{ display:inline-block; line-height:0; }
.ts800a__footer img{ width:150px; height:auto; }
@media (max-width:768px){
  .ts800a__footer{ padding:30px 16px; }
  .ts800a__footer img{ width:120px; }
}

/* アンカー着地位置（先方ヘッダーの高さぶん逃がす） */
.ts800a [id]{ scroll-margin-top:96px; }

/* ------------------------------------------------------------
   4. 光のフレア（本番は IMG-22 のPNGを重ねてもよい）
   ------------------------------------------------------------ */
.ts800a__sec--flare::before{
  content:none;  /* ★いったん非表示。復活時はこの行を削除して下の content:"" を有効化 */
  /* content:""; */ position:absolute; inset:-10% -5%; pointer-events:none; z-index:0;
  background:
    radial-gradient(52% 42% at 10% -8%, rgba(255,255,255,.96), rgba(255,255,255,0) 72%),
    radial-gradient(30% 26% at 86% 6%,  rgba(248,233,198,.50), rgba(248,233,198,0) 74%),
    radial-gradient(40% 34% at 74% 98%, rgba(255,255,255,.78), rgba(255,255,255,0) 74%);
}
.ts800a__sec > *{ position:relative; z-index:1; }

/* ------------------------------------------------------------
   5. タイポグラフィ（ELIMS実測に準拠）
   ------------------------------------------------------------ */
.ts800a__eyebrow{
  font-family:var(--latin); font-size:clamp(17px,2.2vw,22px); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-d);
  line-height:1.35; margin-bottom:12px;
}
/* KV：品番と商品名 */
.ts800a__model{
  font-family:var(--latin); font-size:clamp(24px,3vw,32px); font-weight:600;
  letter-spacing:.08em; line-height:1.2; color:var(--ink); margin-bottom:4px;
}
.ts800a__name{
  font-size:clamp(14px,1.6vw,16.5px); font-weight:600; letter-spacing:.02em;
  line-height:1.6; color:var(--ink-mute); margin-bottom:20px;
}

/* POINTラベル：筆記体「Point」を数字に重ねる（FITS you. 方式） */
.ts800a__point{ position:relative; display:inline-block; margin-bottom:16px; line-height:1; }
/* POINTラベル：金属グラデを文字に直接のせる（上の罫は廃止）
   ─ 罫の --g-metal は最明部 #FFDF9E が文字では飛ぶため、
     文字用に両端を締めた --g-metal-txt を使用 */
.ts800a__point-num{
  display:block; padding-left:.5em;
  font-family:var(--latin); font-size:clamp(52px,7.4vw,74px); font-weight:700;
  line-height:.86; font-variant-numeric:tabular-nums; color:var(--deep);
}
.ts800a__point-lab{
  position:absolute; left:0; bottom:-.1em; z-index:1;
  font-family:var(--script); font-size:clamp(34px,4.4vw,44px); font-weight:400;
  letter-spacing:0; line-height:1;
  background:var(--g-metal-txt); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 見出し（マーカー下線は廃止 → キーフレーズの色＋サイズで強調） */
.ts800a__h2{
  font-family:var(--mincho);
  font-size:clamp(25px,3.2vw,37px); font-weight:600; line-height:1.55;
  letter-spacing:.04em; margin-bottom:36px; text-wrap:balance; color:var(--ink);
}
.ts800a__h2 em{ font-style:normal; color:var(--deep); }
.ts800a__h2--mincho{ font-family:var(--mincho); font-weight:600; letter-spacing:.04em; }

.ts800a__lead{
  font-size:16px;  /* SP基準。PCは下の指定で17px */ font-weight:600; line-height:1.85;
  color:var(--ink-mute); margin-bottom:22px;
}
.ts800a__lead em{ font-style:normal; font-weight:700; color:var(--deep); }

.ts800a__note{ font-size:12px; font-weight:500; line-height:1.7; color:var(--ink-faint); margin-top:10px; }
/* カード内（.ts800a__box p）と同じ見た目の注記 */
.ts800a__note--feat{ font-size:14.5px; font-weight:600; line-height:1.75; color:var(--ink-mute); }

/* YouTube埋め込み（16:9・中央寄せ） */
.ts800a__video{ max-width:860px; margin-inline:auto; }
.ts800a__video iframe{
  display:block; width:100%; height:auto; aspect-ratio:16/9; border:0;  /* height属性(315)を打ち消してratioを有効に */
  border-radius:12px; background:#000;
  box-shadow:0 4px 22px rgba(162,136,92,.14);
}

@media (min-width:769px){
  .ts800a__lead{ font-size:17px; }  /* PCの本文を1px上げる */
}

/* パネルのキャプション：PCは中央、SPは左揃え */
.ts800a__panel-cap{ text-align:center; margin:14px 0 0; }
@media (max-width:768px){ .ts800a__panel-cap{ text-align:left; } }

/* 金属グラデの罫 */
.ts800a__rule{ height:3px; width:110px; border-radius:2px; background:var(--g-metal); margin-bottom:18px; }

/* ------------------------------------------------------------
   6. グリッド
   ------------------------------------------------------------ */
.ts800a__g2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; align-items:center; }
.ts800a__g3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; }
/* ホワイトカラー3枚など、g3直下のrevealは角丸でクリップ */
.ts800a__g3 > .ts800a__reveal{ border-radius:12px; overflow:hidden; display:block; }
.ts800a__g3 > .ts800a__reveal img{ display:block; width:100%; height:auto; }
.ts800a__g4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.ts800a__g6{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; }

/* ------------------------------------------------------------
   7. パーツ
   ------------------------------------------------------------ */
/* 数値バッジ（角丸の箱）— セクション内の補助数値に使用 */
.ts800a__figs{ display:flex; flex-wrap:wrap; gap:12px; margin:20px 0; }
.ts800a__fig{ font-family:var(--gothic); border:1px solid var(--auth); border-radius:3px; padding:10px 18px; background:rgba(255,255,255,.72); }
.ts800a__fig small{ display:block; font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--ink-mute); }
.ts800a__fig strong{
  display:block; font-family:var(--latin); font-size:30px; font-weight:700; line-height:1.2;
  color:var(--auth); font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* 数値バッジ（サークル）— KVの3数値のみ */
.ts800a__figs--circle{ gap:14px; margin:24px 0; }
/* KVの4バッジ：PCは横1列（サイズを絞って収める）、SPは2×2 */
@media (min-width:769px){
  .ts800a__figs--kv2{ flex-wrap:nowrap; gap:12px; }   /* 必ず1列に */
  .ts800a__figs--kv2 .ts800a__fig{ width:clamp(90px,8vw,104px); padding:8px 6px; }
  .ts800a__figs--kv2 .ts800a__fig strong{ font-size:clamp(14px,1.45vw,18px); }
  .ts800a__figs--kv2 .ts800a__fig small{ font-size:clamp(8.5px,.9vw,10px); }
}
@media (max-width:768px){
  .ts800a__figs--kv2{ display:grid; grid-template-columns:repeat(2,max-content); justify-content:center; order:3; }
  /* SPはタイトル類→写真→バッジの順に並べ替え（1カラムを明示） */
  .ts800a__g2.ts800a__kv{ grid-template-columns:1fr; }
  .ts800a__kv > div:not(.ts800a__kv-photo){ display:contents; }
}
.ts800a__figs--circle .ts800a__fig{
  width:clamp(108px,13vw,156px); aspect-ratio:1/1;
  /* 太枠グラデーションリング（ルルルン方式）:
     透明ボーダー4px＋2層背景（内側=白 padding-box／枠=グラデ border-box）。
     色は --fig-ring で数値ごとに差し替え */
  border:6px solid transparent; border-radius:50%;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    var(--fig-ring,linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#DFD0AE)) border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px 12px; gap:3px;
  box-shadow:0 1px 10px rgba(184,27,48,.06);
}
/* ルルルン系キャンディトーン。起点は明るいラズベリー赤、中間に白を挟む */
.ts800a__fig--sky{   --fig-ring:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#8CA6B4); }
.ts800a__fig--tang{  --fig-ring:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#D98A3C); }
.ts800a__fig--grape{ --fig-ring:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#B183E6); }
.ts800a__fig--honey{ --fig-ring:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#E3B64D); }
.ts800a__fig--leaf{  --fig-ring:linear-gradient(135deg,#C2AA82,#FFFFFF 52%,#9FA85A); }
.ts800a__figs--circle .ts800a__fig small{
  font-size:clamp(10.5px,1.12vw,12.5px); line-height:1.45; letter-spacing:.02em;
}
.ts800a__figs--circle .ts800a__fig strong{
  font-size:clamp(21px,2.5vw,30px); line-height:1.05; letter-spacing:.005em;
}

/* 数値バッジの出現：グラデリングごとポップイン（回転でグラデが掬い上がる） */
.ts800a.-js .ts800a__figs--circle .ts800a__fig{
  opacity:0; transform:scale(.55) rotate(-14deg);
}
.ts800a.-js .ts800a__figs--circle.-shown .ts800a__fig{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .75s cubic-bezier(.34,1.56,.64,1);
}
.ts800a.-js .ts800a__figs--circle.-shown .ts800a__fig:nth-child(2){ transition-delay:.14s; }
.ts800a.-js .ts800a__figs--circle.-shown .ts800a__fig:nth-child(3){ transition-delay:.28s; }

/* No.1 バッジ */
.ts800a__badge{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--auth); color:var(--auth); background:rgba(255,255,255,.72);
  border-radius:999px; padding:8px 18px; font-size:13px; font-weight:700; letter-spacing:.04em;
  margin-bottom:20px;
}

/* KVメタ */
.ts800a__kv-meta{ font-size:13.5px; font-weight:600; color:var(--ink-mute); line-height:1.9; margin-top:20px; }

/* アンカーナビ */
.ts800a__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; }
@media (max-width:768px){ .ts800a__nav{ grid-template-columns:1fr; gap:12px; } }
.ts800a__nav a{
  display:flex; align-items:center; gap:18px; text-decoration:none;
  background:var(--paper); border:1px solid var(--pale); border-radius:10px;
  padding:20px 24px; transition:border-color .3s, transform .3s;
}
.ts800a__nav a:hover{ border-color:var(--pink); transform:translateY(-2px); }
/* 各セクションのPOINTラベルと同じ組み（筆記体Point×赤数字）の縮小版 */
.ts800a__nav-pt{ position:relative; display:inline-block; line-height:1; flex:0 0 auto; }
.ts800a__nav-pt b{
  display:block; padding-left:.5em;
  font-family:var(--latin); font-size:42px; font-weight:700; line-height:.86;
  color:var(--deep); font-variant-numeric:tabular-nums;
}
.ts800a__nav-lab{
  position:absolute; left:0; bottom:-.1em; z-index:1;
  font-family:var(--script); font-size:26px; font-weight:400; line-height:1;
  background:var(--g-metal-txt); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ts800a__nav-tt{ flex:1; font-size:16.5px; font-weight:700; line-height:1.7; color:var(--ink); }
.ts800a__nav-tt em{ font-style:normal; color:var(--deep); }
/* 下向き矢印 */
.ts800a__nav-ar{
  flex:0 0 auto; width:10px; height:10px; margin-right:4px;
  border-right:2px solid var(--pink); border-bottom:2px solid var(--pink); transform:rotate(45deg);
}

/* 枠なしの項目（左の縦アクセントだけで区切る） */
.ts800a__fact{ border-left:3px solid var(--pink); padding-left:18px; }
.ts800a__fact h3{ font-size:19px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.ts800a__fact p{ font-size:14.5px; font-weight:600; line-height:1.8; color:var(--ink-mute); }

/* 囲みカード（塗らず線で） */
.ts800a__box{ border:2px solid var(--pink); border-radius:10px; padding:20px 20px; background:rgba(255,255,255,.66); }
.ts800a__box--quiet{ border-color:var(--pale); }
.ts800a__box-no{
  display:block; font-family:var(--latin); font-size:clamp(20px,2.4vw,26px); font-weight:700;
  letter-spacing:.08em; color:var(--gold-d); line-height:1.1; margin-bottom:6px;
}
.ts800a__box h3{ font-size:20px; font-weight:700; margin-bottom:8px; letter-spacing:-.01em; }
.ts800a__box p{ font-size:14.5px; font-weight:600; line-height:1.75; color:var(--ink-mute); }
.ts800a__box-val{
  font-family:var(--latin); font-size:20px; font-weight:600; color:var(--auth);
  margin-bottom:12px; font-variant-numeric:tabular-nums; letter-spacing:.01em;
}

/* 罫だけの軽いカード */
.ts800a__flat{ border-top:2px solid var(--pale); padding-top:16px; }
.ts800a__flat h3{ font-size:16px; font-weight:700; margin-bottom:8px; }
.ts800a__flat p{ font-size:13.5px; font-weight:600; line-height:1.75; color:var(--ink-mute); }

/* 悩みチェック */
/* PCは2カラム固定。auto-fitだと3＋1に割れてバランスが崩れるため */
.ts800a__checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-block:44px; }
/* 縦積みカード：上に大きな丸トリミング写真（最大360px）、下にテキスト */
.ts800a__chk{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; background:none; border:0; border-radius:0; padding:0; }  /* 素組み（写真＋テキストのみ） */
.ts800a__chk img{ flex:none; width:100%; height:200px; aspect-ratio:auto; object-fit:cover; border-radius:10px; display:block; }
/* 悩み写真は読み込み完了時にその場でフェードイン（スクロール演出なし） */
.ts800a.-js .ts800a__chk img{ opacity:0; transition:opacity .8s ease; }
.ts800a.-js .ts800a__chk img.-loaded{ opacity:1; }
.ts800a__chk p{ font-size:15px; font-weight:600; line-height:1.7; color:var(--ink); }

.ts800a__punch{
  text-align:center;
  font-family:var(--gothic); font-size:clamp(21px,2.8vw,30px); font-weight:700;
  letter-spacing:.02em; line-height:1.7; color:var(--deep);
}

/* 見出し＋リード（左）と数値サークル（右）の2カラム */
.ts800a__intro{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:40px; align-items:center; margin-bottom:32px;
}
.ts800a__intro .ts800a__lead{ margin-bottom:0; }
.ts800a__intro .ts800a__figs{ margin:0; }

/* 写真左・文章右のメディア行（ELIMSのPointブロックを参考） */
.ts800a__media{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px; align-items:center; margin-bottom:52px;
}
.ts800a__media-photo{ display:block; position:relative; }
/* 二重円リングはoutlineのため箱の外に約12px描画される。
   上の見出しのマージンに食い込まないよう、ブロック自体に逃げを持たせる */
.ts800a__media--round{ margin-top:14px; }
.ts800a__media--round .ts800a__media-photo{
  border-radius:50%; overflow:hidden; aspect-ratio:1/1;
  outline:1.5px solid var(--pale); outline-offset:10px;  /* ELIMSの二重円の見せ方 */
}
.ts800a__media--round .ts800a__media-photo img{
  width:100%; height:100%; object-fit:cover;
}
.ts800a__media-body .ts800a__lead{ margin-bottom:0; }
/* 図版（長方形）を左に置く2カラム。見出しはELIMSの色見出し方式
   ─ 円写真より情報量が多いので、図版側の列を広くとる（7:5） */
.ts800a__media--fig{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; }
.ts800a__media--fig .ts800a__media-photo img{ border-radius:12px; display:block; width:100%; height:auto; }
/* --cta：文章・ボタン左（7）／商品写真右（5） */
.ts800a__media--cta{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:44px; margin-bottom:0; }
.ts800a__media--cta .ts800a__media-photo img{ width:100%; height:auto; border-radius:16px; display:block; }
/* --rev：PCでは画像を右側に（SPでは通常どおり画像が先頭） */
.ts800a__media--rev{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.ts800a__media--rev .ts800a__media-photo{ order:2; }
.ts800a__media--rev .ts800a__media-body{ order:1; }
.ts800a__media-tt{
  font-size:clamp(19px,2.3vw,23px); font-weight:700; line-height:1.6;
  color:var(--deep); margin-bottom:14px; text-wrap:balance;
}
.ts800a__media-body .ts800a__figs{ margin:22px 0 0; }

/* POINT01 の図版レイアウト（左に2点を縦積み／右に使用イメージ） */
.ts800a__p01{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.ts800a__p01-col{ display:grid; grid-template-rows:auto 1fr; gap:24px; align-content:start; }
.ts800a__p01 figure{ position:relative; }
.ts800a__p01 figcaption{ font-size:12.5px; font-weight:600; line-height:1.7; margin-top:8px; color:var(--ink-mute); }
.ts800a__p01-photo{ height:100%; }
.ts800a__p01-photo img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.ts800a__p01-photo .ts800a__reveal{ height:100%; border-radius:6px; }

/* グラフのキャプション */
.ts800a__g2 > figure > figcaption{
  font-size:13px; font-weight:600; line-height:1.7; margin-top:10px; color:var(--ink-mute);
}
.ts800a__g2 > figure > figcaption b{ display:block; font-size:14px; color:var(--ink); }

/* POINT02 の縦並び図版 */
.ts800a__seq{ max-width:720px; margin-top:32px; }
.ts800a__seq .ts800a__reveal{ border-radius:10px; }  /* 図解は軽く角丸（revealのoverflow:hiddenでクリップ） */
.ts800a__seq > figcaption{ font-size:13px; font-weight:600; line-height:1.7; margin-top:10px; color:var(--ink-mute); }
.ts800a__seq > figcaption b{ display:block; font-size:14px; color:var(--ink); }

.ts800a__graph-cap{ font-size:13px; font-weight:600; line-height:1.7; margin-top:10px; color:var(--ink-mute); }
.ts800a__graph-cap b{ display:block; font-size:14px; color:var(--ink); }

/* 便利機能の円形アイコン（ELIMS方式）
   ------------------------------------------------------------
   円の地   : #FFF0CF（キャンディイエロー淡）
   線・塗り : #946010（深アンバー）… 円の上でコントラスト4.8
   ─ 数値・性能系＝赤／ピンク、快適・安心系＝ゴールド という
     ページ全体の色の役割分担に合わせる。
   写真を入れる場合は --photo を付けると円いっぱいに表示 */
.ts800a__feat-ico{
  width:112px; aspect-ratio:1/1; border-radius:50%;
  background:#F3ECDA;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; overflow:hidden;
}
.ts800a__feat-ico img{ width:62%; height:62%; object-fit:contain; }
.ts800a__feat-ico--sm img{ width:52%; height:52%; }   /* 塗りの面積が大きいアイコン（鍵）用 */
.ts800a__feat-ico--photo img{ width:100%; height:100%; object-fit:cover; }
.ts800a__feat-ico--cut img{ width:82%; height:82%; object-fit:contain; }  /* 切り抜きPNG用：円の上に浮かべる */
.ts800a__feats .ts800a__box{ text-align:center; border:0; background:var(--paper); border-radius:12px; padding:24px 20px; }  /* 白カード・角丸（枠線なし） */
.ts800a__feats .ts800a__box h3{ text-align:center; }
.ts800a__feats .ts800a__box p{ text-align:left; }

/* 比較3枚（正方形・角丸）
   元データが277pxのため、拡大表示にならないよう1枚236px上限に。
   3枚を内容幅いっぱいに分散させ、間隔は空きに任せる */
.ts800a__trio{ display:grid; grid-template-columns:repeat(3,minmax(0,236px)); justify-content:space-between; gap:24px; }
.ts800a__trio .ts800a__reveal{ border-radius:12px; overflow:hidden; aspect-ratio:1/1; display:block; }
.ts800a__trio .ts800a__reveal img{ width:100%; height:100%; object-fit:cover; }
.ts800a__trio figcaption{ font-size:12.5px; font-weight:600; line-height:1.7; margin-top:8px; color:var(--ink-mute); }
.ts800a__trio figcaption b{ display:block; font-size:13.5px; color:var(--ink); }
.ts800a__trio--win figcaption b{ color:var(--auth); }

/* 3ステップ */
.ts800a__steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.ts800a__step{ display:flex; gap:12px; align-items:flex-start; }
.ts800a__step span{
  font-family:var(--latin); font-size:13px; font-weight:700; letter-spacing:.1em;
  color:var(--gold-d); flex:0 0 auto; padding-top:4px;
}
.ts800a__step p{ font-size:13.5px; font-weight:600; line-height:1.75; }

/* 表 */
/* 仕様表：枠も地もなし。色付き項目名｜縦の仕切り線｜値 のシンプルなリスト型 */
.ts800a__table-wrap{ overflow-x:auto; }
.ts800a__table{
  border-collapse:collapse; width:100%; min-width:520px; font-size:15px;
  background:transparent; font-variant-numeric:tabular-nums;
}
.ts800a__table th,
.ts800a__table td{ border:0; padding:17px 0; text-align:left; vertical-align:top; font-weight:500; }
.ts800a__table th{ color:var(--ink); font-weight:700; white-space:nowrap; width:24%; padding-right:24px; }
/* 仕切り線はborderでなく背景で描き、上下を26pxずつ空けて行ごとに途切れさせる */
.ts800a__table td{
  padding-left:28px;
  background:linear-gradient(var(--pale),var(--pale)) no-repeat 0 50% / 1.5px calc(100% - 26px);
}

/* CTA */
.ts800a__btns{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:22px; }  /* 行間8px・列間14px */
.ts800a__btn{
  display:inline-block; text-decoration:none; border-radius:4px; padding:16px 36px;
  font-size:16px; font-weight:700; letter-spacing:.02em;
  background:var(--auth); color:#fff; border:1.5px solid var(--auth);
  box-shadow:0 3px 14px rgba(162,136,92,.32);
  transition:background-color .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s;
}
/* ホバーで文字と背景を反転＋少し浮く */
.ts800a__btn:hover{ background:#fff; color:var(--auth); transform:translateY(-3px); box-shadow:0 8px 18px rgba(162,136,92,.26); }
.ts800a__btn--ghost{ background:#fff; border:1.5px solid var(--auth); color:var(--auth); box-shadow:none; }
.ts800a__btn--ghost:hover{ background:var(--auth); color:#fff; border-color:var(--auth); box-shadow:0 8px 18px rgba(162,136,92,.26); }
/* 1本目のあとで折り返し、楽天・Yahoo!を2行目へ */
.ts800a__btns-br{ flex-basis:100%; height:0; }

/* シリーズ */
.ts800a__series{ grid-template-columns:repeat(auto-fit,minmax(170px,246px)); justify-content:center; }
.ts800a__series a{ text-decoration:none; display:block; }
.ts800a__series .ts800a__reveal{ border-radius:12px; }  /* overflow:hiddenでクリップ */
/* 製品仕様のアングル写真（g4）も角丸 */
.ts800a__g4 .ts800a__reveal{ border-radius:12px; }
.ts800a__series figcaption{ font-size:13.5px; font-weight:700; margin-top:10px; text-align:center; line-height:1.6; }
.ts800a__series figcaption small{ display:block; font-size:12px; font-weight:500; color:var(--ink-mute); }

/* ------------------------------------------------------------
   8. スマホ（768px以下）
   ------------------------------------------------------------ */
@media (max-width:768px){
  .ts800a{ font-size:15.5px; }
  .ts800a__sec{ padding:var(--sec-sp) 20px; }
  .ts800a__kv-lead{ display:none; }  /* SPではKVのリード文を省略して高さを抑える */
  /* 3枚並びはスライダーに（1枚表示・スナップ）※グリッド定義より後に置いて上書きする */
  .ts800a__slide-sp{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; scrollbar-width:none; }
  .ts800a__slide-sp::-webkit-scrollbar{ display:none; }
  .ts800a__slide-sp > *{ flex:0 0 100%; scroll-snap-align:center; }
  .ts800a__slide-sp > [aria-hidden="true"]{ display:block !important; }  /* SPではループ用クローンを復帰 */
  /* スライダー内は出現アニメなし（帯・覆いを出さない） */
  .ts800a.-js .ts800a__slide-sp .ts800a__reveal::before,
  .ts800a.-js .ts800a__slide-sp .ts800a__reveal::after{ content:none; }
  /* 両端の矢印 */
  .ts800a__sl-btn{
    display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; z-index:2;
    background:none; box-shadow:none; padding:0;
  }
  .ts800a__sl-btn::before{
    content:""; width:9px; height:9px;
    border-right:2.5px solid var(--deep); border-bottom:2.5px solid var(--deep);
  }
  .ts800a__sl-btn.-prev{ left:4px; }
  .ts800a__sl-btn.-prev::before{ transform:rotate(135deg); margin-left:4px; }
  .ts800a__sl-btn.-next{ right:4px; }
  .ts800a__sl-btn.-next::before{ transform:rotate(-45deg); margin-right:4px; }
  /* LINEUP縦並びの余白 */
  .ts800a__series{ gap:30px; }
  /* 見出し：バランス折返しをやめ、全幅を使って自然に折り返す */
  .ts800a__h2{ text-wrap:wrap; width:100%; }
  /* 数値バッジは左右中央に */
  .ts800a__figs--circle{ justify-content:center; }
  .ts800a__sec--card{ padding:20px 12px; }
  .ts800a__card{ padding:36px 20px; }
  .ts800a__g2{ gap:24px; }
  .ts800a__nav a{ padding:16px 18px; gap:14px; }
  .ts800a__nav-no b{ font-size:26px; }
  .ts800a__nav-tt{ font-size:14.5px; }
  .ts800a__checks{ grid-template-columns:1fr; gap:12px; margin-block:32px; }
  .ts800a__chk{ padding:22px 18px; gap:14px; }
  .ts800a__chk img{ height:170px; }
  .ts800a__media{ grid-template-columns:1fr; gap:24px; margin-bottom:40px; }
  .ts800a__media--rev .ts800a__media-photo{ order:0; }
  .ts800a__media--rev .ts800a__media-body{ order:1; }
  .ts800a__media--round .ts800a__media-photo{ width:min(78%,340px); margin-inline:auto; }
  .ts800a__intro{ grid-template-columns:1fr; gap:26px; align-items:start; margin-bottom:26px; }
  .ts800a__p01{ grid-template-columns:1fr; gap:18px; }
  .ts800a__p01-col{ gap:18px; }
  .ts800a__p01-photo img{ height:auto; aspect-ratio:4/5; }
  .ts800a__trio{ grid-template-columns:repeat(auto-fit,minmax(150px,236px)); justify-content:center; gap:18px; }
  .ts800a__table th{ width:40%; white-space:normal; }
  .ts800a__btns{ flex-direction:column; }
  .ts800a__btn{ text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .ts800a__btn:hover{ transform:none; }
  .ts800a{ scroll-behavior:auto; }
  .ts800a *{ transition:none !important; animation:none !important; }
}


/* ------------------------------------------------------------
   9. 画像の出現アニメーション
   ------------------------------------------------------------
   recruit.nstock.co.jp の ClientImage を参考にした2層構造。
   ・::after = 覆い層。全面 → 下端へ畳まれて消える
   ・::before = グラデ層。上端 → 全面へ広がりながら opacity 1 → 0
   覆いが下へ引いた直後をグラデが追いかけるので、
   「グラデが流れ落ちてから画像が現れる」ように見えます。

   nstock の実測値
     duration 1.4s ／ easing cubic-bezier(.23, 1, .32, 1)
     グラデは opacity だけ先に終わらせる（-.6s ＋ .1s 遅延）

   .-js はJSが付与。**JSが無い環境では覆いもグラデも出ず、画像はそのまま表示されます。**
   ------------------------------------------------------------ */
.ts800a__reveal{
  --reveal-cover:#FBF7F0;
  --reveal-dur:1.4s;
  --reveal-ease:cubic-bezier(.23,1,.32,1);
  display:block; position:relative; overflow:hidden;
}
.ts800a__sec--tint .ts800a__reveal{ --reveal-cover:var(--mist); }
.ts800a__sec--card .ts800a__reveal{ --reveal-cover:#F2EFED; }

.ts800a.-js .ts800a__reveal::before,
.ts800a.-js .ts800a__reveal::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}
/* グラデ層：赤 → シャンパンゴールド */
.ts800a.-js .ts800a__reveal::before{
  background:linear-gradient(180deg,#A2885C 0%,#C2AA82 40%,#D9C6A5 75%,#F3ECDA 100%);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  opacity:1;
  transition:opacity calc(var(--reveal-dur) - .6s) .1s,
             clip-path var(--reveal-dur) 0s var(--reveal-ease);
}
/* 覆い層 */
.ts800a.-js .ts800a__reveal::after{
  background:var(--reveal-cover);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  transition:clip-path var(--reveal-dur) 0s var(--reveal-ease);
}
/* 表示状態 */
.ts800a.-js .ts800a__reveal.-shown::before{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  opacity:0;
}
.ts800a.-js .ts800a__reveal.-shown::after{
  clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
}

/* KV：他より少し短く。覆いはセクションの地色に合わせる */
/* KVは切り抜きPNGのため帯アニメをやめ、フェード＋上昇に */
.ts800a__reveal--kv{ --reveal-dur:1.1s; --reveal-cover:#FCF9F8; }
.ts800a.-js .ts800a__reveal--kv::before,
.ts800a.-js .ts800a__reveal--kv::after{ content:none; }
.ts800a.-js .ts800a__reveal--kv img{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s ease .05s, transform 1s cubic-bezier(.23,1,.32,1) .05s;
}
.ts800a.-js .ts800a__reveal--kv.-shown img{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ts800a.-js .ts800a__reveal--kv img{ opacity:1; transform:none; transition:none; }
}

/* --sweep : 覆いを使わず、グラデだけが上から流れる版。
   画像は最初から見えているので、ファーストビューを待たせません。
   KVを切り替えたい場合は HTML の class を
     ts800a__reveal--kv  →  ts800a__reveal--kv ts800a__reveal--sweep
   にするだけです。 */
.ts800a.-js .ts800a__reveal--sweep::after{ display:none; }

@media (prefers-reduced-motion:reduce){
  .ts800a.-js .ts800a__reveal::before,
  .ts800a.-js .ts800a__reveal::after{ display:none; }
}