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


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

　Global Setting

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    scroll-behavior: smooth;
}

/*　ページ内でテキスト等を選択したときの背景色
----------------------------------------------------------- */
*::selection {
    background-color: var(--gray-color-04);
}

/*　プレイスホルダー
----------------------------------------------------------- */
*::placeholder {
    opacity: 0.7;
    font-weight: 300;
    transition: 0.3s
}

/*　フォーカス時にプレースホルダーを擬似的に非表示にする */
*:focus::placeholder {
    opacity: 0;
}


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

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

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

/*--- 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;
}

/*--- Poppins ----------
	Thin 100
	ExtraLight 200
	Light 300
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	ExtraBold 800
	Black 900
*/
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Thin.woff2") format("woff2"), url("../fonts/Poppins-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Thin.woff2") format("woff2"), url("../fonts/Poppins-Thin.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

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

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

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

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

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

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


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

　Variables（変数）
　※CSS内に散見する同じ記述を変数で一括指定する。それにより、変数の値を編集すればCSS内のすべての該当箇所に同じ値が反映する。メンテナンスの効率化。

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

/*　Fonts
----------------------------------------------------------- */
:root {
    --font-sans: "Noto Sans JP", sans-serif;
    --font-serif: "Noto Serif JP", serif;
    --font-head: "Poppins", sans-serif;
}

/*　Global Colors（ウェブサイト全体に適用）
----------------------------------------------------------- */
:root {
    --corporate-color: rgba(0, 149, 79, 1.00);

    --text-color: rgba(35, 24, 21, 1.00);
	--heading-color: rgba(122, 106, 86, 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(138, 138, 166, 1.00);
	--gray-color-03: rgba(159, 160, 160, 1.00);
	--gray-color-04: rgba(166, 166, 166, 1.00);
	--gray-color-05: rgba(220, 220, 220, 1.00);
	--gray-color-06: rgba(247, 247, 247, 1.00);
    --red-color-01: rgba(164, 0, 0, 1.00);
    --red-color-02: rgba(230, 0, 18, 1.00);
	--green-color: rgba(143, 195, 31, 1.00);
	--blue-color: rgba(150, 180, 200, 1.00);
	
    --background-color: rgba(255, 255, 255, 1.00);
    --accent-color: rgba(235, 97, 0, 1.00); /* オレンジ（ボタン、リンク、その他目立つ必要のある要素に適用 */
    --surface-color: rgba(201, 160, 99, 1.00); /* ブラウン（カード、アイコンボックス、またはグローバル背景から視覚的に分離する必要があるその他の要素などに適用 */
    --contrast-color: rgba(239, 239, 239, 1.00); /* グレー（テキストの色のコントラストにより、アクセント、見出し、またはデフォルトの色の背景に対して読みやすさを確保） */
}

/*　Other
----------------------------------------------------------- */
:root {}


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

　Animation Sets

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

/* Fade in */
@keyframes fadeIn {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/* Fade out */
@keyframes fadeOut {

    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }

}

/* Slide in */
@keyframes colorIn {

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

    50% {
        background-color: var(--green-color);
    }

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

}

/* Zoom in */
@keyframes zoomIn {

    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.15);
    }

}

/* Zoom out */
@keyframes zoomOut {

    0% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1.0);
    }

}



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



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