	
:root {
--point-color-green: #04b321;
--point-color-red: #F74460;
--point-color-blue: #5FDB5F;
--txt-color: #333;
--head-color: rgba(255,255,255,.8);
--content-padding: 120px 0;
--base-color: #eee;
}


/*COMMON*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/* CSS Document */

body{
	margin: 0;
	padding: 0;
	position: relative;
	background-color: rgba(224,222,210,1.00);
	font-family: "Noto Sans JP", sans-serif;
	color: #505050;
	letter-spacing: .05em;
	
	transition: all .4s ease-in-out;
}

a{
	color: #000;
	text-decoration: none;
}

#wrap{
	position: relative;

}



/*header*/


header{
	position: fixed;
	width: 100%;
	height: 55px;
	background: rgba(255,255,255,.95);
	font-family: futura-pt, sans-serif;
	
	z-index: 10;
}
header section{
	display: flex;
	
	flex-wrap: wrap;
	padding: 5px 25px;
	
	align-items: center;
	
	max-width: 1600px;
	margin: 0 auto;
}
header nav{
	width: 40%;
}
header nav ul{
	display: flex;
	flex-wrap: wrap;
	
	gap:0 50px;
}

header nav ul a{
	font-size: 17px;
}
header .logo{
	width: 20%;
	text-align: center;
}
header .logo img{
	width: 80px;
	height: auto;
}
header .isnta{
	width: 40%;
	text-align: right;
}
header .isnta img{
	width: 28px;
	height: auto;
}





/*homeCont*/


.homeCont{
	z-index: 1;
	
	width: 100%;

	max-width: 1600px;
	margin: 0 auto;

	font-family: futura-pt, sans-serif;
	
	font-weight: 300;
	letter-spacing: .1em;
	
	position: relative;
}

.homeImg img{
	width: 100%;
	height: auto;
	display: block;
	
}

.homeImgbox1{
	margin: 0;
	transform: translateY();
	width: 100%;
}

.homeImgbox1 .boximg1{
	width: 51.7%;
}



.homeImgbox2{
	margin: -15% 0 0 0;
	width: 100%;
	
	padding: 0 0 0 56.5%;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between
}
.homeImgbox2 .boximg1{
	width: 45.7%;
}
.homeImgbox2 .boximg2{
	width: 50%;
	mix-blend-mode:multiply;
	opacity: .77
}
.homeImgbox2 .homeImgTxt{
	font-size: 2.8vw;
	width: 100%;
	
	padding-bottom:13%;
}




.homeImgbox3{
	margin: 0;
	width: 100%;
	
	padding: 0 0 0 13.5%;
	display: flex;
	flex-wrap: wrap;
	
	position: relative;
}
.homeImgbox3 .boximg1{
	width: 42.3%;
	position: relative;
	
	z-index: 2;
	
	mix-blend-mode:multiply;
	opacity: .77
}

.homeImgbox3 .boximg2{
	width: 40%;
	
	padding: 30% 0 0 0;
	
	transform: translateX(-10%);
	position: relative;
	
	z-index: 1;
	
}

.homeImgbox3 .txtLogo{
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 33.6%;
	z-index: 4;
}
.homeImgbox3 .txtLogo img{
	width: 100%;
	height: auto;
}




.homeImgbox4{
	margin: 0;
	width: 100%;
	
	padding: 20% 0 0 0;
	display: flex;
	flex-wrap: wrap;
	
	gap:0 1%;
}
.homeImgbox4 .boximg1{
	width: 24%;
}
.homeImgbox4 .boximg2{
	width: 24%;
}
.homeImgbox4 .boximg3{
	width: 24%;
}

.homeImgbox5{
	margin: 0;
	width: 100%;
	
	padding: 20% 0 0 0;
	display: flex;
	flex-wrap: wrap;
	
	align-items: baseline;
	
	justify-content: flex-end;
	
	gap:0 1%;
}
.homeImgbox5 .boximg1{
	width: 31.7%;
}
.homeImgbox5 .boximg2{
	width: 53.9%;
	mix-blend-mode:multiply;
	opacity: .77
}
.homeImgbox5 .homeImgTxt{
	font-size: 2.4vw;
	width: 86.6%;
	text-align: center;
	padding-top: 4% ;
}


.homeImgbox6{
	margin: 0;
	width: 100%;
	
	padding: 20% 23.6% 0 0;
	display: flex;
	flex-wrap: wrap;
	
	
	justify-content: flex-end;
	
	gap:0 1%;
}
.homeImgbox6L{
	width: 51.4%;
}
.homeImgbox6R{
	width: 47.5%;
	mix-blend-mode:multiply;
}

