@charset "UTF-8";

.edit-area {
	&.story {
		padding-bottom: 11.5rem;
		@media screen and (max-width: 767px) {
			padding-bottom: 3rem;
		}

		.story-set {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			margin-bottom: 8rem;
			gap: 10rem;

			@media screen and (max-width: 767px) {
				flex-direction: column;
				margin-bottom: 4rem;
				gap: 3rem;
			}

			.set-photo {
				position: relative;
				width: 52.6rem;
				height: 58.6rem;
				flex-shrink: 0;
				@media screen and (max-width: 767px) {
					/* width: 28.3rem;
					height: 31.3rem; */
					width: 26.8rem;;
					height: 29.3rem;
				}

				& a {
					transition: ease 0.25s opacity;
					@media (hover: hover) and (pointer: fine) {
						&:hover {
							opacity: 0.75;
						}
					}
				}

				#anker1,
				#anker2,
				#anker3 {
					position: absolute;
				}

				#anker1 {
					top: 0.5rem;
					left: 50%;
					z-index: 3;
					transform: translateX(-50%);
					width: 22.8rem;
					@media screen and (max-width: 767px) {
						top: 0;
						width: 11.4rem;
					}
				}
				#anker2 {
					left: 0;
					bottom: 0;
					z-index: 2;
					width: 21.0rem;
					@media screen and (max-width: 767px) {
						width: 10.5rem
					}
				}
				#anker3 {
					right: 1.7rem;
					bottom: 0;
					z-index: 1;
					width: 24.3rem;
					@media screen and (max-width: 767px) {
						right: 1.2rem;
						width: 12.15rem;
					}
				}
			}
		}

		.story-list {
			&.type01 {
				margin: 7rem 0;
				padding: 7.4rem 10rem 4.5rem;
				border: 1px solid #bcbcbc;
				border-radius: 2rem;

				@media screen and (max-width: 767px) {
					margin: 2rem 0 4rem;
					padding: 3rem 3rem 1rem;
				}

				> div {
					display: flex;
					flex-wrap: wrap;
					padding: 4.1rem 0;
					border-bottom: 1px solid #bcbcbc;

					@media screen and (max-width: 767px) {
						padding: 3rem 0;
						flex-direction: column;
					}

					&:first-child {
						padding-top: 0;
					}

					&:last-child {
						border-bottom: 0;
					}

					& dt {
						width: calc(100% - 82.5rem);
						font-family: "Jost";
						font-weight: 500;
						font-size: 3.5rem;
						line-height: 1.457;
						letter-spacing: 0.05em;

						@media screen and (max-width: 767px) {
							width: 100%;
							margin-bottom: 1.5rem;
							text-align: center;
							font-size: 3rem;
						}
					}

					&.trust {
						& dt {
							color: #172e59;
						}
					}
					&.taste {
						& dt {
							color: #e50012;
						}
					}
					&.create {
						& dt {
							color: #e49c00;
						}
					}

					& dd {
						width: 82.5rem;
						@media screen and (max-width: 767px) {
							width: 100%;
						}
					}

					.list-title {
						position: relative;
						margin-bottom: 1.4rem;
						padding-right: 2rem;
						font-weight: 700;
						font-size: 2rem;
						line-height: 190%;
						letter-spacing: 0.02em;
						color: #000000;
						cursor: pointer;
						@media screen and (max-width: 767px) {
							font-size: 1.8rem;
							line-height: 1.6;
						}

						&:after {
							content: "";
							position: absolute;
							right: 0;
							top: calc(50% - 0.7rem);
							z-index: 1;
							display: block;
							width: 1rem;
							height: 1.4rem;
							background: url(../../common/img/parts/icon_arrow02_red.svg) no-repeat center center / 100% auto;
							transform: rotate(-90deg);
						}

						&.close {
							&:after {
								transform: rotate(90deg);
							}
						}
					}
				}
			}

			&.type02 {
				margin-bottom: 5.7rem;
				display: flex;
				flex-direction: column;
				gap: 5rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 4rem;
					gap: 3rem;
				}
				& li {
					display: flex;
					flex-wrap: wrap;
					gap: 6.6rem;

					@media screen and (max-width: 767px) {
						flex-direction: column;
						gap: 1rem;
					}

					.list-photo {
						width: 60rem;
						@media screen and (max-width: 767px) {
							width: 100%;
						}
						& img {
							border-radius: 2rem;
						}
					}
					.list-text {
						width: calc(100% - 60rem - 6.6rem);
						@media screen and (max-width: 767px) {
							width: 100%;
						}
					}
				}
			}
		}

		/*
		.staff-list {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			gap: 5.5rem;
			margin: 4rem 0 9rem;

			@media screen and (max-width: 767px) {
				margin: 2rem 0 4rem;
			}

			& li {
				display: flex;
				gap: 6.4rem;
				@media screen and (max-width: 767px) {
					flex-direction: column;
					gap: 0;
				}
			}

			.list-photo {
				margin-bottom: 2rem;
				& img {
					border-radius: 2rem;
				}
			}

			.list-text {
				flex-shrink: 0;
				width: 81.6rem;
				@media screen and (max-width: 767px) {
					width: 100%;
				}
				.text-title {
					margin-bottom: 1.5rem;
					font-weight: 600;
					font-size: 2.2rem;
					line-height: 190%;
					letter-spacing: 0.02em;
					color: #000000;
				}
				.text-detail {
				}
			}
		}
		*/
		.staff-list {
			display: flex;
			flex-wrap: wrap;
			gap: 3rem;
			margin: 2rem 0 7rem;
			
			@media screen and (max-width: 767px) {
				margin: 2rem 0 4rem;
				gap: 1.5rem;
			}

			& li{
				width: calc(100% / 5 - 3rem * 4 / 5);
				@media screen and (max-width: 767px) {
					display: flex;
					gap: 1rem;
					width: 100%;
				}
			}

			.list-photo{
				margin-bottom: 1.8rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 0;
					width: 10rem;
					flex-shrink: 0;
				}

				& img{
					/* object-fit: cover; */
					object-fit: scale-down;
					object-position: center center;
					width: 100%;
					height: 21.8rem;
					@media screen and (max-width: 767px) {
						height: auto;
						aspect-ratio: 232 / 218;
					}
				}
			}

			.list-text{
				line-height: 1.8;
				@media screen and (max-width: 767px) {
					line-height: 1.6;
				}
				.text-title{
					margin-bottom: 0.7rem;
					font-weight: 700;
					font-size: 1.8rem;
					letter-spacing: 0.08em;
					@media screen and (max-width: 767px) {
						margin-bottom: 0.4rem;
						font-size: 1.6rem;
					}
				}
				.text-detail{
					letter-spacing: 0.02em;
					@media screen and (max-width: 767px) {
						font-size: 1.3rem;
					}
				}
			}
		}
	}
}