@charset "UTF-8";

body{
	&:has(.p-release){
		background:url(../img/bg_fabric@2x.jpg) 0 0 / 50% #f1f1f1;
	}
}

.p-main-structure__decoration{
	position:absolute;

	.c-media-image{
		container:none;
	}

	& > :first-child{
		margin-top:0 !important;
	}

	& > :last-child{
		margin-bottom:0 !important;
	}
}

.p-blog{
	.l-main-structure{
		:nth-child(1 of .p-main-structure__decoration){
			top:calc(125/var(--content-width)*100vw);
			left:calc(20/var(--content-width)*100vw);
		}
	}
}

.p-release, .p-release__article, .p-release__articleInner, .p-release__articleOffset, .p-release__articleHeadder, .p-release__articleBody, .p-release__articleFooter, .p-release__recommend{
	& > :first-child{
		margin-top:0 !important;
	}

	& > :last-child{
		margin-bottom:0 !important;
	}
}

.p-release{
	padding-bottom:calc(var(--bg-structure-height)/var(--content-width)*100vw);
	background:url(../img/bg_fabric@2x.jpg) 0 0 / 50% #f1f1f1;
}

.p-release__article{
	position:relative;
	padding:40px 20px 60px;
}

.p-release__articleInner{
	max-width:1100px;
	border-radius:35px;
	background-color:#fff;
	margin-inline:auto;
}

.p-release__articleOffset{
	padding:40px 20px 45px;
}

.p-release__articleHeadder{
	max-width:960px;
	margin-inline:auto;
	text-align:center;
}

.p-release__articleTitle{
	color:#cb2d27;
	font-size:2.4rem;
	font-weight:700;
	margin-block:15px;
}

.p-release__articleTag, .p-release__articleDate{
	margin-block:5px;
}

