@charset "UTF-8";
.cf:after{
    content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
	visibility:hidden;
}
.cf{
	display: inline-block;
} 
/* Hides from IE Mac */
* html .cf{
	height: 1%;
}
.cf{
	display:block;
}

.is_pc {
	display: initial;
}
.is_sp {
	display: none!important;
}

body {
    width: 100%;
/*	min-width: 1080px;*/
	-webkit-text-size-adjust: 100%;
	font-family: "游教科書体", "YuKyokasho", "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	position: relative;
	z-index: 1;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.font1 {
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

a.btn {
	display: inline-block;
	background-color: #47A6E9;
	color: #FFF;
	font-size: 1.7vw;
	letter-spacing: .1em;
	padding: 1.2em 3.4em;
	text-align: center;
	text-decoration: none;
	border-radius: 2.2em;
	position: relative;
	min-width: 6.8em;
	margin: 0 1em;
	transition: all .5s;
	box-shadow: 0 3px 6px 0px rgba(0,0,0,.16);
}
a.btn > span {
	position: relative;
	display: inline-block;
	z-index: 1;
}
a.btn::after {
	content: '>';
	position: absolute;
	font-size: 0.7em;
	top: 0;
	right: 1.5em;
	bottom: 0;
	display: flex;
	align-items: center;
	transition: 0.5s;
}
a.btn:hover {
	background-color: #3985bb;
}
a.btn2:hover {
	background-color: #00075b;
}

a.btn2 {
	display: inline-block;
	background-color: #161D6E;
	color: #FFF;
	font-size: 1.6vw;
	font-weight: bold;
	letter-spacing: .1em;
	padding: 1.2em 2.5em;
	text-align: center;
	text-decoration: none;
	border-radius: 2.2em;
	position: relative;
	min-width: 6.8em;
	margin: 0 1.5em;
	transition: all .5s;
	box-shadow: 0 3px 6px 0px rgba(0,0,0,.16);
}

.diagonal {
	-webkit-transform: skewX(-12deg);
	transform: skewX(-12deg);
	background-color: #191919;
	color: #FFF;
	font-weight: bold;
	display: inline-block;
	font-size: 2vw;
	padding: .8em .8em;
}
.diagonal > span {
	display: inline-block;
	-webkit-transform: skewX(12deg);
	transform: skewX(12deg);
}


header {
	position: relative;
	height: 55vw;
	background-image: url("img/img_main.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	color: #FFF;
	padding-top: 25.5vw;
	box-sizing: border-box;
}
header a {
	transition: .5s;
}
header a:hover {
	opacity: .8;
}
header img.logo {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 28vw;
	height: auto;
}
header nav {
	position: absolute;
	top: 35px;
	right: 10px;
	z-index: 2;
}
header nav a.tel {
	color: #FFF;
	text-decoration: none;
	display: inline-block;
	font-size: 2vw;
	vertical-align: top;
	font-weight: bold;
}
header nav a.tel small {
	display: block;
	font-size: 1vw;
	font-weight: normal;
	margin-top: .5em;
	text-align: center;
}
header nav a.btn2 {
	font-size: 1vw;
}
header h1 {
	width: 72vw;
	margin: 0 auto;
	font-size: 5vw;
	font-weight: bold;
	margin-bottom: .2em;
	line-height: 1.2;
	letter-spacing: .1em;
}
header h2 {
	width: 72vw;
	margin: 0 auto;
	font-size: 2vw;
	font-weight: bold;
	line-height: 2.0;
	letter-spacing: .1em;
}
/*
header > .scroll {
	position: absolute;
	bottom: 20px;
	left: 0;
    right: 0;
	z-index: 3;
	text-align: center;
	font-size: 14px;
	letter-spacing: .1em;
}
header > .scroll i {
	display: block;
	position: relative;
	font-size: 30px;
    animation: updown 1.5s infinite;
}
@keyframes updown {
	0% { top: 0; }
	50% { top: -.3em; }
	100% { top: 0; }
}
*/




div.inner {
	max-width: 94vw;
	margin-left: auto;
	margin-right: auto;
}

.common_contact {
	padding: 3% 0;
}
.common_contact > div {
	background-color: #FAFAFA;
	text-align: center;
	padding: 4vw 0;
}
.common_contact > div h3 {
	font-size: 2.5vw;
	font-weight: bold;
	margin-bottom: 3vw;
}
.common_contact > div p a.tel {
	display: inline-block;
	text-decoration: none;
	vertical-align: top;
	margin: 0 1.5em;
}
.common_contact > div p a.tel span {
	font-size: 3vw;
	margin-bottom: .5em;
	color: #161D6E;
	font-weight: bold;
	display: block;
}
.common_contact > div p a.tel small {
	color: #161D6E;
	font-size: 1.2vw;
	text-align: center;
}


#sec1 {
	background-image: url(img/bg_clavi.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #FFF;
	height: 62.5vw;
	box-sizing: border-box;
}
#sec1 h1 {
	font-size: 12.5vw;
	margin-bottom: .5em;
	padding-top: 14vw;
}
#sec1 h1 small {
	display: block;
	font-size: 2.5vw;
	margin-top: .5em;
}
#sec1 h2 {
	font-size: 4.3vw;
	font-weight: bold;
	margin-bottom: 1em;
}

