/*---common.css---*/

@font-face {
	font-family: "NotoSansCJKjp-Jxck";
	font-style: normal;
	font-weight: 400;
	src: local("NotoSansCJKjp-Regular.otf"),
		local("NotoSansJP-Regular.otf"),
		url("../font/NotoSans_regular.woff") format("woff");
}

@font-face {
	font-family: "NotoSansCJKjp-Jxck";
	font-style: bold;
	font-weight: 700;
	src: local("NotoSansCJKjp-Bold.otf"),
		local("NotoSansJP-Bold.otf"),
		url("../font/NotoSans_bold.woff") format("woff");
}

body {
	background-color: #fff;
	font-family: "Noto Sans", "Noto Sans CJK JP", "NotoSansCJKjp-Jxck", sans-serif;
	line-height: 1.7;
	color: #303839;
	margin: 0;
	padding: 0;
	background-color: #FFF;
	font-feature-settings: "palt";
}

img,
p {
	margin: 0;
	padding: 0;
}

a {
	color: #00a8b8;
	transition: color .5s;
}

section {
	position: relative;
}

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

/******************************************
header
******************************************/

#hnaviBG {
	display: none;
}

#hnavi {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 82px;
	margin: 0;
	padding: 15px 0 0 0;
	background-color: #FFF;
	border-top: 10px solid #00a8b8;
	z-index: 10;

	opacity: 1;
	transition: transform .5s;
	transition-delay: .1s;
}

#hnavi.hide {
	transform: translateY(-110%);
}

#hnaviBG {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #0ac0c9;
	transition: .2s;
	height: 150px;
}

#hnaviBG.hide {
	transform: translateY(-100%);
}

#hnavi .logo {
	position: absolute;
	left: 0;
	top: 13px;
	height: 82px;
	text-align: left;
	padding: 5px 0 0 20px;
}

#hnavi .logo img {
	width: 150px;
}

@media screen and (min-width: 1025px) {
	#hnavi {
		z-index: 999;
		height: auto;
		min-height: 90px;
	}

	#hnavi .logo {
		left: 0;
		top: 25px;
	}

	#hnavi .logo img {
		width: 208px;
	}
}

/******************************************
container
******************************************/

#container {
	width: 100%;
	margin: 100px auto 0 auto;
}

/******************************************
footer
******************************************/

#footer {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 2em 0 2em 0;
	background-color: #FFF;
	text-align: center;
}

#footer .copyright {
	font-size: 0.7rem;
}

#footer ul.company {
	display: flex;
	justify-content: center;
	padding: 0 0 3em 0;
}

#footer ul.company li {
	padding: 0 10px;
	list-style: none;
	font-size: 0.9rem;
	line-height: 1;
}

#footer ul.company li a {
	text-decoration: underline;
	color: #666;
	transition: 0.2s;
}

#footer ul.company li a:hover {
	color: #53daf9;
}

/******************************************
page-top
******************************************/
.page-top {
	position: fixed;
	bottom: 80px;
	right: 20px;
	width: 40px;
	height: 40px;
	opacity: 0.8;
}

.page-top img {
	width: 100%;
}

@media screen and (min-width: 1025px) {
	.page-top {
		bottom: 30px;
		right: 10px;
	}
}

/******************************************
module
******************************************/

.textAlignCenter {
	text-align: center;
}

.textAlignRight {
	text-align: right;
}
.paddingTop {
	padding-top: 2em !important;
}

.paddingTop_s {
	padding-top: 0.8em !important;
}

.paddingTop_l {
	padding-top: 4em !important;
}

.paddingLeft {
	padding-left: 2em !important;
}

.paddingLeft_s {
	padding-left: 0.8em !important;
}

.paddingLeft_l {
	padding-left: 4em !important;
}

.marginRight {
	margin-right: 2em !important;
}

.marginLeft_s {
	margin-left: 0.8em !important;
}

.marginBottom {
	margin-bottom: 2em !important;
}

.marginBottom_s {
	margin-bottom: 0.8em !important;
}

.marginBottom_m {
	margin-bottom: 3em !important;
}

.marginBottom_l {
	margin-bottom: 4em !important;
}

.marginBottom_xl {
	margin-bottom: 3em !important;
}

.marginBottom_xxl {
	margin-bottom: 5em !important;
}

.fontcolorFFF{
	color: #FFF !important;
}

.fontsizeSS{
	font-size: 0.75rem !important;
}
.fontsizeS{
	font-size: 0.89rem !important;
}
.fontsizeM{
	font-size: 1rem !important;
}
.fontsizeL{
	font-size: 1.13rem !important;
}

@media screen and (min-width: 1025px) {
	.paddingTop {
		padding-top: 2em !important;
	}

	.paddingTop_s {
		padding-top: 0.8em !important;
	}

	.paddingTop_l {
		padding-top: 4em !important;
	}

	.paddingLeft {
		padding-left: 2em !important;
	}

	.paddingLeft_s {
		padding-left: 0.8em !important;
	}

	.paddingLeft_l {
		padding-left: 4em !important;
	}

	.marginRight {
		margin-right: 2em !important;
	}

	.marginBottom {
		margin-bottom: 2em !important;
	}

	.marginBottom_s {
		margin-bottom: 0.8em !important;
	}

	.marginBottom_l {
		margin-bottom: 4em !important;
	}

	.marginBottom_xl {
		margin-bottom: 7em !important;
	}

	.marginBottom_xxl {
		margin-bottom: 9em !important;
	}
}

/* br */

.lbr {
	display: none;
}

.sbr {
	display: block;
}

@media screen and (min-width: 1025px) {
	.sbr {
		display: none;
	}

	.lbr {
		display: block;
	}
	.mbbr{
		display: block;
	}
}
@media screen and (max-width: 768px) {
	.mbbr {
		display: none;
	}
}