/* halo — アースブルー配色・ブランド用上書き（ellie-theme.css の変数を上書き） */

:root {
  /* メインのアースブルー階調（インディゴよりの落ち着いた青） */
  --primary-color: #2f4556;
  --secondary-color: #5a7588;
  --tertiary-color: #e6eef5;
  --main-ttl-color: #243642;
  /* ページ全体のベースとなる薄いアースブルー */
  --body-base-color: #d8e4ed;
}

html {
  background-color: var(--body-base-color);
}

body {
  background-color: var(--body-base-color);
  color: #333;
}

a {
  color: #3d5f78;
}

a:hover,
a:active {
  color: #264358;
}

/* 固定ヘッダー時の背景もアーストーン寄りに */
#header.js-fix {
  background-color: rgb(232 239 245 / 0.88);
}

#top,
#about,
#features,
#news,
#online-shop,
#access {
  scroll-margin-top: 6rem;
}

@media (min-width: 1024px) {
  #top,
  #about,
  #features,
  #news,
  #online-shop,
  #access {
    scroll-margin-top: 8rem;
  }
}

/* ヘッダーナビは TOP / ABOUT / NEWS / ACCESS は囲まない。
   ONLINE SHOP のみ ellie-theme.css の li:last-child スタイルでピル形状 */

/* ロゴ右：Instagram */
#header #header-logo {
  max-width: min(268px, 52vw);
}

@media (min-width: 1024px) {
  #header #header-logo {
    max-width: 320px;
  }
}

.header-brand {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1rem);
  flex-wrap: nowrap;
}

#header .custom-logo-link {
  flex: 1 1 auto;
  min-width: 0;
}

#header .header-instagram {
  flex-shrink: 0;
}

#header .header-instagram .instagram-icon svg {
  display: block;
  width: clamp(34px, 5vw, 44px);
  height: clamp(34px, 5vw, 44px);
}

/* ヘッダーでは淡色背景に乗せるため、円はセカンダリー・記号は白 */
#header .header-instagram .svg-background {
  fill: var(--secondary-color);
}

#header .header-instagram .svg-shape,
#header .header-instagram .svg-shape path {
  fill: #fff;
}

#header .header-instagram:hover .svg-background {
  opacity: 0.88;
}

/* トップページ：FEATURES / NEWS / ONLINE SHOP / ACCESS のセクション見出しを中央揃え */
#features h2.top-ttl,
#news h2.top-ttl,
#online-shop h2.top-ttl,
#access h2.top-ttl {
  text-align: center;
}

#features h2.top-ttl span,
#news h2.top-ttl span,
#online-shop h2.top-ttl span,
#access h2.top-ttl span {
  display: block;
}

/* ONLINE SHOP セクション（アクセス前・囲み枠） */
#online-shop {
  background-color: var(--tertiary-color);
  padding: 3rem 0 4rem;
}

/* テキストロゴ使用時：フッターの高さ・画像前提の調整 */
#footer .footer-logo {
  height: auto;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer .footer-logo .site-logo-link {
  text-decoration: none;
}

#footer .footer-logo .site-logo-text {
  color: #fff;
}

#loading_logo {
  width: auto;
  max-width: none;
  height: auto;
  min-height: 3rem;
}

@media (min-width: 1024px) {
  #header .site-logo-text {
    font-size: clamp(2rem, 2.8vw, 2.85rem);
  }
}

.online-shop-frame {
  width: 90%;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  border: 2px solid var(--secondary-color);
  border-radius: 1.5rem;
  background: #fff;
  text-align: center;
}

.online-shop-actions {
  margin-top: 0;
}

.online-shop-actions a {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  letter-spacing: 0.08em;
  color: #fff;
  border-radius: 100vh;
  background-color: var(--primary-color);
}

.online-shop-actions a:hover {
  opacity: 0.92;
}

/* CTA のシャイン（shine）エフェクトを無効化 */
#pc-g-nav .menu li:last-child a::after,
#g-nav .menu li:last-child a::after,
.online-shop-actions a::after {
  content: none;
  display: none;
}

#pc-g-nav .menu li:last-child a,
#g-nav .menu li:last-child a {
  overflow: visible;
}