@charset "utf-8";
/* 2027年版のLPだけで使う追加のスタイル（2026-09-10）
   ・TIME DIRECTION APP × AI の紹介ブロック
   ・買い物カゴの表紙の影を消す
   いずれも先行予約会場 SpecialOffer2027.html のページ内スタイルから写したもの。
   2026年版のページには、この指定が当たる要素・見せ方の違いは持ち込まない。 */

/* 見出しの差し色。共通CSSにあるが、2026年版のページでは使われていないため
   自動の抽出に含まれなかった。 */
.font-red2026 { color: rgb(178, 43, 49); }

@media only screen and (max-width:767px){
  .tdapp-band{padding:4.5em 10px;margin:5em 0}
  .tdapp-mark{gap:12px}
  .tdapp-mark img{width:52px}
  .tdapp-mark .tdapp-x{font-size:19rem}
  .tdapp-mark .tdapp-ai{font-size:31rem}
  .tdapp-lead{font-size:12rem;line-height:2;margin-top:1.6em}
  .tdapp-shots{gap:2.6%;margin-top:2.4em}
  .tdapp-shots .tdapp-cap{font-size:11rem}
  .tdapp-shots .tdapp-more{font-size:9rem}
  .tdapp-note{margin-top:1em}
  .tdapp-free{margin-top:2.2em}
  .tdapp-free__lead{font-size:12rem}
  .tdapp-free__main{font-size:17rem}
  .tdapp-free__main b{font-size:21rem}
}
/* TIME DIRECTION APP 紹介ブロック（このページ専用。接頭辞は .tdapp- のみ） */
.tdapp-band{background:#f7f8f8;padding:8em 10px;margin:9em 0}
.tdapp-sec{max-width:900px;margin:0 auto;text-align:center}
.tdapp-mark{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 2.4em}
.tdapp-mark img{width:64px;border-radius:14px;display:block}
.tdapp-mark .tdapp-x{font-size:24rem;line-height:1;color:#111;font-weight:300;display:block}
.tdapp-mark .tdapp-ai{font-size:40rem;line-height:1;letter-spacing:.08em;color:#111;display:block}
.tdapp-label{color:#111}
.tdapp-lead{max-width:660px;margin:2em auto 0;text-align:left;font-size:14rem;line-height:2.1;color:#333}
.tdapp-shots{display:flex;justify-content:center;gap:3%;max-width:560px;margin:3em auto 0;padding:0;list-style:none}
.tdapp-shots li{width:31.3%;margin:0}
.tdapp-shots a{display:block;text-decoration:none;color:#333}
.tdapp-phone{display:block;position:relative;border-radius:16px;padding:5px;background:#efefef;border:1px solid #d2d2d2;box-shadow:0 3px 12px rgba(0,0,0,.13)}
.tdapp-screen{display:block;border-radius:11px;overflow:hidden;position:relative;background:#fff;padding-top:17px}
.tdapp-island{display:block;position:absolute;top:9px;left:50%;transform:translateX(-50%);width:30%;height:8px;border-radius:5px;background:#c9c9c9;z-index:2}
.tdapp-img{display:block;position:relative;width:100%;height:0;padding-top:170.111%;background-size:100% auto;background-position:top center;background-repeat:no-repeat}
.tdapp-shots .tdapp-cap{display:block;font-size:12rem;line-height:1.6;padding-top:.9em;text-align:center;color:#333}
.tdapp-shots .tdapp-more{display:block;font-size:10rem;color:#333;padding-top:.2em}
.tdapp-shots a:hover .tdapp-phone{box-shadow:0 6px 18px rgba(0,0,0,.18)}
.tdapp-note{font-size:12rem;color:#666;text-align:center;margin-top:1.2em}
.tdapp-free{display:block;max-width:660px;margin:3em auto 0;text-align:center}
.tdapp-free__lead{display:block;font-size:14rem;line-height:1.9;color:#333}
.tdapp-free__main{display:block;font-size:24rem;line-height:1.7;color:#111;margin-top:.2em}
.tdapp-free__main b{font-size:30rem;color:#9C2C2C}
.tdapp-win{text-align:left;max-width:420px;margin:0 auto}
.tdapp-win h4.ttl{font-size:17rem;line-height:1.6;margin:0 0 .8em;text-align:left}
.tdapp-win p{font-size:13rem;line-height:2;margin:0 0 1.4em;text-align:left}
.tdapp-win .tdapp-img{border:1px solid #e2e2e2;border-radius:9px;margin-bottom:1.2em}

/* 商品写真の影を消す（共通CSSの box-shadow を打ち消す）
   先行予約会場 SpecialOffer2027.html と同じ指定。2026-09-10 柳川様のご指示
   「ボタン上の表紙画像のところにシャドウは入れません。先行予約会場もそのようになっているはず」。
   共通CSSには影が2か所ある（PC: 4px 4px 10px / スマホ: 2px 2px 5px）。
   同じ強さの指定を後から置いて、両方とも打ち消す。 */
.block_top-product .box_product-photo .product img{box-shadow:none}

/* --- 受付開始までの待機表示（2026-09-10 追加）------------------------------
   一般販売の受付は 9月11日 12:00 から。0時〜12時のあいだ、購入ボタンの代わりに
   ここへ残り時間を出す。指定は先行予約会場 SpecialOffer2027.html から
   そのまま写したもの（数字が動いても幅が揺れないよう等幅の数字を使う）。 */
#tdc-gate{text-align:center;padding:14px 10px;border:1px solid #ccc;border-radius:6px;background:#fafafa}
#tdc-gate .tdc-gate__lead{font-size:15px;line-height:1.8;margin:0 0 .5em;color:#333}
#tdc-gate .tdc-gate__count{font-size:20px;line-height:1.4;margin:0;color:#b22222;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
@media only screen and (max-width:767px){
  #tdc-gate .tdc-gate__lead{font-size:13px}
  #tdc-gate .tdc-gate__count{font-size:17px}
}

/* --- 最上部の動画（td-hero）の指定を、本番の /css/td-hero.css から丸ごと写す ----
   🔴 2026-09-10 修正: 自動抽出が :not(...) を含む規則を取りこぼしていた。
   欠けていたのは次の3つで、いずれも**動画を再生している状態**に当たるもの。
     #td-hero:not(.td-hero--imageMode) .td-hero__image
     #td-hero:not(.td-hero--imageMode) .td-hero__videoWrap
     #td-hero .td-hero__btn:focus-visible
   このため「動画を再生する」を押すと、動画の枠に大きさの指定が当たらず、
   ページの上に重なって表示されていた（柳川様のご指摘）。
   取りこぼしを二度と起こさないよう、部分ではなくファイルごと写して最後に置く。
   このファイルは tdc.css より後に読み込まれるので、重複する指定はこちらが勝つ。 */
/* TD HERO EXT v6c (Vimeo) — クリック再生・初期は画像・SP=1:1・優先度強化 */
#td-hero{position:relative!important;width:100vw!important;left:50%!important;right:50%!important;margin-left:-50vw!important;margin-right:-50vw!important;max-width:100vw!important;overflow:hidden!important;box-sizing:border-box!important;z-index:0}
#td-hero *{box-sizing:border-box!important}
#td-hero .td-hero__stage{display:block!important;width:100%!important;position:relative!important;z-index:0!important}

/* 動画ラッパー: PC=16:9, SP=1:1 */
#td-hero .td-hero__videoWrap{position:relative!important;width:100%!important;aspect-ratio:16/9!important;background:#000!important;overflow:hidden!important;display:block!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__videoWrap{aspect-ratio:1/1!important}
}
/* aspect-ratio非対応フォールバック */
@supports not (aspect-ratio:16/9){
  #td-hero .td-hero__videoWrap{height:0!important;padding-top:56.25%!important}
  #td-hero .td-hero__videoWrap iframe{position:absolute!important;top:0!important;left:0!important;height:100%!important;width:100%!important}
}
@supports not (aspect-ratio:1/1){
  @media (max-width: 767.98px){
    #td-hero .td-hero__videoWrap{height:0!important;padding-top:100%!important}
    #td-hero .td-hero__videoWrap iframe{position:absolute!important;top:0!important;left:0!important;height:100%!important;width:100%!important}
  }
}

/* Iframe */
#td-hero .td-hero__videoWrap iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;display:block!important;z-index:0!important}

/* 画像：初期表示（画像モード） */
#td-hero .td-hero__image{display:block!important;width:100%!important;line-height:0!important;background:#000!important;position:relative!important;z-index:1!important}
#td-hero .td-hero__image img{display:block!important;width:100vw!important;height:auto!important;max-width:100vw!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__image{aspect-ratio:1/1!important}
  #td-hero .td-hero__image img{width:100%!important;height:100%!important;object-fit:cover!important}
}
@supports not (aspect-ratio:1/1){
  @media (max-width: 767.98px){
    #td-hero .td-hero__image{height:0!important;padding-top:100%!important}
    #td-hero .td-hero__image img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  }
}

/* モード切替 */
#td-hero.td-hero--imageMode .td-hero__image{display:block!important}
#td-hero.td-hero--imageMode .td-hero__videoWrap{display:none!important}
#td-hero:not(.td-hero--imageMode) .td-hero__image{display:none!important}
#td-hero:not(.td-hero--imageMode) .td-hero__videoWrap{display:block!important}

/* コントロール行（常に一番上でクリック可能に） */
#td-hero .td-hero__controls{display:flex!important;justify-content:center!important;gap:8px!important;flex-wrap:wrap!important;text-align:center!important;margin-top:8px!important;position:relative!important;z-index:5!important;pointer-events:auto!important}
#td-hero .td-hero__btn{display:inline-block!important;font-size:12px!important;padding:6px 10px!important;border:1px solid #ccc!important;border-radius:3px!important;background:#fff!important;color:#333!important;cursor:pointer!important;touch-action:manipulation!important;user-select:none!important}
#td-hero .td-hero__btn:focus-visible{outline:2px solid #0a84ff!important;outline-offset:2px!important}

/* 再生ボタンは画像モードでのみ表示 */
#td-hero .td-hero__play{display:none!important}
#td-hero.td-hero--imageMode .td-hero__play{display:inline-block!important}

/* 音声トグル：SP=下部表示、PC=動画上オーバーレイ */
#td-hero .td-hero__audioCtl{display:none!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__audioCtl{display:inline-block!important}
}
/* PC用オーバーレイ（動画上・右下）。SPでは必ず非表示 */
#td-hero .td-hero__audioOverlay{position:absolute!important;right:8px!important;bottom:8px!important;z-index:6!important;display:inline-block!important}
@media (max-width: 767.98px){
  #td-hero .td-hero__audioOverlay{display:none!important}
}

/* --- 最上部の動画：先行予約会場と同じ部品のための指定（2026-09-11 追加）------
   SpecialOffer2027.html のページ内スタイルから、そのまま写したもの。
   透明なタップ層・終わったあとに戻る静止画・音声の押しボタンは、
   2026年版LPには無かった部品なので、共通CSSにも指定が無い。 */
#td-hero .td-hero__tap{position:absolute;inset:0;z-index:2;cursor:pointer;background:transparent}
#td-hero .td-hero__tap[hidden]{display:none}
/* hidden を付けたら必ず消えるようにする。
   #id + class は [hidden]{display:none} より強いため、:not([hidden]) を付けないと
   ページを開いた瞬間から画像が動画を覆ってしまう */
/* 🔴 2026-09-11 柳川様のご指示「クレジットがパツンと切れてる。もっとスムーズに」。
   先行予約会場は 0.9秒だが、最後のクレジットから静止画へ入れ替わるところが
   途切れて見えるため、2秒かけて、始めと終わりをなだらかにする。 */
#td-hero .td-hero__end:not([hidden]){position:absolute;inset:0;z-index:3;display:block;
  opacity:0;transition:opacity 2s ease-in-out}
#td-hero .td-hero__end.is-on{opacity:1}
#td-hero .td-hero__end[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  #td-hero .td-hero__end:not([hidden]){transition:none}
}
#td-hero .td-hero__end img{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
#td-hero .td-hero__soundBtn{position:absolute;right:16px;bottom:16px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;
  background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#td-hero .td-hero__soundBtn:hover{background:rgba(0,0,0,.78)}
#td-hero .td-hero__soundIcon{font-size:15px}
#td-hero.is-sound-on .td-hero__soundBtn{background:rgba(0,0,0,.42)}
@media only screen and (max-width:767px){
  #td-hero .td-hero__soundBtn{right:10px;bottom:10px;padding:9px 14px;font-size:12px}
}
/* 🔴 hidden を必ず効かせる。
   #td-hero .td-hero__soundBtn{display:inline-flex} や .td-hero__btn{display:...} は
   ブラウザ既定の [hidden]{display:none} より強いため、これが無いと
   隠したはずの押しボタンが出たままになる。最上部の中だけに効かせる。 */
#td-hero [hidden]{display:none!important}