@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;500&display=swap');

.footer_nav > li:nth-child(1) {
    margin: 0 0 0.5em 0;
}

.column-video {
    height: 0 !important;
    padding: 0 0 56.25% !important;
    position: relative !important;
}
.video {
    height: 100% !important;
    left: 0 !important;
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
}


.fadein {
    opacity : 0;
    transform : translate(0, 0);
    transition : all 300ms;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    transition : all 300ms;
}


.fadein.scrollin.updown {
    opacity : 1;
    transform : translate(0, 200px);
    transition : all 1000ms;
}




.grn {
	padding: 0;
	margin: 2em auto 4em;
	width: 75%;
}


.grn p {
	color: #866038;
	font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
	font-weight: 300;
	letter-spacing: -0.01em;
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
	padding: 0;
	width: 100%;
}

.grn img {
	padding: 0;
	margin: 0 auto;
	width: 45%;
	height: auto;
}



#header_bar {
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 5000;
	  width: 100%;
	  background: #1cb72f;
      background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);
	  height:0.5em;
}



body {
    color: #595959;
    font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 100;
    line-height: 1.7em;
}


.content-wrapper {
    position: absolute;
    top: 340px;
    width: 100%;
}


/*エリア00*/

.area-00 {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 99999;
	position: absolute;
	overflow: hidden;
}

.area-00 h1 {
	background-image: url(../img/main_img_CSS-706Si_wh.png);
	background-position: top;
	background-size: 10em;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 99999;
	top: 1em;
}

.area-00 h2 {
	background-image: url(../img/logo_springjoy.svg);
	background-position: top;
	background-size: 100% !important;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 999999;
	top: 4em;
}


/*エリア0*/
.area-0-wrapper {
	background-image: url(../img/main_bg_gradation.png);
	background-size: cover;
	background-position: center;
	width: 100%;
	min-height: 800px;
	margin: 0 auto;
	padding: 0;
	z-index: 2000;
	top: 0;
	left: 0;
	position: relative!important;
}

.content-wrapper {
	position: absolute;
	top: 600px;
	width: 100%;
}

.area-0-container {
	z-index: 2000;
	overflow: visible;
	width: 100%;
	height: 100%;
	position: absolute !important;
	background-image: url(../img/logo_midori.svg);
	background-size: 4em auto;
	background-repeat: no-repeat;
	background-position: left 1em top 2em;
}


.area-0-container h1 {
	background-image: url(../img/main_img_CSS-706Si_wh.png);
	background-position:center;
	background-size: 65%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	margin: 0;
    padding: 0;
}



/*エリア1*/

.area-1 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
	padding: 0;
    z-index: 2100;
}


.area-1 .c2 {
	background-image: url(../img/img_c2_01.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 26em;
	margin: 0 auto;
	margin-top: -32em;
	padding: 0;
	z-index: 2100;
}


.area-1 .c3 {
	background-image: url(../img/main_bg_gradation.png);
	background-size: 150%;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 3em 0;
	z-index: 2100;
}

img.c3_01  {
	width: 75%;
	padding: 2em 0;
}

.area-1 .c3 p {
	width: 100%;
	height: auto;
	padding: 0 2em;
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.75;
	text-align: center;
}


.area-1 .c3-2 {
	background-image: url(../img/main_bg_gradation_color.png);
	background-size: 150%;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 3em 0;
	z-index: 2100;
}

img.c3_02-2  {
	width: 75%;
	padding: 2em 0;
}

.area-1 .c3-2 p {
	width: 100%;
	height: auto;
	padding: 0 2em;
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.75;
	text-align: center;
}


h2.area-1-head {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 1em 0;
	background: #1cb72f;
	background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);
	text-align: center;

}

h2.area-1-head img{
	width: 90%;
	position: relative;
	vertical-align: text-top;
	z-index: 7000;
}



.area-1-subhead {
	font-size: 1rem;
	line-height: 1.75;
	letter-spacing: 0.01em;
	color: #595959;
	width: 75%;
	height: auto;
	text-align: justify;
	font-weight: 100;
	margin: 0 auto;
	padding: 0;
}

/*エリア2*/

.area-2-wrapper {
    width: 100%;
    height: auto;
    margin: 0 auto;
	padding: 0 0 50px 0;
    z-index: 2300;
}

