/*base edit---------------------------------------------------*/

/*base*/
html {
	font-size: 15px;
	color: #595757;
}
body { background: #fff; }
h1, h2, h3, h4, h5, h6, p, li, th, td, dt, dd, input, textarea { line-height: 1.65; }
a, .btn {
	transition: opacity 0.2s;
}
a:hover, .btn:hover{ opacity: 0.5; }

/*.lazyload*/
.lazyload, .lazyloaded { transition: opacity 1.5s; }
.lazyload { opacity: 0; }
.lazyloaded { opacity: 1; }

/*z-index*/
nav { z-index: 40; }
.back { z-index: 80; }
header, footer { z-index: 60; }
@media ( max-width:768px ) {
	nav { z-index: 90; }
	.nav-sheet { z-index: 85; }
}

/*scroll-point*/
.scroll-point {
	margin-top: -120px;
	padding-top: 120px;
}
@media (max-width: 1240px) {
	.scroll-point {
		margin-top: -9vw;
		padding-top: 9vw;
	}
}
@media (max-width: 768px) {
	.scroll-point {
		margin-top: -14vw;
		padding-top: 14vw;
	}
}

/*.back*/
.back {
	width: 96px;
	height: 96px;
	bottom: calc(135px + 20px);
	right: 20px;
}
@media (max-width: 1240px) {
	.back {
		bottom: calc(10.2vw + 20px);
	}
}
@media (max-width: 768px) {
	.back {
		width: 48px;
		height: 48px;
		right: 10px;
		bottom: calc(32vw + 10px);
	}
}

/*wrap*/
.wrap, .wrap-max {
	margin-left: auto;
	margin-right: auto;
}
.wrap { width: calc(100% - 20px - 20px); }
.wrap-max { width: 100%; }
.mw-1530 { max-width: 1530px; }
.mw-1240 { max-width: 1240px; }
.mw-1130 { max-width: 1130px; }
.mw-1000 { max-width: 1000px; }
.mw-640 { max-width: 640px; }
/*
@media (max-width: 768px) {
	.wrap { width: calc(100% - 10px - 10px); }
}
*/

/*.title---------------------------------------------------*/
.box-title {
	margin-bottom: 76px;
	padding: 16px;
	font-size: 36px;
	font-weight: 900;
	border: 4px solid #61C1BE;
	text-align: center;
	box-shadow: 8px 8px 0px 0px #81cdcb;
	background: #fff;
}
.box-title .big{
	font-size: 46px;
}
.box-title .pink{
	color: #FD2C7E;
}
@media ( max-width:768px ){
	.box-title {
		margin-bottom: 20px;
		padding: 6px;
		width: auto;
		font-size: 15px;
		border-width: 3px;
		box-shadow: 3px 3px 0px 0px #81cdcb;
	}
	.box-title .big{
		font-size: 19px;
	}
}

.blue-title {
	font-size: 60px;
	font-weight: 900;
	color: #154F7A;
	line-height: 1.3;
	text-align: center;
}
.blue-title span{
	font-size: 0.7em;
}
@media ( max-width:768px ){
	.blue-title {
		font-size: 24px;
	}
}

/*.fv---------------------------------------------------*/
.fv {
	
}
@media (max-width: 768px) {
	.fv {
		margin-top: 14vw;
	}
}

/*header---------------------------------------------------*/
header {
	height: 120px;
	background: rgba(255,255,255,0.9);
}
header .logo {
	margin-right: 4%;
	width: 33%;
}
header .tel {
	margin-right: 1%;
	width: 27%;
}
header .cs,
header .ma,
header .mo {
	width: calc(35% / 3);
}
@media (max-width: 1240px) {
	header {
		height: 9vw;
	}
}
@media (max-width: 768px) {
	header {
		height: 14vw;
		top: 0;
		left: 0;
	}
	header .logo {
		transform: translateX(-10px);
		margin-right: 0;
		width: 68%;
	}
	header .menu {
		transform: translateX(10px);
		width: 13%;
	}
}

/*footer---------------------------------------------------*/
.footer-pc {
	margin: auto;
	height: 135px;
	background: rgba(255,255,255,0.9);
	bottom: 0;
	left: 0;
	right: 0;
}
.footer-pc .inner {
	padding: 1% 0;
}
.footer-pc .tel {
	margin-right: 2%;
	width: 28%;
}
.footer-pc .cs,
.footer-pc .ma,
.footer-pc .mo {
	width: calc(70% / 3);
}
.footer-pc .copy {
	padding: 0.2% 0;
	width: 100%;
	text-align: center;
	color: #fff;
	background: #61C1BE;
	bottom: 0;
	left: 0;
}
.footer-space {
	width: 100%;
	height: 135px;
}
@media (max-width: 1240px) {
	.footer-pc {
		height: 10.2vw;
	}
	.footer-pc .copy {
		font-size: 1.4vw;
	}
	.footer-space {
		height: 10.2vw;
	}
}
.footer-sp {
	width: 100%;
	height: 32vw;
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.9);
}
.footer-sp .tel {
	margin-top: 2%;
	margin-bottom: 2%;
	display: block;
}
@media (max-width: 768px) {
	.footer-space {
		height: 32vw;
	}
}

