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

:root {
	--baseBlue: #254a84;
	--liteYellow: #ffc631;
	--readColor: #e9f0f5;
	--redColor: #b60000;
	--whiteColor: #fff;
	--pastelColor: #ffe399;
	--gray: #b2b2b2;
	--paleYellow: #fcfae3;
	--blue: #254a84;
	--yellow: #fff070;
	--orange: #f2a900;
	--black: #000;
	--headerTel: #ff6a14;
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body{
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

img[data-src] {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
img[data-src].loaded {
  opacity: 1;
}

.fb{
font-weight: 800;
}

.redTxt{
color: var(--redColor);
}

.headerArea{
grid-area: headerArea;
container-type: inline-size;
display: flex;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: var(--whiteColor);
}

.upperArea{
display: flex;
align-items: center;
width: 100%;
height: 40px;
}

.contentsArea{
grid-area: contentsArea;
container-type: inline-size;
}
.sideArea{
grid-area: sideArea;
display: none;
}
.footerArea{
grid-area: footerArea;
}

.headerCta{
display: none;
}

.containerAll{
display: grid;
grid-template-areas:
	"headerArea headerArea"
	"contentsArea contentsArea"
	"footerArea footerArea";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
margin: auto;
padding-top: 40px;
}

.visibilityHidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.marker {
background:linear-gradient(transparent 50%, rgba(250, 238, 0) 50%);
display: inline;
background-repeat: no-repeat;
background-size: 0% 100%;
transition:background-size 1.5s;
}
.marker.on {
background-size: 100% 100%;
}

.headerImg img{
width: 100%;
max-width: 1280px;
}


/* コンテンツCSS */

/* //コンテンツCSS/////////////// */

/* フッタCSS */
.footerArea{
padding: 1em 0;
background-color: var(--baseBlue);
color: var(--whiteColor);
text-align: center;
font-size: 12px;
}
/* //フッタCSS/////////////// */

@media (min-width: 1200px) {/* ウィンドウサイズ1200px以上////////////////////////////// */

	.upperArea{
	width: calc(100% - 359px);
	height: auto;
	}

	.headerCta{
	width: 359px;
	height: 90px;
	display: flex;
	flex-direction: row-reverse;
	}

	.headermail{
	width: 100px;
	font-size: 13px;
	}

	.headermail a{
	background-color: var(--baseBlue);
	color: var(--whiteColor);
	display: block;
	text-align: center;
	padding: 7px 0;
	text-decoration: none;
	}

	.headermail a:hover{

	}

	.headermail a.top{
	background-color: var(--redColor);
	border-bottom: solid 1px var(--whiteColor);
	padding: 8px 0;}


	.headertel{
	padding-top: 10px;
	width: 258px;
	font-size: 15px;
	background-color: var(--headerTel);
	color: var(--whiteColor);
	text-align: center;
	line-height: 1;
	border-right: solid 1px var(--whiteColor);
	}

	.headertelicon{
	vertical-align: text-bottom;
	}

	.headertelicon,
	.headertelnum{
	display: inline-block;
	margin: 8px 0 4px;
	}

	.headertelnum{
	font-size: 30px;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: bold;
	letter-spacing: 0.04em;
	}

	.headerteltxt{
	font-size: 11px;
	}


	.containerAll{
	grid-template-areas:
		"headerArea headerArea"
		"contentsArea sideArea"
		"footerArea footerArea";
	grid-template-columns: 1fr 358px;
	grid-template-rows: auto 1fr auto;
	padding-top: 90px;
	padding-bottom: 4em;
	}
	
	.sideArea{
	display: block;
	}
	
	#pardot_iframe{
	position: fixed;
	width: 358px;
	height: calc(100% - 100px);
	}
	
	#pardot_iframe iframe{
	height: calc(100% - 42px);
	}
		
	.footerArea{
	position: fixed;
	bottom: 0;
	margin-bottom: 0;
	width: 100%;
	}


}