/* ============================================================
   THE366 ブランド体験の共通土台（Stage A）
   2026-09-14 ／ 9/12修正依頼【THE366共通】＋ R6・R8 のご回答を反映

   方針
   - 色はネイビー・生成り・金の3色。強いオレンジは警告等に限定する。
   - 白いカード・太い枠線・強い影は使わない。入力と重要確認だけ薄い半透明面。
   - 鳥居・神社・和柄・桜は前面に出さない。空・光・風・水面・草木の気配で表す。
   - 大型背景動画は使わない。背景は静止＋CSSの光のみ。
   - スマートフォンを第一基準。PCは情報量を増やさず余白と風景を広げる。
   - 本文・操作・重要説明は WCAG AA 相当のコントラストを確保する。
     （金 #C5A059 × ネイビー #0E2841 ＝ 約6.6:1／墨 #1C2E4A × 生成り #FBF7F0 ＝ 約12:1）
   - 書体は R6 のご回答により「端末標準の書体からTHE366に合うもの」を指定する。
     Webフォントは読み込まない（表示の遅延と費用を避けるため）。
   - 初期版は音を一切使わない。このファイルにも音に関する指定は無い。
   ============================================================ */

:root{
  /* --- 色 --- */
  --navy:#0E2841;          /* 基調 */
  --navy-deep:#091C2E;     /* 夜・奥行き */
  --navy-soft:#1C2E4A;     /* 面・フッター／THE366 Navy公式値（9/28 1時用 依頼 §3：通常背景はこの色に統一） */
  --ink:#1C2E4A;           /* 本文（生成り地の上） */
  --ink-soft:#4C5665;      /* 補足 */
  --cream:#F2EBE1;         /* 生成り（濃） */
  --paper:#FBF7F0;         /* 生成り（地） */
  --gold:#C5A059;          /* 金（基本） */
  --gold-bright:#D4AF37;   /* 金（発光・大見出し） */
  --alert:#E97132;         /* 警告のみ。通常のCTAには使わない */

  /* 薄い半透明面（入力・重要確認だけに使う。白いカードの代わり） */
  --veil:rgba(255,255,255,.55);
  --veil-dark:rgba(255,255,255,.07);
  --line:rgba(28,46,74,.18);        /* 細い線 */
  --line-dark:rgba(242,235,225,.22);

  /* --- 文字サイズ（本文17〜18px／入力16px以上／補足14px） --- */
  --fs-body:17.5px;
  --fs-input:16.5px;
  --fs-note:14px;
  --fs-lead:20px;
  --fs-title:26px;
  --fs-hero:28px;

  /* --- 余白 --- */
  --sp-1:8px; --sp-2:14px; --sp-3:22px; --sp-4:34px; --sp-5:54px; --sp-6:84px;

  /* --- 書体（端末標準のみ／R6） ---
     明朝：問い・タイトル・Letter本文・余韻の言葉
     ゴシック：入力・ボタン・期限・注意事項 */
  --font-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Songti SC","Source Han Serif",serif;
  --font-gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Segoe UI",system-ui,-apple-system,sans-serif;

  /* --- 時間（◆トランジション） --- */
  --t-trans:260ms;   /* 画面遷移 0.2〜0.3秒 */
  --t-title:700ms;   /* タイトルコール 0.5〜0.8秒 */
}

*{box-sizing:border-box;margin:0;padding:0;}
/* 2026-09-21（9/21修正依頼 §6）：横向き・狭い幅で左に白い余白が出て中身が横へずれる
   のを構造的に防ぐ。body だけに overflow-x:hidden を置くと、ルート要素の overflow が
   visible のときは body ではなくビューポートへ伝播してしまい、はみ出した要素がそのまま
   残ることがある。ルートにも同じ指定を置き、背景色もルートへ持たせて、
   viewport-fit=cover のノッチ側（セーフエリアの外）が白く残らないようにする。 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%;background:var(--paper);}
body{
  /* 2026-09-27（9/27 4時用 依頼 §1）：THE366全体のフォントルールを統一。
     既定＝明朝体（操作しない文字はすべて明朝）。ゴシック体は「操作するもの」
     （button/input/select/textarea・.t-gothic）だけに個別で当てる。 */
  font-family:var(--font-mincho);
  font-size:var(--fs-body);
  line-height:1.9;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  max-width:100%;
}
/* ネイビーの画面では、ルート（ノッチの外側まで塗られる面）も同じ地色にする。 */
html:has(body.sky){background:var(--navy-soft);}  /* 9/30 19時用 依頼① §2 */
img{max-width:100%;display:block;}
a{color:inherit;}

