@charset "UTF-8";

/* article */
@media all {
	.item {position: relative;}
	.item-inner {background-color: #fff;}
	.bg-purple {background-color: var(--light-purple);}
	.name, .year {color: var(--main-color);}
	.text {line-height: 2.15;}
	.img img {width: 100%;}

	.item-inner {
		position: absolute;
		display: flex;
		height: 100%;
	}
	.fx-end {
		flex-direction: row-reverse;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.site-main {padding-bottom: 80rem;}
		.item-inner {
			width: 100%;
			padding-left: 20rem;
			padding-right: 50rem;
			left: 30rem;
			align-items: center;
			justify-content: space-between;
		}
		.fx-end {
			padding-left: 50rem;
			padding-right: 20rem;
			left: -30rem;
		}
		.name {
			margin-top: 10rem;
			font-size: 17rem;
			line-height: 1.5;
		}
		:is(.item1, .item2) .text, .img {width: 47.5%;}

		.item {height: 350rem;}
		.item:nth-child(n+2) {margin-top: -30rem;}
		.item:is(.item4, .item5) {margin-top: 0;}

		.item:not(.item2) .img.right {
			float: right;
			margin-left: 5%;
		}
		.item:not(.item1, .item4, .item9) .img:not(.right) {
			float: left;
			margin-right: 5%;
		}

		.item2 {
			margin-top: -30rem;
			z-index: 1;
		}
		.item3 {height: 550rem;}
		.item3 .item-inner {padding-top: 20rem;}

		.item4 {height: 600rem;}
		.item4 .item-inner {
			padding: 0 40rem;
			left: 0;
		}
		.item4 .img {
			margin: 0 auto 20rem;
			width: 60%;
		}
		
		.item5 {
			height: 680rem;
		}
		.item5 .item-inner {padding-bottom: 20rem;}

		.item6 {
			height: 660rem;
		}
		.item6 .item-inner {padding-bottom: 20rem;}

		.item7 {
			z-index: 1;
			height: 350rem;
		}
		.item7 .item-inner {padding-bottom: 20rem;}

		.item8 {height: 550rem;}

		.item9 {height: 650rem;}
		.item9 .item-inner {padding-bottom: 20rem;}
		.item9 .img {
			margin: 0 auto 20rem;
			width: 60%;
		}

		.item10 .img {width: 35%;}

	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		article {
			margin-top: 115rem;
			padding-bottom: 120rem;
		}
		.item-inner {
			right: calc(50% - 800rem);
		}
		.fx-end {
			justify-content: flex-start;
			left: calc(50% - 800rem);
		}
		.fx-end .img {margin-left: 25rem;}
		.item-inner:not(.fx-end) .img {margin-right: 25rem;}

		.name {
			margin-top: 20rem;
			font-size: 20rem;
		}
		.year {font-size: 16rem;}
		.w200 {width: 200rem;}
		.w280 {width: 280rem;}
		.w300 {width: 300rem;}
		.w315 {width: 315rem;}
		.w375 {width: 375rem;}
		.w475 {width: 475rem;}

		.item1, .item2 {height: 448rem;}
		.item1 .item-inner {
			padding: 50rem 100rem 0;
			width: 1028rem;
		}
		.item2 .item-inner {
			z-index: 1;
			top: -50rem;
			padding: 50rem 75rem 0;
			width: 978rem;
		}
		.item3 {
			margin-top: -100rem;
			height: 438rem;
		}
		.item3 .item-inner {
			padding: 100rem 50rem 0;
			width: 1175rem;
		}

		.item4 {height: 450rem;}
		.item4 .item-inner {
			padding-top: 43rem;
			width: 1125rem;
		}

		.item5 {height: 495rem;}
		.item5 .item-inner {
			padding: 50rem 38rem;
			width: 1175rem;
		}

		.item6 {
			margin-top: -50rem;
			height: 438rem;
		}
		.item6 .item-inner {
			padding: 50rem;
			width: 1175rem;
		}

		.item7 {
			margin-top: -50rem;
			height: 448rem;
		}
		.item7 .item-inner {
			z-index: 1;
			padding: 70rem 50rem;
			width: 978rem;
		}

		.item8 {
			margin-top: -50rem;
			height: 465rem;
		}
		.item8 .item-inner {
			padding: 100rem 50rem 0;
			width: 1175rem;
		}

		.item9 {
			margin-top: -50rem;
			height: 465rem;
		}
		.item9 .item-inner {
			z-index: 1;
			padding: 50rem;
			width: 1175rem;
		}

		.item10 {
			z-index: 1;
			margin-top: -25rem;
			height: 465rem;
		}
		.item10 .item-inner {
			padding: 50rem 100rem 0 0;
			width: 1175rem;
		}
		.item10 .img {
			width: 170rem;
		}

		/* tab */
		@media (max-width: 980px) {
		}

	}

}






/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {

		/* tab */
		@media (max-width: 980px) {
		}

	}

}