@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 769px) {
	main {
		/*background: url(../images/title.png?1101);
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: top left;*/
		margin: 0 auto 30px;
		overflow: hidden;
		position: relative;
	}

	main:after {
		content: "Color Paint";
		color: rgba(0, 108, 185, 0.1);
		font-size: 120px;
		font-weight: bold;
		position: absolute;
		top: 50%;
		right: -30px;
		transform: translate(0, -50%);
		z-index: -1;
	}

	.main .maintitle {
		width: 50%;
	}

	#coloru .top {
		margin: 0 auto 30px;
		padding: 0;
		max-width: 1200px;
		width: 100%;
		position: relative;
	}

	#coloru .top figure {
		width: 100%;
	}

	#coloru .top h2 {
		font-size: 36px;
		font-weight: bold;
		text-align: center;
		min-width: 620px;
		width: fit-content;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#coloru .top h2 img {
		display: block;
		margin: 2% auto 0;
		width: 280px;
	}

	.contents_wrap h2 {
		position: relative;
	}

	.contents_wrap h2:before {
		content: "";
		border-radius: 300px;
		width: 90px;
		height: 90px;
		position: absolute;
		top: -30px;
		left: -10px;
	}

	.contents_wrap h2:before {
		background: url(../images/icon01-sub.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.clothbox {
		margin: 0 auto 30px;
		padding: 0;
		max-width: 1200px;
		width: 95%;
	}

	.clothbox .caption {
		font-size: 16px;
		line-height: 1.4em;
		margin: 0 0 40px;
	}

	.clothbox h3 {
		color: #006cb9;
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		margin: 0 auto 30px;
		padding: 0 40px;
		position: relative;
		width: fit-content;
	}

	.clothbox_main {
		box-shadow: 5px 5px 10px 0 #ccc;
		margin: 0 auto 30px;
		padding: 30px 60px;
		width: 100%;
	}

	.clothbox_inner_f {
		box-shadow: 5px 5px 10px 0 #ccc;
		margin: 0 auto 30px;
		padding: 30px 60px;
		width: 100%;
	}

	.cloth_img {
		display: flex;
		flex-wrap: wrap;
		gap: 1%;
	}

	.cloth_img figure {
		margin: 0 0 3%;
		width: 48%;
	}

	.clothbox_inner02 figure {
		margin: 0 auto;
		width: 60%;
	}

	.clothbox_inner02 .caption {
		text-align: center;
	}
}

@media screen and (max-width: 768px) {
	main {
		/*background: url(../images/title.png?1101);
    background-repeat: no-repeat;
    background-size: 400px;
    background-position: top left;*/
		margin: 0 auto 30px;
		overflow: hidden;
		position: relative;
	}

	main:after {
		content: "Color Paint";
		color: rgba(0, 108, 185, 0.1);
		font-size: 48px;
		font-weight: bold;
		position: absolute;
		bottom: 0;
		right: -8px;
		z-index: -1;
	}

	#coloru .top {
		margin: 0 auto 30px;
		padding: 0;
		max-width: 1200px;
		width: 100%;
		position: relative;
	}

	#coloru .top figure {
		width: 100%;
	}

	#coloru .top h2 {
		font-size: 36px;
		font-weight: bold;
		text-align: center;
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#coloru .top h2 img {
		display: block;
		margin: 2% auto 0;
		width: 80%;
	}

	.contents_wrap h2 {
		position: relative;
	}

	.contents_wrap h2:before {
		content: "";
		border-radius: 300px;
		width: 90px;
		height: 90px;
		position: absolute;
		top: -30px;
		left: -10px;
	}

	.contents_wrap h2:before {
		background: url(../images/icon01-sub.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	.clothbox {
		margin: 0 auto 30px;
		padding: 0;
		width: 95%;
	}

	.clothbox .caption {
		font-size: 16px;
		line-height: 1.4em;
		margin: 0 0 40px;
	}

	.clothbox h3 {
		color: #006cb9;
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		margin: 0 auto 30px;
		padding: 0 40px;
		position: relative;
		width: fit-content;
	}

	.clothbox_main {
		box-shadow: 5px 5px 10px 0 #ccc;
		margin: 0 auto 30px;
		padding: 3% 3%;
		width: 100%;
	}

	.clothbox_inner_f {
		box-shadow: 5px 5px 10px 0 #ccc;
		margin: 0 auto 30px;
		padding: 3% 3%;
		width: 100%;
	}

	.cloth_img figure {
		margin: 0 0 4%;
		width: 100%;
	}

	.clothbox_inner02 figure {
		margin: 0 auto;
		width: 100%;
	}
}