p{padding: 0;margin: 0;}

article{
	
}

article .headline{
	height: 160px;
}

article .headline h2{
	display: flex;
	flex-flow: column;
	justify-content: center;
	text-align: center;
	align-content: center;
	align-items: center;
	color: var(--accent-color);
}

article .headline h2 em{
	display: inline-block;
	font-size: 14px;
	font-style: normal;
	text-align: center;
	letter-spacing: 8px;
}

article .headline h2 span{
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;	
	align-content: center;
	width: auto;
	height: 48px;
	font-size: 60px;
	line-height: 48px;
	text-align: center;
	letter-spacing: 4px;
	font-family: var(--font-heavy);
	font-weight: 700;
}

#news.newsContents .headline h2 span{
	font-size: 40px;
}

article .headline i{
	display: block;
	font-style: normal;
	/* transform: translate3d(-300px, 0, 0); 
	opacity: 0;*/
}

#contents > div{
	margin-bottom: 40px;
}

#contents > div.contentBlock:last-child{
	margin-bottom: 0;
}

#contents .intro{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: start;	
	align-content: start;
}

#contents .intro img{
	margin-right: 20px;
	order: 1
}

#contents .intro p{
	order: 2
}

.contentBlock .title{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;	
	align-content: center;
}

.contentBlock .title h3{
	color: var(--color-text-trasparent);
	font-size: 20px;
	letter-spacing: 4px;
}

.contentBlock > div{
	margin-bottom: 8px;
}

nav.top a {
/* opacity: 0; */
}

.itemBlock {
	margin-bottom: 8px;
	padding-bottom: 4px;
	text-align: left;
	border-bottom: var(--color-text-dark) solid 1px;
}

#news .itemBlock {
	border-bottom: none;
}

#mainContents article{
	margin-bottom: 80px;
}

/*ABOUT ------------------------------------ */

/*figure{
	width: 400px;
	height: auto;
}*/

#map{
	width: 100%;
	height: 200px;
}


#map>div,
figure img
{
	width: 400px;/*  */
	height: auto;
	vertical-align: middle;
	/* opacity: 0; */
}

.contentBlock .title h3{
  border-left: var(--accent-color) solid 8px;
  border-left: transparent solid 8px;
  padding-left: 8px;
}

.mapwrapper.gmap{
	margin: 20px 0 ;
	width: 100%;
	height: 200px;
	border-radius: 12px;
}


/* CONTACT ------------------------------------ */

form ul{
	padding-left: 0;
}

.contentBlock .notice,
form .notice{
	color: var(--accent-color);
	text-align: right;
}

form .terms{
	margin-right: 8px;
}

.contentBlock.selectForm{
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;	
	align-content: center;
	
}

.contentBlock.selectForm p{
	margin-right: 20px;
	width: 120px;
}

.contentBlock.selectForm p:last-child{
	margin-right: 0;
}

.contentBlock.selectForm p a{
	display: block;
	width: 120px;
	height: 32px;
	color: var(--color-text-light);
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 32px;
	border-radius: 4px;
	border: var(--color-text-light) solid 1px;
	background: #999;
}

.contentBlock.selectForm p a:hover{
	color: var(--accent-color-dark);
	background: var(--color-text-trasparent);
}

.contentBlock.selectForm p a.selected{
	color: var(--accent-color);
	background: #fff;
}


.formwrapperblock{
	width: 100%;
}


/* SERVICES ------------------------------------ */

.contentBlock .title{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;	
	align-content: center;
}

/*#services .contentBlock .title h3{
	margin-right: 20px;
	padding: 8px 0;
	width: 100%;
	border: var(--color-text-trasparent) dotted;
	border-width: 4px 0;
}*/

#services div#contents div.contentBlock div.title .clipping{
	flex: 0 0 200px;
	position: relative;
	width: 200px;
	height: 220px;
	background: var(--color-bg);
	overflow: hidden;
	clip-path: path('M168.16,177.34h0c-26.52,42.38-82.58,55.38-125.23,29.03h0C.28,180.02-12.79,124.3,13.72,81.92h0C40.24,39.54,104.87-26.24,165.16,11.01s29.52,123.95,3,166.33Z');
}

#services div#contents div.contentBlock div.title img{
	position: absolute;	
	z-index: 3;
	top: -60px;
}

#services div#contents div.contentBlock:nth-child(1) div.title img{
	left: -280px;
}

#services div#contents div.contentBlock:nth-child(2) div.title img{
	left: -80px;
}

#services div#contents div.contentBlock:nth-child(3) div.title img{
	left: -180px;
	top: -100px;
	height: 300px;
}

#services div#contents div.contentBlock:nth-child(4) div.title img{
	left: -180px;
	top: -120px;
	height: 300px;
}

