@charset "UTF-8";

.p-text-lead{
	margin-top:40px;
}

.p-lead{
	display:grid;
	align-items:center;
	height:100%;
}

.p-lead-heading{
	color:#C41B1F;
	text-align:center;
}

.p-lead-heading__title{
	font-weight:700;
	font-size:2.2rem;
	line-height:160%;
	letter-spacing:0.1em;
}

.p-lead-decoration-01{
	position:relative;
}

.p-lead-decoration-01::before{
	content:"";
  position:absolute;
  top:-54px;
  left:-32px;
  width:63px;
  height:57px;
  background-image:url('../img/index_decoration_01_sp@2x.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.p-lead-decoration-03{
	position:relative;
}

.p-lead-decoration-03::before{
	content:"";
  position:absolute;
  top:10px;
  right:-77px;
  width:121px;
  height:121px;
  background-image:url('../img/index_decoration_02_sp@2x.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.p-lead-decoration-04{
	position:relative;
}

.p-lead-decoration-04::before{
	content:"";
  position:absolute;
  top:-85px;
  right:11.2%;
  width:136px;
  height:104px;
  background-image:url('../img/index_decoration_04_sp@2x.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.p-z-index-1{
	z-index:1;
	position:relative;
}

@keyframes infinity-scroll-left{
from{
  transform:translateX(0);
}
  to{
  transform:translateX(-100%);
}
}

.p-hidden{
	overflow:hidden;
}

.p-slider{
	width:100%;
	padding-bottom:60px;
}

.p-slider__images{
	display:flex;
	width:max-content;
}

.p-slider__list{
	display:flex;
  list-style:none;
  padding:0;
	animation:infinity-scroll-left 30s infinite linear 0.5s both;
}

.p-slider__item{
  width:250px;
	margin:0 13px 0;
}

.p-main-first__areaImage{
	margin-inline:-20px;

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

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

.p-main-structure{
	&.of-type-3{
		.c-heading-1{
			--font-color:#fff;
		}
	}
}

.p-tabs, .p-tabs__tabpanelGroup, .p-tabs__tabpanel, .p-tabs__tabpanelInner, .p-tabs__tabpanelOffset{
	& > :first-child{
		margin-top:0 !important;
	}

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

.p-tabs{
	margin-top:40px;
}

.p-tabs__tabList{
	display:flex;
	overflow:hidden;
	margin:0;
	font-size:1.6rem;
	font-weight:700;
	gap:5px;
}

.p-tabs__tab{
	--main-color:#c41b1f;
	--sub-color:#f9e8e9;

	flex:1;

	&.of-confectionary{
		--main-color:#f77579;
		--sub-color:#fef1f2;
	}

	&.of-cookery-2{
		--main-color:#ea5506;
		--sub-color:#fdeee6;
	}
}

.p-tabs__tabLink{
	&:any-link{
		position:relative;
		display:flex;
		min-height:52px;
		align-items:center;
		justify-content:center;
		padding:10px 45px 10px 15px;
		border:2px solid var(--main-color);
		border-radius:10px 10px 0 0;
		background-color:var(--main-color);
		color:#fff;

		&::before, &::after{
			position:absolute;
			display:block;
			content:"";
		}

		&::before{
			top:0;
			right:15px;
			bottom:0;
			width:19px;
			height:19px;
			border-radius:50%;
			margin:auto;
			background:url(../../common/img/bg_arrowBottom.svg) no-repeat 50% 50% / 7px 8px #c04300;
		}

		&::after{
			right:0;
			bottom:-2px;
			left:0;
			height:2px;
			background-color:var(--sub-color);
		}
	}
}

.p-box-student-1__viewport{
	width:128px;
	margin-right:-20px;
}

.p-box-student-1__layoutAreaText{
	margin-right:108px;
}

.p-tabs__tabpanelGroup{
	position:relative;
	margin-top:-2px;
}

.p-tabs__tabpanel{
	--main-color:#c41b1f;

	&.of-confectionary{
		--main-color:#f77579;
	}

	&.of-cookery-2{
		--main-color:#ea5506;
	}
}

.p-tabs__tabpanelInner{
	padding:40px 20px;
	border:2px solid var(--main-color);
	background-color:#fff;

	.p-tabs__tabpanel:last-child &{
		border-radius:0 0 10px 10px;
	}
}

.p-tags__grid{
	position:relative;
	max-width:320px;
	margin:0 auto;
}

.p-tabs__tabpanelOffset{
	max-width:830px;
	margin-inline:auto;
}

.p-tabs__time{
	position:absolute;
	z-index:1;
	width:60px;
	height:65px;
	top:-40px;
	left:-10px;
}

.p-tabs__title{
	color:#F77579;
	font-size:1.8rem;
	font-weight:bold;
}

.p-layout-mediaFlex{
	flex-direction:column-reverse;
}

.p-heading-appeal{	
	margin-block:25px 20px;
	text-align:center;
	font-size:1.4rem;
}

.p-heading-appeal__title{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0 2em;
	color:var(--main-color);
	font-feature-settings:"palt";
	line-height:1.625;
	text-align:center;

	&::before, &::after{
		position:absolute;
		top:5px;
		bottom:0;
		display:block;
		width:2px;
		border-radius:9em;
		background-color:currentcolor;
		content:"";
	}

	&::before{
		left:1em;
		transform:rotate(-15deg);
	}

	&::after{
		right:1em;
		transform:rotate(15deg);
	}
}

@media (hover: hover){
	.p-tabs__tabLink{
		&:any-link{
			transition:background-color 0.5s, color 0.5s;

			&:hover{
				background-color:#fff;
				color:var(--main-color);
			}
		}
	}
}

@media (scripting: enabled){
	.p-tabs__tab{
		&[role="tab"]{
			position:relative;
			display:flex;
			min-height:52px;
			align-items:center;
			justify-content:center;
			padding:10px 45px 10px 15px;
			border:2px solid var(--main-color);
			border-radius:10px 10px 0 0;
			background-color:var(--main-color);
			color:#fff;
			transform:translateY(8px);
			transition:transform 0.3s;

			&::before, &::after{
				position:absolute;
				display:block;
				content:"";
			}

			&::before{
				top:0;
				right:15px;
				bottom:0;
				width:19px;
				height:19px;
				border-radius:50%;
				margin:auto;
				background:url(../../common/img/bg_arrowBottom.svg) no-repeat 50% 50% / 7px 8px #c04300;
			}

			&::after{
				right:0;
				bottom:-2px;
				left:0;
				height:2px;
				background-color:var(--sub-color);
			}

			&:not([aria-selected="true"]){
				&:hover{
					transform:translateY(0);
				}
			}

			&[aria-selected="true"]{
				z-index:1;
				padding-right:15px;
				background-color:#fff;
				color:var(--main-color);
				transform:translateY(0);

				&::before{
					display:none;
				}
			}
		}
	}

	.p-tabs__tabpanelInner{
		border-radius:0 0 10px 10px;
	}
}

@media (scripting: enabled) and (width > 767px){
	.p-tabs__tab{
		&[role="tab"]{
			min-height:72px;
			padding:15px 48px 15px 10px;
			transform:translateY(14px);

			&::before{
				right:10px;
				width:28px;
				height:28px;
				background-size:10px 11px;
			}

			&[aria-selected="true"]{
				padding-right:10px;
			}
		}
	}
}

@media (width > 767px){
	.p-heading-appeal{
		margin-top:60px;
		font-size:2.4rem;
	}
	.p-lead-decoration-01::before{
		content:"";
		position:absolute;
		top:-39px;
		left:-135px;
		width:102px;
		height:93px;
		background-image:url('../img/index_decoration_01_pc@2x.png');
	}
	.p-lead-decoration-02{
		position:relative;
	}
	.p-lead-decoration-02::after{
		content:"";
		position:absolute;
		bottom:-206px;
		right:-160px;
		width:250px;
		height:250px;
		background-image:url('../img/index_decoration_02_pc@2x.png');
		background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	}
	.p-lead-decoration-03::before{
		content:"";
		position:absolute;
		top:-72px;
		right:auto;
		left:-63px;
		width:170px;
		height:130px;
		background-image:url('../img/index_decoration_03_pc@2x.png');
		background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
	}
	.p-lead-decoration-04::before{
		content:"";
		position:absolute;
		top:-154px;
		right:10.5%;
		width:302px;
		height:210px;
		background-image:url('../img/index_decoration_04_pc@2x.png');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	.p-lead-decoration-05{
		position:relative;
	}
	.p-lead-decoration-05::before{
		content:"";
		position:absolute;
		top:-80px;
		left:0;
		width:154px;
		height:183px;
		background-image:url('../img/index_decoration_05_pc@2x.png');
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		z-index:1;
	}
	.p-text-lead{
		margin-top:60px;
	}
	.p-lead-heading__title{
		font-size:3rem;
	}
	.p-slider{
		padding-bottom:115px;
	}
	.p-slider__item{
		width:480px;
		margin:0 13px 0;
	}

	.p-tabs{
		margin-top:50px;
	}

	.p-tabs__time{
		position:relative;
	}

	.p-tabs__tabList{
		font-size:2rem;
	}

	.p-box-student-1{
		margin-top:90px;
	}
	.p-box-student-2{
		margin-top:90px;
	}
	.p-box-student-1__layoutAreaText{
		margin-right:200px;
	}
	.p-box-student-1__viewport{
		width:auto;
		margin-right:-20px;
	}

	.p-tabs__tabLink{
		&:any-link{
			min-height:72px;
			padding:15px 48px 15px 10px;

			&::before{
				right:10px;
				width:28px;
				height:28px;
				background-size:10px 11px;
			}
		}
	}

	.p-tabs__tabpanelInner{
		padding-block:50px;
	}
	.p-tags__grid{
		display:grid;
		grid-template-columns:60px 1fr;
		column-gap:20px;
		max-width:100%;
		margin:auto;
	}
	.p-tabs__title{
		color:#F77579;
		font-size:2.4rem;
		font-weight:bold;
		position:relative;
	}
	.p-layout-mediaFlex{
		flex-direction:auto;
	}
}