/* 明朝で組む要素（既定が明朝になったため主に上書き保険として残す） */
.t-mincho,.t-question,.t-letter,.t-afterglow,h1,h2,h3,.t-note,.t-deadline,.t-caution{font-family:var(--font-mincho);font-weight:500;}
/* ゴシックで組む要素＝ユーザーが操作するものだけ（9/27 4時用 依頼 §1） */
.t-gothic,button,input,select,textarea{font-family:var(--font-gothic);}

.t-question{font-size:var(--fs-lead);line-height:2;letter-spacing:.02em;}
.t-note{font-size:var(--fs-note);color:var(--ink-soft);line-height:1.85;}
.t-caution{font-size:var(--fs-note);color:var(--alert);}

/* ============================================================
   風景（空・光・水面・草木の気配）
   画像を使わず、CSSのグラデーションだけで表す。
   ============================================================ */
.sky{
  position:relative;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 55%),
    radial-gradient(90% 60% at 20% 110%, rgba(242,235,225,.10) 0%, rgba(242,235,225,0) 60%),
    var(--navy-soft);  /* 2026-09-30（9/30 19時用 依頼① §2）：地色は THE366 Navy #1C2E4A に統一（金・生成りの淡い光だけ残す） */
  color:var(--cream);
}
.sky::after{  /* 水面のような静かな一本の光 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(197,160,89,0) 0%,rgba(197,160,89,.45) 50%,rgba(197,160,89,0) 100%);
}
.field{ /* 生成り地の風景。草木の気配をごく淡く */
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(197,160,89,.10) 0%, rgba(197,160,89,0) 60%),
    var(--paper);
}

/* ============================================================
   ◆ ＝ 想いが宿る印
   R8のご質問への答え：THE366のロゴマークは金の菱形です。
   遷移用の◆は、そのロゴの輪郭（菱形）だけを取り出した簡略形にしています。
   0.2〜0.3秒・小サイズではロゴの組紐模様がつぶれて雑音に見えるためです。
   ロゴそのものを出したい場合は .dia を <img src="assets/flyer/the366-logo-c5a059.png"> に
   差し替えるだけで切り替えられます。
   ============================================================ */
.dia{
  display:inline-block;width:10px;height:10px;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  transform:rotate(45deg);
  box-shadow:0 0 14px rgba(212,175,55,.55);
}
.dia-lg{width:18px;height:18px;box-shadow:0 0 26px rgba(212,175,55,.6);}

/* ============================================================
   タイトルコール（サービス入口・0.5〜0.8秒）
   ============================================================ */
#the366-titlecall{
  position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  background:var(--navy-soft);color:var(--cream); /* 2026-09-28（9/28 1時用 依頼 §3）：THE366 Navy統一 */
  opacity:0;pointer-events:none;transition:opacity 500ms ease;
}
#the366-titlecall.on{opacity:1;}
/* 2026-09-26（9/26 13時用 修正依頼 §3）：ロゴ幅は3サービスTOP＝画面幅の44%、
   THE366 TOP（.brand）＝50%を基準に、clampで端末幅による破綻を防ぐ。
   画面中央に置き、ロゴの下の小さな金色の四角形（◆）は出さない。表示時間は約3.0秒（§4）。 */
#the366-titlecall .tc-logo{width:clamp(150px,44vw,300px);}
#the366-titlecall.brand .tc-logo{width:clamp(170px,50vw,340px);}
#the366-titlecall .dia-lg{display:none;}
/* §2-3：サービス名（カタカナ・日本語）＝34px基準・太字で明確に。
   THE366 TOPの合言葉「Live with Omoi.」（英字）＝32px基準・ゴシック体で表示（§2）。 */
