:root{

  /* ===============================================
    * Color *
  =============================================== */

  /* General */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent: #b5d2e5;
  --color-gray: #808080;
  --color-lightgray: #B3B3B3;
  --color-blue: #b5d2e5;
  --color-aqua: #4D89A3;


  /* Campaign Icon */
  --color-icon1: #d8a9a9;
  --color-icon2: #97b8d3;
  --color-icon3: #97b8d3;
  --color-icon4: #d6a092;
  --color-icon5: #97b8d3;
  --color-icon6: #97b8d3;/*確認*/
  --color-icon7: #9dc4bc;
  --color-icon8: #97b8d3;/*確認*/
  --color-icon9: #97b8d3;


  /* Ranking */
  --color-ranking1: #ED87AA;
  --color-ranking2: #85B7B2;
  --color-ranking3: #E1AF00;
  --color-ranking: #B3B3B3;


  /* Specify */
  --color-brand-primary: #977547; /* 濃い茶色　ボタンの背景やテキスト */
  --color-brand-secondary: #A0917C; /* 薄い茶色　面積広めの箇所の背景 */
  --color-brand-accent: #333; 
  --color-font-default: #333; /* 基本となるフォントの色 */
  --color-font-point: #7C1F2D; /* 強調する赤　※Shop Listのオープン日など */

  --color-bg-1: #F0EDE5; /* 背景色　少し濃い */
  --color-bg-2: #EFEFEF; /* 背景色　薄い */


  /* ===============================================
    * Font *
  =============================================== */

  /* Font Family */
  --font-effra: effra, sans-serif;
  --font-orpheus: orpheuspro, serif;
  --font-noto: "Noto Sans JP";
  --font-ja: var(--font-noto), sans-serif;
  --font-main: effra, var(--font-noto), sans-serif;

  /* Font Weight */
  --fontweight-thin: 100;
  --fontweight-regular: 400;
  --fontweight-medium: 500;
  --fontweight-semibold: 600;
  --fontweight-bold: 700;
  --fw-thin: 100;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Font Size | 2026/07/31 追加 */
  --font-size-min-pc: 1.3rem;
  --font-size-min-sp: calc(22 * 100vw / 750);


  /* ===============================================
    * Animation *
  =============================================== */

  /* Transition */
  --transition-duration-default: 500ms;
  --transition-timing-function: ease;
  --transition-default: var(--transition-duration-default) var(--transition-timing-function); /* transition-property は適宜設定してください */


  /* Opacity */
  --opacity-hover: .7;




  /* ===============================================
    * z-index *
  =============================================== */

  /* General */
  --zindex-behind: -10;
  --zindex-middle: 0;
  --zindex-front: 10;


  /* Specify */
  --zindex-header: 50;
  --zindex-header-bg: 30;
  --zindex-drawer: 90; /* メガメニューやハンバーガーメニュー向け */
  --zindex-modal: 100;




  /* ===============================================
    * Others *
  =============================================== */

  /* Header */
  --header-height: 170px;


  /*
   * Box Contents
   *
   * 主にトップページで使用しています。
   * 角丸＆影付き要素のスタイルです。
   */
  --drop-shadow-default: 0 1px 3px rgba(0, 0, 0, .16);
  --drop-shadow-hover: 0 1px 6px rgba(0, 0, 0, .24);
  --border-radius-default: 12px;

}


@media (max-width: 767px) {
  :root {
    --border-radius-default: 6px;
  }
}