/*nav---------------------------------------------------*/
nav {
	margin-top: -105px;
	height: 80px;
	background: rgba(255,255,255,0.8);
}
nav .inner {
	height: 60%;
}
nav .inner a {
	width: calc(100% / 6);
	height: 100%;
	border-right: #595757 1px solid;
}
nav .inner a:first-of-type {
	border-left: #595757 1px solid;
}
.nav-margin-reset {
	margin-top: calc(105px - 80px);
}
@media (max-width: 1130px) {
	nav {
		margin-top: -10%;
		height: 7vw;
	}
	nav .inner a {
		font-size: 1.4vw;
	}
	.nav-margin-reset {
		margin-top: calc(10% - 7vw);
	}
}
@media (max-width: 768px) {
	nav.nav {
		margin-top: 0;
		width: 195px;
		height: 100%;
		background: #009E96;
		top: 0;
		right: -195px;
		transition: right 0.3s, opacity 0.3s;
		opacity: 0;
	}
	body.sp_active-nav nav {
		right: 0;
		opacity: 1;
	}
	nav .inner {
		width: 100%;
		height: 100%;
	}
	nav .inner a {
		padding: 0 20px;
		width: 100%;
		height: auto;
		border-right-style: none;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		display: block;
		font-size: 18px;
		font-weight: 700;
		line-height: 46px;
		color: #fff;
		background: #61C1BE;
	}
	nav .inner a:first-of-type {
		margin-top: 64px;
		border-left-style: none;
		border-top: 1px solid rgba(255,255,255,0.5);
	}
	nav .batsu {
		width: 27px;
		position: absolute;
		top: 26px;
		right: 10px;
	}
	.nav-sheet {
		background: #fff;
		opacity: 0;
		width: 100%;
		height: 200%;
		position: fixed;
		top: -50%;
		left: 100%;
		transition: opacity 0.3s;
	}
	body.sp_active-nav .nav-sheet {
		opacity: 0.6;
		left: 0;
	}
}

/*.monitor-btn-box---------------------------------------------------*/
.monitor-btn-box {
	padding: 54px 0;
}
.monitor-btn-box p {
	margin-bottom: 40px;
	color: #262626;
	font-size: 36px;
	font-weight: 900;
	letter-spacing: 4px;
	text-align: center;
}
.monitor-btn-box p:after,
.monitor-btn-box p:before {
	content: "";
	width: 1px;
	height: 60px;
	background: #262626;
	display: inline-block;
}
.monitor-btn-box p:before {
	margin-right: 30px;
	transform: rotate(-25deg) translateY(20px);
}
.monitor-btn-box p:after {
	margin-left: 20px;
	transform: rotate(25deg) translateY(20px);
}
.monitor-btn-box a {
	margin: auto;
	width: 66%;
	height: 96px;
	min-width: 704px;
	background-color: #fd335f;
	font-size: 42px;
	line-height: 96px;
	font-weight: 900;
	color: #fff;
	letter-spacing: 4px;
	text-align: center;
}
.monitor-btn-box a:before {
	content: "";
	width: 100%;
	height: 50%;
	background: #fe4e7f;
	position: absolute;
	top: 0;
	left: 0;
}
.monitor-btn-box a img {
	margin: auto;
	width: 48px;
	top: 0;
	bottom: 0;
	right: 20px;
}


