@charset "UTF-8";

/* ECOPAINT スタイル */

/*
.mincho {
	font-family: "Noto Serif JP", serif;
}
*/

/* Hina Mincho */
/*.hina-mincho-regular {*/
/*
.mincho {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
*/
.mincho {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.mobile_sp {
	display: none;
}
.desktop_pc {
	display: block;
}
@media screen and (max-width:1080px) {
	.mobile_sp {
		display: block;
	}
	.desktop_pc {
		display: none;
	}
}

/* ヘッダ */
.siteHeader {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 80px;
	z-index: 10;
	background-color: #FFFFFF;
	padding: 10px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
		
	& .desktop {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		& .siteHeader_logo {
			display: inline-block;
			margin-left: 10px;
			
			& img {
				height: 50px;
				width: 150px;
			}
		}
		
		& ul.pc_menu {
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0;
			margin: 0;
			
			& li {
				display: inline-flex;
				align-items: center;
				height: 100%;
				margin-right: 25px;
				font-size: 11pt;
				color: #000000;
				
				& img {
					width: 30px;
					height: 30px;
				}
			}
			
			& li:last-child {
				margin-right: 0;
			}
		}
	}
	
	& .mobile {
		display: none;
	}
}
/* モバイル*/
@media screen and (max-width:1080px) {
	.siteHeader {
		height: 70px;
		
		& .desktop {
			display: none;
		}
		
		& .mobile {
			display: flex;
			
			& .siteHeader_logo {
				display: inline-block;
				margin-left: 10px;
				
				& img {
					height: 50px;
					width: auto;
				}
			}
			
			& .hdmain {
				width: 100%;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
				& > div {
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}
				
				& > div:nth-of-type(1) {
					width: 300px;
					font-size: 30px;
					margin-left: 10px;
				}
				
				& > div:nth-of-type(2) {
					width: 100%;
				}
				
				& ul.hdinfo {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding-right: 10px;
					
					& li {
						height: 100%;
						display: flex;
						align-items: center;
						margin-left: 20px;
						
						& img.snslogo {
							width: auto;
							height: 30px;
						}
					}
					
					& li:last-child {
						margin-left: 10px;
					}
				}
			}
			
			& #spmenu {
				display: none;
				width: 100%;
				height: calc(100% - 70px);
				overflow-y: auto;
				position: fixed;
				left: 0;
				top: 70px;
				z-index: 1;
				background-color: #F5F5F5;
				
				& a:hover {
					opacity: 1;
				}
				
				& > a > p {
					width: 100%;
					height: 40px;
					padding: 0 20px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #AAAAAA;
					background-image: url(../img/sp_arrow.png?v=4);
					background-position: center right;
					background-repeat: no-repeat;
					background-size: auto 16px;
				}
				
				& .first {
					border-top: 1px solid #AAAAAA;
				}
				
				& dl.spmail {
					width: 240px;
					height: 50px;
					border: 1px solid #666666;
					margin-top: 30px;
					margin-bottom: 30px;
					margin-left: auto;
					margin-right: auto;
					display: flex;
					justify-content: center;
					align-items: center;
					
					& dt {
						width: 30px;
						
						& img {
							width: 100%;
							height: auto;
						}
					}
					
					& dd {
						width: auto;
						margin-left: 10px;
					}
				}
				
				& > ul {
					width: 100%;
					height: 40px;
					padding: 0 20px;
					border-bottom: 1px solid #AAAAAA;
					display: flex;
					/*justify-content: center;*/
					align-items: center;
					
					& > li {
						margin-right: 20px;
					}
					
					& li.spacer {
						width: 70px;
					}
				}
				
				& img.snslogo {
					width: auto;
					height: 26px;
				}
				
				& .slide {
					width: 100%;
					height: 40px;
					padding: 0 20px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #AAAAAA;
					background-image: url(../img/sp_arrow.png?v=4);
					background-position: center right;
					background-repeat: no-repeat;
					background-size: auto 16px;
				}
				
				& .submenu > a > p {
					width: 100%;
					height: 40px;
					/*padding: 0 20px;*/
					padding: 0 20px 0 40px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #AAAAAA;
					background-image: url(../img/sp_arrow.png?v=4);
					background-position: center right;
					background-repeat: no-repeat;
					background-size: auto 16px;
				}
			}
		}
	}
}

/* ハンバーガーメニュー */
#hbgmenu {
	height: 20px;
	width: 24px;
	position: relative;
	/*transition: width .2s;*/
	cursor: pointer;
	
	& span {
		display: block;
		width: 100%;
		margin: auto;
		height: 2px;
		position: absolute;
		left: 0;
		right: 0;
		top: calc((100% - 2px)/2);
		border-radius: 3px;
		transition: .2s;
		background-color: #000000;
	}
	
	& .menu__lineTop {
		transform: translateY(-10px);
	}
	
	& .menu__lineMiddle {
	}
	
	& .menu__lineBottom {
		transform: translateY(10px);
	}
}

.menu--isOpen {
	& .menu__lineTop {
		transform: rotate(45deg)!important;
	}
	
	& .menu__lineMiddle {
		opacity: 0;
	}
	
	& .menu__lineBottom {
		transform: rotate(-45deg)!important;
	}
}





.animeOn {
	top: -103px;
	animation-name: headerOnAnime;
	animation-fill-mode: forwards;
	animation-duration: 800ms;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-delay: 100ms;
	animation-direction: normal;
}
.animeOff {
	top: 0;
	animation-name: headerOffAnime;
	animation-fill-mode: forwards;
	animation-duration: 800ms;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-delay: 100ms;
	animation-direction: normal;
}

.hfrLogoOn {
	transform-origin: top left;
	transform: scale(1.0, 1.0);
	transition-duration: 200ms;
}
.hfrLogoOff {
	transform-origin: top left;
	transform: scale(0.6, 0.6);
	transition-duration: 200ms;
}

@keyframes headerOnAnime{
  0% {
    top: -103px;
  }
  100% {
    top: 0px;
  }
}
@keyframes headerOffAnime{
  0% {
    top: 0px;
  }
  100% {
    top: -103px;
  }
}


