/* =============================================================
   brand-theme.css — MedakaService ブランド配色（全ページ共通）
   -------------------------------------------------------------
   配色の出典：「ホームページ配色案.xlsx」
     基本の青        #1E88E5  見出し・リンク・アイコン
     青のボタン      #1976D2  白文字を載せるボタン・帯
     背景のアクセント #EAF4FD  セクション背景
     ベース          #FFFFFF  ページ・カード背景
     目立たせたい所  #FFC83D  お問い合わせボタン・NEW（上の文字は濃紺）
     お知らせ・注意  #D32F2F  重要なお知らせ・必須の印（使う場所を絞る）
     本文の文字      #1F2A44  本文

   面積の目安：白・薄水色 7割 / 青 2〜3割 / 赤・黄 1割未満

   読み込み順：vendor/css/styles.css の直後（site-header.css より前）。
   テーマ（Themesflat）は暗色前提のため、ここで明色に反転させる。
   vendor/ 配下は触らず、この1ファイルで差し替えられるようにしている。
   ============================================================= */

:root {
  /* ブランドトークン */
  --br-blue: #1E88E5;
  --br-blue-deep: #1976D2;
  --br-blue-dark: #1565C0;          /* ボタンのホバー */
  --br-sky: #EAF4FD;
  --br-sky-2: #D6E9FA;              /* 薄水色の上の罫線・入力枠 */
  --br-white: #FFFFFF;
  --br-yellow: #FFC83D;
  --br-yellow-dark: #F5B800;        /* 黄ボタンのホバー */
  --br-red: #D32F2F;
  --br-navy: #1F2A44;
  --br-navy-soft: #55607A;          /* 補足テキスト */
  --br-line: rgba(31, 42, 68, 0.12);
  --br-line-strong: rgba(31, 42, 68, 0.24);
  --br-blue-tint: rgba(30, 136, 229, 0.10);
  --br-shadow: 0 10px 30px rgba(31, 42, 68, 0.08);
  --br-shadow-lg: 0 24px 60px rgba(31, 42, 68, 0.12);

  /* テーマ側の変数を差し替え（テーマCSSはこれらを参照している） */
  --primary: var(--br-blue);
  --main-dark: var(--br-navy);      /* 文字色として参照される箇所が多い */
  --dark-2: var(--br-navy);
  --stroke-2: var(--br-line);
  --surface: var(--br-sky);
  --white: #FFFFFF;
  --main-blue-1: var(--br-blue-deep);
}

/* ---------- ベース ---------- */
body {
  background: var(--br-white);
  color: var(--br-navy);
}
body, button, input, select, textarea { color: var(--br-navy); }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--br-navy); }
a { color: var(--br-navy); }
a:hover, a:focus { color: var(--br-blue); }
.color-primary { color: var(--br-blue) !important; }
.text-medium { color: var(--br-navy-soft); }
.highlight { background-color: var(--br-yellow); color: var(--br-navy); border-radius: 4px; }
::selection { background: var(--br-blue); color: #fff; }

/* 横はみ出し防止：装飾（マスクの輪・ロゴの透かし・流れる大文字）は画面外にはみ出す前提なので、
   ページ全体を overflow-x: clip で囲い、文書の幅をビューポートに固定する。
   clip はスクロールコンテナを作らないため、固定ヘッダー・sticky・スクロール連動演出はそのまま動く。 */
.wrapper, .main-content { overflow-x: clip; }
.section-about, .section-project, .section-company, .section-launch, .section-blog,
.section-counting, .section-services, .section-testimonial, .section-form, .page-title-home { overflow-x: clip; }
@media (max-width: 767.98px) {
  .logo-watermark { max-width: 55vw; }
}

/* プリローダー */
#loading { background-color: var(--br-white); }

/* ---------- トップバー・ヘッダー ---------- */
.site-header-fixed .top-bar { background: var(--br-blue-deep); }
.top-bar, .top-bar a, .top-bar i { color: #fff; }
.top-bar a:hover { color: var(--br-yellow); }
.header { border-top-color: var(--br-line); border-bottom-color: var(--br-line); }
.header .main-menu { border-left-color: var(--br-line); }
.menu-primary-menu .item-link { color: var(--br-navy); }
.menu-primary-menu .item-link:hover,
.current-menu-item > a { color: var(--br-blue) !important; }
.sub-menu { background-color: var(--br-white); box-shadow: var(--br-shadow); border: 1px solid var(--br-line); }
.sub-menu .sub-menu-item .item-link-2 { color: var(--br-navy); }
.sub-menu .sub-menu-item:hover { background-color: var(--br-sky); }
.sub-menu .sub-menu-item:hover .item-link-2 { color: var(--br-blue); }
.mobile-button span { background-color: var(--br-navy); }

/* ---------- ボタン ---------- */
.tf-btn { background-color: var(--br-blue-deep); }
.tf-btn span, .tf-btn i { color: #fff; }
.tf-btn::before { background-color: var(--br-blue-dark); }
.tf-btn:hover { background-color: var(--br-blue-deep); }
.tf-btn:hover span, .tf-btn:hover i { color: #fff; }
.tf-btn.no-bg { background-color: transparent; }
.tf-btn.no-bg::before { display: none; }
.tf-btn.no-bg span, .tf-btn.no-bg i { color: var(--br-blue); }
.tf-btn.no-bg:hover span, .tf-btn.no-bg:hover i { color: var(--br-blue-dark); }
.tf-btn.style-border { border-color: var(--br-blue); }
.tf-btn-readmore { border-color: var(--br-blue); }
.tf-btn-readmore .plus, .tf-btn-readmore .text { color: var(--br-blue); }
.tf-btn-readmore:hover { background-color: var(--br-blue); }
.tf-btn-readmore:hover .plus, .tf-btn-readmore:hover .text { color: #fff; }

/* ---------- 見出し ---------- */
.heading-section .sub-title,
.page-title-home .top-page-title .sub-title,
.project-item .item-content .sub-title,
.section-form .heading-form .sub-title { color: var(--br-blue); }
.heading-section .title, .page-title-home .title { color: var(--br-navy); }
.heading-section .desc, .desc { color: var(--br-navy); }
.page-title-home .desc { border-bottom-color: var(--br-line); }

/* 装飾リング（SVGの白グラデを青に。ロゴの円を思わせる控えめな輪） */
.mask svg circle { stroke: var(--br-blue); opacity: 0.09; }
.page-title-home .mask.mask-home-2 svg circle { stroke: var(--br-yellow); opacity: 0.18; }
.footer .mask svg circle { stroke: var(--br-blue); opacity: 0.12; }

/* 流れる大文字（マーキー）：白地では“水色の文字”として読める濃さに。
   塗りの文字は薄い青、英語の縁取り文字は青い線。本文（濃紺）より手前に出ない範囲で。 */
.big-text { color: rgba(30, 136, 229, 0.30); }
.big-text .text-stroke { color: transparent; -webkit-text-stroke: 2px rgba(30, 136, 229, 0.55); }

/* 回転テキスト（強みセクション） */
.wg-curve-text { border-color: var(--br-blue); }
.wg-curve-text .icon { border-color: var(--br-blue); }
.wg-curve-text .icon i { color: var(--br-blue); }
.text-rotate svg text { fill: var(--br-navy); }

/* カウンター */
.counter-item .number-counter span { color: var(--br-blue); }
.counter-item .title-counter { color: var(--br-navy-soft); }

/* アコーディオン（会社概要） */
.according-item .title-according { color: var(--br-blue); border-bottom-color: var(--br-line); }
.according-item .title-according.collapsed { color: var(--br-navy); border-bottom-color: var(--br-line); }
.according-item .title-according:hover { color: var(--br-blue); }
.according-item .title-according span::before,
.according-item .title-according span::after { background-color: var(--br-navy); }
.according-item .title-according:not(.collapsed) span::before,
.according-item .title-according:not(.collapsed) span::after { background-color: var(--br-blue); }
.benefit-item i { color: var(--br-blue); }

/* サービスカード */
.services-item { border-color: var(--br-line); background-color: var(--br-white); }
.services-item .icon i { color: var(--br-blue); }
.services-item h6 a { color: var(--br-navy); }
.services-item h6 a:hover { color: var(--br-blue); }
.services-item .desc { color: var(--br-navy-soft); }
.services-item .image { background-color: var(--br-sky); }

/* プロジェクト／実績カード */
.project-item { background-color: var(--br-white); border-color: var(--br-line); }
.project-item .item-content .title-project a { color: var(--br-navy); }
.project-item .item-content .title-project a:hover { color: var(--br-blue); }
.project-item .item-content .desc { color: var(--br-navy-soft); }
.hover-image .image:after { background-color: rgba(255, 255, 255, 0.45); }

/* スライダーのページネーション */
.sw-pagination .swiper-pagination-bullet::after { border-color: var(--br-blue); }
.sw-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { background-color: var(--br-blue); }

/* ニュース一覧 */
.tf-post-list.style-2 { border-color: var(--br-line); background-color: var(--br-white); }
.tf-post-list.style-2 .title, .tf-post-list.style-2 .title a { color: var(--br-navy); }
.tf-post-list.style-2 .post-meta .line { background-color: var(--br-blue); }
.tf-post-list.style-2 .desc { color: var(--br-navy-soft); }
.tf-post-list.style-2 .title a:hover { color: var(--br-blue); }
.tf-post-list.style-2:hover .title a { text-decoration-color: var(--br-blue); }
.tf-post-list .post-date i { color: var(--br-blue); }

/* フォーム（テーマ既定） */
.form-contact-us { background-color: var(--br-white); }
.form-contact-us .title, .form-contact-us .desc, .form-contact-us .item i { color: var(--br-navy); }
.form-contact-us input, .form-contact-us textarea {
  background-color: var(--br-white) !important;
  border: 1px solid var(--br-sky-2);
  color: var(--br-navy);
}
.form-contact-us input::placeholder, .form-contact-us textarea::placeholder { color: var(--br-navy-soft); }
.form-contact-us input:focus, .form-contact-us textarea:focus {
  border-color: var(--br-blue);
  outline: 2px solid rgba(30, 136, 229, 0.25);
  outline-offset: 0;
}
.form-contact-us .error { color: var(--br-red); }
.nice-select { background-color: var(--br-white); border: 1px solid var(--br-sky-2) !important; }
.nice-select > span, .nice-select .list li, .nice-select::before { color: var(--br-navy); }

/* ---------- フッター（薄水色で軽く、3列のグリッド） ----------
   テーマは左寄せの flex（連絡先列 240px 固定）でカードが収まらないため、
   grid に組み直す。index.php / medaka-school.php 共通。 */
.footer { background-color: var(--br-sky); color: var(--br-navy); border-top: 1px solid var(--br-sky-2); }
.footer .footer-inner { padding-top: 88px; }
.footer .mask svg circle { stroke: var(--br-blue); opacity: 0.08; }

.footer .footer-middle {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr) minmax(0, 1.05fr);
  gap: 48px 48px;
  margin-bottom: 72px;
  align-items: start;
}
.footer .footer-middle .left { max-width: 400px; }
.footer .locations-contact { max-width: none; }
.footer .footer-middle .locations-contact,
.footer .footer-middle .footer-content { max-width: none; width: auto; }

/* ブランド */
#footer.footer .footer-brand-logo { width: 240px; }
#footer.footer .footer-brand-title { margin-bottom: 20px !important; }
#footer.footer .footer-brand-desc { max-width: 34em; font-size: 15px; line-height: 1.9; color: var(--br-navy-soft); }

/* 列見出し：青の小見出しに短い下線 */
.footer-content .title-mobile,
.locations-contact .item .title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--br-blue);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(30, 136, 229, 0.25);
}
.locations-contact .contact-footer .title { margin-bottom: 18px; }
.footer-content .title-mobile i { display: none; }
.footer-content ul { margin-top: 0; }
.footer-content li { margin-bottom: 12px; }
.footer-content li a { color: var(--br-navy); font-size: 15px; line-height: 1.6; }
.footer-content li a:hover { color: var(--br-blue); text-decoration: underline; text-underline-offset: 4px; }
.locations-contact .locations-footer { margin-bottom: 32px !important; }
.locations-contact .locations-footer .address { font-size: 15px; line-height: 1.9; color: var(--br-navy); }
/* 事務所の地図（Google マップ埋め込み）：住所の下に小さく、角丸の白枠で */
.footer .footer-map {
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--br-sky-2);
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 42, 68, 0.06);
}
.footer .footer-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.footer .footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--br-blue);
}
.footer .footer-map-link i { font-size: 11px; }
.footer .footer-map-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* メール */
#footer.footer .footer-mail-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
#footer.footer .footer-mail-row .icon-email {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--br-blue);
  font-size: 14px;
  opacity: 1;
}
#footer.footer .footer-mail-row a { color: var(--br-navy); overflow-wrap: anywhere; }
#footer.footer .footer-mail-row a:hover { color: var(--br-blue); }
#footer.footer .footer-line-card { margin-top: 18px; max-width: 380px; }
#footer.footer .footer-line-btn-text strong { white-space: nowrap; }

/* 下段 */
.footer .line { background-color: rgba(30, 136, 229, 0.25); }
.footer .footer-bottom { margin-bottom: 0; padding-bottom: 36px; }
.footer-go-top { border-color: rgba(30, 136, 229, 0.25); background: var(--br-sky); }
.footer-go-top::before { background-color: var(--br-white); box-shadow: 0 6px 16px rgba(31, 42, 68, 0.10); }
.footer-go-top i { color: var(--br-blue); }
.footer-go-top:hover::before { background-color: var(--br-blue); }
.footer-go-top:hover i { color: #fff; }
.footer .list-bottom { margin-top: 8px; font-size: 14px; color: var(--br-navy-soft); }
.footer .list-bottom a { color: var(--br-navy-soft); }
.footer .list-bottom a:hover { color: var(--br-blue); }
.footer .list-bottom ul { gap: 28px; }
.footer .footer-bottom ul { gap: 28px; }

@media (max-width: 1199.98px) {
  .footer .footer-middle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer .footer-middle .left { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 575.98px) {
  .footer .footer-inner { padding-top: 56px; }
  .footer .footer-middle { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-bottom: 48px; }
  .footer-content .title-mobile i { display: inline-block; }
  #footer.footer .footer-line-card { max-width: none; }
  .footer .list-bottom { justify-content: center; text-align: center; }
  .footer .list-bottom ul { gap: 16px 22px; }
}

/* ---------- スマホメニュー（オフキャンバス） ---------- */
.mobile-nav-wrap .inner-mobile-nav { background-color: var(--br-white); }
.mobile-nav-wrap .inner-mobile-nav a { color: var(--br-navy); }
.mobile-nav-wrap .inner-mobile-nav a:hover,
.current-menu-mobile-item > a { color: var(--br-blue) !important; }
.mobile-nav-wrap .mobile-nav-close svg { fill: var(--br-navy); }
.mobile-nav-wrap #menu-mobile .menu-item { border-color: var(--br-line); }
.contact-mobile .title-contact-mobile { color: var(--br-blue); }
.contact-mobile .content-contact-moblile i { color: var(--br-blue); }
.contact-mobile .text-medium { color: var(--br-navy) !important; }
.offcanvas-backdrop { background-color: rgba(31, 42, 68, 0.5); }

/* ---------- キーボードフォーカス ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--br-blue);
  outline-offset: 3px;
}