/**
 * File: base.css
 * Usage: 全ページ共通のスタイルを定義します。レイアウト、モジュールなど。
 * Example: ly_header, ly_footer, el_btn, el_gradientGold, el_subpTtl, el_normalTtl
*/

@charset "UTF-8";

/* ================================================
   デザイントークン（CSS変数）
   全ファイル共通で使用する変数を一元管理
================================================ */
:root {
  /* === カラーパレット === */
  /* Primary */
  --color-primary: #f39800;
  --color-primary-dark: #f8b62d;
  --color-gold: #f8b62d;

  /* Green */
  --color-green: #86bf00;
  --color-green-dark: #20ae4f;

  /* Neutral */
  --color-dark: #231815;
  --color-text: #333333;
  --color-gray: #666666;
  --color-gray-light: #999999;
  --color-white: #ffffff;

  /* Background */
  --color-cream: #fff9ef;
  --color-cream-dark: #feefd0;
  --color-bg-light: #fffdf8;

  /* Accent */
  --color-primary-light: #ffefd5;
  --color-yellow: #fff100;
  --color-border: #fddc9d;
  --color-accent-red: #e60012;

  /* UI */
  --color-header-bg: #0e0f14;

  /* === フォントファミリー === */
  --font-family-base: 'NotoSansJp', 'Noto Sans JP', sans-serif;
  --font-family-accent: 'Zen Maru Gothic', sans-serif;
  --font-family-latin: 'Lato', sans-serif;

  /* === グラデーション === */
  --gradient-cta: linear-gradient(180deg, #f33500 0%, #f39800 100%);
  --gradient-green: linear-gradient(90deg, #86bf00 0%, #20ae4f 100%);
  --gradient-green-vertical: linear-gradient(180deg, #86bf00 0.06%, #20ae4f 99.94%);
  --gradient-yellow: linear-gradient(180deg, #fdcd73 0%, #f39800 100%);
  --gradient-overlay: linear-gradient(0deg, #f39800 0%, rgba(243, 152, 0, 0) 100%);
  --gradient-blue-web: linear-gradient(90deg, #00c3d5 0%, #0073c5 100%);
  --gradient-phone: linear-gradient(270deg, #f33500 0%, var(--color-primary) 100%);

  /* === レイアウト === */
  --max-width-content: 1304px;
  --max-width-narrow: 900px;

  /* === 余白システム === */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-20: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 56px;
  --space-5xl: 64px;
  --space-6xl: 80px;
  --space-7xl: 100px;
  --space-8xl: 120px;

  /* === セクション余白（レスポンシブ対応・60px/80px系） === */
  --section-padding-block: 40px;
  --section-padding-inline: 16px;
  --section-padding-bottom: 60px;

  /* === Border Radius === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-5xl: 40px;
  --radius-6xl: 48px;
  --radius-pill: 999px;

  /* === Box Shadow === */
  --shadow-card: 4px 4px 20px 4px rgba(35, 24, 21, 0.05);
  --shadow-light: 0 2px 8px rgba(35, 24, 21, 0.1);
  --shadow-medium: 0 4px 16px rgba(35, 24, 21, 0.1);

  /* === フォントサイズ === */
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 28px;
  --font-4xl: 32px;
  --font-5xl: 40px;
  --font-6xl: 48px;
  --font-7xl: 64px;
  --font-8xl: 80px;
  --font-9xl: 120px;

  /* === フォントウェイト === */
  --font-regular: 400;
  --font-bold: 700;

  /* === Transition === */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* === Modal === */
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --modal-z-index: 9999;
}

/* Tablet (768px以上) */
@media screen and (min-width: 768px) {
  :root {
    --section-padding-block: 60px;
    --section-padding-inline: var(--space-2xl);
    --section-padding-bottom: 80px;
  }
}

/* PC (1024px以上) */
@media screen and (min-width: 1024px) {
  :root {
    --section-padding-block: 80px;
    --section-padding-inline: var(--space-2xl);
    --section-padding-bottom: 100px;
  }
}

/* ================================================
   共通アニメーション（@keyframes）
================================================ */
/* 水平無限スクロール（左方向） - iOS Safari対応 */
@-webkit-keyframes infiniteScrollX {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes infiniteScrollX {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 垂直無限スクロール（上方向） - iOS Safari対応 */
@-webkit-keyframes infiniteScrollY {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes infiniteScrollY {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -50%, 0);
  }
}

/* フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 無限スクロールトラック共通 - GPU加速 */
.bl_featured_bgTrack,
.bl_menuGuide_bgTrack,
.bl_firstApproach_technique_track,
.bl_firstExplanation_scrollText_track,
.bl_shopFv_bgText,
.bl_customerVoice_track,
.bl_cta_slider_track,
.bl_shopCta_slider_track,
.bl_cta_vscroll_track,
.bl_shopCta_vscroll_track {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  /* Fallback */
  min-height: calc(var(--vh, 1vh) * 100);
  text-rendering: optimizeSpeed;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  border: none;
  background: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* 背景スクロールは装飾的要素のため、reduced-motionでも許可 */
  .bl_featured_bgTrack,
  .bl_menuGuide_bgTrack,
  .bl_firstApproach_technique_track,
  .bl_firstExplanation_scrollText_track,
  .bl_shopFv_bgText,
  .bl_shopFv_bgText_inner,
  .bl_customerVoice_track,
  .bl_cta_slider_track,
  .bl_shopCta_slider_track,
  .bl_cta_vscroll_track,
  .bl_shopCta_vscroll_track {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
  }

  /* 縦スクロール・店舗FVは速度が異なる */
  .bl_cta_vscroll_track,
  .bl_shopCta_vscroll_track,
  .bl_shopFv_bgText {
    animation-duration: 20s !important;
  }
}

/* WordPress管理画面のツールバー */
#wpadminbar {
  display: none !important;
}

/* ================================================
 フォントの読み込み
================================================ */
/* Google Fonts（Lato, Zen Maru Gothic, Zen Kurenaidou）は
   header.phpで<link>タグにより読み込み */

/* フォントユーティリティクラス */
.lato {
  font-family: 'Lato', sans-serif;
}

.zenmaru {
  font-family: 'Zen Maru Gothic', sans-serif;
}

.zenkurenaidou {
  font-family: 'Zen Kurenaidou', serif;
}

@font-face {
  font-family: 'NotoSansJp';
  font-weight: 400;
  src: url(../fonts/NotoSansJP-Regular.woff) format('woff');
}

@font-face {
  font-family: 'NotoSansJp';
  font-weight: 500;
  src: url(../fonts/NotoSansJP-Medium.woff) format('woff');
}

@font-face {
  font-family: 'NotoSansJp';
  font-weight: 600;
  src: url(../fonts/NotoSansJP-Bold.woff) format('woff');
}

@font-face {
  font-family: 'NotoSansJp';
  font-weight: 700;
  src: url(../fonts/NotoSansJP-ExtraBold.woff) format('woff');
}

.un_bold {
  font-weight: 700;
}

/* ================================================  
 スタイルの適用(モバイルファーストで記述)
================================================ */
body {
  background-color: var(--color-gold);
  color: #333;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: 'NotoSansJp', sans-serif;
  overscroll-behavior: none;
  padding: 6px;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.17em;
}

h4 {
  font-size: 1.12em;
}

h5 {
  font-size: 0.83em;
}

h6 {
  font-size: 0.75em;
}

.clearfix::after {
  clear: both;
}

li {
  list-style: none;
}

html {
  margin-top: 0 !important;
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* メディアクエリ用の表示・非表示 */
.sm_only {
  display: block !important;
}

.md_only,
.lg_only,
.moreThan_md {
  display: none !important;
}

/* ================================================
  レイアウト
================================================ */
/* 全体のレイアウト */
.ly_cont {
  padding-inline: var(--pad-inner);
}

/* アーカイブページ共通レイアウト */
.ly_cont.ly_column,
.ly_cont.ly_case,
.ly_cont.ly_voice,
.ly_cont.ly_info {
  background-color: var(--color-white);
  padding-inline: 12px;
  padding-block: 40px 80px;
}

/* ヘッダー */
.ly_header {
  position: sticky;
  width: 100%;
  height: 58px;
  border-radius: 12px 12px 0 0;
  top: 6px;
  display: flex;
  background: var(--color-white);
  z-index: 1000;
  padding-inline: 8px;
  transition: border-radius 0.3s ease, transform 0.3s ease;
  overflow: visible;
}

.ly_header.is_scrolled {
  border-radius: 12px;
}

.ly_header.is_hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* フッター → 分割済み: assets/css/components/footer.css */

/* ヘッダー・PCナビゲーション → 分割済み: assets/css/components/header.css */

/* コンテンツグリッド → 分割済み: assets/css/components/content-grid.css */

/* 共通カードコンポーネント → 分割済み: assets/css/components/card.css */

/* ================================================
  共通セクション余白ユーティリティ
================================================ */
.u_sectionPadding {
  padding-block: var(--section-padding-block);
  padding-inline: var(--section-padding-inline);
}

/* ボタン → 分割済み: assets/css/components/buttons.css */

/* ページネーション → 分割済み: assets/css/components/pagination.css */

/* ハンバーガーメニュー → 分割済み: assets/css/components/hamburger.css */

/* モバイルナビゲーション → 分割済み: assets/css/components/mobile-nav.css */

/* フローティングボタン → 分割済み: assets/css/components/floating-buttons.css */

/* パネルモーダル → 分割済み: assets/css/components/panel-modal.css */

/* 店舗モーダル → コンポーネント化済み: assets/css/components/shop-modal.css */

/* ヘルパー・アクセシビリティ → 分割済み: assets/css/utilities.css */

@media screen and (min-width: 768px) {
  body {
    padding: var(--space-sm);
  }

  .sm_only {
    display: none !important;
  }

  .md_only,
  .moreThan_md {
    display: block !important;
  }

  .ly_cont {
    margin-inline: auto;
  }

  /* アーカイブページ共通レイアウト（PC） */
  .ly_cont.ly_column,
  .ly_cont.ly_case,
  .ly_cont.ly_voice,
  .ly_cont.ly_info {
    padding-block: 70px 120px;
    padding-inline: 40px;
  }

  .ly_normalSec {
    padding-block: 80px;
  }

  /* ボタン → 分割済み: assets/css/components/buttons.css */
  /* ページネーション → 分割済み: assets/css/components/pagination.css */
  /* ヘッダー → 分割済み: assets/css/components/header.css */

  .bl_sidebar_nav {
    top: 100px;
    height: calc(100vh - 100px);
    border-inline: 12px solid var(--color-gold);
  }

  .sm_only {
    display: none !important;
  }

  /* ボタン → 分割済み: assets/css/components/buttons.css */

  .el_secTtl {
    font-size: 2rem;
    margin-bottom: 40px;
  }

  .hp_borderBold {
    margin-top: 12px;
  }

  .hp_mt40 {
    margin-top: 80px;
  }

  .hp_pt40 {
    padding-top: 80px;
  }

  /* パンくずリスト → 分割済み: assets/css/components/breadcrumb.css */

  .el_subpTtl {
    position: relative;
    padding-block: 20px 10px;
    border-bottom: #bb9402 2px solid;
    font-size: 2rem;
  }

  .el_subpTtl span {
    color: #fff;
    opacity: 0.05;
    position: absolute;
    top: -24px;
    left: -100px;
    z-index: 1;
    background: transparent;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: white;
    font-size: 72px;
    translate: -20px -20px;
  }

  .el_normalTtl {
    font-size: 1.5rem;
  }

  /* コンテンツグリッド → 分割済み: assets/css/components/content-grid.css */
  /* フッター → 分割済み: assets/css/components/footer.css */
}

/* ヘッダーナビ → 分割済み: assets/css/components/header.css */

@media screen and (min-width: 1100px) {
  .sm_only {
    display: none !important;
  }
}

@media screen and (min-width: 1280px) {
  .lg_only {
    display: block !important;
  }

  /* コンテンツグリッド → 分割済み: assets/css/components/content-grid.css */
}

/* お悩みセクション → 分割済み: assets/css/components/symptoms-section.css */

/* CTAセクション → 分割済み: assets/css/components/cta.css */

/* セクションヘッダー → 分割済み: assets/css/components/section-header.css */

/* パンくずリスト → 分割済み: assets/css/components/breadcrumb.css */