/* メイン */
.contents {
	max-width: 1600px;
	min-width: 960px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

/* メイン モバイル*/
@media screen and (max-width:1080px) {
	.contents {
		max-width: 1080px;
		min-width: 300px;
	}
}



.top_logo {
	width: 100%;
	min-width: 200px;
	max-width: 260px;
	/*aspect-ratio: 16 / 9;*/
	margin-top: 120px;
	margin-bottom: 20px;
	/*height: calc(100vh - 70px);*/
}
.top_logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.top_image {
	width: 100%;
	max-width: 1280;
	width: 60%;
	height: calc(100vh - 300px);
	position: relative;
}
.top_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_word {
	width: 40%;
	display: inline-flex;
	align-items: center;
	position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}
.top_word img {
	width: 100%;
	height: auto;
	/*filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));*/
}

.top_title {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.top_title > p {
	color: #FFFFFF;
}
.top_title > p:nth-of-type(1) {
	font-size: 46px;
}
.top_title > p:nth-of-type(2) {
	font-size: 16px;
	margin-top: 5px;
}




/* モバイル*/
@media screen and (max-width:1080px) {
	.top_logo {
		width: 100%;
		min-width: 200px;
		max-width: 260px;
		/*aspect-ratio: 16 / 9;*/
		margin-top: 100px;
		margin-bottom: 20px;
		/*height: calc(100vh - 70px);*/
	
		& img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	
	.top_image {
		max-width: 100%;
		width: 80%;
		height: calc(100vh - 300px);
		position: relative;
	
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		& .paint_container {
			width: 150px;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: -30px;
			bottom: -30px;
			margin: auto;
		}
		& .paint_container img {
			width: 100%;
			height: auto;
			filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
		}
	}
}







.block_section {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* モバイル*/
@media screen and (max-width:1080px) {
	.block_section {
		width: 100%;
		padding: 0 10px;
		max-width: 1080px;
		min-width: 300px;
		margin-top: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.qanda_section {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* モバイル*/
@media screen and (max-width:1080px) {
	.qanda_section {
		width: 100%;
		padding: 0 10px;
		max-width: 1080px;
		min-width: 300px;
		margin-top: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}


/* つくる、つかう、すてる。 */
.makaUseDispose {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-top: 80px;
	padding: 0 20px;
	
	& p.title {
		font-size: 40px;
		line-height: 45px;
		letter-spacing: 6px;
		margin-bottom: 10px;
	}
	
	& p.sentence {
		font-size: 16px;
		padding-top: 15px;
	}
}

.makaUseDispose2 {
	display: block;
	width: 640px;
	margin-top: 30px;
	
	p.sentence {
		font-size: 16px;
		line-height: 32px;
		margin-top: 30px;
	}
}

@media screen and (max-width:1080px) {
	.makaUseDispose {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80px;
		padding: 0 20px;
		
		& p.title {
			width: 100%;
			font-size: 6vw;
			line-height: 45px;
			letter-spacing: 0px;
			text-align: center;
		}
		
		& p.sentence {
			font-size: 16px;
			padding-top: 15px;
		}
	}

	.makaUseDispose2 {
		display: block;
		width: 100%;
		margin-top: 30px;
		padding: 0 20px;
		
		p.sentence {
			font-size: 16px;
			line-height: 32px;
			margin-top: 30px;
		}
	}
}





.our_writing {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-top: 80px;
}
.our_writing p.title {
	font-size: 40px;
	line-height: 45px;
	letter-spacing: 10px;
}
.our_writing p.sentence {
	font-size: 16px;
	margin-top: 10px;
}

.our_writing2 {
	display: block;
	width: 640px;
	margin-top: 30px;
}
.our_writing2 p.sentence {
	font-size: 16px;
	line-height: 32px;
	margin-top: 30px;
}

.our_writing3 {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
	margin-bottom: 50px;
	
	background-image: url(img2/human.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;
}
.our_writing3 p.title {
	font-size: 40px;
	line-height: 45px;
	letter-spacing: 10px;
}




/* ECOPAINTの11項目 */
.eleven_item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-top: 80px;
	
	& p.title {
		font-size: 40px;
		line-height: 45px;
		letter-spacing: 6px;
		margin-bottom: 10px;
	}
	& p.sentence {
		font-size: 16px;
		margin-top: 10px;
	}
}

.eleven_icon {
	display: flex;
	max-width: 768px;
	margin-top: 80px;
	
	& dt {
		width: 25%;
		
		& img {
			width: 70%;
			height: auto;
		}
		& p {
			width: 70%;
			margin-top: 20px;
			font-size: 18px;
			text-align: center;
		}
	}

	& dd {
		width: 75%;
		
		& ul {
			display: flex;
			margin: 0;
			padding: 0;
			& li {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				& img {
					width: 80%;
					height: auto;
				}
				& p {
					display: block;
					width: 100%;
					font-size: 12px;
					line-height: 16px;
					text-align: center;
					margin-top: 10px;
				}
			}
		}
		
		& ul:nth-of-type(1) {
			margin-bottom: 50px;
		}
	}
}
.eleven_icon_sp {
	display: none;
}

@media screen and (max-width:1080px) {
	.eleven_item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80px;
		padding: 0 10px;
		
		& p.title {
			/*font-size: 7vw;*/
			font-size:clamp(18px, 6vw, 40px);
			line-height: 45px;
			letter-spacing: 10px;
		}
		& p.sentence {
			font-size: 16px;
			margin-top: 10px;
		}
	}

	.eleven_icon {
		display: none;
	}
	.eleven_icon_sp {
		display: flex;
		max-width: 768px;
		margin-top: 80px;
		padding: 0 20px;
		
		& ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 100%;
			margin: 0;
			padding: 0;
			& li {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 20px;
				& img {
					width: 80%;
					height: auto;
				}
				& p {
					display: block;
					width: 100%;
					font-size: 12px;
					line-height: 16px;
					text-align: center;
					margin-top: 10px;
				}
			}
			& li:first-child {
				width: 66%;
				
				& > img {
					width: 60%;
					height: auto;
				}
			}
			& li:nth-child(2) {
				justify-content: flex-end;
			}
		}
		
		& ul:nth-of-type(1) {
			margin-bottom: 50px;
		}
			
		/*
		& dt {
			width: 30%;
			
			& img {
				width: 70%;
				height: auto;
			}
			& p {
				width: 70%;
				margin-top: 20px;
				font-size: 18px;
				text-align: center;
			}
		}

		& dd {
			width: 70%;
			
			& ul {
				display: flex;
				flex-wrap: wrap;
				margin: 0;
				padding: 0;
				& li {
					width: 33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 20px;
					& img {
						width: 80%;
						height: auto;
					}
					& p {
						display: block;
						width: 100%;
						font-size: 12px;
						line-height: 16px;
						text-align: center;
						margin-top: 10px;
					}
				}
			}
			
			& ul:nth-of-type(1) {
				margin-bottom: 50px;
			}
		}
		*/
	}
}


/* 安全な塗料、ECO PAINTとは？ */

.safety_paint {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
	margin-bottom: 50px;
	
	background-image: url(img2/human.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;

	& p.title {
		font-size: 40px;
		line-height: 45px;
		letter-spacing: 10px;
	}
}

@media screen and (max-width:1080px) {
	.safety_paint {
		width: 100%;
		max-width: 100%;
		min-width: 300px;
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
		margin-bottom: 20px;
		background-image: none;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center right;
		
		& p.title {
			font-size:clamp(18px, 7vw, 40px);
			line-height: 45px;
			letter-spacing: 10px;
			text-align: center;
		}
	}
	
	.safery_part {
		width: 100%;
		max-width: 768px;
		padding: 0px 40px;
		margin-top: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		& > p {
			font-size: 28px;
		}
		& > div {
			width: 100%;
			background-repeat: no-repeat;
			background-size: contain;
			margin-top: 30px;
			margin-bottom: 40px;
			
			& > p {
				font-size: 16px;
				line-height: 24px;
			}
		}
		& img {
			width: 70%;
			height: auto;
		}
	}
}





/* 未使用 */
.lineup {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	
	& .topNumber {
		position: absolute;
		top: -70px;
		left: 0;
		display: inline-flex;
		align-items: flex-end;
		
		& p:nth-of-type(1) {
			font-size: 50px
		}
		& p:nth-of-type(2) {
			font-size: 40px
		}
		& p:nth-of-type(3) {
			font-size: 30px
		}
	}
	
	& .lineupLeft {
		width: 50%;
		/*height: auto;*/
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		/*aspect-ratio: 1.6;*/
		
		& .paint_pkg {
			width: 150px;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: -30px;
			bottom: -20px;
			margin: auto;
			
			& img {
				width: 100%;
				height: auto;
				filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
			}
		}
		
		& > ul {
			display: flex;
			justify-content: space-between;
			margin-top: 50px;
			
			& > li {
				width: 30%;
				
				& > img {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	& .lineupRight {
		width: 45%;
		/*background-color: #F0F0F0;*/
		display: flex;
		flex-direction: column;

		& .topBox {
			width: 50%;
			position: relative;
			display: flex;
			align-items: flex-start;

			& img.writing {
				width: 100%;
				height: auto;
			}
			& img.illust_roller {
				position: absolute;
				width: auto;
				height: 150%;
				right: -50%;
				top: -5%;
				transform: rotate(30deg);
			}
			& img.illust_brush {
				position: absolute;
				width: auto;
				height: 120%;
				right: -70%;
				top: -10%;
			}
			& img.illust_mop {
				position: absolute;
				width: auto;
				height: 130%;
				right: -60%;
				top: -10%;
			}
		}
		
		& .midBox {
			margin-top: 20px;
			& p:nth-of-type(1) {
				font-size: 18px;
				margin-top: 20px;
				margin-bottom: 10px;
			}
			& p:nth-of-type(2) {
				font-size: 14px;
			}
			& p:nth-of-type(3) {
				font-size: 24px;
				font-weight: bold;
				margin-top: 40px;
				margin-bottom: 30px;
				letter-spacing: 3pt;
			}
			& p:nth-of-type(4) {
				font-size: 16px;
				line-height: 28px;
				letter-spacing: 3pt;
			}
	
		}
		
		& .btmBox {
			width: 100%;
			margin-top: 20px;
			& img.lehm {
				width: 100%;
				height: auto;
			}
			& img.kibe {
				width: 45%;
				height: auto;
			}
			& img.wachs {
				width: 15%;
				height: auto;
			}
		}
	}
}


.band_section {
	width: 100%;
	max-width: 100%;
	min-width: 960px;
	margin-top: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120px 0 80px 0;
}
.band_section2 {
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 0 50px 0;
}
.back_color1 {
	background-color: #f5f5f5;
}
.back_color2 {
	background-color: #fff4e8;
}


.lineupPhoto_1 {
	background-image: url(img2/lineup_01a.webp);
}
.lineupPhoto_2 {
	background-image: url(img2/lineup_02a.webp);
}
.lineupPhoto_3 {
	background-image: url(img2/lineup_03.webp);
}



.lineup2 {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	position: relative;
	
	& .topNumber {
		position: absolute;
		top: -70px;
		left: 30px;
		display: inline-flex;
		align-items: flex-end;
		z-index: 1;
		
		& > img {
			width: 140px;
			height: auto;
		}
		/*
		& p:nth-of-type(1) {
			font-size: 50px
		}
		& p:nth-of-type(2) {
			font-size: 40px
		}
		& p:nth-of-type(3) {
			font-size: 30px
		}
		*/
	}
	
	& .lineupLeft {
		width: 50%;
		/*
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		*/
		/*aspect-ratio: 1.6;*/
		
		& .main_img {
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			aspect-ratio: 4 /3;
			
			& .paint_pkg {
				width: 200px;
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: -30px;
				bottom: -20px;
				margin: auto;
				
				& img {
					width: 100%;
					height: auto;
					filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
				}
			}
		}
		
		& ul {
			display: flex;
			justify-content: space-between;
			margin-top: 50px;
			
			& > li {
				width: 30%;
				cursor: pointer;
				
				& > img {
					width: 100%;
					height: auto;
				}
			}
			& > li:hover {
				opacity: 0.7;
			}
		}
	}

	& .lineupRight {
		width: 45%;
		/*background-color: #F0F0F0;*/
		display: flex;
		flex-direction: column;

		& .topBox {
			width: 50%;
			position: relative;
			display: flex;
			align-items: flex-start;

			& img.writing {
				width: 100%;
				height: auto;
			}
			& img.illust_roller {
				position: absolute;
				width: auto;
				height: 150%;
				right: -50%;
				top: -5%;
				transform: rotate(30deg);
			}
			& img.illust_brush {
				position: absolute;
				width: auto;
				height: 120%;
				right: -70%;
				top: -10%;
			}
			& img.illust_mop {
				position: absolute;
				width: auto;
				height: 130%;
				right: -60%;
				top: -10%;
			}
		}
		
		& .midBox {
			margin-top: 20px;
			& p:nth-of-type(1) {
				font-size: 18px;
				margin-top: 20px;
				margin-bottom: 10px;
			}
			& p:nth-of-type(2) {
				font-size: 14px;
			}
			& p:nth-of-type(3) {
				font-size: 18px;
				font-weight: bold;
				margin-top: 40px;
				margin-bottom: 30px;
				letter-spacing: 1pt;
			}
			& p:nth-of-type(4) {
				font-size: 16px;
				line-height: 28px;
				letter-spacing: 1pt;
			}
	
		}
		
		& .btmBox {
			width: 100%;
			margin-top: 20px;
			& ul {
				display: flex;
				flex-wrap: wrap;
				
				& li {
					width: 20%;
					display: flex;
					justify-content: center;
					margin-top: 20px;
					
					& img {
						width: 80%;
						height: auto;
					}
				}
			}
			& img.lehm {
				width: 100%;
				height: auto;
			}
			& img.kibe {
				width: 45%;
				height: auto;
			}
			& img.wachs {
				width: 15%;
				height: auto;
			}
		}
	}
}

@media screen and (max-width:1080px) {
	.band_section {
		width: 100%;
		max-width: 100%;
		min-width: 300px;
		margin-top: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 120px 20px 80px 20px;
	}
	.back_color1 {
		background-color: #f5f5f5;
	}
	.back_color2 {
		background-color: #fff4e8;
	}

	.lineup2 {
		width: 100%;
		max-width: 100%;
		min-width: 300px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		justify-content: space-between;
		position: relative;
		
		& .topNumber {
			position: absolute;
			top: -50px;
			left: 30;
			display: inline-flex;
			align-items: flex-end;
			z-index: 1;
		
			& > img {
				width: 100px;
				height: auto;
			}
			/*
			& p:nth-of-type(1) {
				font-size: 50px
			}
			& p:nth-of-type(2) {
				font-size: 40px
			}
			& p:nth-of-type(3) {
				font-size: 30px
			}
			*/
		}
		
		& .lineupLeft {
			width: 100%;
			/*
			background-repeat: no-repeat;
			background-size: cover;
			position: relative;
			*/
			/*aspect-ratio: 1.6;*/
			
			& .main_img {
				background-repeat: no-repeat;
				background-size: cover;
				position: relative;
				aspect-ratio: 4 /3;
				
				& .paint_pkg {
					width: 40%;/*150px;*/
					display: inline-flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					position: absolute;
					right: 0px;
					bottom: -20px;
					margin: auto;
					
					& img {
						width: 100%;
						height: auto;
						filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
					}
				}
			}
			
			& ul {
				display: flex;
				justify-content: space-between;
				margin-top: 50px;
				
				& > li {
					width: 30%;
					cursor: pointer;
					
					& > img {
						width: 100%;
						height: auto;
					}
				}
				& > li:hover {
					opacity: 0.7;
				}
			}
		}

		& .lineupRight {
			width: 100%;
			/*background-color: #F0F0F0;*/
			display: flex;
			flex-direction: column;
			margin-top: 30px;

			& .topBox {
				width: 50%;
				position: relative;
				display: flex;
				align-items: flex-start;

				& img.writing {
					width: 100%;
					height: auto;
				}
				& img.illust_roller {
					position: absolute;
					width: auto;
					height: 150%;
					right: -50%;
					top: -5%;
					transform: rotate(30deg);
				}
				& img.illust_brush {
					position: absolute;
					width: auto;
					height: 120%;
					right: -70%;
					top: -10%;
				}
				& img.illust_mop {
					position: absolute;
					width: auto;
					height: 130%;
					right: -60%;
					top: -10%;
				}
			}
			
			& .midBox {
				margin-top: 20px;
				& p:nth-of-type(1) {
					font-size: 18px;
					margin-top: 20px;
					margin-bottom: 10px;
				}
				& p:nth-of-type(2) {
					font-size: 14px;
				}
				& p:nth-of-type(3) {
					font-size: 18px;
					font-weight: bold;
					margin-top: 40px;
					margin-bottom: 30px;
					letter-spacing: 1pt;
				}
				& p:nth-of-type(4) {
					font-size: 16px;
					line-height: 28px;
					letter-spacing: 1pt;
				}
		
			}
			
			& .btmBox {
				width: 100%;
				margin-top: 20px;
				& ul {
					display: flex;
					flex-wrap: wrap;
					
					& li {
						width: 20%;
						display: flex;
						justify-content: center;
						margin-top: 20px;
						
						& img {
							width: 80%;
							height: auto;
						}
					}
				}
				& img.lehm {
					width: 100%;
					height: auto;
				}
				& img.kibe {
					width: 45%;
					height: auto;
				}
				& img.wachs {
					width: 15%;
					height: auto;
				}
			}
		}
	}
}








/* インスタ */
.insta_section {
	width: 100%;
	max-width: 960px;
	/*min-width: 600px;*/
	margin-top: 100px;
	padding: 50px 20px;
	
	& .insta_title {
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		& p:nth-of-type(1) {
			font-size:clamp(18px, 8vw, 50px);
			line-height: 60px;
			/*letter-spacing: 10px;*/
			text-align: center;
			background-image: url(img2/Instagram_image.webp);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center right;
			padding: 0 80px;
		}
		
		& p:nth-of-type(2) {
			font-size: 16px;
			margin-top: 15px;
		}
	}
	
	& .insta_body {
		display: flex;
		justify-content: center;
		
		& > a {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			
			& > dl {
				width: 40%;
				
				& > dt {
					display: flex;
					justify-content: center;
					& img {
						width: 50%;
						heigth: auto;
						object-fit: cover;
						border-radius: 99999px;
					}
				}
				
				& > dd {
					text-align: center;
					padding: 10px;
				}
			}
			
			& div.insta_image {
				width: 40%;
				
				& img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
	
	& .insta_follow {
		display: flex;
		justify-content: center;
		margin-top: 80px;
		
		& > a {
			display: flex;
			justify-content: center;
			
			& > img {
				width: 300px;
				height: auto;
				filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
			}
		}
		& > a:hover {
			opacity: 0.7;
		}
	}
}
@media screen and (max-width:1080px) {
	.insta_section {
		width: 100%;
		max-width: 960px;
		/*min-width: 600px;*/
		padding: 50px 20px;
		
		& .insta_title {
			width: 100%;
			height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			& p:nth-of-type(1) {
				font-size:clamp(18px, 8vw, 50px);
				line-height: 60px;
				/*letter-spacing: 10px;*/
				text-align: center;
				background-image: url(img2/Instagram_image.webp);
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center right;
				padding: 0 80px;
			}
			
			& p:nth-of-type(2) {
				font-size: 16px;
				margin-top: 15px;
			}
		}
		
		& .insta_body {
			display: flex;
			justify-content: center;
			
			& > a {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 40px;
				
				& dl {
					width: 70%;
					
					& > dt {
						display: flex;
						justify-content: center;
						& img {
							width: 30%;
							heigth: auto;
							object-fit: cover;
							border-radius: 99999px;
						}
					}
					
					& > dd {
						text-align: center;
						padding: 10px;
					}
				}
				
				& div.insta_image {
					width: 70%;
					margin-top: 20px;
					
					& img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
}






/* お問い合わせ */
.contact_section {
	width: 100%;
	max-width: 960px;
	/*min-width: 600px;*/
	margin-top: 100px;
	padding: 50px 20px;
	
	& .contact_title {
		width: 100%;
		height: 80px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		& p:nth-of-type(1) {
			font-size:clamp(18px, 8vw, 40px);
			line-height: 60px;
			/*letter-spacing: 10px;*/
			text-align: center;
		}
		
		& p:nth-of-type(2) {
			font-size: 16px;
			line-height: 20px;
			margin-top: 15px;
		}
	}
	
	& .contact_body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		& > .sample {
			& img {
				width: 400px;
				height: auto;
				margin-top: 50px;
			}
			& p {
				margin-top: 15px;
				font-size: 16px;
				text-align: center;
			}
		}
		
		& > a {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			
			& > div {
				width: 450px;
				padding: 20px;
				border: 1px solid #000000;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				& > p:nth-of-type(1) {
					font-size: 36px
				}
				
				& > p:nth-of-type(2) {
					font-size: 18px;
					margin-top: 10px;
				}
			}
		}
	}
}
@media screen and (max-width:1080px) {
	.contact_section {
		width: 100%;
		max-width: 960px;
		/*min-width: 600px;*/
		padding: 50px 20px;
		
		& .insta_title {
			width: 100%;
			height: 80px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			& p:nth-of-type(1) {
				font-size:clamp(18px, 8vw, 40px);
				line-height: 60px;
				/*letter-spacing: 10px;*/
				text-align: center;
			}
			
			& p:nth-of-type(2) {
				font-size: 16px;
				line-height: 20px;
				margin-top: 15px;
			}
		}
		
		& .contact_body {
			display: flex;
			justify-content: center;
			
			& > .sample {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				& img {
					width: 320px;
					height: auto;
					margin-top: 50px;
				}
				& p {
					margin-top: 15px;
					font-size: 16px;
					text-align: center;
				}
			}
			
			& > a {
				display: flex;
				justify-content: center;
				margin-top: 40px;
				
				& > div {
					width: 400px;
					padding: 20px;
					border: 1px solid #000000;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
					& > p:nth-of-type(1) {
						font-size: 36px;
					}
					
					& > p:nth-of-type(2) {
						font-size: 18px;
						margin-top: 10px;
					}
				}
			}
	}
	}
}







/*
.safety_paint {
	width: 100%;
	max-width: 1280px;
	min-width: 960px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 80px;
	margin-bottom: 50px;
	
	background-image: url(img2/human.webp);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center right;

	& p.title {
		font-size: 40px;
		line-height: 45px;
		letter-spacing: 10px;
	}
}

@media screen and (max-width:1080px) {
	.safety_paint {
		width: 100%;
		max-width: 100%;
		min-width: 300px;
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 40px;
		margin-bottom: 20px;
		
		background-image: none;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center right;
	
		& p.title {
			font-size:clamp(18px, 7vw, 40px);
			line-height: 45px;
			letter-spacing: 10px;
			text-align: center;
		}
	}
	
	.safery_part {
		width: 100%;
		max-width: 768px;
		margin-top: 40px;
		padding: 0 20px;
		margin-top: 40px;
		
		& p {
			font-size: 24px;
			margin-bottom: 10px;
		}
		& div {
			width: 100%;
			background-repeat: no-repeat;
			background-size: contain;
			
			& img {
				width: 100%;
				height: auto;
			}
		}
	}
}
*/







#top_inquiry {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	height: 40px;
	padding: 5px 20px;
	background-color: #EEEEEE;
	border-radius: 20px;
	margin-top: 30px;
}

.top_side {
	width: 250px;/*40%;*/
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	/*
	bottom: -8%;
	left: -25%;
	*/
	left: 0;
	right: 0;
	bottom: 50px;
	margin: auto;
}
.top_side img {
	width: 100%;
	height: auto;
}

.paint_container {
	width: 150px;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	/*left: 0;*/
	right: -50px;
	bottom: -50px;
	margin: auto;
}
.paint_container img {
	width: 100%;
	height: auto;
	filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5));
}


.detail_section {
	width: 60%;
	margin-top: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.separate_block {
	width: 30px;
	height: 30px;
	background-color: #304562;
	margin-bottom: 50px;
}


.our_sentence {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 30px;
}
.our_sentence p {
	font-size: 16px;
	line-height: 35px;
}

.separator_1, .separator_2 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 100px;
}
.separator_1 img, .separator_2 img {
	width: 100%;
}

.band_upper {
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.band_upper > div {
	border: 1px solid #c6cfd5;
	border-bottom: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px;
}
.band_center {
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	/*background-color: #eff1f3;*/
	display: flex;
	flex-direction: column;
	align-items: center;
}
.band_center > div {
	border-left: 1px solid #c6cfd5;
	border-right: 1px solid #c6cfd5;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50px;
}
.band_bottom {
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.band_bottom > div {
	border: 1px solid #c6cfd5;
	border-top: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.w600 {
	width: 600px;
}
.w800 {
	width: 800px;
}
.w960 {
	width: 960px;
}
.band_color_gray {
	background-color: #eff1f3;
}
.band_color_white {
	background-color: #ffffff;
}

.solution_list {
	/*width: 90%;*/
	display: block;
	table-layout: fixed;
}
.solution_list td {
	padding: 8px 0;
}
.solution_list td:nth-child(1) {
	width: 80px;
	text-align: center;
}
.solution_list td:nth-child(2) {
	text-align: left;
}
.solution_list img {
	width: auto;
	height: 22px;
}
.solution_box_top {
	position: relative;
}
.solution_box_top div:nth-of-type(1) {
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	transform-origin: bottom left;
	transform: rotate(-10deg);
	margin-top: 10px;
	margin-left: -30px;
	padding: 5px 20px;
	background-color: #F5D478;
}
.solution_box_top div:nth-of-type(2) {
	margin-bottom: 0px;
}
.solution_box_top div:nth-of-type(2) td {
	font-size: 28px;
	text-align: center;
	padding-top: 10px;
}
.solution_box_top .ring {
	display: block;
	width: 10px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
.solution_box_bottom {
	height: 80px;
}

.parallelogram_area {
	width: 800px;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 60px;
}
.parabox {
	text-align: left;
	position: relative;
}
.parabox_padleft {
	padding-left: 100px;
}
.parabox_padright {
	padding-left: 150px;
}
.parabox > div {
	font-size: 30px;
	color: #FFFFFF;
}
.parabox > p {
	margin-top: 20px;
}
.parabox .parabox_title {
	margin-top: 20px;
	font-size: 40px;
	color: #FFFFFF;
}
.parabox > p:nth-of-type(1) {
	font-size: 20px;
	line-height: 30px;
	color: #FFFFFF;
}
.parabox > p:nth-of-type(2) {
	font-size: 16px;
	line-height: 30px;
	color: #FFFFFF;
}
.parabox  .para_image_right {
	width: 200px;
	height: auto;
	position: absolute;
	right: -150px;
	top: -50px;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.5);
}
.parabox  .para_image_left {
	width: 200px;
	height: auto;
	position: absolute;
	left: -150px;
	top: -50px;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.5);
}

/* 平行四辺形 */
.parallelogram{
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 auto;
	width: 640px;
	height: 300px;
	/*width: 100px;*/
}
.parallelogram::before{
	transform: skewX(-30deg);
	content: "";		/*ボックスを作る*/
	position: absolute;	/*ポジションで中央に配置*/
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1;		/* 親要素の後ろに来るように-1 */
	background-color:#aeb9c3;
}
.parallelogram_rev{
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0 auto;
	width: 640px;
	height: 300px;
	/*width: 100px;*/
}
.parallelogram_rev::before{
	transform: skewX(30deg);
	content: "";		/*ボックスを作る*/
	position: absolute;	/*ポジションで中央に配置*/
	top: 0; bottom: 0; left: 0; right: 0;
	z-index: -1;		/* 親要素の後ろに来るように-1 */
	background-color:#aeb9c3;
}



.assessment_section {
	width: 80%;
	margin-top: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	
}
.assess_handtitle {
	width: 100%;
	max-width: 500px;
	min-width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.assess_title {
	margin-top: 100px;
}
.assess_title > div {
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	transform-origin: bottom left;
	transform: rotate(-10deg);
	margin-top: 10px;
	margin-left: -30px;
	padding: 5px 20px;
	background-color: #F5D478;
}
.assess_title > p {
	font-size: 28px;
	line-height: 38px;
}
.assessment {
	width: 100%;
	max-width: 960px;
	min-width: 600px;
	margin-top: 80px;
	margin-bottom: 50px;
}
.assessment img {
	width: 100%;
	height: auto;
}
.assess_writing {
	width: 100%;
	max-width: 760px;
	min-width: 600px;
}
.assess_writing > p:nth-of-type(1) {
	font-size: 24px;
	margin-top: 30px;
	text-align: center;
}
.assess_writing > p:nth-of-type(2) {
	font-size: 14px;
	line-height: 30px;
	margin-top: 20px;
	text-align: center;
}


.material_box_top {
	position: relative;
}
.material_box_top div:nth-of-type(1) {
	display: inline-block;
	font-size: 22px;
	font-weight: bold;
	transform-origin: bottom left;
	transform: rotate(-10deg);
	margin-top: 10px;
	margin-left: -30px;
	padding: 5px 20px;
	background-color: #F5D478;
}
.material_box_top div:nth-of-type(2) {
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}
.solution_box_bottom {
	height: 80px;
}

.material_type {
	width: 100%;
	max-width: 960px;
	min-width: 600px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 30px 50px;
}
.material_type li {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 12%;
}
.material_type li img {
	width: 100%;
	height: auto;
}
.material_type li > p {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
}

.material_component {
	text-align: center;
}
.material_component p:nth-of-type(1) {
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}
.material_component p:nth-of-type(2) {
	text-align: center;
	line-height: 30px;
	margin-bottom: 30px;
}

.material_nouse {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px;
	margin-bottom: 50px;
}
.material_nouse > div {
	display: inline-flex;
	position: relative;
	font-size: 28px;
	margin-bottom: 30px;
	text-align: center;
}
.material_nouse > div > div {
	display: inline-block;
	position: absolute;
	right: -100px;
	top: 0;
	bottom: 0;
	margin: auto;
	font-size: 60px;
	line-height: 60px;
	color: #ffb4b4;
}
.material_nouse > p {
	display: inline-block;
	line-height: 30px;
	text-align: center;
}

.material_ph {
	display: flex;
	justify-content: center;
	width: 80%;
}
.material_ph img {
	width: 100%;
	height: auto;
}

.material_hands {
}

.material_hands > ul {
	display: flex;
	justify-content: center;
}
.material_hands > ul > li {
	width: 35%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.material_hands > ul > li:first-child {
	margin-right: 50px;
}
.material_hands > ul > li > p {
	text-align: center;
	margin-bottom: 30px;
}
.material_hands > ul > li > img {
	width: 100%;
	height: auto;
}

.material_hands > p {
	line-height: 30px;
	margin-top: 50px;
	text-align: center;
}





.lineup_section {
	width: 100%;
	margin-top: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lineup_section .lineup_image {
	width: 100%;
	max-width: 2560px;
	/*height: 500px;*/
	aspect-ratio: 2.84 / 1;
	background-image: url(img2/lineup_top.webp);
	background-repeat: no-repeat;
	background-size: cover;
	margin-bottom: 50px;
}
.lineup_writing {
	width: 60%;
	max-width: 400px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lineup_writing img {
	width: 200px;
	height: auto;
}
.lineup_writing p {
	font-size: 30px;
	margin-top: 30px;
}

.lineup_details {
	width: 100%;
	max-width: 1200px;
	min-width: 760px;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
}
.lineup_details p.lineup_name {
	postion absolute;
	top: 100px;
	left:100px;
	font-size: clamp(3.75rem, 1.5441rem + 4.7059vw, 6.25rem);
	font-weight: bold;
	color: #c8d2d2; /*#d4e0de;*/
}

.lineup_details .lineup_body {
	display: flex;
}
.lineup_details .lineup_image_1 {
	width: 50%;
	aspect-ratio: 16 / 9;
	background-image: url(img2/lineup_1_back.webp);
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin-top: 20px;
	position: relative;
}
.lineup_details .lineup_pkg {
	position: absolute;
	bottom: 50px;
	left: 50px;
}
.lineup_details .lineup_writing {
	width: 40%;
	margin-left: 50px;
}
.lineup_details .lineup_writing p:nth-of-type(1) {
	display: inline-block;
	font-size: 30px;
	margin-bottom: 30px;
}
.lineup_details .lineup_writing p:nth-of-type(2) {
	display: inline-block;
	font-size: 16px;
	line-height: 30px;
}

.lineup_sentence {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 30px;
}
.lineup_sentence p {
	font-size: 16px;
	line-height: 35px;
}

.lineup_details .kb_color {
	width: 100%;
	max-width: 1280px;
	min-width: 760px;
}
.lineup_details .kb_color > p {
	display: block;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 18px;
	color: #99999
}
.lineup_details .kb_color ul {
	display: flex;
}
.lineup_details .kb_color li {
	width: 10%;
	margin-right: 20px;
	/*border: 1px solid #CCCCCC;*/
}
.lineup_details .kb_color li img {
	width: 100%;
	height: auto;
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
}








.contact_img {
	width: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.contact_img img {
	width: 100%;
	height: auto;
}

.ecopaint_logo {
}
.ecopaint_logo > p:nth-of-type(1) {
	font-size: 40px;
}
.ecopaint_logo > p:nth-of-type(2) {
	font-size: 16px;
	margin-top: 5px;
}






/* スクロール フェードイン */
.fade-in {
	opacity : 0.0;
	transform : translate(0, 50px);
	transition : all 500ms;
}
.scroll-in {
	opacity : 1;
	transform : translate(0, 0);
}
.fade-h-in {
	opacity : 0.0;
	transform : translate(-50px, 0);
	transition : all 500ms;
}
.scroll-h-in {
	opacity : 1;
	transform : translate(0, 0);
}






/* ページ内カートボタン */
#animCartButton {
  height: 93px;
  position: absolute;
  right: -10px;
  top: 20px;
  width: 93px;
  z-index: 1;
}

@media (min-width: 375px) {
  #animCartButton {
    height: calc( 5.8125rem + ( ( 1vw - 3.75px ) * 10.27624 ));
  }
}

@media (min-width: 1280px) {
  #animCartButton {
    height: 186px;
  }
}

@media (min-width: 375px) {
  #animCartButton {
    top: calc( 1.25rem + ( ( 1vw - 3.75px ) * 2.20994 ));
  }
}

@media (min-width: 1280px) {
  #animCartButton {
    top: 40px;
  }
}

@media (min-width: 375px) {
  #animCartButton {
    width: calc( 5.8125rem + ( ( 1vw - 3.75px ) * 10.27624 ));
  }
}

@media (min-width: 1280px) {
  #animCartButton {
    width: 186px;
  }
}

@media (min-width: 1280px) {
  #animCartButton {
    bottom: 50px;/*100px;*/
    position: fixed;
    right: 15px;
    top: auto;
  }
}

@media (min-width: 1280px) and (min-width: 375px) {
  #animCartButton {
    right: calc( 0.9375rem + ( ( 1vw - 3.75px ) * 1.65746 ));
  }
}

@media (min-width: 1280px) and (min-width: 1280px) {
  #animCartButton {
    right: 30px;
  }
}

#animCartButton > a {
  display: block;
  height: 100%;
  width: 100%;
}

#animCartButton > a > .btn-inner {
  /*background: url(../img/circle.png) no-repeat center center/cover;*/
  background: url(img/circle.png) no-repeat center center/cover;
  display: block;
  height: 100%;
  width: 100%;
  animation: 10s linear infinite rotation;
}

#animCartButton > a > img {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 25px;
}

@media (min-width: 375px) {
  #animCartButton > a > img {
    width: calc( 1.5625rem + ( ( 1vw - 3.75px ) * 2.76243 ));
  }
}

@media (min-width: 1280px) {
  #animCartButton > a > img {
    width: 50px;
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}


/* スクロール促進 */
.scroll_promotion {
	position: fixed;
	right:100px;
	top: 150px;
	z-index: 1;
	width: 40px;
	height: 250px;
	cursor: pointer;
	user-select: none;
}
.scroll_promotion a {
	display: inline-block;
	position: absolute;
	top: 0;
	z-index: 2;
	padding: 10px 10px 160px;
	color: #000000;
	font-size: 14px;
	font-family: 'Josefin Sans', sans-serif;
	line-height: 1;
	letter-spacing: .2em;
	text-decoration: none;
	writing-mode: vertical-lr;
	transition: .2s;
	overflow: hidden;
}
.scroll_promotion a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 100px;
	background: #000000;
}
.scroll_promotion a:hover {
	opacity: 0.5;
}

#type07 a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 150px;
	background: rgba(0, 0, 0, 0.2);
}
#type07 a::after {
	height: 30px;
	animation: sdl07 3.0s ease infinite;
}
@keyframes sdl07 {
	0% {
		transform: translateY(-120px);
	}
	50%, 100% {
		transform: translateY(30px);
	}
}

/*
.scroll_promotion {
	position: fixed;
	right:100px;
	top: 150px;
	z-index: 1;
	width: 40px;
	height: 250px;
}
.scroll_promotion a {
  display: inline-block;
  position: absolute;
  top: 0;
  z-index: 2;
  padding: 10px 10px 160px;
  color: #000000;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: .2s;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100px;
    background: #000000;
  }
  &:hover {
    opacity: .5;
  }
}

#type07 a {
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 150px;
    background: rgba(0, 0, 0, 0.2);
  }
  &::after {
    height: 30px;
    animation: sdl07 3.0s ease infinite;
  }
}
@keyframes sdl07 {
  0% {
    transform: translateY(-120px);
  }
  50%, 100% {
    transform: translateY(30px);
  }
}
*/


/* 固定サイドメニュー */
#fix_menu {
	position: fixed;
	top: 150px;
	right: 0;
	z-index: 10;
	width: 100px;
	height: 200px;
	border: 2px solid #CCCCCC;
	border-right: none;
	border-radius: 5px 0 0 5px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
	background-image: url(img2/fixmenu.webp);
	background-position: top 10px center;
	background-repeat: no-repeat;
	background-size: 70px auto;
	cursor: pointer;
	
	& ul {
		display: flex;
		flex-direction: column;
		margin-top: 120px;
		
		& li {
			display: flex;
			justify-content: center;
			align-items: center;
			
			& > a {
				font-size: 14px;
			}
		}
		
		& li:first-child {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		
		& li:nth-child(n+2) {
			font-size: 12px;
			padding: 5px 0;
		}
	}
}

@media screen and (max-width:1080px) {
	#fix_menu {
		display: none;
	}
}



/* モバイル */
._sp {
  display: block !important;
}

@media (min-width: 768px) {
  ._sp {
    display: none !important;
  }
}





























/* フロートメニュー */

/* TEL・お問い合わせ フロート表示 ↓↓↓ */
.floatLinkMenu {
	position: fixed;
	display: inline-block;
	width: 60px;
	left: -90px;
	right: 0;
	bottom: auto;
	top: calc(50% - 220px/2);
	z-index: 1000;
	padding-left: 10px;

	animation-name: showLinkAnime;
	animation-fill-mode: forwards;
	animation-duration: 800ms;
	animation-iteration-count: 1;
	animation-timing-function: ease;
	animation-delay: 1s;
	animation-direction: normal;
}
.subCmMainPanel {
	display: inline-block;
}
.subCmMainPanel > div {
	display:inline-flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.subCmMainPanel > div > a > div {
	cursor: pointer;
	transform: scale(1.0, 1.0);
	transition-duration: 200ms;
	
	width: 75px;
	height: 75px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
}
.subCmMainPanel > div > a > div:last-child {
	margin-bottom: 0;
}
.subCmMainPanel > div > a > div > img {
	transition-duration: 200ms;
}
.subCmMainPanel > div > a > div:hover img {
	transform: scale(1.15, 1.15);
	transition-duration: 200ms;
}
.subCmMainPanel > div > a > div > p {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 12px;
	margin-top: 3px;
}
.subCmMainPanel > div > a > div:hover {
	transform: scale(1.15, 1.15);
	background-color: #FFFFFF;
}

.subCmMainPanel .subCmIcon {
	width: auto;
	height: 35px;
	cursol: pointer;
}

.subCmMainPanel .subCmIcon2 {
	width: auto;
	height: 35px;
	cursol: pointer;
}

.subCmMainPanel .subCmIconLogo {
	width: auto;
	height: 35px;
	cursol: pointer;
}

.subCmMainPanel img {
	display: block;
}

.subCmMainPanel > div > a {
	display: flex;
	width: 75px;
	height: 75px;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	margin-bottom: 20px;
}
.subCmMainPanel > div > a:hover {
	opacity: 1;
}


@media screen and (max-width:1080px) {
	.floatLinkMenu {
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
		top: auto;
		bottom: -123px;
		z-index: 1000;
		background-color: #fff;
		padding: 10px 0;
		border-top: 1px solid #999999;
		background-color: #F3F3F3;
		box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.3);
	}
	
	.subCmMainPanel {
		display: block;
	}

	.subCmMainPanel > div {
		display:flex;
		flex-direction: row;
		justify-content:center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}

	.subCmMainPanel > div > a > div {
		cursor: pointer;
		transform: scale(1.0, 1.0);
		transition-duration: 200ms;
		margin-bottom: 0;
		
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 0;
		background-color: transparent;
		border-radius: 0;
	}
	.subCmMainPanel > div > a > div:last-child {
		margin-right: 0;
	}
	.subCmMainPanel > div > a > div {
		transition-duration: 200ms;
	}
	.subCmMainPanel > div > a > div:hover img {
		transform: scale(1.2, 1.2);
		background-color: transparent;
		transition-duration: 200ms;
	}
	.subCmMainPanel > div > a > div > p {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 12px;
		margin-top: 3px;
	}
	.subCmMainPanel > div > a > div:hover {
		transform: scale(1, 1);
		background-color: transparent;
	}

	.subCmMainPanel .subCmIcon {
		width: auto;
		height: 30px;
		cursol: pointer;
	}
	
	.subCmMainPanel .subCmIcon2 {
		width: auto;
		height: 26px;
		cursol: pointer;
	}

	.subCmMainPanel .subCmIconLogo {
		width: auto;
		height: 35px;
		cursol: pointer;
	}

	.subCmMainPanel img {
		display: block;
	}

	.subCmMainPanel > div > a {
		width: auto;
		height: auto;
		display: inline-flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
		margin-right: 40px;
		margin-bottom: 0;
	}
	.subCmMainPanel > div > a:nth-last-of-type(1) {
		margin-right: 0;
	}
	.subCmMainPanel > div > a:hover {
		opacity: 1;
	}

	#tglFloatTab {
		position: absolute;
		right: 0px;
		top: -26px;
		width: 80px;
		height: 25px;
		border-top: 1px solid #999999;
		border-left: 1px solid #999999;
		border-right: 1px solid #999999;
		border-radius: 5px 5px 0 0;
		background-color: #F3F3F3;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #000000;
		cursor: pointer;
		box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.3);
	}
	#tglFloatTab img {
		width: 10px;
		height: auto;
		transform: rotate(180deg);
	}
	#dummyCover {
		display: block;
		width: 82px;
		height: 6px;
		background-color: #F3F3F3;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1001;
	}
}
/* TEL・お問い合わせ フロート表示 ↑↑↑ */