.area-2-container {
    background-image: url(../img/main_bg_gradation.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    box-shadow: 0 1px 0 0 #f4f4f4;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 2em 0;
}


h2.area-2-head {
	text-align: center;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 1em 0;
	background: #1cb72f;
	background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);

}

h2.area-2-head img{
	width: 90%;
	position: relative;
	vertical-align: text-top;
	z-index: 7000;
}


h4.area-2-subhead {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0;
	color: #595959;
	text-align: center;
	font-weight: 500;
	width: 100%;
	margin: 1em 0 0.5em 0;
	padding: 0.25em;

}
h4.area-2-subhead span {
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: 0;
	color: #595959;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 100;
	width: 100%;
	margin: 0;
	padding: 0;
	display: inline-block;
}

p.area-2-subhead-2 {
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #595959;
	width: 50%;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: justify;
	font-weight: 300;
	margin: 0 auto;
	height: 6vh;

}
.area-2 img {
	width: 75%;	
}

.spec img  {
	width: 90% !important;	
}


.area-2 .buylink {
	padding: 0 0 1em 0 ;
}



.area-2 .buylink p {
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0;
	color: #595959;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	text-decoration: none;
	
}

.area-2 .buylink a p{
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
    height: auto;
    width: auto;
	box-shadow:none;
	background: #1cb72f;
	text-decoration:none !important;
    vertical-align: middle;
    position: relative;
    padding: 15px;
    margin: 0.5em 0.1em;
}

.area-2 .buylink  a:link {
	text-decoration: none;
}


.area-2 .buylink  a:hover {
	opacity: 0.8;
	text-decoration: none;
}


.area-2 .buylink .official{
	background: #1cb72f;
	background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);	
    color: #fff;
}

.area-2 .buylink .amazon{
	background: #f09c39;
    color: #fff;
}

.area-2 .buylink .rakuten{
	background: #ac2a1c;
    color: #fff;
}

.area-2 .buylink .paypay{
	background: #877427;
    color: #fff;
}

.area-2 .buylink .yahoo{
	background: #e7393e;
    color: #fff;
}

.area-2 .buylink .aupay{
	background: #ea6438;
    color: #fff;
}


.area-2 {
    height: 100%;
    margin: 0;
	padding: 0;	
}

img.area-2-container {
    width: 100%;
    height: 100%;
    margin: 0;
	padding: 0;	
}


.area-2-box {
	padding: 5em 0;
	height: 600px;
	width: 100%;
}

.f01 {
    background-color: #fffffff;
    background-image: url(../img/img_c3_f01.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 29em;
    padding: 3em;
    box-shadow: 0 1px 0 0 #f4f4f4;
}
.f02 {
	background-color: #dddfe3;
	background-image: url(../img/img_c3_f02.png);
    background-size: cover;
	background-position: center right -5em;
	background-repeat: no-repeat;
    width: 100%;
    height: 29em;
    padding: 3em;
    box-shadow: 0 1px 0 0 #f4f4f4;
}
.f03 {
    background-color: #c2c8d3;
    background-image: url(../img/img_c3_f03.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 29em;
    padding: 3em;
}

.area-2-box p {
	font-size: 1.25rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: #595959;
	width: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: justify;
	font-weight: 300;
	margin: 0;
	padding-right: 0;
	height: 6vh;
}

.area-2-box h4 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2rem;
    line-height: 1.2;
    letter-spacing: 0;
    color: #595959;
    text-align: center;
    font-weight: 500;
    width: 100%;
    margin: 3em 0 0 0;
    padding: 0 0 0.5em 0;
    padding-right: 0;
}




.area-2 > .area-2-box > img{
	width: 75%;

}




/*エリア3*/

.area-3-container {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	background-color: #f4f4f4;
	z-index: 5000;
}

.area-3 {
	background-color: #f4f4f4;
	background-position: left -45px center;
	background-image: url(../img/kf_image_c.png);
	background-size: 57% !important;
	background-repeat: no-repeat;
	z-index: 4500;
	overflow: hidden;
	box-shadow: 0 1px 0 0 #f4f4f4;
	width: 100%;
	height: 600px;
}


h3.area-3-head {
    font-size: 1.5rem;
    line-height: 1.5;
	letter-spacing: 0;
    color: #1cb72f;
	text-align: left;
	font-family: 'Asap', sans-serif;
	font-weight: 400;
	width: 90%;
	margin: 15px auto 0;
    padding: 0;
}

p.area-3-subhead {
	font-size: 1.15rem;
    line-height: 1.25;  
    letter-spacing: 0.01em;
	color: #595959;
	width: 90%;
	text-align: left;
    font-weight: 100;
	margin: 0 auto;
	padding: 0 0 5px 0;
}

p.area-3-subhead span {
	font-family: 'Asap', sans-serif;
	font-size: 0.75em;
	font-weight: 400;
	display: inline-block;
	padding: 10px 0 0 10px;

}


p.area-3-subhead-2 {
	font-size: 0.9rem;
    line-height: 1.75;  
    letter-spacing: 0.01em;
	color: #595959;
	width: 90%;
	text-align: justify;
    font-weight: 100;
	margin: 0 auto;
	padding: 0;
}


/*エリア4*/

.area-4-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 30px 0;
    background-color: #fff;
    z-index: 4000;
}