#sec2 {
	background-image: url(img/bg_recommended.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 6vw 0;
	text-align: center;
	color: #FFF;
}
#sec2 p {
	font-size: 2vw;
	margin-bottom: 1em;
	display: block;
}
#sec2 h2 {
	font-size: 3vw;
	margin-bottom: 2em;
	font-weight: bold;
}
#sec2 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sec2 ul li {
	width: 32%;
	background-color: #161D6E;
	font-size: 1.8vw;
	line-height: 1.7;
	padding: 2.5em 0;
	margin-bottom: 2%;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
#sec2 ul li:nth-child(2n) {
	background-color: #373D84;
}


#sec3 > div {
	position: relative;
	padding-left: 5vw;
	box-sizing: border-box;
}
#sec3 > div img {
	position: absolute;
	top: 0;
	right: 0;
	width: 40vw;
	height: auto;
	z-index: 2;
}
#sec3 > div p:first-child {
	color: #161D6E;
	font-size: 1.3vw;
	margin-bottom: 1em;
}
#sec3 > div h2 {
	font-size: 3.2vw;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: .1em;
	margin-bottom: .5em;
}
#sec3 > div h2 + p {
	width: 48vw;
	font-size: 1.5vw;
	line-height: 2.2;
	margin-bottom: 7vw;
}

#sec4 {
	background-color: #FAFAFA;
	padding: 8vw 0 2vw;
}
#sec4 > div {
	position: relative;
	width: 72vw;
	padding-top: 6vw;
}
#sec4 > div img {
	position: absolute;
	top: 0;
	right: 0;
	width: 44vw;
	height: auto;
	z-index: 1;
}
#sec4 > div p,
#sec4 > div h2,
#sec4 > div h3 {
	position: relative;
	z-index: 2;
}
#sec4 > div p:first-child {
	color: #161D6E;
	font-size: 1.3vw;
	margin-bottom: 1em;
}
#sec4 > div h2 {
	font-size: 3.2vw;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: .1em;
	margin-bottom: .5em;
}
#sec4 > div h2 + p {
	font-size: 2.2vw;
	line-height: 1.4;
	letter-spacing: .1em;
	margin-bottom: 2.8em;
}
#sec4 > div h3 {
	font-size: 3.2vw;
	font-weight: bold;
	font-family: "游明朝体+36ポかな";
	margin-bottom: 12vw;
}
#sec4 > div dl {
	font-size: 1.3vw;
}
#sec4 > div dl dt {
	color: #161D6E;
	margin-bottom: 3em;
	display: flex;
}
#sec4 > div dl dt::after {
	content: '';
	width: 100%;
	border-top: solid 1px #ccc;
	box-sizing: border-box;
	margin-left: 1vw;
	margin-top: .5em;	
}
#sec4 > div dl dd {
	line-height: 1.7;
	margin-bottom: 5vw;
}

.bg_bk {
	text-align: center;
	background-color: #000;
	color: #FFF;
	padding: 7vw 0 5vw;
}
.bg_bk h2 {
	font-size: 3.2vw;
	font-weight: bold;
	margin-bottom: 1.2em;
	letter-spacing: .1em;
}
.bg_bk p {
	font-size: 1.7vw;
	line-height: 1.7;
}

