/* =============================================================
   CAMMA theme — base.css
   リセット + :root トークン + タイポ基礎
   ============================================================= */

/* -------------------------------------------------------------
   スケーリング
   1920px 設計を vw ベースの rem で比例縮小する。1rem = 10px @1920px。
   Figma の px 値は全て「÷10 して rem」に変換して使うこと。
   PC専用のためメディアクエリは書かない。
   ------------------------------------------------------------- */
html { font-size: calc(100vw / 192); } /* 1rem = 10px @1920px */
body { overflow-x: hidden; font-size: 16px; }

/* -------------------------------------------------------------
   :root トークン
   後続エージェントはこのブロック自体を編集しない。
   Header/Footer 実装で判明した「共通で使う色」は --color-* として
   ここに追記してよい(今回追加した色は無し)。
   ------------------------------------------------------------- */
:root {
	/* 書体。Figma が指定する5書体のうち有償なのは Trajan Sans Pro のみで、
	   これを Cinzel で代替している。差し替える場合は --font-en の1行を変えればよい。 */
	--font-en:        'Cinzel', 'Trajan Sans Pro', serif;   /* ナビ・ラベル類(Trajan Sans Pro の無料代替) */
	--font-en-title:  'Libre Baskerville', serif;           /* セクション大見出し */
	--font-ja:        'Shippori Mincho', serif;             /* 和文・明朝(本文) */
	--font-ja-gothic: 'Zen Kaku Gothic New', sans-serif;    /* 和文・ゴシック(小見出し・定義リスト) */
	--font-sans:      'Inter', sans-serif;                  /* 日付・小ラベル */

	/* 色。各セクションのCSSで判明した実値をここに集約している。 */
	--color-text:        #000;
	--color-white:       #fff;
	--color-gray:        #c8c8c8; /* Access 背景 */
	--color-beige:       #f0e8d9; /* Introduction 背景 / Price 文字 */
	--color-brown:       #572a13; /* Price 背景 / Details 文字 */
	--color-brown-light: #815f4e; /* Details の細罫線・非アクティブドット */
	--color-brown-dark:  #542810; /* Introduction 縦組みテキスト */
	--color-cream:       #fcf7e0; /* Price 中央の縦罫線 */
	--color-green:       #44644c; /* Events 背景 */
}

/* -------------------------------------------------------------
   リセット
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p,
ul,
ol,
figure {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	vertical-align: bottom;
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* -------------------------------------------------------------
   タイポ基礎
   ------------------------------------------------------------- */
body {
	font-family: var(--font-ja);
	color: var(--color-text);
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------------
   SP スケーリング (SP土台フェーズで追加)
   ブレイクポイント 920px。390px設計を vw ベースの rem で比例拡大する。
   1rem = 10px @390px。SP Figma の px 値もPC同様「÷10 して rem」に変換して
   使うこと(920px以下でのみ有効。390〜920pxの間は比例拡大)。
   base.css への SP 対応はこのブロックのみ。:root トークン/リセットは
   ブレイクポイントに関わらず共通のため触らない。
   ------------------------------------------------------------- */
@media (max-width: 920px) {
	html { font-size: calc(100vw / 39); } /* 1rem = 10px @390px */
}


.fadein {
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
  transition-delay: 0.5s;
}
.fade-delay {
  transition-delay: 2s!important;
}

.fadein.is-active {
  /*要素を表示させる*/
  opacity: 1;
  visibility: visible;
}