#the366-titlecall .tc-name{font-family:var(--font-mincho);font-size:clamp(26px,8.5vw,34px);
  font-weight:700;letter-spacing:.12em;color:var(--gold-bright);line-height:1.3;
  text-align:center;padding:0 24px;}
#the366-titlecall.brand .tc-name{font-family:var(--font-gothic);font-size:clamp(22px,7.6vw,32px);
  font-weight:600;letter-spacing:.05em;}
/* ロゴ＋タイトルは段差なく同時に0.0〜0.5秒でフェードインする（§4） */
#the366-titlecall .tc-logo,#the366-titlecall .tc-name{
  opacity:0;transform:translateY(6px);transition:opacity 500ms ease,transform 500ms ease;
}
#the366-titlecall.on .tc-logo{opacity:.97;transform:none;}
#the366-titlecall.on .tc-name{opacity:1;transform:none;}

/* ============================================================
   画面遷移（◆と淡い光を0.2〜0.3秒／R8：毎回表示）
   フェードアウト → 光 → フェードイン
   ============================================================ */
#the366-trans{
  position:fixed;inset:0;z-index:8900;display:flex;align-items:center;justify-content:center;
  background:var(--navy-soft);opacity:0;pointer-events:none; /* 2026-09-28（9/28 1時用 依頼 §3）：THE366 Navy統一 */
  transition:opacity var(--t-trans) ease;
}
#the366-trans.on{opacity:1;pointer-events:auto;}
#the366-trans .dia{animation:the366-glow 520ms ease-in-out;}
@keyframes the366-glow{
  0%{opacity:0;transform:rotate(45deg) scale(.7);}
  45%{opacity:1;transform:rotate(45deg) scale(1);}
  100%{opacity:.55;transform:rotate(45deg) scale(1.04);}
}

/* ============================================================
   読込表示（通信が1秒以上かかるときだけ）
   ============================================================ */
#the366-loading{
  position:fixed;inset:0;z-index:8800;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:18px;
  background:rgba(14,40,65,.92);color:var(--cream);
}
#the366-loading.on{display:flex;}
#the366-loading .lw{font-family:var(--font-mincho);font-size:var(--fs-body);letter-spacing:.06em;}

/* ============================================================
   ヘッダー（作成・受取途中は最小構成）
   中央：小さなロゴ／左：必要な画面だけ戻る／右：現在の言語
   グローバルナビは置かない。
   ============================================================ */
.the366-head{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:56px;
  /* 横向きのノッチ側にヘッダーが潜り込まないよう、セーフエリアぶんだけ広げる */
  padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));
  max-width:100%;
}
.the366-head .h-back,.the366-head .h-lang{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:inherit;
  font-family:var(--font-gothic);font-size:var(--fs-note);padding:8px 10px;
}
.the366-head .h-back{left:2px;}
.the366-head .h-lang{right:2px;letter-spacing:.04em;}
/* 2026-09-30（9/30 19時用 依頼① §3）：言語切替はログレターのヘッダーと同じ「金の細い丸枠」。
   位置（右端から6px＋セーフエリア）・文字の大きさ（12.5px）・タップ領域（44×44px）を3サービスで揃える。 */
.the366-head .h-lang{right:calc(6px + env(safe-area-inset-right));padding:0 4px;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;}
.the366-head .h-back{left:calc(6px + env(safe-area-inset-left));min-height:44px;}
.the366-head .h-pill{display:inline-block;padding:5px 12px;border:1px solid rgba(197,160,89,.6);border-radius:999px;
  font-size:12.5px;line-height:normal;letter-spacing:.06em;white-space:nowrap;}
/* 2026-09-30（9/30 19時用 依頼① §3・§4）：3サービス共通の固定ヘッダー（ログレターの .llh と同じ仕様）。
   高さ64px＋セーフエリア（iPhone Safariでファーストビューを圧迫しない高さ）、地色は THE366 Navy。
   ホスト要素（.the366-head）は同じ高さの場所取りとして流れに残し、中の .h-bar だけを画面上部に固定する。 */