.homeImgbox6 .boximg1{
}
.homeImgbox6 .boximg2{
	padding-top: 2.4%;
}
.homeImgbox6 .boximg3{
	mix-blend-mode:multiply;
}



.homeImgbox7{
	margin: 0;
	width: 100%;
	
	padding: 20% 0 0 0 ;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}
.homeImgbox7 .boximg1{
	width: 57.2%;
	position: relative;
	
	z-index: 1;
}

.homeImgbox7 .boximg2{
	width: 42%;
	
	padding: 42% 0 0 0;
	
	transform: translateX(-23%);
	position: relative;
	
	z-index: 2;
	
}
.homeImgbox7 .txtLogo{
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);
	width: 33.6%;
	z-index: 4;
}
.homeImgbox7 .txtLogo img{
	width: 100%;
	height: auto;
}


.homeImgbox8{
	margin: 20% auto 0;
	width: 65.4%;
	
	background: url("../images/home/img_16.jpg") no-repeat center center;
	background-size: cover;
	
	padding: 10% 11% ;
	display: flex;
	flex-wrap: wrap;
}
.homeImgbox8 .boximg1{
	mix-blend-mode:normal;
	transform: scale(1);
}
.homeImgbox8 .boximg2{
	padding-top: 10%;
	mix-blend-mode:normal;
	transform: scale(1);
}
.homeImgbox8 .boximg3{
	padding-top: 10%;
	mix-blend-mode:normal;
	transform: scale(1);

}


.homeImgbox9{
	margin: 20% 0 0;
	width: 81.2%;
		
	padding: 0 ;
}
.homeImgbox9 .homeImgTxt{
	font-size: 2.4vw;
	width: 100%;
	text-align: right;
	padding-bottom: 4% ;
}

.homeImgbox10{
	margin: 20% auto 0;
	width: 64.6%;
		
	padding: 0 ;
	display: flex;
	flex-wrap: wrap;
	
	align-items: baseline;
	
	justify-content: space-between;
}

.homeImgbox10 .boximg1{
	width: 58%;
}
.homeImgbox10 .boximg2{
	width: 37%;
	mix-blend-mode:multiply;
}
.homeImgbox10 .homeImgbox10L{
	background: url("../images/home/img_21.jpg") no-repeat center center;
	background-size: cover;
	padding: 10vw 7vw;
}
.homeImgbox10 .homeImgbox10L img{
}




.homeImgbox11{
	margin: 0;
	width: 100%;
	
	padding: 20% 0 0 0 ;
	display: flex;
	flex-wrap: wrap;
}
.homeImgbox11 .boximg1{
	width: 100%;
	position: relative;
	
	z-index: 1;
	mix-blend-mode:multiply;
	opacity:.89
}
.homeImgbox11 .boximg1 img{
	width: 68%;
}
.homeImgbox11 .boximg2{
	width: 100%;
	
	transform: translateY(-8%);
	position: relative;
	
	z-index: 2;
	
	text-align: right;
	mix-blend-mode:multiply;
	opacity:.89

}
.homeImgbox11 .boximg2 img{
	width: 50%;
	display: inline-block;
}

.homeImgbox11 .homeImgTxt{
	font-size: 2.4vw;
	width: 100%;
	text-align: left;
	padding-left: 18% ;
	transform: translateY(-720%);
}



/*pageCont*/
.pageCont{
	width: 80%;

	max-width: 1280px;
	margin: 0 auto;
	
	
	padding: 15% 0 0%;
	
	position: relative;

}
.pageImg{
	position: absolute;
	right: 0;
	top: 0;
	width: 44%;
}
.pageImg img{
	width: 100%;
	height: auto;
}

.pageTitle{
	position: relative;

}
.pageTitle .pageContLogo{
	width: 50%;
	max-width: 500px;
	margin-bottom: 100px;
}
.pageTitle .pageContLogo img{
	width: 100%;
	height: auto;
}
.pageTitle h1{
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	
	font-size: 30px;
}



.newsCont{
	padding: 15% 0 0%;
	
	font-size: 14px;
	line-height: 180%;
	
	font-family: futura-pt, sans-serif;
	font-weight: 400;


}
.newsBack{
	padding-top: 50px;
}





