@charset "UTF-8";

/* 
【命名規則の法則】
  --[階層1]-[階層2]-[階層3]

  階層1(カテゴリー・大きな分類):
  brand(サイトアイデンティティ), global(サイト全体で共通のもの), 
  typo(文字関連), btn(ボタン),
  
  階層2(重要度・バリエーション・状態): 
  primary(主要な), main(基本), accent(アクセント), sub(サブ的な), lead(見出し),
  alert(注意), notice(知らせる), ghost(控えめ), thin(薄い), thick(濃い), secondary(第二の), alt(色違いや別パターン)
　md-up(PCサイズ768px以上), md-under(スマホサイズ未満), 
  bs-main(bootstrapのmain), bs-alt(bootstrapのalt), bs-thin(bootstrapのthin),
  link, hover, active, delete, bi(アイコン),
  user, seller, affiliator,
  
  階層3(プロパティ・詳細): 
  font(font-family), fs(font-size), fw(font-weight), c(color), lh(line-height), 
  ls(letter-spacing), op(opacity), ts(transition speed/time),
  bg(background), br(border-radius),
  bw(border-width), border, pad(padding),
*/

:root {

/* --- テーマカラー --- */
--brand-primary-c: #363636;
--brand-accent-c: #fcfbe5;
--brand-active-c:#22addb; /*リンクの青*/
--brand-alert-c: #ff5b5a; /*ポイントの赤, ハコちゃんのワンピース*/
--brand-user-c: #ffd476;
--brand-seller-c: #56eebb;
--brand-affiliator-c: #ffb2c8;
--global-sub-c:#aaaaaa;
--global-main-bg: #ffffff;
--global--main-md-under-bg:#c6c6c6;
--global-hover-bg: #d3d4d5;
--global-accent-bg: url(/img/bg_accent.png);
--global-secondary-c: #e5e5e5;
--global-alert-bg: #fceeee;
--global-notice-c: #fff8b7;
--global-lead-c: #aef2ff;
--global-notice-hover-c: #e2dca6;
--global-delete-bg: #707070;
--global-thick-bg: #000000;
--global-bs-main-c: #dee2e6;
--global-bs-main-bg: #f8f9fa;

/* --- タイポグラフィ --- */
--typo-main-font: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

--typo-main-fs: 16px;
--typo-sub-fs: 0.9rem;
--typo-secondary-fs: 0.8rem;
--typo-ghost-fs: 0.75rem;
--typo-lead-fs: 1.1rem;
--typo-lead-md-under-fs: 1.2rem;
--typo-bi-fs: 1.3rem;

--typo-main-lh: 1.5;

--typo-main-c: #555555;
--typo-sub-c: #aaaaaa;
--typo-alert-c: #ff5b5a;
--typo-user-c:#ff9c00;
--typo-seller-c:#2ddaa0;
--typo-affiliator-c:#fa84a6;

/* --- リンク --- */
--brand-link-c: #22addb; /*リンクの青*/ 
--brand-link-hover-c: #14557b;

/* --- 汎用的な動きの設定 --- */
--global-hover-op: 0.6;        /* ホバー時の透明度 */
--global-transition-ts: 0.3s;  /* アニメーションの速度 */

/* --- ボタン --- */
--btn-main-fw: bold;
--btn-main-ls: 0.1rem;
--btn-main-pad: 10px 20px;
--btn-sub-fw: normal;
--btn-sub-pad: 5px 8px;

/* --- 装飾ルール --- */
--global-primary-bw: 2px;
--global-sub-bw: 1px;
--global-alt-bw: 3px;

--global-main-border: var(--global-primary-bw) solid var(--brand-primary-c);
--global-sub-border: var(--global-sub-bw) solid var(--brand-primary-c);
--global-link-border: var(--global-sub-bw) solid var(--brand-link-c);
--global-accent-border: var(--global-primary-bw) dotted var(--global-hover-bg);
--global-alt-border: var(--global-alt-bw) double var(--global-sub-c);  /* h3, .btn_ghost, .btn_notice*/
--global-ghost-border: var(--global-sub-bw) solid var(--global-sub-c);
--global-thin-border: var(--global-sub-bw) dashed var(--global-sub-c);  /*.colum_left h4 , .colum_right #sm_information_list, #bookmarkModal .card-body, .btn_thin*/
--global-secondary-border: var(--global-primary-bw) solid var(--global-secondary-c);
--global-alert-border: var(--global-alt-bw) double var(--brand-alert-c);  /*投稿フォームの.notes*/

--global-bs-main-border: var(--global-sub-bw) solid var(--global-bs-main-c);  /*bootstrapのグレーの細い線*/
--global-bs-alt-border: var(--global-alt-bw) double var(--global-bs-main-c);  /*bootstrapのグレーの細い二重線*/
--global-bs-thin-border: var(--global-sub-bw) dashed var(--global-bs-main-c);  /*bootstrapのグレーの細い点線*/

--global-user-border: var(--global-primary-bw) solid var(--brand-user-c);
--global-seller-border: var(--global-primary-bw) solid var(--brand-seller-c);
--global-affiliator-border: var(--global-primary-bw) solid var(--brand-affiliator-c);

--global-main-br: 0;
--global-accent-br: 9999px; /*カプセル状の半円*/
--global-main-pad: 10px;

}