.the366-head.is-fixed{height:calc(64px + env(safe-area-inset-top));padding:0;}
.the366-head.is-fixed .h-bar{
  position:fixed;left:0;right:0;top:0;z-index:50;
  height:calc(64px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(to bottom,rgba(28,46,74,.96) 0%,rgba(28,46,74,.86) 62%,rgba(28,46,74,.62) 100%);
  color:var(--cream);
}
.the366-head.is-fixed .h-back,.the366-head.is-fixed .h-lang{top:calc(50% + env(safe-area-inset-top) / 2);}
.the366-head .h-logo{width:34px;opacity:.9;}
/* 2026-09-20（9/20修正依頼 §3）：文字なしのシンボルマークだけを出すヘッダー。
   スマートフォンでは幅52〜60px。ヘッダーを高くしすぎない。 */
.the366-head.mark-only{height:64px;}
/* 2026-10-12（10/12 16時用 修正依頼 §3）：固定ヘッダー＋シンボルマークのとき、上の .mark-only（64px）が後から効いて
   場所取りの高さがセーフエリアぶん足りず、本文の先頭がヘッダーの下に潜っていた。固定ヘッダーの高さを優先する */
.the366-head.is-fixed.mark-only{height:calc(64px + env(safe-area-inset-top));}
.the366-head .h-mark{width:56px;height:auto;opacity:.95;}
@media(max-width:359px){.the366-head .h-mark{width:52px;}}
/* 2026-09-22（9/21 13時依頼 §1）：ロゴを各サービスTOPへの共通操作にする。
   面も枠線も影も付けない（強いボタン表現にしない）。タップ領域だけ44×44px以上。 */
.the366-head .h-home{
  background:none;border:0;padding:4px 8px;margin:0;cursor:pointer;
  min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.the366-head .h-home img{display:block;}
.the366-head .h-home:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}
.the366-head .h-back:focus-visible,.the366-head .h-lang:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px;}

/* 2026-10-12（10/12 10時用 依頼「共通ナビゲーション」§1・§2・§5）：
   左＝［←］（矢印だけ）または［設定］／中央＝ロゴ／右＝共通メニュー［☰］。位置・大きさ・タップ領域（44×44px）を全画面で揃える。 */
.the366-head .h-set,.the366-head .h-menu{
  position:absolute;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:inherit;font-family:var(--font-gothic);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.the366-head.nav2 .h-back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;
  left:calc(4px + env(safe-area-inset-left));-webkit-tap-highlight-color:transparent;}
.the366-head .h-set{left:calc(4px + env(safe-area-inset-left));gap:6px;padding:0 8px;font-size:13px;letter-spacing:.12em;white-space:nowrap;}
.the366-head .h-set svg{flex:none;opacity:.9;}
.the366-head .h-menu{right:calc(4px + env(safe-area-inset-right));padding:0;}
.the366-head.is-fixed .h-set,.the366-head.is-fixed .h-menu{top:calc(50% + env(safe-area-inset-top) / 2);}
.the366-head .h-set:focus-visible,.the366-head .h-menu:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}

/* 共通メニュー・設定のパネルの見た目は brand.js が注入する（brand.css を読まないログレターでも同じ見た目にするため） */

/* 言語の一覧（押した時だけ・各言語自身の表記で縦に並べる） */
#the366-langlist{
  position:fixed;inset:0;z-index:8700;display:none;
  background:rgba(9,28,46,.94);color:var(--cream);
  padding:64px 20px;overflow:auto;
}
#the366-langlist.on{display:block;}
#the366-langlist ul{list-style:none;max-width:320px;margin:0 auto;}
#the366-langlist li{border-bottom:1px solid var(--line-dark);}
#the366-langlist button{
  width:100%;background:none;border:0;color:inherit;cursor:pointer;
  font-size:var(--fs-body);padding:16px 6px;text-align:left;letter-spacing:.03em;
}
#the366-langlist button[aria-current="true"]{color:var(--gold-bright);}

/* ============================================================
   入力（白いカードではなく、細い線と淡い背景）
   一画面につき一つの入力・判断。数字の進捗（1/10）は使わない。
   ============================================================ */