#services div#contents div.contentBlock div.title svg
{
	display: block;
	flex: 0 0 200px;
	position: absolute;	
	top: -4px;
	left: -4px;
	z-index: 5;
	width: 208px;
	height: 228px;
}

#services div#contents div.contentBlock div.title svg {
	fill: var(--color-bg);
}



/* RECRUIT ------------------------------------ */

figure.recruit.main{
	margin-bottom: 36px;
	width: 100%;
	max-width: 880px;
	height: 39%;
	overflow: hidden;
}

figure.recruit.main img{
	position: relative;
	top: -6.8%;
	width: 100%;
	height: auto;
}
		
.contentBlock h3.main{
	
	font-size: 36px;
	line-height: 36px;
	letter-spacing: 0;
	border: none;
}


@media screen and (min-width: 881px) {
		
	.contentBlock h3.main{
		color: var(--color-hyuaran);
		font-size: 36px;
		line-height: 36px;
		letter-spacing: 0;
	}

}

@media screen and (max-width: 880px) {
		
	.contentBlock h3.main{
		font-size: max(4vw, 20px);
		line-height: max(4vw, 32px);
		letter-spacing: 0;
		text-align: center;
	}

}

/* NEWS ------------------------------------ */


#news .contentBlock{
	background: #fff;
}

#news .contentBlock > div {
	margin-bottom: 0;
}


@media screen and (min-width: 481px) {
		
	#news .contentBlock {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		align-content: center;
		padding: 8px 0;
		/* border-radius: 44px; */
		border-bottom: #efefef solid 1px;
	}
		
	#news .contentBlock:first-child {
		border-top: #efefef solid 1px;
	}

	#news #contents{
		min-height: 280px;
	}
	
	figure.newsIcon{
		flex: 0 0 80px;
		height: 80px;
		overflow: hidden;
	}
	
	figure.newsIcon img{
		width: 100%;
		height: auto;
		border-radius: 4px;
		/* border-radius: 50%; */
	}
	
	#news .subContent{
		padding: 0 20px;
		width: calc(100% - 128px);
	}
	
	a.arrow{
		flex: 0 0 48px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;	
		align-content: center;
	}

}

@media screen and (max-width: 570px) {
	
	article .headline {
		margin-bottom: 20px;
		height: 100px;
	}

	article .headline h2 span{
		height: 32px;
		line-height: 32px;
	}
	
	article .headline i{
		font-size: max(44px, 7vw);
	}
	
	article#news.newsContents .headline i{
		font-size: max(32px, 6vw);
	}
}

@media screen and (max-width: 880px) and (min-width: 481px) {

	#mainContents {
		padding-right: 24px;
	}
}	


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


	#news.newsContents .headline h2 span{
		font-size: 32px;
	}
	
	#news.newsContents .headline h2 span i{
		font-size: max(32px, 7vw);
	}

	.contentBlock{
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;	
		align-content: center;
		width: 100%;
		line-height: 24px;
		/* opacity: 0; 
		transform: translate(0, 100px);*/
	}
	
	#news .contentBlock{
		margin-bottom: 20px !important;
	}

	.contentBlock figure{
		margin-bottom: 12px !important;
		width: 100%;
	}

	.contentBlock figure img{
		width: 100%;
		height: auto;
	}

	.contentBlock .title {
		flex-flow: column;
		justify-content: start;
		align-items: center;
		align-content: center;
		margin-bottom: 8px;
	}

}


@media screen and (max-width: 320px) {
	
	#news.newsContents .headline h2 span i{
		font-size: max(28px, 7vw);
	}
}

	#services .contentBlock .title h3 {
		margin-right: 0;
		margin-bottom: 20px;
		text-align: center;
	}
	
	#services div#contents div.contentBlock div.title .clipping {
		flex: 0 0 220px;
	}


	#services div#contents div.contentBlock:nth-child(1) div.title img{
		left: -280px;
		top: -50px;
	}

	#services div#contents div.contentBlock:nth-child(2) div.title img{
		left: -80px;
		top: -90px;
	}

	#services div#contents div.contentBlock:nth-child(3) div.title img{
		left: -180px;
		top: -140px;
	}

	#services div#contents div.contentBlock:nth-child(4) div.title img{
		left: -180px;
		top: -190px;
	}

/*
.contentBlock.on
{
  opacity: 0;
  transform: translate(0, 100px);
  animation-name: preview;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}

@keyframes preview {
  0% {
	opacity: 0;
	transform: translate(0, 100px);
  }
  100% {
	opacity: 1;
	transform: translate(0, 0);
  }
}

@keyframes disappear {
  0% {
	opacity: 1;
  }
  100% {
	opacity: 0;
  }
}
*/