/* ============================================
   common.css
   リセット / デザイントークン / ユーティリティ / l-wrapper
   ============================================ */

/* ============================================
   1. リセット
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-loose);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  --color-page-key: var(--color-primary);
}

body.p-theme-denki  { --color-page-key: var(--color-denki);  }
body.p-theme-hikari { --color-page-key: var(--color-hikari); }
body.p-theme-wifi   { --color-page-key: var(--color-wifi);   }

em, i     { font-style: normal; }
a         { color: inherit; text-decoration: none; }
img       { display: block; max-width: 100%; height: auto; }
button    { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol    { list-style: none; }

:focus-visible {
  outline: 2px solid var(--color-page-key);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================
   2. デザイントークン（:root）
   ============================================ */
:root {

  /* ブランドカラー */
  --color-primary:      #0083CE;
  --color-accent:       #0083CE;
  --color-denki:        #E94709;
  --color-hikari:       #F6AB00;
  --color-wifi:         #92539D;

  /* ランクカラー */
  --color-rank-silver:          #638DA5;
  --color-rank-silver-shadow:   #4A7A94;
  --color-rank-gold:            #8C7457;
  --color-rank-gold-shadow:     #7C6243;
  --color-rank-platinum:        #A4A4A4;
  --color-rank-platinum-shadow: #A4A4A4;
  --gradient-rank-platinum:     linear-gradient(135deg, #E8E8E8 0%, #A3A3A3 50%, #E8E8E8 100%);

  /* テキストカラー */
  --color-text:       #222222;
  --color-ink:        #222222;
  --ink:              #222222;
  --color-text-sub:   #888888;
  --color-text-light: #E0E0E0;
  --color-text-muted: #D8D8D8;
  --color-white:      #FFFFFF;

  /* 背景・ボーダー */
  --color-bg:            #FFFFFF;
  --color-bg-light:      #F5F5F5;
  --color-bg-off-white:  #FCFCFC;
  --color-bg-gray:       #F8F8F8;
  --color-bg-gray-light: #F9FAFC;
  --color-bg-blue-light: #DFF0FE;
  --color-bg-blue-pale:  #F1FAFF;
  --color-border:        #E0E0E0;

  /* グラデーション */
  --gradient-rank:    linear-gradient(128.77deg, #0083CE 30.721%, #79CDFE 100%);
  --gradient-service: linear-gradient(124.65deg, #DE3B3C 17.394%, #D26842 58.697%);
  --gradient-cta:     linear-gradient(124.17deg, #083056 58.697%, #335E87 100%);

  /* フォント */
  --font-round: 'Rounded Mplus 1c', 'M PLUS Rounded 1c', sans-serif;
  --font-body:  'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  --font-sans:  'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
  --font-en:    'Roboto', sans-serif;

  /* フォントサイズ */
  --text-4xl:  40px;
  --text-3xl:  28px;
  --text-2xl:  24px;
  --text-xl:   20px;
  --text-lg:   18px;
  --text-base: 16px;
  --text-sm:   14px;
  --text-xs:   12px;
  --text-2xs:  10px;

  /* 行間 */
  --leading-loose:  1.7;
  --leading-normal: 1.5;
  --leading-tight:  1.4;
  --leading-none:   1;

  /* レタースペーシング */
  --tracking-wide:   0.1em;
  --tracking-normal: 0.03em;

  /* スペーシング */
  --section-py:       100px;
  --section-px:       7.81vw;
  --content-width:    1080px;
  --content-narrow:   800px;
  --content-narrower: 622px;

  /* 角丸 */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 50px;
  --radius-full: 60px;

  /* シャドウ */
  --shadow-card:            8px 8px 0px 0px var(--color-primary);
  --shadow-rank-silver:   6px 6px 0px 0px var(--color-rank-silver-shadow);
  --shadow-rank-gold:     6px 6px 0px 0px var(--color-rank-gold-shadow);
  --shadow-rank-platinum: 6px 6px 0px 0px var(--color-rank-platinum-shadow);
  --shadow-service-denki:   6px 6px 0px 0px var(--color-denki);
  --shadow-service-wifi:    6px 6px 0px 0px var(--color-wifi);
  --shadow-service-hikari:  6px 6px 0px 0px var(--color-hikari);
  --shadow-service-program: 6px 6px 0px 0px var(--color-primary);

  /* ヘッダー */
  --header-height: 98px;
  --header-bg:     rgba(255, 255, 255, 0.9);
  --header-blur:   10px;

  /* アニメーション */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   3. SP トークンオーバーライド（〜768px）
   ============================================ */
@media (max-width: 768px) {
  :root {
    --text-4xl:  26px;
    --text-2xl:  20px;
    --text-xl:   18px;
    --text-lg:   16px;
    --text-base: 14px;
    --text-sm:   12px;
    --text-xs:   10px;

    --section-py:    56px;
    --section-px:    1.5rem;
    --content-width: 342px;

    --header-height: 58px;
  }
}

/* ============================================
   4. l-wrapper sticky footer
   ============================================ */
.l-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.l-main {
  flex: 1;
}

body.is-drawer-open {
  overflow: hidden;
}

.l-gtm-noscript {
  display: none;
  visibility: hidden;
}

/* ============================================
   5. ユーティリティ
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 0.5rem 1rem;
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--text-xs);
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* アンカーリンクのスクロール位置補正（SP：固定ヘッダー分オフセット） */
@media (max-width: 768px) {
  [id] {
    scroll-margin-top: var(--header-height);
  }
}

/* スクロールフェードイン */
.animate-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}