.field-block{max-width:520px;margin:0 auto;padding:0 20px;}
.field-label{font-family:var(--font-mincho);font-size:var(--fs-lead);line-height:1.9;margin-bottom:var(--sp-2);}
.field-step{font-size:12.5px;letter-spacing:.18em;color:var(--gold);margin-bottom:var(--sp-1);} /* 「想う」「言葉にする」「届ける」 */
.input,textarea.input{
  /* 2026-09-27（9/27 4時用 依頼 §1・§10）：入力欄は操作要素なのでゴシック体を明示する
     （body の既定を明朝へ変えたため、ここで上書きしないとゴシックにならない）。 */
  width:100%;font-family:var(--font-gothic);font-size:var(--fs-input);line-height:1.9;color:var(--ink);
  background:var(--veil);border:0;border-bottom:1px solid var(--line);
  border-radius:2px 2px 0 0;padding:12px 10px;
  transition:border-color 200ms ease,background 200ms ease;
}
.sky .input,.sky textarea.input{color:var(--cream);background:var(--veil-dark);border-bottom-color:var(--line-dark);}
.input:focus{outline:none;border-bottom-color:var(--gold);background:rgba(255,255,255,.72);}
.sky .input:focus{background:rgba(255,255,255,.12);}
.input::placeholder{color:rgba(28,46,74,.38);}

/* 入力中は背景の動きをさらに抑える */
body.is-typing .sky::after{animation:none;}

/* 進行ボタン：条件が整うまで薄く、整うと金の光が満ちる。
   色だけで状態を示さないよう、文字濃度と枠線も変える。 */
.go-btn{
  display:block;width:100%;max-width:420px;margin:var(--sp-3) auto 0;
  font-family:var(--font-gothic);font-size:16.5px;font-weight:600;letter-spacing:.04em;
  padding:15px 20px;border-radius:40px;cursor:pointer;
  color:rgba(242,235,225,.45);
  background:rgba(14,40,65,.30);
  border:1px solid rgba(197,160,89,.28);
  transition:color 260ms ease,background 260ms ease,border-color 260ms ease,box-shadow 260ms ease;
}
.go-btn[aria-disabled="true"]{pointer-events:none;}
.go-btn.ready{
  color:var(--cream);
  background:linear-gradient(180deg,var(--navy-soft),var(--navy));
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(197,160,89,.25),0 10px 30px rgba(197,160,89,.22);
}
.field .go-btn.ready{color:var(--paper);}
.go-btn:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;}
/* 2026-09-29（9/29 10時用 依頼 §6）：CTA（「占う」「贈る」など）の文字に下線を一切出さない。
   通常・:visited・:hover・:active・:focus、<a> 既定スタイル、中に入る <u>、JSで付くクラスのどれでも
   下線が出ないよう、ボタン自身と子要素に明示する（操作できることは形・ゴシック体・サイズ・配置で示す）。 */
.go-btn,.go-btn:link,.go-btn:visited,.go-btn:hover,.go-btn:active,.go-btn:focus,.go-btn:focus-visible,
.go-btn *,.go-btn u,a.go-btn,button.go-btn,
button,button:hover,button:active,button:focus{
  text-decoration:none!important;-webkit-text-decoration:none!important;text-decoration-line:none!important;
  text-decoration-color:transparent!important;
}

/* 2026-09-21（9/21修正依頼 §7）：副CTA。
   「選べる行動」だと分かるよう、主CTAと同じ幅・同じ形にしたうえで、
   面を持たせず配色だけ一段弱くして優先順位を示す。下線リンクにはしない。 */
.go-btn.second{
  color:rgba(242,235,225,.86);
  background:transparent;
  border-color:rgba(197,160,89,.45);
  box-shadow:none;
  margin-top:12px;
}
.go-btn.second:hover,.go-btn.second:focus-visible{border-color:var(--gold);color:var(--cream);}
.field .go-btn.second{color:var(--ink);border-color:rgba(28,46,74,.28);}

/* 副導線は線だけ */
.sub-link{
  /* 2026-09-27（9/27 4時用 依頼 §1）：下線を廃止。リンクであることは配置・文字色・
     余白（タップ領域）で示す。文字はゴシック体のまま（操作要素のため）。 */
  display:inline-block;background:none;border:0;cursor:pointer;
  font-family:var(--font-gothic);font-size:var(--fs-note);
  color:var(--ink-soft);text-decoration:none;padding:2px 0;margin-top:var(--sp-2);
}
.sky .sub-link{color:var(--cream);}

