/* ============================================================
   チョコサポ福井 — デザイントークン
   出所: https://chocosapo.com/fukui/ (WordPress + SWELL 2.16.0) の
        computedStyle 実測値。2026-08-30 取得。
        根拠は ../../_reference/2026-08-30-lp-fukui-capture.md §1
   方針: 本部LPの見た目を厳密に引き継ぐ。値を勝手に「調整」しない。
   ============================================================ */

:root{
  /* ---- ブランド ---- */
  --color_main:        #f4cf5f;              /* 山吹色。ブランド primary */
  --color_main_dark:   rgb(183,155,71);      /* ホバー・濃色 */
  --color_main_thin:   rgba(255,255,119,.05);
  --color_htag:        #f4cf5f;

  /* ---- 地色・文字 ---- */
  --color_text:        #333;
  --color_bg:          #fff;
  --color_content_bg:  #fff;
  --color_header_bg:   #fdfdfd;
  --color_header_text: #333;
  --color_footer_bg:   #f2e79f;              /* 淡黄 */
  --color_footer_text: #3f3f3f;
  --color_link:        #1176d4;

  /* ---- 罫線 ---- */
  --color_border:        hsla(0,0%,78%,.5);
  --color_border--table: #dcdcdc;
  --color_gray:          hsla(0,0%,78%,.15);
  --border01: solid 1px #f4cf5f;
  --border02: double 4px #f4cf5f;
  --border03: dashed 2px #0a0a0a;

  /* ---- アクセント ---- */
  --color_deep01: #e44141;  /* 赤 */
  --color_deep02: #3d79d5;  /* 青 */
  --color_deep03: #63a84d;  /* 緑 */
  --color_deep04: #f09f4d;  /* 橙 */
  --color_pale01: #fff2f0;
  --color_pale02: #f3f8fd;
  --color_pale03: #f1f9ee;
  --color_pale04: #fdf9ee;
  --color_faq_q:  #d55656;
  --color_faq_a:  #6599b7;
  --color_mark_yellow: #fcf69f;
  --color_mark_blue:   #b7e3ff;
  --color_mark_green:  #bdf9c3;
  --color_mark_orange: #ffddbc;
  --color_list_check:  #f4cf5f;
  --color_list_num:    #f4cf5f;
  --color_icon_announce:    #ffa537;
  --color_icon_announce_bg: #fff5f0;

  /* ---- タイポ ---- */
  --font_family: "游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --font_weight: 500;                        /* SWELL の本文既定 */
  --fz--root:    16px;
  --fz--content: 17px;
  --fz--small:   .9em;
  --fz--xs:      .75em;
  --fz--medium:  1.1em;
  --fz--large:   1.25em;
  --fz--huge:    1.6em;
  --fz--h2:      25.2px;                     /* PC実測値 */
  --lh:          1.8;

  /* ---- レイアウト ---- */
  --container_size: 800px;                   /* SWELL --container_size */
  --article_size:   750px;                   /* SWELL --article_size */
  --pad_container:  4vw;                     /* SWELL --swl-pad_container（〜959px）。
                                                960px以上は下部のメディアクエリで段階固定にする。
                                                vw のままだと画面が広いほど中身が痩せる。 */
  --block-margin:   2em;
  --box_padding:    1.5em;

  /* ---- 影 ---- */
  --box_shadow: 0 2px 4px rgba(0,0,0,.05), 0 4px 4px -4px rgba(0,0,0,.1);
  --btn_shadow: 0 2px 2px rgba(0,0,0,.1), 0 4px 8px -4px rgba(0,0,0,.2);
  --img_shadow: 0 2px 8px rgba(0,0,0,.1), 0 4px 8px -4px rgba(0,0,0,.2);
}

/* SP は SWELL の vw 基準に合わせる（--swl-fz--root: 3.6vw / --swl-fz--content: 4vw） */
@media (max-width: 599px){
  :root{
    --fz--root:    3.6vw;
    --fz--content: 4vw;
    --fz--h2:      5.6vw;
  }
}


/* --pad_container は SWELL では vw ではなく段階固定（aichi-benriya.com の computedStyle 実測）。
     〜959px    : 4vw
     960〜1199px: 32px
     1200px〜   : 48px
   .l-container の max-width は「コンテンツ幅 + padding×2」で組むため、
   この値が変わってもコンテンツ幅は常に --container_size（800px）に保たれる。 */
@media (min-width: 960px){
  :root{ --pad_container: 32px; }
}
@media (min-width: 1200px){
  :root{ --pad_container: 48px; }
}