/* =========================================================
   トーキャリ 入口フロー 共通デザイン（index / industry / company-list / hub）
   青ベース × 温かみ × 上品なグラデ ／ ナナ(青)・ハルキ(緑) 案内役
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&family=Kaisei+Decol:wght@400;500;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #003F7D;
  --navy-deep: #002b56;
  --navy-lite: #0a5aa8;
  --nana:      #4a90d9;  /* ナナ・青 */
  --haruki:    #2d8659;  /* ハルキ・緑 */
  --gold:      #E7B84B;
  --gold-deep: #C8912A;
  --card:      #ffffff;
  --ink:       #123;
}

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  color: #fff;
  font-family: "Kaisei Decol", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(130% 80% at 50% -10%, var(--navy-lite) 0%, var(--navy) 48%, var(--navy-deep) 100%) fixed;
  /* うっすらドット */
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1.6px),
    radial-gradient(130% 80% at 50% -10%, var(--navy-lite) 0%, var(--navy) 48%, var(--navy-deep) 100%);
  background-size: 22px 22px, 100% 100%;
  background-attachment: fixed, fixed;
}

.e-wrap {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ===== ヘッダー ===== */
.e-header {
  padding: 44px 22px 10px;
  position: relative;
}
.e-header.has-back { padding-top: 44px; }

.e-back {
  position: absolute;
  top: 40px;
  left: 12px;
  width: 40px; height: 40px;
  border: none;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.e-back:active { transform: scale(0.92); background: rgba(255,255,255,0.2); }

.e-kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
  text-align: center;
}

.e-title {
  margin-top: 6px;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.e-title .accent { color: var(--gold); }

.e-company {
  text-align: center;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ===== ナナ・ハルキ 案内役 ＋ フキダシ ===== */
.guide {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 16px auto 4px;
  padding: 0 18px;
}
.guide-faces { display: flex; flex-shrink: 0; }
.guide-faces .mascot:last-child { margin-left: -12px; }
.mascot {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.28);
  background: #fff;
}
.mascot svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

.guide-bubble {
  position: relative;
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  max-width: 240px;
}
.guide-bubble::before {
  content: "";
  position: absolute;
  left: -7px; top: 50%;
  transform: translateY(-50%);
  border-width: 7px 8px 7px 0;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

/* ===== 汎用リスト＆カード（業界／会社） ===== */
.e-list {
  flex: 1;
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.e-card {
  --acc: var(--nana);
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--card);
  color: var(--ink);
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,0.16);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.e-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--acc);
}
.e-card:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}

/* 業界アイコン（絵文字チップ）※ color-mix非対応webviewでも崩れない実装 */
.e-icon {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: #f2f6fb;
  box-shadow: inset 0 0 0 2px var(--acc);
}

/* 会社頭文字バッジ */
.e-badge {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Reggae One", sans-serif;
  font-size: 22px;
  color: #fff;
  background-color: var(--acc);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
  box-shadow: 0 2px 7px rgba(0,0,0,0.18);
}

.e-card-body { flex: 1; min-width: 0; }
.e-card-label {
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.e-card-sub {
  display: block;
  font-size: 11.5px;
  color: #667;
  margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e-card-arrow {
  flex-shrink: 0;
  color: var(--acc);
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
}

/* ===== hub: コンテンツメニュー ===== */
.hub-list {
  flex: 1;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 3px 12px rgba(0,0,0,0.16);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hub-card:active { transform: translateY(1px) scale(0.985); }

.hub-ic {
  width: 50px; height: 50px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: #eef3f9;
}
.hub-body { flex: 1; min-width: 0; }
.hub-label {
  display: block;
  font-size: 16.5px; font-weight: 700; color: var(--ink);
  line-height: 1.3;
}
.hub-sub {
  display: block;
  font-size: 12px; color: #6a7686; margin-top: 3px; line-height: 1.4;
}
.hub-arrow { flex-shrink: 0; font-size: 22px; font-weight: 700; opacity: .6; }

/* ルーム＝目玉 */
.hub-card.hero {
  background: linear-gradient(135deg, #12457f 0%, #0a2f5c 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(3, 20, 44, 0.5), 0 0 0 1.5px rgba(231,184,75,0.5) inset;
}
.hub-card.hero .hub-ic {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  box-shadow: 0 4px 12px rgba(231,184,75,0.4);
}
.hub-card.hero .hub-label { color: #fff; }
.hub-card.hero .hub-sub { color: rgba(255,255,255,0.82); }
.hub-card.hero .hub-arrow { color: var(--gold); opacity: 1; }
.hub-badge {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: #2a1c00;
  background: var(--gold);
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(231,184,75,0.5);
}

/* 準備中（Coming Soon） */
.hub-card.soon {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.72);
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: default;
}
.hub-card.soon .hub-ic {
  background: rgba(255,255,255,0.1);
  filter: grayscale(0.4);
}
.hub-card.soon .hub-label { color: rgba(255,255,255,0.82); }
.hub-card.soon .hub-sub   { color: rgba(255,255,255,0.5); }
.hub-soon-tag {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.14);
  padding: 4px 10px; border-radius: 999px;
}

/* ===== フッター ワードマーク ===== */
.e-footer {
  padding: 18px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.e-footer .wm {
  font-family: "Reggae One", sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.06em;
}
.e-footer .tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.34em;
  color: rgba(255,255,255,0.45);
  margin-top: 3px;
}

/* ===== ブランドロゴ（横長ワードマーク画像・暗い背景で埋もれないよう淡い白角丸パネルに載せる） ===== */
.brand-panel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22);
  max-width: 100%;
}
.brand-logo { display: block; width: auto; max-width: 100%; height: auto; }
/* フッター */
.e-footer .brand-panel { padding: 7px 14px; border-radius: 10px; }
.e-footer .brand-logo { height: 30px; }
/* スプラッシュ（入口の顔） */
.splash .brand-panel { padding: 14px 22px; border-radius: 18px; box-shadow: 0 6px 22px rgba(0,0,0,0.30); }
.splash .brand-logo { height: 60px; }

.error-text {
  color: rgba(255,255,255,0.78);
  text-align: center;
  padding: 28px 24px;
  line-height: 1.6;
}

/* ===== スケルトン ===== */
.e-skel {
  height: 74px;
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 70%);
  background-size: 200% 100%;
  animation: eShimmer 1.3s infinite;
}
@keyframes eShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ===== index スプラッシュ ===== */
.splash {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; text-align: center;
  padding: 24px;
}
.splash .logo {
  font-family: "Reggae One", sans-serif;
  font-size: 34px; color: #fff;
  text-shadow: 0 3px 14px rgba(0,0,0,0.35);
}
.splash .logo .accent { color: var(--gold); }
.splash .sub { font-size: 13px; color: rgba(255,255,255,0.7); letter-spacing: .08em; }
.spinner {
  width: 30px; height: 30px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }