/* ============================================================
   ココはぐフェス 全体CSS  v001
   設定場所: コンテンツを入力 > リリース > リリース設定(Web) > Web版のCSSを設定
   注意: このファイルは保存した時点で本番にも即時反映される。
         更新時はファイル名の連番を上げてアップロードすること(同名は反映されない)。

   ブース/WEBページ/チケット機能は使わない前提(1本の縦スクロールLP)。
   そのため booth-* 系セレクタの上書きは持たない。標準機能を追加した場合は
   実装ガイド(../../05_implementation_plan/implementation_guidelines.md §6)を
   見ながら都度足すこと。
   ============================================================ */

/* 1. Webフォント(必ず先頭に置く) */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;900&display=swap');

/* 2. ブランド変数 —— 案件で書き換えるのはここだけ */
:root {
  /* brand(ロゴから抽出) */
  --brand-pink:      #F4B0B7;
  --brand-pink-d:    #E8919B;
  --brand-pink-pale: #FDE9EC;
  --brand-yellow:    #FAF39C;
  --brand-yellow-d:  #F2E35E;
  --brand-blue:      #C2E4F8;
  --brand-blue-d:    #9ED3F0;
  --brand-line:      #988E89;
  --brand-paper:     #FFF9F2;
  --brand-text:      #5C4B46;

  /* semantic(標準UI・モジュールが参照する) */
  --header-bg-color:   rgba(255, 249, 242, .92);
  --header-name-color: var(--brand-pink-d);
  --header-line-color: rgba(152, 142, 137, .3);
  --top-bg-color:      var(--brand-paper);
  --top-text-color:    var(--brand-text);
  --top-line-color:    var(--brand-yellow-d);
  --btn-bg-color:      var(--brand-pink-d);
  --btn-text-color:    #ffffff;
  --footer-bg-color:   var(--brand-pink);
  --footer-text-color: #6b3a41;
}

/* 3. フォント標準化(eventosはデフォルトが太字)
   ※ eventos は内側の .v-application--wrap に既定フォントを再指定するため、
      body/.v-application だけでは中身に届かない(実証済み)。コンテンツ要素へ
      詳細度(0,1,1)以上で直接当てる。アイコン(<i>/.v-icon/mdi/material)は除外。 */
body,
.v-application,
.v-application--wrap {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
  font-weight: normal;
}
.v-application--wrap p, .v-application--wrap a, .v-application--wrap li,
.v-application--wrap td, .v-application--wrap th, .v-application--wrap dd, .v-application--wrap dt,
.v-application--wrap h1, .v-application--wrap h2, .v-application--wrap h3,
.v-application--wrap h4, .v-application--wrap h5, .v-application--wrap h6,
.v-application--wrap button, .v-application--wrap input, .v-application--wrap textarea, .v-application--wrap label,
.v-application--wrap span:not(.v-icon):not([class*="icon"]):not([class*="mdi"]):not([class*="material"]),
.v-application--wrap div:not([class*="icon"]):not(.v-icon) {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif !important;
}
.v-application--wrap p { line-height: 1.8; }

/* 4. 背景 */
.widget__wrap {
  background-color: var(--brand-paper) !important;
  color: var(--brand-text);
}

/* 5. 標準UIのテーマ上書き(お知らせ等の標準機能を後から足しても浮かないように) */
.widget-title__text { color: var(--brand-pink-d) !important; }
.widget-header__border, .widget-title__border { border-color: var(--top-line-color) !important; }
.widget__header__event, .v-btn__content { color: var(--brand-pink-d) !important; }

/* 標準ヘッダー(850px以下でheader.htmlから標準へ切替。§6-3準拠) */
.header__wrap, .header__content,
.header-logo__wrap, .header-logo__image-pc, .header-logo__image-sp,
.header-tab__wrap, .header-tab__pc, .header-tab__menu, .header-tab__sp,
.header-tab__wrap .v-tabs, .header-tab__wrap .v-tabs-bar,
.header-tab__wrap .theme--light.v-tabs-bar {
  background-color: var(--header-bg-color) !important;
}
.header-tab__name, .header__wrap .menu__name { color: var(--header-name-color) !important; }
.header-tab__wrap { border-color: var(--header-line-color) !important; }

/* 6. 標準UIの消し込み */
.top-button__wrap { display: none; }             /* 最上部に戻るボタン */
p.portal-event-top { display: none !important; } /* イベントトップに戻る */

/* ============================================================
   7. 自作パーツ(HTMLモジュール共通で使うもの)
   ============================================================ */
.kh-section-title {
  text-align: center;
  font-size: 1.4em;
  font-weight: 900;
  color: var(--brand-pink-d);
  margin: 0 0 1em;
  position: relative;
}
.kh-section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  background: var(--brand-yellow-d);
  border-radius: 4px;
  margin: .5em auto 0;
}

@media screen and (max-width: 640px) {
  .kh-section-title { font-size: 1.2em; }
}