/* お問い合わせ */
.contact_form {
	width: 100%;
	max-width: 1000px;
	min-width: 1000px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px;
	border: 2px solid #EEEEEE;
	margin-bottom: 100px;
	
	& dl {
		display: flex;
		align-items: center;
		padding-top: 30px;
		padding-bottom: 30px;
		width: 100%;
		border-bottom: 1px solid #CCCCCC;
		
		& dt {
			width: 280px;
			display: flex;
			align-items: center;
		}
		& dd {
			width: 640px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 10px;
			padding-right: 10px;
			border-left: 1px solid #CCCCCC;
			
			& input[type='text'], input[type='email'], input[type='tel'], textarea {
				width: 610px;
				border: 2px solid #AAAAAA;
				padding: 10px;
				border-radius: 3px;
				font-size: 18px;
				margin-left: 20px;
			}
			/*
			& input[type='radio'], input[type='checkbox'] {
				margin-left: 20px;
			}
			*/
			& .wpcf7-list-item {
					margin-left: 20px;
				}
			& .p-postal-code {
				width: 200px!important;
			}
			& .input-notice {
				display:inline-block;
				margin-left: 20px;
				margin-bottom: 2px;
			}
			& .input-notice2 {
				display:inline-block;
				margin-left: 20px;
				margin-bottom: 2px;
				margin-top: 10px;
			}
		}
		& dd.v-radio {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		& dd.v-radio .wpcf7-radio {
			display: flex!important;
			flex-direction: column!important;
		}
		& dd.v-radio .wpcf7-list-item:not(.last) {
			margin-bottom: 15px;
		}
	}
	
	& .requiredForm {
		display: flex
		justify-content: center;
		align-items: center;;
		text-align: center;
		width: 50px;
		background-color: #FF0000;
		margin-right: 5px;
		padding: 5px 0px;
		border-radius: 5px;
	}
	& .requiredForm > p {
		font-size: 12px;
		color: #FFFFFF;
	}
	
	
	& .screen-reader-response {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FF0000;
		font-size: 24px;
		font-weight: bold;
	}
	& .screen-reader-response ul {
		display: none;
	}

	& .wpcf7-not-valid-tip {
		color: #FF0000;
		font-weight: bold;
	}
	& .wpcf7-response-output {
		text-align: center;
		color: #FF0000;
	}
	& .c-form__privacy-check p {
		text-align: center;
	}
	
	
}
/* モバイル*/
@media screen and (max-width:1080px) {
	.contact_form {
		width: calc(100% - 40px);
		/*max-width: 1000px;*/
		min-width: 300px;
		/*margin-top: 100px;*/
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		border: 2px solid #EEEEEE;
		margin-bottom: 100px;
		
		& dl {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30px;
			padding-bottom: 30px;
			width: 100%;
			border-bottom: 1px solid #CCCCCC;
			
			& dt {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 10px;
			}
			& dd {
				width: 100%;
				display: flex;
				flex-direction: column;
				/*align-items: center;*/
				justify-content: center;
				padding-left: 0;/*10px;*/
				padding-right: 0;/*10px;*/
				border-left: none;/*1px solid #CCCCCC;*/
				
				& input[type='text'], input[type='email'], input[type='tel'], textarea {
					width: 100%;
					border: 2px solid #AAAAAA;
					padding: 10px;
					border-radius: 3px;
					font-size: 18px;
					margin-left: 0;/*20px;*/
				}
				/*
				& input[type='radio'], input[type='checkbox'] {
					margin-left: 0px;
				}
				*/
				& .wpcf7-list-item {
					margin-left: 0px;
				}
				& .p-postal-code {
					width: 100%!important;
				}
				& .input-notice {
					display:inline-block;
					margin-left: 0px;
					margin-bottom: 2px;
				}
				& .input-notice2 {
					display:inline-block;
					margin-left: 0px;
					margin-bottom: 2px;
					margin-top: 10px;
				}
			}
			& dd.v-radio {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
			& dd.v-radio .wpcf7-radio {
				display: flex!important;
				flex-direction: column!important;
			}
			& dd.v-radio .wpcf7-list-item:not(.last) {
				margin-bottom: 15px;
			}
		}
		
		& .requiredForm {
			display: flex
			justify-content: center;
			align-items: center;;
			text-align: center;
			width: 50px;
			background-color: #FF0000;
			margin-right: 5px;
			padding: 5px 0px;
			border-radius: 5px;
		}
		& .requiredForm > p {
			font-size: 12px;
			color: #FFFFFF;
		}
	}
}


.contact-btn {
	text-align: center;
	margin-top: 30px;
	
	& input[type='submit'] {
		width: 250px!important;
		height: 45px!important;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 5px;
		text-align: center;
	}
	& input[type='submit']:hover {
		opacity: 0.6;
	}
}



.telBox {
	width: 500px;
	height: 180px;
	display:flex;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	
	& .contact_tel2 {
		width: 500px;
		height: 180px;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F5F5F5;
		border-radius: 20px;
		
		& p:nth-of-type(1) {
			display: inline-flex;
			font-size: 32px;
			font-weight: bold;
		}
		& p:nth-of-type(2) {
			display: inline-flex;
			font-size: 18px;
			/*font-weight: bold;*/
			margin-top: 20px;
		}
	}
}
/* モバイル*/
@media screen and (max-width:1080px) {
	.telBox {
		width: 100%;
		height: 180px;
		display:flex;
		justify-content: center;
		align-items: center;
		
		& > a {
			width: 100%;
		}
		
		& .contact_tel2 {
			width: 100%;
			height: 180px;
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F5F5F5;
			border-radius: 20px;
			
			& p:nth-of-type(1) {
				display: inline-flex;
				font-size: 32px;
				font-weight: bold;
			}
			& p:nth-of-type(2) {
				display: inline-flex;
				font-size: 18px;
				/*font-weight: bold;*/
				margin-top: 20px;
			}
		}
	}
}



.bottom_section {
	width: 100%;
	background-color: #F0F0F0;
	padding: 50px 0 100px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 0px;
	
	& .project {
		font-size: 18px;
		margin-bottom: 15px;
	}
	& .project_com {
		display: flex;
		justify-content: center;
		align-items: center;
		
		& img.clogo {
			width: auto;
			height: 36px;
		}
		& img.cname {
			width: auto;
			height: 30px;
			margin-left: 10px;
		}
	}
	& .project_url {
		font-size: 14px;
		margin-top: 10px;
	}
}