.txtCont{
	padding: 15% 0 0%;
	
	font-size: 14px;
	line-height: 180%;

	font-family: futura-pt, sans-serif;
	font-weight: 400;


}

.txtL{
	font-size: 200%;
	display: block;
	
	margin-bottom: 10px;
}







.pageTop{
	position: absolute;
	right: -5vw;
	bottom: -10vw;
	font-size: 10px;
	font-weight: 300;
	transform: translateX(0) rotate(90deg);
	transform-origin:right bottom;
	font-family: futura-pt, sans-serif;
}

.homeCont .pageTop{
	right: 5vw;
	bottom: -10vw;
	font-weight: 300;
	letter-spacing: 0.05em;
}


/*footer*/

footer{
	padding-top: 15%;
}
footer section{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
footer section .footL{
	width: 50%;
}
footer section .footR{
	width: 50%;
}
footer section .footR a{
	width: 100%;
}
footer section .footL,
footer section .footR a{
	background: url("../images/foot_01.jpg") no-repeat center center;
	background-size: cover;
	text-align: center;
	font-family: futura-pt, sans-serif;
	
	font-weight: 300;
	
	font-size: 1.4vw;
	
	color: #fff;
	line-height: 160%;
	
	padding: 10vw 0;

	display: flex;
	flex-wrap: wrap;
	
	align-items: center;

}




footer section .footR a{
	background: url("../images/foot_02.jpg") no-repeat center center;
	background-size: cover;
}
footer section .footL .footTxt,
footer section .footR .footTxt{
	width: 100%;
}

footer section .footL .footLogo,
footer section .footR .footLogo{
	margin-bottom: 2vw;
	width: 100%;
}
footer section .footL .footLogo img{
	width: auto;
	height: 5vw;
	
}

footer section .footR .footLogo img{
	width: auto;
	height: 5vw;
	
}




/*inview設定*/


.inview{
	transition: 0.6s ease-in-out;
	transition-delay:0.4s;
	opacity: 0;
}
.inviewOn{
	opacity: 1;
}






.pc{
	display: block
}
.sp{
	display: none
}

@media screen and (max-width: 768px) {

	.pc{
		display: none
	}
	.sp{
		display: block
	}

	

	#wrap{
		position: relative;

	}




	/*header*/


	header{
		position: fixed;
		width: 100%;
		height: 49px;
		background: rgba(255,255,255,.95);
		font-family: futura-pt, sans-serif;

		z-index: 10;
	}
	header section{
		display: flex;

		flex-wrap: wrap;
		padding: 10px 10px 10px 20px;

		align-items: center;

		max-width: 1600px;
		margin: 0 auto;
	}
	header nav{
		width: 40%;
	}
	header nav ul{
		display: flex;
		flex-wrap: wrap;

		gap:0 2vw;
	}

	header nav ul a{
		font-size: 2.4vw;
	}
	header .logo{
		width: 20%;
		text-align: center;
	}
	header .logo img{
		width: 50px;
		height: auto;
	}
	header .isnta{
		width: 40%;
		text-align: right;
	}
	header .isnta img{
		width: 16px;
		height: auto;
	}



	/*pageCont*/
	.pageCont{
		width: 90%;

		max-width: 90%;
		margin: 0 auto;


		padding: 30% 0 0%;

	}


	.pageTitle{

	}
	.pageImg{
		width: 42%;
	}
	.pageTitle .pageContLogo{
		width: 50%;
		margin-bottom: 50px;
	}
	.pageTitle .pageContLogo img{
		width: 100%;
		height: auto;
	}
	.pageTitle h1{
		font-family: futura-pt, sans-serif;
		font-weight: 400;

		font-size: 20px;
	}



	.newsCont{
		padding: 15% 0 0%;

		font-size: 9px;
		line-height: 200%;
	}
	.newsBack{
		padding-top: 50px;
	}


	.txtCont{
		padding: 15% 0 0%;

		font-size: 9px;
		line-height: 180%;

	}

	.txtL{
		font-size: 160%;
		display: block;

		margin-bottom: 10px;
	}



	.pageTop{
		position: absolute;
		right: 3vw;
		bottom: -15vw;
		font-size: 7px;
		font-weight: 300;
		transform: translateX(0) rotate(90deg);
		transform-origin:right bottom;
		font-family: futura-pt, sans-serif;

	}
	.homeCont .pageTop{
		right: 3vw;
		bottom: -25vw;
	}

	footer{
		padding-top: 20vw;
	}
	#home footer{
		padding-top: 30vw;
	}

}