@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap');

/*************************************************************
    /css/default.css
**************************************************************
1) html, body, section
2) flexbox
3) img
4) a
5) fonts
6) background-color
7) pcOnly, spOnly
8) newContainer
-------------------------------------------------------------*/


/* 1) html, body, section
-------------------------------------------------------------*/
html {
	font-size: 62.5%;
}
body {
	position: relative;
	line-height: 1.65;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-weight: 400;
	color: #555;
}
section {
	position: relative;
}
@media screen and (max-width:769px) {
	body {
		font-size: 1.6rem;
	}
}
@media screen and (min-width:770px) {
	body {
		font-size: 1.7rem;
	}
}

/* 2) flexbox
-------------------------------------------------------------*/
.flexbox {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@media screen and (min-width:770px) {
	.pcFlexbox {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
	}
}

/* 3) img
-------------------------------------------------------------*/
img {
	max-width: 100%;
	vertical-align: top;
}
.bgImg {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/* 4) a
-------------------------------------------------------------*/
a {
	color: #555;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	transition: 0.3s linear;
}
.btn {
	line-height: 56px;
	text-align: center;
}
.btn a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	background-color: #0070b2; 
	color: #fff;
	border-radius: 28px;
	text-decoration: none;
}
.btn a:hover {
	background-color: #111d39; 
}
@media screen and (min-width: 770px) {
	.btn {
		line-height: 60px;
	}
	.btn a {
		font-size: 2rem;
		border-radius: 30px;
	}
}

/* 電話番号スマホのみリンク */
@media screen and (min-width: 751px) {
	a[href^="tel:"] {
    	pointer-events: none;
		cursor: default;
	　text-decoration: none;
	}
}

/* 5) fonts
-------------------------------------------------------------*/
.sans-serif {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.serif {
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
}
.f_400 {
	font-weight: normal;
	font-weight: 400;
}
.f_500 {
	font-weight: normal;
	font-weight: 500;
}
.f_600 {
	font-weight: bold;
	font-weight: 600;
}
.f_700 {
	font-weight: bold;
	font-weight: 700;
}
.logoBlue { color: #0070b2; }
.navy { color: #111d39; }
.gold { color: #918969; }
.nowrap { white-space:nowrap }
.note {
	text-indent: -0.9em;
	padding-left: 0.9em;
}
@media screen and (max-width:769px) {
	.serif {
		font-weight: 500;
	}
	.sp_15rem,
	.note {
		font-size: 1.5rem
	}
}

/* 6) background-color
-------------------------------------------------------------*/
.bg_logoBlue { background-color: #0070b2; color: #fff; }
.bg_navy { background-color: #111d39; color: #fff; }
.bg_gold { background-color: #918969; color: #fff; }
.bg_beige { background-color: #ebeae4; }
.bg_lightBeige { background-color: #f7f6f3; }
.bg_lightBlue { background-color: #f0f6fa; }

/* 7) pcOnly, spOnly
-------------------------------------------------------------*/
@media screen and (max-width:769px) {
	.pcOnly {
		display: none;
	}
}
@media screen and (min-width:770px) {
	.spOnly {
		display: none;
	}
}

/* 8) newContainer
-------------------------------------------------------------*/
@media screen and (max-width:699px) {
	.newContainer {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (min-width:700px) and (max-width:769px) {
	.newContainer {
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media screen and (min-width:770px) {
	.newContainer {
		padding-left: 50px;
		padding-right: 50px;
	}
}