/* ============================================================
   下部の帰り道リンク（9/24修正依頼＝サイト内回遊性の改善）
   主CTAより弱く・中央揃え・縦並び・タップ領域44px以上・Safariの下部バーに隠れない。
   ============================================================ */
.the366-foot-nav{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin-top:calc(var(--sp-3) * 1.6);
  padding:8px 0 calc(14px + env(safe-area-inset-bottom));
}
.the366-foot-nav .sub-link{
  min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;margin-top:0;
}

/* 入力エラーは該当箇所の近くへ、短く具体的に */
.field-error{
  display:none;font-family:var(--font-gothic);font-size:var(--fs-note);
  color:var(--alert);margin-top:6px;
}
.field-error.on{display:block;}

/* 重要確認だけに使う薄い半透明面 */
.veil-panel{
  background:var(--veil);border:1px solid var(--line);border-radius:10px;
  padding:var(--sp-3);box-shadow:none;
}
.sky .veil-panel{background:var(--veil-dark);border-color:var(--line-dark);}

/* ============================================================
   余韻（スクロール進入時に一度だけ 0.8〜1.2秒）
   ============================================================ */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 1000ms ease,transform 1000ms ease;}
.reveal.shown{opacity:1;transform:none;}

/* ============================================================
   PCでは情報量を増やさず、余白と風景を広げる
   ============================================================ */
@media(min-width:760px){
  :root{--fs-body:18px;--fs-lead:21px;--fs-title:30px;--fs-hero:34px;}
  .field-block{max-width:560px;}
}

/* ============================================================
   動きを減らす端末設定：移動・点滅を抑えた静かなフェードへ
   （Q217・Q188 の上書き）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;}
  .reveal{transform:none;transition:opacity 600ms linear;}
  #the366-trans .dia{animation:none !important;}
  /* 9/19 §2-1：移動・点滅は抑えるが、表示時間2.5秒は変えない（JS側で同じ時間を保つ） */
  #the366-trans,#the366-titlecall{transition:opacity 200ms linear !important;}
  #the366-titlecall .tc-logo,#the366-titlecall .tc-name{
    transform:none !important;transition:opacity 260ms linear !important;transition-delay:0ms !important;
  }
  .dia{box-shadow:none;}
}

/* ============================================================
   分析同意（§11・2026-09-20 新設）
   画面下部に初回だけ。
   「同意する」と「同意しない」は**同じ形・同じ色・同じ大きさ**にしてある
   （どちらかを選びやすく見せない、というご指定のため）。
   ============================================================ */
#the366-consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--navy-soft,#1C2E4A);color:var(--cream,#F2EBE1);
  border-top:1px solid var(--line-dark,rgba(242,235,225,.18));
  padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px));
  text-align:center;
  animation:the366-consent-in 500ms ease both;
}
#the366-consent p{
  font-family:var(--font-mincho,serif);font-size:14.5px;line-height:1.95;margin:0 0 14px;
  max-width:34em;margin-left:auto;margin-right:auto;
}
#the366-consent .cbtns{
  display:flex;gap:12px;justify-content:center;max-width:460px;margin:0 auto;
}
#the366-consent .cbtns button{
  flex:1 1 0;min-width:0;
  font-family:var(--font-gothic);font-size:15px;letter-spacing:.04em;
  padding:13px 10px;border-radius:2px;cursor:pointer;
  background:var(--cream-2,#F2EBE1);color:var(--navy,#0E2841);
  border:1px solid var(--cream-2,#F2EBE1);
}
#the366-consent a{
  /* 2026-09-28（9/28 1時用 依頼 Priority4）：操作要素はゴシック体・下線なしへ統一。
     下線の代わりに文字色（金）とタップ領域で操作可能を示す。 */
  display:inline-block;min-height:44px;line-height:44px;margin-top:4px;
  font-family:var(--font-gothic);font-size:13px;
  color:var(--gold-bright,#D4AF37);text-decoration:none;
}
@keyframes the366-consent-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  #the366-consent{animation:none;}
}

