@charset "UTF-8";
/* 

========================================
◆ デザイン幅閾値
========================================

320px ~ 479px 
480px ~ 639px 
640px ~ 767px 
768px ~ 959px
960px ~ 1079px
1080px ~ 1279px
1280px ~ 1439px
1440px ~ 1679px
1680px ~ 2560px

デザイン限界: 320px ~ 2560px


========================================
◆ z-index
========================================

fixed-header-z-index: 9000;
fixed-nav-z-index: 8900;
global-footer-z-index: 8990;


========================================
◆ カラー構成
========================================

背景: #ffffff;

メインテキスト: #4d4d4d;
サブテキスト: #4d4d4d;

テーマカラー: #00325f;
テーマカラー: #0071bc;


========================================
◆ フォント
========================================

見出しフォント:
{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 700;
    font-style: normal;
}

本文フォント:
{
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
    font-style: normal;
}

装飾フォント:
{
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}


========================================
◆ 基準フォントサイズ
========================================

$base-font-size: 20px;

$body-font-size-pc: 17px;
$body-font-size-sp: 14px;


========================================
◆ transition設定
========================================

0.4s: 0.4s;

$hover-transition: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0s;
$hover-transition-rev: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0s;
$hover-transition-step-1: 0.2s cubic-bezier(0.4, 0, 1, 1) 0s;
$hover-transition-step-2: 0.2s cubic-bezier(0, 0, 0.6, 1) 0.2s;
$hover-transition-step-1-rev: 0.2s cubic-bezier(0, 0, 0.6, 1) 0.2s;
$hover-transition-step-2-rev: 0.2s cubic-bezier(0.4, 0, 1, 1) 0s;
$hover-transition-step-1-after: 0s 0.2s;
$hover-transition-after: 0s 0.4s;
$hover-transition-after-start: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0.4s;

$hover-transition-ease: 0.4s ease 0s;

$hover-opacity: 0.70;


0.6s: 0.6s;

$menu-transition: 0.6s cubic-bezier(0.2, 0, 0.8, 1) 0s;
$menu-transition-rev: 0.6s cubic-bezier(0.2, 0, 0.8, 1) 0s;
$menu-transition-step-1: 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
$menu-transition-step-2: 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s;
$menu-transition-step-1-rev: 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s;
$menu-transition-step-2-rev: 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
$menu-transition-step-1-after: 0s 0.3s;
$menu-transition-after: 0s 0.6s;


$disp-transition-time: 0.6s;



========================================
◆ ヘッダー高さ
========================================

$global-header-height-pc: 100px;
$global-header-height-sp: 50px;


*/


/* 

テーマのデザイン設定

 */