#sec5 > img {
	width: 100%;
	margin-bottom: 3vw;
}
#sec5 > div.inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#sec5 > div.inner figure {
	width: 100%;
}
#sec5 > div.inner img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 3vw;
}
#sec5 > div.inner .half {
	width: 48.5%;
}

#sec6 > img {
	width: 100%;
	margin-bottom: 3vw;
}
#sec6 > .lead {
	text-align: center;
	padding: 7vw 0 5vw;
}
#sec6 > .lead h2 {
	font-size: 3.2vw;
	font-weight: bold;
	margin-bottom: 1.2em;
	letter-spacing: .1em;
}
#sec6 > .lead p {
	font-size: 1.7vw;
	line-height: 1.7;
}
#sec6 > .step {
	display: flex;
	justify-content: space-between;
	width: 72vw;
	margin: 0 auto 3vw;
	text-align: center;
}
#sec6 > .step .box {
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#sec6 > .step .box figure {
	display: block;
	width: 100%;
	height: 10vw;
	margin-bottom: 10%;
	background-image: url(img/img_process_step1.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
#sec6 > .step .box:nth-child(2) figure {
	background-image: url(img/img_process_step2.png);
}
#sec6 > .step .box:nth-child(3) figure {
	background-image: url(img/img_process_step3.png);
}
#sec6 > .step .box > div {
	background-color: #FAFAFA;
	padding: 10%;
	flex-grow: 1;
}
#sec6 > .step .box > div p:first-child {
	font-weight: bold;
	font-family: "游明朝体+36ポかな";
	font-size: 1.5vw;
	margin-bottom: 1em;
}
#sec6 > .step .box > div p:first-child em {
	font-size: 4vw;
}
#sec6 > .step .box > div h3 {
	font-size: 1.7vw;
	font-weight: bold;
	margin-bottom: 1em;
}
#sec6 > .step .box > div h3 + p {
	font-size: 0.95vw;
	line-height: 1.7;
	text-align: left;
	padding: 0 10%;
}

.bg_img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 10vw 0;
	text-align: center;
	color: #FFF;
	height: 31.25vw;
	box-sizing: border-box;
}
.bg_img h2 {
	font-size: 3.2vw;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: .1em;
}

#sec6_5 > div:first-child {
	background-image: url(img/bg_land.png);
}
#sec6_5 > div:first-child h2 span {
	font-size: 1.8vw;
}
#sec6_5 > p {
	font-size: 1.4vw;
	line-height: 1.7;
	width: 52vw;
	margin: 0 auto;
	padding: 6vw 0 5vw;
}

#sec7 > div:first-child {
	background-image: url(img/bg_howtothink.png);
}
#sec7 > p {
	font-size: 1.4vw;
	line-height: 1.7;
	width: 52vw;
	margin: 0 auto;
	padding: 6vw 0 2vw;
}

#sec8 > div:first-child {
	background-image: url(img/bg_utilization.png);
}
#sec8 > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 74vw;
	margin: 4vw auto 2vw;
}
#sec8 > ul li {
	text-align: center;
	background-color: #FAFAFA;
	padding: 1em 0;
	font-size: 1.8vw;
	width: 32%;
	margin-bottom: 2%;
	line-height: 1.5;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 8vw;
}
#sec8 > p {
	font-size: 2.4vw;
	width: 90vw;
	margin: 0 auto 2vw;
	line-height: 1.7;
}

footer {
	text-align: center;
	background-color: #272727;
	color: #FFF;
	display: flex;
}
footer > div {
	width: 50%;
	box-sizing: border-box;
}
footer > div.bg {
	background-image: url(img/img_leceb.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 53.5vw;
}
footer > div:last-child {
	padding-top: 8vw;
	position: relative;
}
footer > div:last-child  p.logo img {
	display: inline-block;
	width: 22vw;
	margin-bottom: 3vw;
}
footer > div:last-child  h2 {
	font-size: 2vw;
	font-weight: bold;
	line-height: 1.7;
	margin-bottom: 3vw;
}
footer > div:last-child  h2 + p {
	width: 72%;
	margin: 0 auto 4vw;
	font-size: 1.2vw;
	text-align: left;
	line-height: 1.7;
}
footer > div:last-child p#copyright {
	font-size: .8vw;
	position: absolute;
	right: 2vw;
	bottom: 1.5vw;
}

