@charset "UTF-8";
:root {
/*---------------------------------------------
  コンテンツ幅
  ---------------------------------------------*/
  --max-content-width: 85rem;
  --min-content-width: 20rem;

/*---------------------------------------------
  カラム間
  ---------------------------------------------*/
  --col-space-wide: 4.861111svw;
  --col-space-pc: 4.861111svw;
  --col-space-sp: 1rem;

  --col-space-wide-gutter1: .3125rem;
  --col-space-pc-gutter1: .3125rem;
  --col-space-sp-gutter1: .3125rem;

  --col-space-wide-gutter2: 3.75rem;
  --col-space-pc-gutter2: 4.16666svw;
  --col-space-sp-gutter2: 1rem;

  --col-space-wide-gutter3: 3.75rem;
  --col-space-pc-gutter3: 4.16666svw;
  --col-space-sp-gutter3: 1rem;

/*---------------------------------------------
  要素のマージン
  ---------------------------------------------*/
  --elm-space-wide: 1.875rem;
  --elm-space-pc: 1.875rem;
  --elm-space-sp: 1.25rem;

/*---------------------------------------------
  固定ヘッダーの高さ
  ---------------------------------------------*/
  --fixed-header-height-pc: 5.625rem;
  --fixed-header-height-sp: 4.375rem;

/*---------------------------------------------
  パネルの高さ
  ---------------------------------------------*/
  --min-panel-height: 26.25rem;

/*---------------------------------------------
  角丸
  ---------------------------------------------*/
  /* ボタン */
  --radius-button: .3125rem;

  /* PC */
  --radius-box-pc: .625rem;
  --radius-panel-pc: .625rem;
  --radius-frame-pc: .625rem;

  /* SP */
  --radius-box-sp: .5rem;
  --radius-panel-sp: .5rem;
  --radius-frame-sp: .5rem;


/*---------------------------------------------
  色
  ---------------------------------------------*/
  /* 基本色 */
  --color-main: #00478f; /* Deep Blue */
  --color-accent:#f2646e; /* デフォルト：赤 */
  --color-sub1: #b2c473; /* デフォルト：黄緑 */
  --color-sub2: #efa55e; /* デフォルト：オレンジ */
  --color-sub3: #f79be5; /* デフォルト：ピンク */
  --color-sub4: #7e88e8; /* デフォルト：紫 */

  /* 無彩色  */
  --color-white: #fff;
  --color-light-gray: #f4f5f9;
  --color-gray: #e5e9e9;
  --color-dark-gray: #434c4d;
  --color-black: #000;

  /* 機能色 */
  --color-txt: #000; /* 基本文字色 */
  --color-note: #666; /* パネル日付等 */
  --color-placeholder: #bbb; /* プレースホルダー  */
  --color-link: #00478f; /* テキストリンク */
  --color-link-hover: #4670a7; /* テキストリンクホバー */


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

/* ----- フォントサイズ - px・rem変換変数 ----- */
  --f80px: 5rem;
  --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(--f32px);
  --fontsize-heading2: var(--f28px);
  --fontsize-heading3: var(--f24px);
  --fontsize-heading4: var(--f22px);
  --fontsize-heading5: var(--f20px);

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


/*---------------------------------------------
  行高さ
  ---------------------------------------------*/
/* ----- 基本 ----- */
  --lineheight-base: 2;
/* ----- コピー・パネル上・リスト等 ----- */
  --lineheight-subtext: 1.6;
/* ----- タグ・ラベル ----- */
  --lineheight-tag: 1;
/* ----- バッジ ----- */
  --lineheight-badge: 1.4;
/* ----- ページネーション ----- */
  --lineheight-pagination: 2.8125rem;

/* ----- 見出し ----- */
  --lineheight-heading1: 1.6;
  --lineheight-heading2: 1.6;
  --lineheight-heading3: 1.6;
  --lineheight-heading4: 1.6;
  --lineheight-heading5: 1.6;

/* ----- ボックス・枠・パネル見出し ----- */
  --lineheight-box-heading: 1.6;
  --lineheight-frame-heading: 1.6;
  --lineheight-panel-vertical-heading: 1.6;
  --lineheight-panel-horizontal-heading: 1.6;

/*---------------------------------------------
  .contentパディング
  ---------------------------------------------*/
  --content-padding-top: 6.25rem;
  --content-padding-bottom: 6.25rem;
  --modal-content-padding-top: .625rem;
  --modal-content-padding-bottom: .625rem;

}

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

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

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

  /* ----- .contentパディング(SP) ----- */
    --content-padding-top: 1.875rem;
    --content-padding-bottom: 1.875rem;

  /* ----- パネル (画像上) 見出し [PL1-1] -----（追加） */
    --font-panel-vertical-heading:var(--f16px);

  /* ----- パネル (画像横) 見出し 中サイズ [PL2-1-1-2]等 -----（追加） */
    --font-panel-horizontal-heading:var(--f16px); 
  
  /*---------------------------------------------
    パネルの高さ（追加）
    ---------------------------------------------*/
    --min-panel-height: 15rem;
  }
}