:root {
    /* 

    《 テーマカラー 》

    対応要素に set-color-theme-XX クラスをつけて適用

     */
    --themeval-color-theme-01: #00325f;
    --themeval-color-theme-02: #0071bc;
    --themeval-color-theme-03: #9abdd4;
    --themeval-color-theme-04: #ccc;
    --themeval-color-theme-05: #ccc;
    --themeval-color-theme-06: #ccc;
    --themeval-color-theme-07: #ccc;
    --themeval-color-theme-08: #ccc;
    --themeval-color-theme-09: #ccc;
    --themeval-color-theme-10: #ccc;
    --themeval-color-theme-11: #ccc;
    --themeval-color-theme-12: #ccc;
    --themeval-color-theme-13: #ccc;
    --themeval-color-theme-14: #ccc;
    --themeval-color-theme-15: #ccc;
    --themeval-color-theme-16: #ccc;
    --themeval-color-theme-17: #ccc;
    --themeval-color-theme-18: #ccc;
    --themeval-color-theme-19: #ccc;
    --themeval-color-theme-20: #ccc;

    --themeval-rgb-theme-01: 0, 50, 95;
    --themeval-rgb-theme-02: 0, 113, 188;
    --themeval-rgb-theme-03: 154, 189, 212;
    --themeval-rgb-theme-04: 204, 204, 204;
    --themeval-rgb-theme-05: 204, 204, 204;
    --themeval-rgb-theme-06: 204, 204, 204;
    --themeval-rgb-theme-07: 204, 204, 204;
    --themeval-rgb-theme-08: 204, 204, 204;
    --themeval-rgb-theme-09: 204, 204, 204;
    --themeval-rgb-theme-10: 204, 204, 204;
    --themeval-rgb-theme-11: 204, 204, 204;
    --themeval-rgb-theme-12: 204, 204, 204;
    --themeval-rgb-theme-13: 204, 204, 204;
    --themeval-rgb-theme-14: 204, 204, 204;
    --themeval-rgb-theme-15: 204, 204, 204;
    --themeval-rgb-theme-16: 204, 204, 204;
    --themeval-rgb-theme-17: 204, 204, 204;
    --themeval-rgb-theme-18: 204, 204, 204;
    --themeval-rgb-theme-19: 204, 204, 204;
    --themeval-rgb-theme-20: 204, 204, 204;
    /* 

    《 テキストカラー 》

     */
    --themeval-color-theme-text-black: #4d4d4d;
    --themeval-color-theme-text-white: #fff;
    /* 

    《 モノクロカラー 》

     */
    --themeval-color-theme-black: #4d4d4d;
    --themeval-color-theme-gray-01: #b3b3b3;
    --themeval-color-theme-gray-02: #ccc;
    --themeval-color-theme-gray-03: #ccc;
    --themeval-color-theme-gray-04: #ccc;
    --themeval-color-theme-gray-05: #ccc;
    --themeval-color-theme-gray-06: #ccc;
    --themeval-color-theme-gray-07: #ccc;
    --themeval-color-theme-gray-08: #ccc;
    --themeval-color-theme-gray-09: #ccc;
    --themeval-color-theme-gray-10: #ccc;
    --themeval-color-theme-white: #fff;
    /* 

    《 基本カラー 》

     */
    --themeval-color-theme-red: #e01;
    --themeval-color-theme-blue: #06b;
    --themeval-color-theme-green: #2a3;
    --themeval-color-theme-yellow: #fe0;
    --themeval-color-theme-orange: #fa0;
    --themeval-color-theme-violet: #b0d;
    --themeval-color-theme-purple: #c0b;
    --themeval-color-theme-magenta: #d09;
    --themeval-color-theme-cyan: #0ae;
    /* 

    《 ファイルカラー 》

     */
    --themeval-color-theme-file-pdf: #b10;
    --themeval-color-theme-file-word: #15b;
    --themeval-color-theme-file-excel: #184;
    --themeval-color-theme-file-powerpoint: #d53;
    --themeval-color-theme-file-zip: #eb4;
    --themeval-color-theme-img-jpeg: #27c;
    --themeval-color-theme-img-gif: #69a;
    --themeval-color-theme-img-png: #e15;
    --themeval-color-theme-img-webp: #6c9;
    /*

    《 使用フォント 》

    【 ゴシック体 推奨値 】
    "Noto Sans JP", '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    【 明朝体 推奨値 】
    "Noto Serif JP", '游明朝体', 'Yu Mincho', 'YuMincho', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif
    
    */
    --themeval-font-default: "Zen Kaku Gothic Antique", sans-serif;
    --themeval-font-sans: "Zen Kaku Gothic Antique", sans-serif;
    --themeval-font-serif: serif;
    --themeval-font-en: "Roboto Condensed", sans-serif;
    --themeval-font-weight-default: 500;
    /*

    《 コンテナサイズ設定 》
    
    */
    --themeval-container-width: 1100px;
    --themeval-container-width-narrow: 1000px;
    --themeval-container-width-wide: 1300px;
    --themeval-frame-container-width: 1400px;
    --themeval-max-display-width: 2560px;
    /*

    《 ブロック余白設定 》
    
    */
    --themeval-content-block-margin: 36px;
    --themeval-content-line-margin: 18px;
    --themeval-content-block-margin-sp: 24px;
    --themeval-content-line-margin-sp: 14px;
    /*

    《 フォントサイズ設定 》
    
    */
    --themeval-root-font-size: 20;
    --themeval-root-line-height: 2;
    --themeval-font-size-ex-small: 11;
    --themeval-font-size-small: 14;
    --themeval-font-size-normal: 18;
    --themeval-font-size-large: 21;
    --themeval-font-size-ex-large: 26;
    --themeval-font-size-ex-small-sp: 11;
    --themeval-font-size-small-sp: 12;
    --themeval-font-size-normal-sp: 14;
    --themeval-font-size-large-sp: 15;
    --themeval-font-size-ex-large-sp: 17;
    /*

    《 Transition設定 》
    
    */
    --themeval-hover-transition: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0s;
    --themeval-hover-transition-rev: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0s;
    --themeval-hover-transition-step-1: 0.2s cubic-bezier(0.4, 0, 1, 1) 0s;
    --themeval-hover-transition-step-2: 0.2s cubic-bezier(0, 0, 0.6, 1) 0.2s;
    --themeval-hover-transition-step-1-rev: 0.2s cubic-bezier(0, 0, 0.6, 1) 0.2s;
    --themeval-hover-transition-step-2-rev: 0.2s cubic-bezier(0.4, 0, 1, 1) 0s;
    --themeval-hover-transition-step-1-after: 0s 0.2s;
    --themeval-hover-transition-after: 0s 0.4s;
    --themeval-hover-transition-after-start: 0.4s cubic-bezier(0.2, 0, 0.8, 1) 0.4s;
    --themeval-hover-transition-ease: 0.4s ease 0s;
    --themeval-menu-transition: 0.6s cubic-bezier(0.2, 0, 0.8, 1) 0s;
    --themeval-menu-transition-rev: 0.6s cubic-bezier(0.2, 0, 0.8, 1) 0s;
    --themeval-menu-transition-step-1: 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
    --themeval-menu-transition-step-2: 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s;
    --themeval-menu-transition-step-1-rev: 0.3s cubic-bezier(0, 0, 0.6, 1) 0.3s;
    --themeval-menu-transition-step-2-rev: 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
    --themeval-menu-transition-step-1-after: 0s 0.3s;
    --themeval-menu-transition-first: 0.1s cubic-bezier(0.4, 0, 1, 1) 0s;
    --themeval-menu-transition-last: 0.1s cubic-bezier(0, 0, 0.6, 1) 0.5s;
    --themeval-menu-transition-after: 0s 0.6s;
    /*

    《 ホバー装飾 》
    
    */
    --themeval-hover-opacity: 0.70;
    /*

    《 ヘッダー高さ 》
    
    */
    --themeval-global-header-height: 90px;
    --themeval-global-header-height-pc: 90px;
    --themeval-global-header-height-sp: 55px;
}


