@charset "utf-8";
/* CSS Document */


/* ========================================================

　Googleフォントをサブセット化してサーバーに設置

=========================================================== */

/*--- Zen Kaku Gothic New -----------------------------------------------------------------------------------------------------
	Light 300
	Regular 400
	Medium 500
	Bold 700
	Black 900
*/

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../fonts/ZenKakuGothicNew-Light.woff2") format("woff2"), url("../fonts/ZenKakuGothicNew-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../fonts/ZenKakuGothicNew-Regular.woff2") format("woff2"), url("../fonts/ZenKakuGothicNew-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../fonts/ZenKakuGothicNew-Medium.woff2") format("woff2"), url("../fonts/ZenKakuGothicNew-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../fonts/ZenKakuGothicNew-Bold.woff2") format("woff2"), url("../fonts/ZenKakuGothicNew-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Kaku Gothic New";
    src: url("../fonts/ZenKakuGothicNew-Black.woff2") format("woff2"), url("../fonts/ZenKakuGothicNew-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/*--- Shippori Mincho ---------------------------------------------------------------------------------------------------------
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	ExtraBold 800
*/

@font-face {
    font-family: "Shippori Mincho";
    src: url("../fonts/ShipporiMincho-Regular.woff2") format("woff2"), url("../fonts/ShipporiMincho-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Shippori Mincho";
    src: url("../fonts/ShipporiMincho-Medium.woff2") format("woff2"), url("../fonts/ShipporiMincho-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Shippori Mincho";
    src: url("../fonts/ShipporiMincho-SemiBold.woff2") format("woff2"), url("../fonts/ShipporiMincho-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Shippori Mincho";
    src: url("../fonts/ShipporiMincho-Bold.woff2") format("woff2"), url("../fonts/ShipporiMincho-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Shippori Mincho";
    src: url("../fonts/ShipporiMincho-ExtraBold.woff2") format("woff2"), url("../fonts/ShipporiMincho-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/*--- Noto Sans JP ------------------------------------------------------------------------------------------------------------
	Thin 100
	ExtraLight 200
	Light 300
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	ExtraBold 800
	Black 900
*/

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Thin.woff2") format("woff2"), url("../fonts/NotoSansJP-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-ExtraLight.woff2") format("woff2"), url("../fonts/NotoSansJP-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Light.woff2") format("woff2"), url("../fonts/NotoSansJP-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2"), url("../fonts/NotoSansJP-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Medium.woff2") format("woff2"), url("../fonts/NotoSansJP-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-SemiBold.woff2") format("woff2"), url("../fonts/NotoSansJP-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2"), url("../fonts/NotoSansJP-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-ExtraBold.woff2") format("woff2"), url("../fonts/NotoSansJP-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../fonts/NotoSansJP-Black.woff2") format("woff2"), url("../fonts/NotoSansJP-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/*--- Noto Serif JP -----------------------------------------------------------------------------------------------------------
	ExtraLight 200
	Light 300
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	ExtraBold 800
	Black 900
*/

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-ExtraLight.woff2") format("woff2"), url("../fonts/NotoSerifJP-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Light.woff2") format("woff2"), url("../fonts/NotoSerifJP-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Regular.woff2") format("woff2"), url("../fonts/NotoSerifJP-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Medium.woff2") format("woff2"), url("../fonts/NotoSerifJP-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-SemiBold.woff2") format("woff2"), url("../fonts/NotoSerifJP-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"), url("../fonts/NotoSerifJP-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-ExtraBold.woff2") format("woff2"), url("../fonts/NotoSerifJP-ExtraBold.woff") format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Black.woff2") format("woff2"), url("../fonts/NotoSerifJP-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ========================================================

　Font & Color Variables
　変数を更新すると、変数で指定してある各所すべてに適用・反映。

=========================================================== */

/* 基本フォント */
:root {
    --default-font: "Inter", sans-serif;
    --serif-font: "Shippori Mincho", serif;
}

/* グローバルカラー ／ サイト全体で使用。編集・更新するとサイト全体のカラースキームが変更される */
:root {
    --corp-color: rgba(194, 68, 43, 1.00);
    --text-color: rgba(51, 51, 51, 1.00);

    --white-color: rgba(255, 255, 255, 1.00);
    --black-color: rgba(0, 0, 0, 1.00);
    --gray-color-01: rgba(83, 83, 83, 1.00);
    --gray-color-02: rgba(100, 115, 125, 1.00);
    --gray-color-03: rgba(160, 160, 160, 1.00);
    --gray-color-04: rgba(185, 185, 185, 1.00);
    --gray-color-05: rgba(210, 210, 210, 1.00);
    --purple-color: rgba(135, 100, 175, 1.00);
    --red-color: rgba(230, 0, 18, 1.00);
    --orange-color: rgba(235, 95, 0, 1.00);
    --yellow-color: rgba(185, 170, 0, 1.00);

    --background-color: rgba(255, 255, 255, 1.00);
    --accent-color: rgba(0, 117, 169, 1.00); /* アンカー ほか */
    --surface-color: rgba(112, 128, 144, 1.00); /* カード、アイコン、ボックス、グローバル背景から分離させる要素など、セクション内のボックス化された要素の背景 */
    --contrast-color: rgba(248, 247, 245, 1.00); /* テキストシャドウなど、デフォルト背景色に対して読みやすさを確保 */
}


/* ========================================================

　アニメーション設定

=========================================================== */

/* フェード */
@keyframes fade {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/* 下からフェードイン0.5 */
@keyframes fadeUp05 {

    0% {
        opacity: 0;
        transform: translateX(0.5rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/* 下からフェードイン3.0 */
@keyframes fadeUp30 {

    0% {
        opacity: 0;
        transform: translateY(3.0rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ズームイン */
@keyframes zoomIn {

    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.15);
    }

}

/* ズームアウト */
@keyframes zoomOut {

    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.0);
    }

}

/* フッターロゴ */
@keyframes color-to-grayscale {

    0% {
        filter: grayscale(0%);
    }

    100% {
        filter: grayscale(100%);
    }

}


/* ナビゲーション背景 */
@keyframes navBg {

    0% {
        background-color: var(--white-color);
    }

    100% {
        background-color: var(--white-color);
    }

}

/* Scrollのライン */
@keyframes scrollLineUp {

    0% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    51% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

}

@keyframes scrollLineDown {

    0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
    }

    50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
    }

    51% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
    }

    100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
    }

}

/* プリローダー */
@keyframes preloader {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}



/* break point --------------------------------------------
    SP 375-499px
    SP 500-599px
    TB 600-767px
    TB 768-991px
    PC 992-1279px
    PC 1280-2560px
----------------------------------------------------------- */



/* ---- End of file --------------------------------------- */