/* ============================================================
   おでかけ告知キット  odekake.css  ― 夢吉出版（yumekichi.net）用
   ------------------------------------------------------------
   告知の中身と日付は odekake.js のほうで設定します。
   ここは見た目だけです。ふだんは触らなくて構いません。
   ============================================================ */

:root {
  --odekake-bg:        #fdf7f2;   /* 告知バーの地の色（guide-box と同じ） */
  --odekake-border:    #f0e2d4;   /* ふちの色 */
  --odekake-accent:    #e67e22;   /* 左端の太い線（サイトのアクセント色） */
  --odekake-text:      #333;      /* 文字の色（本文と同じ） */
  --odekake-link:      #a8530d;   /* リンクと注記の色（薄い地でも読める濃さ） */
  --odekake-radius:    10px;      /* 角のまるさ（guide-box と同じ） */
  --odekake-font-size: 1rem;      /* 文字の大きさ */
  --odekake-width:     1000px;    /* 横幅（container と同じ） */
}

/* 置き場所そのものは、中身が無いあいだ完全に無いものとして扱う */
[data-odekake]:empty { display: none; }
/* span で置いた場合も、中身が入ったらブロックとして扱う */
span[data-odekake]:not(:empty) { display: block; }

.odekake-bar {
  background: var(--odekake-bg);
  border: 1px solid var(--odekake-border);
  border-left: 5px solid var(--odekake-accent);
  border-radius: var(--odekake-radius);
  padding: 16px 20px;
  margin: 20px auto;
  max-width: var(--odekake-width);
  font-size: var(--odekake-font-size);
  line-height: 1.8;
  color: var(--odekake-text);
  text-align: left;
}
.odekake-bar p { margin: 0; }
.odekake-bar a {
  color: var(--odekake-link);
  text-decoration: underline;
  font-weight: bold;
}

.odekake-note {
  color: var(--odekake-link);
  font-size: calc(var(--odekake-font-size) - 0.05rem);
  line-height: 1.7;
  margin: 10px 0 0;
  text-align: left;
}

.odekake-legal {
  display: block;
  margin-top: 8px;
  color: var(--odekake-link);
}

@media (max-width: 600px) {
  .odekake-bar {
    margin: 14px 12px;
    padding: 13px 15px;
  }
}


/* ============================================================
   ここから下は、夢吉出版のサイト特有の事情に合わせた調整です。

   トップページのヘッダーは position:fixed（高さ190px）で浮いていて、
   すぐ下の .hero が margin-top:190px でその分を空けています。
   告知バーをその上に置くと、そのままではヘッダーの下に潜り込むので、
   「告知が出ているときだけ」空けぶんを告知バーのほうへ移します。

   告知が出ていないとき（置き場所が空のとき）は、この指定はどれも
   効きません。ふだんのページはいっさい変わりません。
   ============================================================ */

[data-odekake="bar"]:not(:empty) {
  margin-top: 190px;   /* 固定ヘッダーの高さぶん */
}
[data-odekake="bar"]:not(:empty) + .hero {
  margin-top: 0;       /* 空けぶんは告知バーが引き受けたので、ここは0 */
}

@media (max-width: 950px) {
  /* この幅からヘッダーは position:static になり、浮かなくなる */
  [data-odekake="bar"]:not(:empty) { margin-top: 20px; }
  [data-odekake="bar"]:not(:empty) + .hero { padding-top: 20px; }
}