.p-release__articleBody{
	max-width:840px;
	margin-inline:auto;
	padding-block:50px;

	& > *{
		filter:drop-shadow(0 0 3px #fff);
	}
}

.p-release__recommend{
	padding:0 20px 80px;
}

.p-list-tagRelease{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-block:20px 30px;
}

.p-tag-release{
	--bg-color:#cb2d27;

	display:inline-flex;
	min-height:28px;
	align-items:center;
	justify-content:center;
	padding:5px 10px;
	border-radius:5px;
	background-color:var(--bg-color);
	color:var(--font-color);
	font-weight:500;
	line-height:1;
	text-align:center;

	&:any-link{
		color:var(--font-color);
		-webkit-text-decoration:none;
		text-decoration:none;
	}

	&::before{
		display:inline;
		content:"#";
	}

	&.of-news{
		--bg-color:#f5dfe2;
	}

	&.of-happy{
		--bg-color:#faeedb;
	}

	&.of-openCampus{
		--bg-color:#eee5dc;
	}

	&.of-confectionary{
		--bg-color:#ffe7ed;
	}

	&.of-cooks{
		--bg-color:#dff4ee;
	}
}

.p-card-release, .p-card-release__areaText, .p-card-release__areaImage{
	& > :first-child{
		margin-top:0 !important;
	}

	& > :last-child{
		margin-bottom:0 !important;
	}
}

.p-card-release{
	position:relative;
	display:flex;
	flex-direction:column-reverse;
	flex-grow:1;
	gap:10px;
}

.p-card-release__areaText{
	display:flex;
	flex-direction:column;
	flex-grow:1;
	align-items:flex-start;
	font-weight:500;
	gap:5px;

	.p-tag-release{
		position:relative;
		z-index:2;
	}
}

.p-card-release__areaImage{
	max-width:100%;
	flex-shrink:0;
	aspect-ratio:300 / 200;
}

.p-card-release__title{
	&:any-link{
		color:var(--font-color);
		-webkit-text-decoration:none;
		text-decoration:none;

		&::after{
			position:absolute;
			display:block;
			border-radius:10px;
			margin:auto;
			content:"";
			inset:0;
		}
	}
}

.p-card-release__date{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1em;
}

.p-carousel-release{
	margin-block:30px;

	.c-layout-cardGrid{
		&.swiper-wrapper{
			display:grid;
			margin-block:0;
		}
	}
}

.c-layout-cardGrid__cell{
	&.swiper-slide{
		display:flex;
		height:auto;
	}
}

.p-carousel-release__itemInner{
	display:flex;
	flex-grow:1;
}

.p-carousel-release__button{
	&.swiper-button-next, &.swiper-button-prev{
		display:none;
	}
}

.p-text-tagFlag{
	color:#c41b1f;
	font-weight:700;
}

.p-link-pagination{
	display:flex;
	justify-content:center;
	margin-top:40px;
}

.p-link-pagination__inner{
	display:flex;
	gap:10px;
}

.p-article-pageTurn{
	display:flex;
	max-width:960px;
	flex-direction:row-reverse;
	justify-content:space-between;
	gap:20px;
	margin-inline:auto;
}

.p-article-pageTurn__item{
	&.of-next{
		margin-left:auto;
	}

	&.of-prev{
		margin-right:auto;
	}
}

@media (hover: hover){
	.p-tag-release{
		&:any-link{
			transition:opacity 0.3s;

			&:hover{
				opacity:0.7;
			}
		}
	}
	.p-card-release__title{
		&:any-link{
			&::after{
				background-color:rgba(255, 255, 255, 0);
				transition:background-color 0.5s;
			}

			&:hover{
				&::after{
					background-color:rgba(255, 255, 255, 0.35);
				}
			}
		}
	}
	.p-carousel-release__button{
		&.swiper-button-next, &.swiper-button-prev{
			&:not(.swiper-button-disabled){
				transition:opacity 0.5s;

				&:hover{
					opacity:0.7;
				}
			}
		}
	}
}

@media (scripting: enabled){
	.p-carousel-release{
		&.swiper{
			margin-inline:-20px;
		}

		.c-layout-cardGrid{
			&.swiper-wrapper{
				display:flex;
				gap:0;
			}
		}
	}

	.p-carousel-release__button{
		&.swiper-button-next, &.swiper-button-prev{
			top:50%;
			display:flex;
			width:44px;
			height:44px;
			border:3px solid currentcolor;
			border-radius:50%;
			background-color:#fff;
			color:#c41b1f;

			&::after{
				color:currentcolor;
			}

			&.swiper-button-disabled{
				border-color:#bcbcbc;
				background-color:#d9d9d9;
				color:#fff;
				pointer-events:auto;
			}

			&.swiper-button-lock{
				display:none !important;
			}
		}

		&.swiper-button-next{
			right:calc(5/var(--content-width)*100vw);

			&::after{
				transform:translate(1px, 0) scale(0.4);
			}
		}

		&.swiper-button-prev{
			left:calc(5/var(--content-width)*100vw);

			&::after{
				transform:translate(-1px, 0) scale(0.4);
			}
		}
	}
}

@media (scripting: enabled) and (width > 767px){
	.p-carousel-release{
		&.swiper{
			padding-inline:55px;
		}
	}

	.p-carousel-release__itemInner{
		opacity:0;
		pointer-events:none;
		transition:opacity 0.3s;

		.swiper-slide-active &, .swiper-slide-active + * &, .swiper-slide-active + * + * &{
			opacity:1;
			pointer-events:auto;
		}
	}

	.p-carousel-release__button{
		&.swiper-button-next, &.swiper-button-prev{
			width:65px;
			height:65px;
		}

		&.swiper-button-next{
			right:5px;

			&::after{
				transform:translate(1px, 0) scale(0.4);
			}
		}

		&.swiper-button-prev{
			left:5px;

			&::after{
				transform:translate(-1px, 0) scale(0.4);
			}
		}
	}
}

@media (width > 767px){
	.p-blog{
		.l-main-structure{
			:nth-child(1 of .p-main-structure__decoration){
				top:calc(140/var(--content-width)*100vw);
				left:calc(50/var(--content-width)*100vw);
			}
		}
	}
	.p-release__article{
		background:url(../img/bg_release-article.svg) no-repeat 50% calc(100% - 100px) / cover;
		padding-block:85px 340px;
	}

	.p-release__articleInner{
		position:relative;

		&::before, &::after{
			position:absolute;
			display:block;
			margin:auto;
			background:no-repeat 0 0 / 100%;
			content:"";
		}

		&::before{
			top:0;
			bottom:0;
			left:0;
			width:calc(146/var(--content-width)*100vw);
			max-width:146px;
			height:calc(146/var(--content-width)*100vw);
			background-image:url(../img/bg_blog-article_01_pc@2x.png);
			transform:translateX(-50%);
		}

		&::after{
			right:calc(145/var(--content-width)*100vw);
			bottom:0;
			width:calc(194/var(--content-width)*100vw);
			max-width:194px;
			height:calc(178/var(--content-width)*100vw);
			background-image:url(../img/bg_blog-article_02_pc@2x.png);
			transform:translateY(58%);
		}
	}

	.p-release__articleOffset{
		padding:90px 50px;
	}

	.p-release__articleTitle{
		font-size:3.6rem;
		margin-block:25px;
	}

	.p-release__articleBody{
		padding-block:50px 80px;
	}

	.p-release__recommend{
		padding-bottom:210px;
	}
	.p-list-tagRelease{
		justify-content:center;
		gap:20px;
		margin-block:50px 60px;
	}
	.p-tag-release{
		min-height:32px;
		padding:5px 15px;
	}
	.p-card-release{
		gap:15px;
	}

	.p-card-release__areaText{
		gap:10px;
	}
	.p-link-pagination{
		margin-top:90px;
	}

	.p-link-pagination__inner{
		gap:15px;
	}
}