@charset "UTF-8";

/* works-section */
@media all {
	.works-lead,
	.item-detail {line-height: 2.15;}
	.works-lead a {
		position: relative;
		display: inline-block;
		color: var(--main-color);
	}
	.works-lead a::after {
		content: '';
		position: absolute;
		bottom: .25em;
		left: 0;
		display: block;
		width: 100%;
		height: var(--max1px);
		background-color: var(--orange);
	}

	.item-img {position: relative;}
	.item-img1 {
		position: relative;
		z-index: 2;
	}
	.item-img2 {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.item-img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transform: translateZ(0);
	}
	.item-ttl {
		margin-top: -.25em;
		font-weight: bold;
	}
	.item-detail {
		margin-top: .5em;
		text-align: justify;
	}

	.item-amzn {
		display: flex;
		flex-wrap: wrap;
	}
	.item-amzn a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rem;
		padding-top: 4rem;
		height: 45rem;
		border: var(--max1px) solid #000;
		border-radius: 30rem;
	}
	.item-amzn a img {
		display: block;
		width: 76rem;
		transform: .3s;
	}
	.item-amzn a.link {
		border-color: var(--main-color);
		background-color: var(--main-color);
		color: #fff;
	}
	.item-amzn a.link::after {
		content: '';
		display: inline-block;
		margin-left: 8rem;
		width: 20rem;
		height: 10rem;
		background: center / contain no-repeat url(../img/common/arrow.svg);
		filter: brightness(0) invert(1);
		transition: .3s;
	}
	.item-amzn a.link:hover {
		background-color: #fff;
		color: var(--main-color);
	}
	.item-amzn a.link:hover::after {
		filter: brightness(1) invert(0);
	}

	.dropshadow {
		filter: drop-shadow(0 0 7rem #c8c8c8);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.works-section {padding: 0 20rem 80rem;}
		.works-content {margin-top: 50rem;}
		.item {
			position: relative;
			padding-bottom: 40rem;
		}
		.item + .item {margin-top: 40rem;}
		.item:not(:last-child):after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 12.5%;
			display: block;
			width: 75%;
			height: 1px;
			background-color: var(--light-purple);
		}
		.item-img, .item-img > * {
			margin: 0 auto;
			width: 160rem;
			height: 160rem;
		}
		.item-text {
			margin-top: 20rem;
			text-align: center;
		}
		.item-ttl {
			display: inline-flex;
			justify-content: center;
			font-size: 20rem;
			text-align: left;
		}
		.item-amzn {
			justify-content: space-between;
			margin: 20rem auto 0;
			width: 360rem;
		}
		.item-amzn a {width: 170rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.works-section {
			margin-top: 160rem;
			padding-bottom: 100rem;
		}
		.works-lead {
			margin: 0 auto;
			width: 600rem;
		}
		.works-content {
			margin: 100rem auto 0;
			width: 750rem;
		}
		.item {
			display: flex;
			justify-content: space-between;
		}
		.item + .item {margin-top: 100rem;}
		.item-img {width: 250rem;}
		.item-img.square {width: 275rem;}

		.item-img img {height: 365rem;}
		.item-img.square img {height: 275rem;}
		.item-ttl {font-size: 22rem;}
		.item-text {width: 450rem;}
		.item-amzn {gap: 20rem 30rem;}
		.item-amzn a {width: 190rem;}
		.item-amzn a:hover {
			opacity: 1;
			background-color: #000;
		}
		.item-amzn a:hover img {
			filter: brightness(0) invert(1);
		}
	}
}