.fadein {
	transition: .5s;
	transition-delay: .2s;
	opacity: 0;
}
.fadein.on {
	opacity: 1.0;
}
.fadein-up {
	transition: .5s;
	transition-delay: .2s;
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.fadein-up.on {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
.fadein-right {
	transition: .5s;
	transition-delay: .2s;
	opacity: 0;
	transform: translate(-60px,0); 
	-webkit-transform: translate(-60px,0); 
}
.fadein-right.on {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}
.fadein-zoom-out {
	transition: .5s;
	transition-delay: .2s;
	opacity: 0;
	transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
}
.fadein-zoom-out.on {
	opacity: 1.0;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}


/*
@media screen and  (min-width: 1280px) {
	header {
		height: 56.5vw;
	}
	main #top h3 {
		font-size: 2.8vw;
	}
	main #top > div > div h2 {
		font-size: 3.9vw;
	}
	main .enjoy > p {
		font-size: 1.9vw;
	}
}
*/


@media screen and (max-width : 767px) {
	.is_pc {
		display: none!important;
	}
	.is_sp {
		display: inline-block!important;
	}
	body {
		min-width: 100%;
	}
	a.btn {
	}
	header {
		padding-top: 16vw;
		text-align: center;
	}
	header h1 {
		width: auto;
		font-size: 5.3vw;
		margin-bottom: 0.7em;
	}
	header h2 {
		font-size: 2.6vw;
		width: auto;
	}
/*
	header > .scroll {
		bottom: 5vw;
		font-size: 3vw;
	}
	header > .scroll i {
		font-size: 6vw;
	}
*/
	div.inner {
	}
	
	#sec1 h2 {
		font-size: 4.4vw;
	}
	.diagonal {
		font-size: 2.8vw;
	}
	#sec2 h2 {
		font-size: 4vw;
		margin: 4vw 0 5vw;
	}
	#sec2 ul {
		padding: 0 3vw;
	}
	#sec2 ul li {
		width: 48.5%;
		font-size: 2.8vw;
		padding: 1.8em 0;
		margin-bottom: 3%;
	}
	#sec2 ul li:nth-child(2n) {
		background-color: #161D6E;
	}
	#sec2 ul li:last-child {
		width: 100%;
		padding: 2.5em 0;
	}
	
	a.btn2 {
		height: auto;
		border-radius: 11vw;
		margin: 0 auto;
		letter-spacing: 0.1vw;
		padding: 0.7em;
		width: 67vw;
		box-sizing: border-box;
		line-height: 1.2;
	}
	.common_contact > div {
		padding: 5vw 0;
	}
	.common_contact > div h3 {
		font-size: 3.2vw;
		margin-bottom: 4.5vw;
	}
	.common_contact > div p .is_sp.left  {
		font-size: 3vw;
		box-sizing: border-box;
		vertical-align: top;
		display: block!important;
		margin-bottom: 3vw;
	}
	.common_contact > div p .is_sp.left small  {
		display: block;
		font-size: 2.5vw;
		margin-top: .5em;
	}
	.common_contact > div p .is_sp.right {
		background-color: #FFF;
		border: solid .5vw #161D6E;
		box-sizing: border-box;
		color: #161D6E;
		font-size: 3vw;
		display: block!important;
	}
	
	#sec3 > div {
		padding-left: 0;
		max-width: 100%;
	}
	#sec3 > div img {
		position: relative;
		width: 100%;
	}
	#sec3 > div p:first-child,
	#sec3 > div h2,
	#sec3 > div h2 + p {
		width: 76%;
		margin-left: auto;
		margin-right: auto;
	}
	#sec3 > div p:first-child {
		font-size: 2vw;
	}
	#sec3 > div h2 {
		font-size: 5.5vw;
	}
	#sec3 > div h2 + p {
		font-size: 2.5vw;
		margin-bottom: 7vw;
	}
	
	#sec4 > div {
		width: 100%;
		padding-top: 3vw;
		max-width: 100%;
	}
	#sec4 > div img {
		width: 100%;
		position: relative;
	}
	#sec4 > div p,
	#sec4 > div h2,
	#sec4 > div h3 {
		width: 76%;
		margin-left: auto;
		margin-right: auto;
	}
	#sec4 > div p:first-child {
		font-size: 2vw;
	}
	#sec4 > div h2 {
		font-size: 5.5vw;
	}
	#sec4 > div h2 + p {
		font-size: 4vw;
		margin-bottom: 10vw;
	}
	#sec4 > div h3 {
		font-size: 5.8vw;
		margin-bottom: -.5em;
		text-align: center;
	}
	#sec4 > div dl {
		font-size: 2.6vw;
		padding: 8vw;
	}
	.bg_bk {
		padding: 10vw 0 9vw;
	}
	.bg_bk h2 {
		font-size: 5.5vw;
	}
	.bg_bk p {
		font-size: 3.2vw;
	}
	sec6 > .lead {
		padding: 7vw 0 10vw;
	}
	#sec6 > .lead h2 {
		font-size: 5vw;
		margin-bottom: 1.5em;
	}
	#sec6 > .lead p {
		font-size: 3vw;
	}
	#sec6 > .step {
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
	}
	#sec6 > .step .box {
		width: 50vw;
		margin-left: 5vw;
		flex-shrink: 0;
		padding-bottom: 5vw;
	}
	#sec6 > .step .box:last-child {
		padding-right: 5vw;
	}
	#sec6 > .step .box figure {
		height: 23vw;
	}
	#sec6 > .step .box > div p:first-child {
		font-size: 4vw;
	}
	#sec6 > .step .box > div p:first-child em {
		font-size: 10vw;
	}
	#sec6 > .step .box > div h3 {
		font-size: 4vw;
	}
	#sec6 > .step .box > div h3 + p {
		font-size: 3vw;
		padding: 0 3%;
		white-space: normal;
	}
	
	.bg_img {
		padding: 14vw 0;
	}
	.bg_img h2 {
		font-size: 5vw;
	}
	#sec6_5 .bg_img {
		height: 44vw;
	}
	#sec6_5 .bg_img h2 {
		margin-top: 2vw;
	}
	#sec6_5 div:first-child h2 span {
		font-size: 3vw;
	}
	#sec6_5 > p {
		font-size: 3vw;
		width: 80vw;
		padding: 10vw 0 10vw;
	}
	#sec7 .bg_img {
		height: 44vw;
	}
	#sec7 .bg_img h2 {
		margin-top: 2vw;
	}
	#sec7 > p {
		font-size: 3vw;
		width: 80vw;
		padding: 10vw 0 5vw;
	}
	#sec8 .bg_img {
		height: 53vw;
	}

	#sec8 > ul {
		width: 90vw;
		margin: 5vw auto 2vw;
	}
	#sec8 > ul li {
		padding: 2.3em 0;
		font-size: 2.8vw;
		width: 48.5%;
		margin-bottom: 3%;
		height: 8vw;
	}
	sec8 > p {
		font-size: 2.5vw;
		width: 90vw;
		margin: 0 auto 4vw;
	}
	footer {
		display: block;
	}
	footer > div {
		width: 100%;
	}
	footer > div.bg {
		height: 71vw;
	}
	footer > div:last-child {
		padding-top: 10vw;
	}
	footer > div:last-child p.logo img {
		width: 40vw;
		margin-bottom: 7vw;
	}
	footer > div:last-child h2 {
		font-size: 4.2vw;
		margin-bottom: 7vw;
	}
	footer > div:last-child h2 + p {
		width: 80vw;
		margin: 0 auto 10vw;
		font-size: 2.8vw;
	}
	footer .btn {
		font-size: 3.5vw;
	}
	footer > div:last-child p#copyright {
		font-size: 2.4vw;
		position: static;
		padding: 10vw 0 7vw;
	}


	
	#fixed_bottom {
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #000;
		text-align: center;
		padding: 4vw 0;
		transition: .5s;
		pointer-events: auto;
	}
	#fixed_bottom.off {
		opacity: 0;
		pointer-events:none;
	}
	#fixed_bottom > div {
		background-color: transparent;
		padding: 0;
	}

}