@charset "UTF-8";
:root {
/*---------------------------------------------
  コンテンツ幅
  ---------------------------------------------*/
  --max-content-width: 1080px;
  --max-content-width-l: 1240px;
  --min-content-width: 320px;

/*---------------------------------------------
  カラム間
  ---------------------------------------------*/
  --col-space-wide: 40px;
  --col-space-pc: 3.336vw;
  --col-space-sp: 15px;

/*---------------------------------------------
  要素のマージン
  ---------------------------------------------*/
  --elm-space-wide: 16px;
  --elm-space-pc: 20px;
  --elm-space-sp: 15px;

/*---------------------------------------------
  固定ヘッダーの高さ
  ---------------------------------------------*/
  --fixed-header-height-pc: clamp(6.875rem, -8.125rem + 20vw, 8.125rem);
  --fixed-header-height-sp: 64px;

/*---------------------------------------------
  パネルの高さ
  ---------------------------------------------*/
  --min-panel-height: 260px;
  

/*---------------------------------------------
  ブラウザスクロールバーの幅
  ---------------------------------------------*/
  --scrollbar_w: 0;

/*---------------------------------------------
  角丸
  ---------------------------------------------*/
  /* ボタン */
  --radius-button: 100px;

  /* PC */
  --radius-box-pc: 6px;
  --radius-panel-pc: 15px;
  --radius-frame-pc: 6px;

  /* SP */
  --radius-box-sp: 6px;
  --radius-panel-sp: 10px;
  --radius-frame-sp: 0px;


/*---------------------------------------------
  色
  ---------------------------------------------*/
  /* 基本色 */
  --color-main: #0074be; /* SMKブルー */
  --color-accent: #e6021d; /* SMKレッド */
  --color-sub1: #f5f6f7; /* 背景グレー */
  --color-sub2: #77B3AA; /* 機能色：緑 */
  --color-sub3: #5D83C4; /* 機能色：ブルー1 */
  --color-sub4: #72B4DE; /* 機能色：ブルー2 */
  --color-sub5: #C69D9D; /* 機能色：くすみ赤 */
  --color-sub6: #AE9BC6; /* 機能色：紫 */
  --color-sub7: #9D9EB7; /* 機能色：ashy blue */
  --color-sub8: #E6EFF7; /* ブルーグレー3 */

  /* 無彩色  */
  --color-white: #fff;
  --color-light-gray: #f5f6f7; /* 背景グレー */
  --color-light-gray2: #edeff1; /* 背景グレー */
  --color-gray: #d5d7d9; /* ライングレー */
  --color-dark-gray: #737373; /* テキスト（薄） */
  --color-black: #000;
  --color-blue-gray: #445660; /* ブルーグレー */
  --color-blue-gray-light: #a9b8c2; /* ブルーグレー（明） */
  --color-main-light: #0D7CDE; /* SMKブルー（明） */
  --color-main-dark: #0B4366; /* SMKブルー（暗） */

  /* 機能色 */
  --color-txt: #454545; /* 基本文字色 */
  --color-note: #999; /* パネル日付等 */
  --color-placeholder: #bbb; /* プレースホルダー  */
  --color-link: #0074be; /* テキストリンク */
  --color-link-hover: #0074be; /* テキストリンクホバー */


/*---------------------------------------------
  フォントサイズ
  ---------------------------------------------*/

/* ----- フォントサイズ - px・rem変換変数 ----- */
  --f80px: 5rem;
  --f64px: 4rem;
  --f48px: 3rem;
  --f40px: 2.5rem;
  --f36px: 2.25rem;
  --f32px: 2rem;
  --f30px: 1.88rem;
  --f29px: 1.81rem;
  --f28px: 1.75rem;
  --f27px: 1.69rem;
  --f26px: 1.63rem;
  --f25px: 1.56rem;
  --f24px: 1.5rem;
  --f23px: 1.44rem;
  --f22px: 1.38rem;
  --f21px: 1.31rem;
  --f20px: 1.25rem;
  --f19px: 1.19rem;
  --f18px: 1.13rem;
  --f17px: 1.06rem;
  --f16px: 1rem;
  --f15px: .94rem;
  --f14px: .88rem;
  --f13px: .81rem;
  --f12px: .75rem;
  --f11px: .69rem;
  --f10px: .63rem;
  --f9px: .56rem;

/* ----- フォントサイズ - 強制指定文字サイズ ----- */
  --fontsize-xxxxl: var(--f80px);
  --fontsize-xxxl: var(--f32px);
  --fontsize-xxl: var(--f24px);
  --fontsize-xl: var(--f22px);
  --fontsize-l: var(--f20px);
  --fontsize-ml: var(--f18px);
  --fontsize-mm: var(--f16px);
  --fontsize-m: var(--f15px);
  --fontsize-ms: var(--f14px);
  --fontsize-s: var(--f13px);
  --fontsize-xs: var(--f12px);
  --fontsize-xxs: var(--f11px);
  --fontsize-xxxs: var(--f10px);
  --fontsize-xxxxs: var(--f9px);

/* ----- フォントサイズ - 見出し(PC) ----- */
  --fontsize-heading1: var(--f40px);
  --fontsize-heading2: var(--f32px);
  --fontsize-heading3: var(--f22px);
  --fontsize-heading4: var(--f20px);
  --fontsize-heading5: var(--f18px);

/* ----- フォントサイズ - ボックス 見出し [BX1-2] ----- */
  --fontsize-box-heading:var(--f18px);
/* ----- 枠 見出し [FR1-2] ----- */
  --font-frame-heading:var(--f18px);
/* ----- パネル (画像上) 見出し [PL1-1] ----- */
  --font-panel-vertical-heading:var(--f15px);
/* ----- パネル (画像横) 見出し 中サイズ [PL2-1-1-2]等 ----- */
  --font-panel-horizontal-heading:var(--f18px);
/* ----- パネル (画像横) 見出し　大サイズ [PL2-2-5-2]等 ----- */
  --font-panel-horizontal-heading1:var(--f24px);
}

@media screen and (max-width: 1199px), print {
  :root {
  /* ----- 基本フォントサイズ(タブレット) ----- */
    --fontsize-tablet: var(--f16px);
  }
}

@media screen and (max-width: 767px) {
  :root {
  /* ----- 基本フォントサイズ(SP) ----- */
    --fontsize-sp: var(--f16px);

  /* ----- フォントサイズ - 見出し(SP) ----- */
    --fontsize-heading1: var(--f32px);
    --fontsize-heading2: var(--f26px);
    --fontsize-heading3: var(--f22px);
    --fontsize-heading4: var(--f18px);
    --fontsize-heading5: var(--f16px);
  }
}