@charset "utf-8";

/*********************************root*********************************/

:root {
--main-color :#1d2185; /*#ef4123 #b42d51*/
--second-color: #ebebeb;
--third-color: #737373;
--size-xxlarge: 4rem;
--size-xlarge: 2.4rem;
--size-large: 2rem;
--size-medium: 1.8rem;
--size-small: 1.6rem; 
--size-xsmall: 1.2rem; 
--weight-bold: 900;
--weight-medium: 600;
--weight-regular: 500;
--bottom-gap: 50px;
--side-gap: 0 30px;
--page-width: 800px;
}

/*********************************
カラー設定
*********************************/

.main-color {color: var(--main-color);}
.second-color {color: var(--second-color);}
.third-color {color: var(--third-color);}
.fourth-color {color: var(--fourth-color);}

/*********************************
テキストのベース設定
*********************************/

html {
	font-family: 'Noto Sans JP', sans-serif;
	color: #000;
	font-size: 62.5%;
}

p {font-size: 1.1rem;}

@media screen and (min-width: 768px) {
	p {font-size: var(--size-medium);}
}


/*********************************
ページ幅設定
*********************************/

main {
	padding-top: 12.5rem;/*header調整*/
}
.container {
	padding-bottom: var(--bottom-gap);
}
.content {
	margin: var(--side-gap);
}

/*********************************
PC表示
*********************************/

@media screen and (min-width: 768px) {
	body {
	max-width: var(--page-width);
	}
	.header {
	max-width: var(--page-width);
	max-height: 165px;
	}
	main {
	padding-top: 165px;/*header-height+30px*/
	}
}

.pop_up{
    display:none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(227, 246, 245, 0.6);
    z-index: 2;
}