.area-4-container > .thumb {
	background-position: top right;
	background-image: url(../img/vm_cata_image.png);
	background-size: contain;
	background-repeat: no-repeat;
	overflow: hidden;
}

h3.area-4-head {

	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: 0;
	color: #1cb72f;
	text-align: left;
	font-weight: 700;
	width: 85%;
	margin: 0 auto;
	padding: 15px 0;

}

p.area-4-subhead {
	font-size: 0.9rem;
    line-height: 1.75;  
    letter-spacing: 0.01em;
	color: #595959;
	width: 85%;
	text-align: justify;
    font-weight: 100;
	margin: 0 auto;
	padding: 0 0 10px;
}

.area-4-container > div:nth-child(2) {
	padding: 0 10% 0 0;
}


.area-4-container img {
	padding: 0;
}

.area-4-container a {
	text-decoration: none;
	
}
.area-4-container a p , .area-4-container a:visited p {
    height: auto;
    width: 90%;
	background-color: #fff;
	text-decoration: none !important;
    color: #1cb72f;
	box-shadow:0px 0px 0px 1px #1cb72f inset;
    text-align: center;
    vertical-align: middle;
    position: relative;
    padding: 10px 0;
    margin: 0 auto;
}

.area-4-container a:hover p {
	box-shadow:none;
	background:linear-gradient(135deg, rgba(232, 82, 152, .9), rgba(161, 75, 152, .9)) ;
	text-decoration: none;
    color: #fff;
}

div.pure-g:nth-child(4) > div:nth-child(2) {
	position: fixed;
	bottom: 20%;
	z-index: 5000;
	left: 40%;
	padding: 0;
}


.icon_sell {
	width: 100% !important;
	height: 3em;
	padding: 0.5em 0;
	margin: 0;
}

ul.footer_nav > li > a {
	text-decoration: none;
	color: #595959;

}


ul.footer_nav > li > a:link , ul.footer_nav > li > a:visited {
	text-decoration: none;	
	color: #595959;
}

ul.footer_nav > li > a:hover {
	text-decoration: none;	
	color: #1cb72f;
}


ul.footer_nav {
	list-style: none;
	text-decoration: none;
	width: 90%;
	margin: 20px auto;
	padding: 0;	
	text-align: center;
}

ul.footer_nav > li {
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
	font-size: 1.25rem;
	line-height: 2;
}