/* ==========================================================================
   10/5 16時用 THE366 Dashboard §22：常設アンケート（任意）。
   目立たせない：たたんだ一行（ひとことアンケート（任意））だけを置き、開いたときだけ設問。
   地の色（紺／生成り）どちらでも読めるよう、文字色は継承・線は半透明。
   ========================================================================== */
.t366-survey{max-width:30em;margin:28px auto 8px;padding:0 4px;text-align:left;color:inherit;
  font-family:var(--font-gothic,sans-serif);font-size:14px;line-height:1.7;opacity:.92}
.t366-survey summary{cursor:pointer;list-style:none;text-align:center;min-height:44px;line-height:44px;
  font-size:13px;letter-spacing:.04em;color:var(--gold,#C5A059)}
.t366-survey summary::-webkit-details-marker{display:none}
.t366-survey[open] summary{margin-bottom:6px}
.t366-survey fieldset{border:0;border-top:1px solid rgba(127,127,127,.28);margin:0;padding:14px 0 10px}
.t366-survey legend{padding:0 0 8px;font-size:14px}
.t366-sv-o{display:flex;flex-wrap:wrap;gap:8px}
.t366-sv-o label{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid rgba(127,127,127,.35);
  border-radius:20px;cursor:pointer;font-size:13px}
.t366-sv-o input{accent-color:var(--gold,#C5A059);margin:0}
.t366-sv-o label:has(input:checked){border-color:var(--gold,#C5A059)}
.t366-sv-free{display:block;border-top:1px solid rgba(127,127,127,.28);padding-top:14px}
.t366-sv-free span{display:block;font-size:13px;margin-bottom:6px}
.t366-sv-free textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px;border-radius:4px;
  border:1px solid rgba(127,127,127,.4);background:rgba(255,255,255,.06);color:inherit}
.t366-sv-send{display:block;margin:14px auto 4px;min-width:140px;min-height:44px;padding:0 20px;border-radius:2px;cursor:pointer;
  font:inherit;font-size:14px;letter-spacing:.06em;background:transparent;color:inherit;border:1px solid var(--gold,#C5A059)}
.t366-sv-done{text-align:center;font-size:13px;margin:8px 0 0}

/* ==========================================================================
   2026-10-16（10/16 22時用 修正依頼 §3-2・§8）：ひとことアンケートの共通UI（診断・タグレター・ログレターで同じ部品）。
   選択肢はタップしやすいチップ。選ぶと金の地に紺の文字で、状態がはっきり変わる（もう一度押すと外せる）。
   自由記述ははじめ2行で、書いた量に合わせて広がる。［送る］は主要CTAより控えめな線のボタン。
   ========================================================================== */
.t366-survey summary{display:block;text-decoration:underline;text-decoration-color:rgba(197,160,89,.45);text-underline-offset:4px}
.t366-survey legend{font-size:14px;line-height:1.65;letter-spacing:.02em;padding:0 0 10px}
.t366-survey fieldset{padding:16px 0 12px}
.t366-sv-o{gap:8px 8px}
.t366-sv-o label{position:relative;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(197,160,89,.5);
  background:transparent;font-size:13.5px;line-height:1.4;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.t366-sv-o input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.t366-sv-o label.is-on,.t366-sv-o label:has(input:checked){background:var(--gold,#C5A059);border-color:var(--gold,#C5A059);color:#1C2E4A;font-weight:600}
.t366-sv-o label:has(input:focus-visible){outline:2px solid var(--gold,#C5A059);outline-offset:2px}
.t366-sv-free{padding-top:16px}
.t366-sv-free textarea{min-height:64px;resize:none;overflow:hidden;line-height:1.7;border-color:rgba(197,160,89,.45)}
.t366-sv-msg{margin:10px 0 0;font-size:13px;text-align:center;color:var(--gold,#C5A059)}
.t366-sv-send{border-radius:22px;border-color:rgba(197,160,89,.75);color:var(--gold,#C5A059)}
.t366-sv-send:disabled{opacity:.55;cursor:default}
.t366-sv-done{padding:10px 0 6px;font-size:13.5px;line-height:1.8}