@charset "UTF-8";

/* =========================
   Typography System
   ========================= */

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kaisei-tokumin-800 - japanese */
@font-face {
  font-family: 'Kaisei Tokumin';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/KaiseiTokumin-ExtraBold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* これが必須 */
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/assets/fonts/NotoSansJP-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* Experimental */

:root {
  /* ここで縁取りの太さを管理（任意の太さにしやすい設計） */
  --stroke-width: 4px;
  /* 縁取りの色（白背景なら黒などコントラストの高い色を） */
  --stroke-color: #222; 
}

.novel-stroke {
  color: #ffffff; /* 白文字 */
  background-color: #ffffff; /* 白背景（テスト用） */
  
  font-size: 4rem;
  font-weight: bold;

  /* 【新しい発見レベルのアプローチ】
    CSSの三角関数(sin/cos)を用いて、指定した太さ(半径)の円周上に
    12方向（30度ずつ）へシャドウを打ち出す。
    これにより、角が丸く滑らかで、後から太さを変えても崩れない縁取りが完成する。
  */
  text-shadow:
    calc(var(--stroke-width) * cos(0deg))   calc(var(--stroke-width) * sin(0deg))   0 var(--stroke-color),
    calc(var(--stroke-width) * cos(30deg))  calc(var(--stroke-width) * sin(30deg))  0 var(--stroke-color),
    calc(var(--stroke-width) * cos(60deg))  calc(var(--stroke-width) * sin(60deg))  0 var(--stroke-color),
    calc(var(--stroke-width) * cos(90deg))  calc(var(--stroke-width) * sin(90deg))  0 var(--stroke-color),
    calc(var(--stroke-width) * cos(120deg)) calc(var(--stroke-width) * sin(120deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(150deg)) calc(var(--stroke-width) * sin(150deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(180deg)) calc(var(--stroke-width) * sin(180deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(210deg)) calc(var(--stroke-width) * sin(210deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(240deg)) calc(var(--stroke-width) * sin(240deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(270deg)) calc(var(--stroke-width) * sin(270deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(300deg)) calc(var(--stroke-width) * sin(300deg)) 0 var(--stroke-color),
    calc(var(--stroke-width) * cos(330deg)) calc(var(--stroke-width) * sin(330deg)) 0 var(--stroke-color);
}



/* Body */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
}

/* Headings */
h1, h2, h3 {
  font-weight: 700;
}

/* Hero only */
.kaisei-tokumin-bold {
  font-family: "Kaisei Tokumin", serif;
  font-weight: 800;
}

.en-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

/* Heading Base Scale */
:root {
  --fs-base: 1rem;
  --fs-h1-mobile: 1.6rem;
  --fs-h1-tablet-min: 1.7rem;
  --fs-h1-tablet-max: 1.9rem;
  --fs-h1-desktop-min: 1.9rem;
  --fs-h1-desktop-max: 2.2rem;
}

/* =========================================================
   CORE STYLES (Cleaned)
   ========================================================= */
/* グローバル契約 */

html {
    scroll-padding-top: calc(
        var(--header-height) + var(--scroll-offset-extra)
      );
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* theme */
    --primary-color: #e2b435; /* Gold */
    --secondary-color: #eff079; /* Pale Yellow */
    --text-color: #333333;
    --light-bg: #fffbf1;
    --white: #ffffff;
    --header-height: 80px;
    --scroll-offset-extra: 0px;

    /* header init */
    --mn-bg: #F9F8F4;        /* 和紙のようなオフホワイト */
    --mn-text: #222222;      /* 墨色 */
    --mn-accent: #714c06;    /* ゴールド */
    --mn-line: rgba(0,0,0,0.06); 
    --mn-font-en: 'Cormorant Garamond', serif;
    --mn-font-jp: 'Noto Serif JP', serif;
    --mn-header-menu-bg: #d9d9d9;
    --header-offset: 80px;

    /* header theme */
    --mn-header-bg: #ffffff;
    --mn-header-text: #222;
    --mn-header-accent: #C5A059;

    /* confact body theme */
    --color-bg-contact-main: #F8F7F2;

    /* Footer Colors */
    --footer-main-color: #5d4d7a;
    --footer-lesson-color: #2d5a27;
    --footer-support-color: #8b4513;
    --footer-brand-width: 300px;
    --footer-bg: #dbdbdb;
}
/* =========================================
   Root Colors
========================================= */
:root {
    --color-text-main: #222;
    --color-news-active: #111;
    --color-accent: #C5A059;
    --color-border: #CFC8B4;
    --color-focus: #111;
}



@media (max-width: 767.98px) {
    :root {
        --footer-brand-width: 240px;
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.8;
    color: var(--text-color);
    background-color: var(--light-bg);
    padding-top: var(--header-height);
    width: 100%;
}

/* =========================================================
   FONT settings
   ========================================================= */

.handwritten-quote {
  padding-left: 1rem;
  border-left: 3px solid rgba(226, 180, 53, 0.6);
  font-family: 'Zen Maru Gothic', sans-serif;
}

.handwritten {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 0.96rem;
}

.handlarge {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.2rem;
}


/* =========================================================
  telop-text
   ========================================================= */
.telop-text {
  
  /* 縁取りの太さと色 */
  -webkit-text-stroke: 5px #c19517ab; 
  
  /* 縁を文字の後ろに配置（重要！） */
  paint-order: stroke fill;
  
  /* 自然なボケ感を出すための隠し味 */
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}


/* =========================================================
   UTILITIES & COMPONENTS
   ========================================================= */

/* プロフェッショナル養成用の「特別な紺色」 */
.bg-pro-dark {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* フォント指定 */
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* フッターセクション色 */
.sitemap-main h6 { color: var(--footer-main-color) !important; }
.sitemap-lessons h6 { color: var(--footer-lesson-color) !important; }
.sitemap-support h6 { color: var(--footer-support-color) !important; }

/* 共通セクションスタイル
.hero {
    min-height: 550px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
 */
.section-heading-custom {
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
    margin-bottom: 3rem;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
}
.section-heading-custom::after {
    content: ''; display: block; width: 60px; height: 4px; 
    background-color: var(--secondary-color); margin: 0.8rem auto 0;
}


/* カード・ボタン類 */
.btn-cta {
    background-color: var(--secondary-color);
    color: #333;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.bg-primary-custom {
    background-color: var(--primary-color) !important;
    color: #333 !important;
}
.text-primary-custom {
    color: var(--primary-color) !important;
}
.bg-primary-instructors {
    background-color: #ededed !important;
    color: #333 !important;
}

/* =========================================================
   FOOTER (Responsive Optimized)
   ========================================================= */
/* デスクトップでは元のpaddingを維持 */
footer {
    background-color: var(--footer-bg);
    font-size: clamp(1rem, 1.1vw + 0.4rem, 1.125rem) !important;
    line-height: 1.75 !important;
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}

/* モバイルでは上部paddingを完全にゼロに */
@media (max-width: 767.98px) {
    footer {
        padding-top: 0 !important;          /* ← これで上部の空白が消える */
        padding-bottom: 0 !important;       /* 下部も必要に応じて調整 */
        min-height: auto;                   /* 100dvhを解除して自然な高さに */
        justify-content: flex-start;        /* 上から詰める */
    }

    /* モバイル専用のロゴ上部余白を最小に（好みで0にしてもOK） */
    .logo-wrapper {
        padding-top: 0.75rem !important;   /* または 0.5rem / 0 !important */
        padding-bottom: 1rem !important;
    }

    /* ボトムコンテンツをページ最下部に固定配置 */
    .footer-bottom-content {
        margin-top: auto !important;        /* flexで下に押し下げる */
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        border-top: 1px solid rgba(0,0,0,0.1);
    }
}

/* コンテナ幅制限 */
footer .container {
    max-width: 960px;
    margin: 0 auto;
}

/* モバイル・縦向きの基本スタイル */
.footer-responsive-wrapper {
    display: flex;
    flex-direction: column;      /* ← これが重要 */
    align-items: center;
    justify-content: center;     /* ← これも追加 */
    text-align: center;
    width: 100%;                 /* 念のため */
}

.footer-brand-unit {
    display: flex;
    flex-direction: column;
    max-width: min(90%, var(--footer-brand-width));
}

.brand-logo-main,
.brand-wave-sub {
    width: var(--footer-brand-width);
    max-width: min(90%, var(--footer-brand-width));
}

/* リンクホバー */
.footer-sitemap a:hover {
    color: #ffc107 !important;
}

/* 小さいテキストの調整 */
footer .small {
    font-size: 0.875rem !important;
    line-height: 1.75 !important;
}

.fs-icon-underline {
    text-decoration:auto;
}

/* モバイルフッター：ボーダーなし背景差版の仕上げ */
@media (max-width: 767.98px) {
    .footer-sitemap-side .col-4 {
        transition: background-color 0.3s ease;
    }
    .footer-sitemap-side .col-4:hover {
        background-color: rgba(0, 0, 0, 0.04) !important;  /* ホバーで軽く反応 */
    }
    .footer-sitemap-side h6 {
        font-size: 1.05rem;  /* 少し読みやすく */
        letter-spacing: 0.05em;
    }
    .footer-sitemap-side a {
        font-size: 0.95rem;
        transition: color 0.2s;
    }
    .footer-sitemap-side a:hover {
        color: #333 !important;  /* ホバーで少し濃く */
    }
}
/* デスクトップフッター微調整 */
@media (min-width: 768px) {
    .footer-brand-unit img {
        transition: transform 0.4s ease;
    }
    .footer-brand-unit:hover img.brand-logo-main {
        transform: scale(1.04);
    }
    .footer-sitemap-side ul li a {
        transition: color 0.2s;
    }
    .footer-sitemap-side ul li a:hover {
        color: var(--primary-color) !important;
    }
}

/* style.css に追加 */
.footer-sitemap-side .btn-outline-secondary {
    border-width: 1px;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.footer-sitemap-side .btn-outline-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}


.footer-sitemap-side .btn-outline-secondary.shadow-sm {
    border-color: transparent !important;          /* ボーダー色を完全に消す */
    background-color: rgba(255, 255, 255, 0.6);    /* 薄い白背景で立体感を補強（任意） */
    transition: all 0.2s ease;
}

.footer-sitemap-side .btn-outline-secondary.shadow-sm:hover {
    background-color: #ffbb00;    /* --primary-colorの薄めでホバー */
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);  /* shadow-smより少し強めに */
    transform: translateY(-1px);                   /* 軽く浮かぶ感じ */
}

/* =========================================================
   Landscape (横向き) 時のレイアウト
   ========================================================= */
@media screen and (orientation: landscape) {
    .footer-responsive-wrapper {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .footer-brand-side, 
    .footer-sitemap-side {
        flex: 0 1 auto;
    }

    .footer-sitemap-side {
        text-align: left;
    }

    .justify-content-ls-start {
        justify-content: flex-start !important;
    }
}


/* =========================================================
   SECTION HEADERS (Design Only, No Sticky)
   ========================================================= */
.section-header-unit {
    position: relative;
    padding: 1.5rem 0;
    transition: padding 0.3s ease;
}

/* 左側の垂直線 */
.section-header-unit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 2px;
    z-index: 2;
}

/* 斜線グラデーション背景 */
.section-header-unit::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-bottom: 4px solid #e4ad36;
    background: repeating-linear-gradient(45deg, #e5e5e5 0px, #e5e5e5 1px, transparent 1px, transparent 10px);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
/* header titleで表示する場合  */
.sub-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.25rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1;
}
/* header titleで表示する場合  */
.main-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.2;
}

/* header titleで表示「しない」場合  */
.sub-title-non {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.25rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.2rem;
    line-height: 1;
}

/* header titleで表示「しない」場合  */
.main-title-non {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin: 0;
    line-height: 1.2;
}

/* 既存のHTMLクラス互換性のための定義（旧Stickyの残骸処理） */
.sticky-news-header {
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    width: 100%;
    /* Sticky機能はJS側で削除済みのため、通常のブロックとして表示 */
}
.sticky-news-header .heading-wrapper {
    text-align: center;
}

/* =========================================================
   PHILOSOPHY MODAL (Styles)
   ========================================================= */
.philosophy-modal {
    z-index: 3000 !important; 
}
.philosophy-modal-content {
    position: relative;
    height: 100vh;
    background: url("/assets/img/philosophy.webp") center / cover no-repeat;
    border: none;
    overflow: hidden;
}
/* 白マット */
.philosophy-modal-content::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.85); z-index: 0;
}
.philosophy-modal-header {
    position: relative; z-index: 2; border: none; padding: 1rem 1.5rem;
}
.philosophy-modal-header .modal-title {
    font-size: 0.75rem; letter-spacing: 0.25em; color: #777;
}
.philosophy-modal-body {
    position: relative; z-index: 2;
    height: calc(100vh - 60px); 
    display: flex; justify-content: center;
    overflow-y: auto; padding: 2rem 1.5rem;
}
.philosophy-inner {
    width: 100%; max-width: 720px; margin: auto; text-align: left;
}
.philosophy-line {
    opacity: 0; transform: translateY(20px);
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    line-height: 2; margin-bottom: 2rem; color: #222;
}
.philosophy-emphasis { font-weight: 600; }
.philosophy-brand { margin-top: 3rem; }
.philosophy-brand img {
    width: 140px; max-width: 60%; margin: 0.25rem auto; display: block;
}

/* Modal Fade Animation */
.philosophy-modal.fade .modal-dialog {
    opacity: 0; transform: scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.philosophy-modal.show .modal-dialog {
    opacity: 1; transform: scale(1);
}

#scrollBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: var(--primary-color);
  z-index: 2200;
  transition: width 0.1s linear;
  transform-origin: left; width: 100%;
}


/* トランプ風コンパクトカード */
.card {
  border-radius: 12px; /* 少し丸くして親しみやすく */
  overflow: hidden;
}
.card-header {
  padding: 0.75rem 1rem; /* 上下左右を狭く */
  background: linear-gradient(to bottom, #ffffff, #fff6d5); /* 微グラデで立体感 */
}
.card-body {
  padding: 0.75rem 1rem; /* 内部余白を大幅削減 */
}
.card-body ul {
  margin-bottom: 0.5rem; /* リスト下余白を詰める */
}
.card-body li {
  margin-bottom: 0.25rem; /* 行間を極限まで詰めて密度UP */
}
.card-footer {
  padding: 0.5rem 1rem; /* フッターもコンパクト */
}


.small.text-muted {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* モバイルでさらに詰め込み */
@media (max-width: 767px) {
  .card-body {
    padding: 0.75rem 1rem;
  }
  .card-body .display-6 {
    font-size: clamp(1.8rem, 7vw, 2.5rem); /* 価格を画面幅にフィット */
  }
  .card-body p.small {
    font-size: 0.875rem; /* 少し小さくして密度確保 */
  }
}

/* ==================== 料金シミュレーター専用カラー ==================== */

/* 基調カラー変数（すでに定義済みなので再利用） */
:root {
  --primary-color: #e2b435;
  --primary-dark: #c5a059;     /* 少し暗め（ホバー/アクティブ用） */
  --primary-light: #f0d88a;    /* 薄め（背景やホバー） */
}

/* コース選択ボタン（btn-group） */
.btn-outline-primary.course-btn {
  border-color: var(--primary-color);
  color: var(--primary-color);
  transition: all 0.25s ease;
}

.btn-outline-primary.course-btn:hover,
.btn-outline-primary.course-btn:focus {
  background-color: var(--primary-light);
  color: #222;
}

.btn-outline-primary.course-btn.active {
  background-color: var(--primary-color);
  color: #222;
  border-color: var(--primary-color);
  font-weight: bold;
}

/* 時間・回数ボタン（共通） */
.btn-outline-primary.time-btn,
.btn-outline-primary.count-btn {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary.time-btn:hover,
.btn-outline-primary.count-btn:hover {
  background-color: var(--primary-light);
  color: #222;
}

.btn-outline-primary.time-btn.active,
.btn-outline-primary.count-btn.active {
  background-color: var(--primary-color);
  color: #222;
  border-color: var(--primary-color);
}

/* コピーボタン（メインアクション寄り） */
#copyConditionsBtn {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
}

#copyConditionsBtn:hover {
  background-color: var(--primary-color);
  color: #222;
  border-color: var(--primary-color);
}

/* 問い合わせボタン（メインCTA） */
.btn-primary[href="/contact/"] {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #222;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-primary[href="/contact/"]:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(226, 180, 53, 0.3);
}


/* シミュレーターの数字部分を落ち着かせる */
#finalPrice,
#perLessonPrice {
  color: #111 !important;  /* または #222 */
  font-weight: 800;
}

/* ボタンはブランドカラー維持 */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #222;
}

.btn-primary:hover {
  background-color: #c5a059;
  border-color: #c5a059;
  color: white;
}