.footer {
	font-family: 'Asap', sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
    background-color: rgba(255,255,255,0.9);
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 */
@media (min-width: 48em) {
	

	.area-2 .buylink {
		padding: 2em 1em ;
	}


	.area-0-container {
		z-index: 2000;
		overflow: visible;
		width: 100%;
		height: 100%;
		position: absolute !important;
		background-image: url(../img/logo_midori.svg);
		background-size: 6em auto;
		background-repeat: no-repeat;
		background-position: left 2em top 2em;
	}


	.area-00 h1 {
		background-image: url(../img/main_img_CSS-706Si_wh.png);
		background-position: top;
		background-size: 23em;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 99999;
		top: 40px;
		left: 70px;
	}
	
	.area-00 h2 {
		background-image: url(../img/logo_springjoy.svg);
		background-position: top;
		background-size: 100% !important;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 999999;
		top: 7em;
	}


	.area-0-wrapper {
		background-image: url(../img/main_bg_gradation.png);
		background-size: cover;
		background-position: center;
		width: 100%;
		min-height: 800px;
		margin: 0 auto;
		padding: 0;
		z-index: 2000;
		top: 0;
		left: 0;
		position: relative!important;
	}

	

	.content-wrapper {
		position: absolute;
		top: 600px;
		width: 100%;
	}


	
	
	.area-1 .c2 {
		background-image: url(../img/img_c2_01.png);
		background-size: cover;
		width: 100%;
		height: 62em;
		margin: 0 auto;
		margin-top: -16em;
		padding: 0;
		z-index: 2100;
	}
	
	
	.area-1 .c3 {
		background-image: url(../img/main_bg_gradation.png);
		background-size: 100%;
		background-position: center bottom;
		background-repeat: no-repeat;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 3em 0;
		z-index: 2100;
	}
	
	img.c3_01  {
		width: 75%;
		padding: 2em 0;
	}
	
	.area-1 .c3 p {
		width: 100%;
		height: auto;
		padding: 0 5em;
		margin: 0;
		font-size: 1.2rem;
		line-height: 2;
		text-align: center;
	}

	
	h2.area-1-head {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 1em 0;
	    background: #1cb72f;
        background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);
		text-align: center;

	}
	
	h2.area-1-head img{
		width: 60%;
		position: relative;
		vertical-align: text-top;
		z-index: 7000;
	}
	

	
	.area-1-subhead {
		font-size: 1rem;
		line-height: 1.75;
		letter-spacing: 0.01em;
		color: #595959;
		width: 75%;
		height: auto;
		text-align: justify;
		font-weight: 100;
		margin: 0 auto;
		padding: 0;
	}

	
	.area-2-box {
		padding: 5em 0;
		height: 600px;
		width: 100%;
	}
	
	.f01 {
		background-color: #fffffff;
		background-image: url(../img/img_c3_f01.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom;
		width: 100%;	
		height: 30em;
		padding: 10em 0 0 31em;
	    box-shadow: 0 1px 0 0 #f4f4f4;
	}
	.f02 {
		background-color: #dddfe3;
		background-image: url(../img/img_c3_f02.png);
		background-size: cover;
		background-position: center right;
		background-repeat: no-repeat;
		width: 100%;		
		height: 30em;
		padding: 10em 26em 0 5em;
	    box-shadow: 0 1px 0 0 #f4f4f4;
	}
	.f03 {
		background-color: #c2c8d3;
		background-image: url(../img/img_c3_f03.png);
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;	
		height: 30em;
		padding: 10em 0 0 31em;
	}
	
	.area-2-box p {
		font-size: 1.25rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
		color: #595959;
		width: 100%;
		font-family: 'Noto Sans JP', sans-serif;
		text-align: justify;
		font-weight: 300;
		margin: 0;
		padding-right: 5em;
		height: 6vh;
	}

	.area-2-box h4 {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 2rem;
		line-height: 1.2;
		letter-spacing: 0;
		color: #595959;
		text-align: left;
		font-weight: 500;
		width: 100%;
		margin: 0;
		padding: 0 0 0.5em 0;
		padding-right: 2em;

	}

	
	
	

	.area-2 > .area-2-box > img{
		width: 75%;
		
	}
	
	
	.area-2-container {
		background-image: url(../img/main_bg_gradation.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		box-shadow: 0 1px 0 0 #f4f4f4;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 4em 0;
	}
	
	
	h2.area-2-head {
		text-align: center;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 1em 0;
	    background: #1cb72f;
        background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);

	}
	
	h2.area-2-head img{
		width: 50%;
		position: relative;
		vertical-align: text-top;
		z-index: 7000;
	}
	

	p.area-2-subhead-2 {
		font-size: 1rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
		color: #595959;
		width: 50%;
		font-family: 'Noto Sans JP', sans-serif;
		text-align: justify;
		font-weight: 300;
		margin: 0 auto;
		height: 6vh;

	}

	h4.area-2-subhead {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.5rem;
		line-height: 1;
		letter-spacing: 0;
		color: #595959;
		text-align: center;
		font-weight: 500;
		width: 100%;
		margin: 0;
		padding: 0.25em;

	}
	h4.area-2-subhead span {
		font-size: 1.2rem;
		line-height: 1.2;
		letter-spacing: 0;
		color: #595959;
		text-align: center;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 100;
		width: 100%;
		margin: 0;
		padding: 0;
		display: inline-block;
	}

	
	.area-2 img {
		width: 75%;	
	}
	
	.spec img  {
		width: 50% !important;	
	}
	
	
	
	.area-3-container {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		background-color: #f4f4f4;
		z-index: 5000;
	}

	h3.area-4-head {

		font-size: 1.25rem;
		line-height: 1.25;
		letter-spacing: 0;
		color: #1cb72f;
		text-align: left;
		font-weight: 700;
		width: 85%;
		margin: 0 auto;
		padding: 15px 0;

	}

	.area-4-container > .thumb {
		background-position: top right;
		background-image: url(../img/vm_cata_image.png);
		background-size: contain;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.area-4-container > div:nth-child(2) {
		padding: 0 10% 0 0;
	}


	.area-3 {
		background-color: #f4f4f4;
		background-position: left -45px center;
		background-image: url(../img/kf_image_c.png);
		background-size: 57% !important;
		background-repeat: no-repeat;
		z-index: 4500;
		overflow: hidden;
		box-shadow: 0 1px 0 0 #f4f4f4;
		width: 100%;
		height: 600px;
	}

	div.pure-g:nth-child(4) > div:nth-child(2) {
		position: fixed;
		bottom: 20%;
		z-index: 5000;
		left: 40%;
		padding: 0;
	}


}


/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 */
@media (min-width: 78em) {
	
	.area-2 .buylink {
		padding: 2em 1em ;
	}


	.area-0-container {
		z-index: 2000;
		overflow: visible;
		width: 100%;
		height: 100%;
		position: absolute !important;
		background-image: url(../img/logo_midori.svg);
		background-size: 6em auto;
		background-repeat: no-repeat;
		background-position: left 2em top 2em;
	}


	.area-00 h1 {
		background-image: url(../img/main_img_CSS-706Si_wh.png);
		background-position: top;
		background-size: 23em;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 99999;
		top: 40px;
		left: 70px;
	}
	
	.area-00 h2 {
		background-image: url(../img/logo_springjoy.svg);
		background-position: top;
		background-size: 75% !important;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		z-index: 999999;
		top: 10em;
	}


	.area-0-wrapper {
		background-image: url(../img/main_bg_gradation.png);
		background-size: cover;
		background-position: center;
		width: 100%;
		min-height: 800px;
		margin: 0 auto;
		padding: 0;
		z-index: 2000;
		top: 0;
		left: 0;
		position: relative!important;
	}

	

	.content-wrapper {
		position: absolute;
		top: 600px;
		width: 100%;
	}


	
	
	.area-1 .c2 {
		background-image: url(../img/img_c2_01.png);
		background-size: cover;
		width: 100%;
		height: 80em;
		margin: 0 auto;
		margin-top: -16em;
		padding: 0;
		z-index: 2100;
	}
	
	
	.area-1 .c3 {
		background-image: url(../img/main_bg_gradation.png);
		background-size: 100%;
		background-position: center bottom;
		background-repeat: no-repeat;
		width: 100%;
		margin: 0 auto;
		padding: 0 0 3em 0;
		z-index: 2100;
	}
	
	img.c3_01  {
		width: 60%;
		padding: 2em 0;
	}
	
	.area-1 .c3 p {
		width: 100%;
		height: auto;
		padding: 0 5em;
		margin: 0;
		font-size: 1.75rem;
		line-height: 2;
		text-align: center;
	}

	
	h2.area-1-head {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 1em 0;
	    background: #1cb72f;
        background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);
		text-align: center;

	}
	
	h2.area-1-head img{
		width: 60%;
		position: relative;
		vertical-align: text-top;
		z-index: 7000;
	}
	

	
	.area-1-subhead {
		font-size: 1rem;
		line-height: 1.75;
		letter-spacing: 0.01em;
		color: #595959;
		width: 75%;
		height: auto;
		text-align: justify;
		font-weight: 100;
		margin: 0 auto;
		padding: 0;
	}

	
	.area-2-box {
		padding: 5em 0;
		height: 600px;
		width: 100%;
	}
	
	.f01 {
		background-color: #fffffff;
		background-image: url(../img/img_c3_f01.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left bottom;
		width: 100%;	
		height: 30em;
		padding: 10em 0 0 31em;
	    box-shadow: 0 1px 0 0 #f4f4f4;
	}
	.f02 {
		background-color: #dddfe3;
		background-image: url(../img/img_c3_f02.png);
		background-size: contain;
		background-position: center right;
		background-repeat: no-repeat;
		width: 100%;		
		height: 30em;
		padding: 10em 26em 0 5em;
	    box-shadow: 0 1px 0 0 #f4f4f4;
	}
	.f03 {
		background-color: #c2c8d3;
		background-image: url(../img/img_c3_f03.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left bottom;
		width: 100%;	
		height: 30em;
		padding: 10em 0 0 31em;
	}
	
	.area-2-box p {
		font-size: 1.5rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
		color: #595959;
		width: 100%;
		font-family: 'Noto Sans JP', sans-serif;
		text-align: justify;
		font-weight: 300;
		margin: 0;
		padding-right: 7em;
		height: 6vh;
	}

	.area-2-box h4 {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 3rem;
		line-height: 1.2;
		letter-spacing: 0;
		color: #595959;
		text-align: left;
		font-weight: 500;
		width: 100%;
		margin: 0;
		padding: 0 0 0.5em 0;
		padding-right: 2em;

	}

	
	
	

	.area-2 > .area-2-box > img{
		width: 75%;
		
	}
	
	
	.area-2-container {
		background-image: url(../img/main_bg_gradation.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		box-shadow: 0 1px 0 0 #f4f4f4;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 4em 0;
	}
	
	
	h2.area-2-head {
		text-align: center;
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 1em 0;
	    background: #1cb72f;
        background: linear-gradient(to right, #03beff 0%, #1cb72f 75%);

	}
	
	h2.area-2-head img{
		width: 50%;
		position: relative;
		vertical-align: text-top;
		z-index: 7000;
	}
	

	p.area-2-subhead-2 {
		font-size: 1rem;
		line-height: 1.5;
		letter-spacing: 0.01em;
		color: #595959;
		width: 50%;
		font-family: 'Noto Sans JP', sans-serif;
		text-align: justify;
		font-weight: 300;
		margin: 0 auto;
		height: 6vh;

	}

	h4.area-2-subhead {
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 2rem;
		line-height: 1;
		letter-spacing: 0;
		color: #595959;
		text-align: center;
		font-weight: 500;
		width: 100%;
		margin: 0;
		padding: 0.25em;

	}
	h4.area-2-subhead span {
		font-size: 1.2rem;
		line-height: 1.2;
		letter-spacing: 0;
		color: #595959;
		text-align: center;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 100;
		width: 100%;
		margin: 0;
		padding: 0;
		display: inline-block;
	}

	
	.area-2 img {
		width: 75%;	
	}

	.spec img  {
		width: 50% !important;	
	}

	
	.area-3-container {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		background-color: #f4f4f4;
		z-index: 5000;
	}

	h3.area-4-head {

		font-size: 1.25rem;
		line-height: 1.25;
		letter-spacing: 0;
		color: #1cb72f;
		text-align: left;
		font-weight: 700;
		width: 85%;
		margin: 0 auto;
		padding: 15px 0;

	}

	.area-4-container > .thumb {
		background-position: top right;
		background-image: url(../img/vm_cata_image.png);
		background-size: contain;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.area-4-container > div:nth-child(2) {
		padding: 0 10% 0 0;
	}


	.area-3 {
		background-color: #f4f4f4;
		background-position: left -45px center;
		background-image: url(../img/kf_image_c.png);
		background-size: 57% !important;
		background-repeat: no-repeat;
		z-index: 4500;
		overflow: hidden;
		box-shadow: 0 1px 0 0 #f4f4f4;
		width: 100%;
		height: 600px;
	}

	div.pure-g:nth-child(4) > div:nth-child(2) {
		position: fixed;
		bottom: 20%;
		z-index: 5000;
		left: 40%;
		padding: 0;
	}


	
}