@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:200&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap');

.pure-u-1-3 .pure-u-sm-1-3 .pure-u-md-1-4 .pure-u-lg-1-4 .pure-u-xl-1-6{
    display: flex;
}

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


/*ヘッダーのアニメーション*/
#header {
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 5000;
	  width: 100%;
	  transition: .5s;
	  background-color: rgba(255,254,238,0.8);
	  box-shadow: 0 1px 0 0 #FFFEEE;
	  height:auto;
}

#header img {
	vertical-align:text-top;
	height: 7rem;
}



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


.content-wrapper {
    position: absolute;
    top: 20rem;
    width: 100%;
    padding: 0 1em;

}



/*エリア0*/
.area-0-wrapper {
	background-color: #FFFEEE !important;
    width: 100%;
    height: 100%;
    margin: 0 auto;
	padding: 0;
    z-index: 2000;
    top: 0;
    left: 0;
    position: fixed !important;
}

.area-0-container {

	background-image: url(../img/grn_image_a.png);
	background-position: top center;
    background-size: contain;
	background-repeat: no-repeat;
    z-index: 2000;
    overflow: visible;
	width: 100%;
    height: 100%;
    position: absolute !important;
	top: 7rem;
}


/*エリア1*/

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


h2.area-1-head {
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: -0.1em;
	color: #866038;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding: 0;
}


/*
.area-0-container h1 {
	background-image: url(../img/grn_logo_a.svg);
	background-position:left 1em bottom 4em;
	background-size: 50%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	margin: 0;
    padding: 0;
}
*/


.area-1-subhead {
	font-size: 0.9rem;
    line-height: 1.75;  
    letter-spacing: 0.01em;
	color: #866038;
	width: 85%;
    height: auto;
	text-align: justify;
	font-family: 'Noto Serif JP', serif;
    font-weight: 300;
	margin: 0 auto;
	padding: 0;
}

/*エリア2*/

.area-2-wrapper {
	background-color: rgba(255,254,238,0.8);
	backdrop-filter: blur(40px);  
	-webkit-backdrop-filter: blur(30px);
    width: 100%;
    height: auto;
    margin: 0 auto;
	padding: 0 1em;
    z-index: 2300;
}

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


h3.area-2-head {
    font-size: 1.75rem;
    line-height: 1;
	letter-spacing: 0;
    color: #866038;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	width: 90%;
	margin: 0 auto;
    padding: 30px 0 0;
}

.area-2-head span  {
	display: inline-block;
    font-size: 1rem;
    line-height: 1.25;
	letter-spacing: 0;
    color: #866038;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
    font-weight: 300;
	width: 90%;
	margin: 0 auto;
    padding: 0 0 30px 0;
}


h4.area-2-subhead {
    font-size: 0.75rem;
    line-height: 1;
	letter-spacing: 0;
    color: #866038;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	width: 100%;
	margin: 0;
    padding: 30px 0 10px;
}

h4.area-2-subhead span {
    font-size: 0.75rem;
    line-height: 1.25;
	letter-spacing: 0;
    color: #866038;
	text-align: center;
	font-family: 'Noto sans', sans-serif;
    font-weight: 200;
	width: 100%;

}



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

.area-2 a:hover p {
	box-shadow:none;
	background:linear-gradient(135deg, rgba(123,110,28,0.90), rgba(206,186,111,0.90)) ;
	text-decoration: none;
    color: #fff;
}



.area-2 {
    height: auto;
    margin: 0 0 20px 0;
	padding: 0;	
}

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



/*エリア3*/

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

}

.area-3 {
    background-color: #f4f4f4;
	background-position:center top -60px;
	background-image: url(../img/kf_image_c.png);
	background-size: 125%;
	background-repeat: no-repeat;
    z-index: 4500;
    overflow: hidden;
 	box-shadow: 0 1px 0 0 #f4f4f4;
    width: 100%;
    height: 330px;
}

h3.area-3-head {
    font-size: 1.5rem;
    line-height: 1.5;
	letter-spacing: 0;
    color: #866038;
	text-align: left;
	font-family: 'Montserrat', 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: #866038;
	width: 90%;
	text-align: left;
	font-family: 'Noto Serif JP', serif;
    font-weight: 300;
	margin: 0 auto;
	padding: 0 0 5px 0;
}

p.area-3-subhead span {
	font-family: 'Montserrat', 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: #866038;
	width: 90%;
	text-align: justify;
	font-family: 'Noto Serif JP', serif;
    font-weight: 300;
	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: center;
    background-image: url(../img/vm_cata_image.png);
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
	height: 420px;
}

h3.area-4-head {
    font-size: 1.25rem;
    line-height: 1.25;
	letter-spacing: 0;
    color: #866038;
	text-align: center;
	font-family: 'Noto Serif JP', serif;
    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: #866038;
	width: 85%;
	text-align: justify;
	font-family: 'Noto Serif JP', serif;
    font-weight: 300;
	margin: 0 auto;
	padding: 0 0 10px;
}

.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: #866038;
	box-shadow:0px 0px 0px 1px #866038 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) {
	padding: 0 0 50px 0;

}



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

}


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

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


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

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



.footer {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
    position: relative;
    bottom: 0;
    width: 100%;
    text-align: center;
}



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

	.content-wrapper {
		top: 40rem;
		padding: 0 5em;
	}

	h4.area-2-subhead,h4.area-2-subhead span {
    font-size: 1rem;
	}
	

	#header img {
		vertical-align:text-top;
		height: 10rem;
	}

	.area-0-container {

		background-image: url(../img/grn_image_a.png);
		background-position: top center;
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 2000;
		overflow: visible;
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 10rem;
	}

}

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

	.content-wrapper {
		top: 55rem;
		padding: 0 20em;
	}
	

	h4.area-2-subhead,h4.area-2-subhead span {
    font-size: 1rem;
	}


	#header img {
		vertical-align:text-top;
		height: 10rem;
	}

	.area-0-container {

		background-image: url(../img/grn_image_a.png);
		background-position: top center;
		background-size: contain;
		background-repeat: no-repeat;
		z-index: 2000;
		overflow: visible;
		width: 100%;
		height: 100%;
		position: absolute !important;
		top: 10rem;
	}
}