:root{
	--color-base: #474645;
	--color-base-light: #807F7E;
	--color-light: #fff;

	--color-uiturn-ash: #EEEEEE;
	--color-uiturn-warm: #F3ECD7;

	--color-uiturn-primary: #66C0B7;
	--color-uiturn-primary-light: #CDF0EF;
	--color-uiturn-hover: #CDF0EF;
	--color-uiturn-bg: #CCF0EE;
	--color-uiturn-bg-light: #F0FBFA;
	--color-uiturn-border: #CDF0EF;

	--color-uiturn-student-primary: #54A45A;
	--color-uiturn-student-hover: #B8D79C;
	--color-uiturn-student-bg: #DEEDD1;
	--color-uiturn-student-bg-light: #F4F9F0;
	--color-uiturn-student-border: #B8D79C;

	--space-inline: 38px;
	--space-inline-negative: calc(var(--space-inline) * -1);
}

summary{
	list-style-type: none;
	cursor: pointer;
}
/* Safariで表示されるデフォルトの三角形アイコンを消します */
summary::-webkit-details-marker {
	display: none;
}


.u-zoom\:0\.5{ zoom: 0.5; }
.u-ib{ display: inline-block; }
.u-xs{
	@media (440px < width){
		display: none;
	}
}
.u-visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.u-button{
	margin: 0;
	padding: 0;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	background-color: transparent;
	cursor: pointer;
	appearance: none;
}

[data-details-panel]{
	overflow: hidden;
}

.l-uiturn-inner{
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: var(--space-inline);
}





.c-uiturn-heading{
	position: relative; isolation: isolate;
	width: fit-content;
	margin-inline: auto;
	margin-block-end: 15px;
	padding-block-end: 5px;
	padding-inline: 10px;
	font-size: 25px;
	line-height: calc(33/25);
	text-align: center;
	&::before{
		content: "";
		position: absolute; z-index: -10;
		inset: auto 0 0;
		height: 19px;
		background-color: var(--c-uiturn-heading-bg, var(--color-light));
	}
	&._uiturn-border{
		--c-uiturn-heading-bg: var(--color-uiturn-border);
	}
	@media (width <= 768px){
		font-size: 18px;
	}
	&._sp-plane{
		@media (width <= 768px){
			margin-inline: 0;
			padding: 0;
			text-align: left;
			&::before{
				content: none;
			}
		}
	}
}

.c-uiturn-heading2{
	position: relative; isolation: isolate;
	max-width: 590px;
	margin-block-end: 27px;
	padding-block: 20px;
	padding-inline: 60px 30px;
	font-size: 25px;
	line-height: 1.2;
	@media (width <= 768px){
		width: 295px;
		max-width: calc(100% - 20px);
		padding-inline: 0 20px;
		font-size: 18px;
	}
	&::before{
		content: "";
		position: absolute; z-index: -10;
		inset: 0 0 0 -10000px;
		border-radius: 9999px;
		background-color: var(--color-uiturn-heading2-bg);
	}
	&._uiturn-base{
		color: var(--color-light);
		--color-uiturn-heading2-bg: var(--color-base);
	}
	&._uiturn-light{
		--color-uiturn-heading2-bg: var(--color-light);
	}
	&._uiturn-ash{
		--color-uiturn-heading2-bg: var(--color-uiturn-ash);
	}
	&._c-uiturn-primary{
		--color-uiturn-heading2-bg: var(--color-uiturn-primary);
	}
	&._c-student-primary{
		--color-uiturn-heading2-bg: var(--color-uiturn-student-primary);
	}
}

.c-uiturn-button{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	width: 300px;
	min-height: 51px;
	font-size: 16px;
	text-align: center;
	border-radius: 9999px;
	box-shadow: 0 3px 6px color-mix(in srgb, #000 16%, transparent);
	background-color: var(--c-uiturn-button-bg);
	transition-property: background-color;
	transition-duration: 0.5s;
	@media (width <= 768px){
		width: 270px;
		min-height: 41px;
		font-size: 12px;
	}
	&._c-uiturn-primary{
		color: var(--color-light);
		--c-uiturn-button-bg: var(--color-uiturn-primary);
	}
	&._c-uiturn-primary-light{
		--c-uiturn-button-bg: var(--color-uiturn-primary-light);
	}
	&._c-student-primary{
		color: var(--color-light);
		--c-uiturn-button-bg: var(--color-uiturn-student-primary);
	}
	&._c-base{
		color: var(--color-light);
		--c-uiturn-button-bg: var(--color-base);
	}
	&._c-base-light{
		color: var(--color-light);
		--c-uiturn-button-bg: var(--color-base-light);
	}
	&._c-light{
		--c-uiturn-button-bg: var(--color-light);
	}
	&:hover{
		color: var(--color-base);
		text-decoration: none;
		&._uiturn\@hov{
			--c-uiturn-button-bg: var(--color-uiturn-hover);
		}
		&._uiturn-primary\@hov{
			color: var(--color-light);
			--c-uiturn-button-bg: var(--color-uiturn-primary);
		}
		&._student\@hov{
			--c-uiturn-button-bg: var(--color-uiturn-student-hover);
		}
	}
}
.c-uiturn-button__balloon{
	position: absolute;
	top: -9px;
	padding: 5px 13px;
	border-radius: 9999px;
	color: var(--color-light);
	font-size: 12px;
	line-height: 1.2;
	background-color: var(--color-base);
	@media (width <= 768px){
		top: -12px;
		font-size: 10px;
	}
	&::after{
		content: "";
		position: absolute;
		top: calc(100% - 1px);
		width: 7px; aspect-ratio: 1/1;
		background-color: var(--color-base);
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
	&._right{
		right: 0;
		&::after{
			left: 15px;
		}
	}
	&._left{
		left: 18px;
		@media (width <= 768px){
			left: 30px;
		}
		&::after{
			left: 15px;
		}
	}
}

.c-uiturn-arrow{
	display: inline-grid;
	place-items: center;
	width: 50px; aspect-ratio: 1/1;
	color: var(--c-uiturn-arrow-color-override, var(--c-uiturn-arrow-color));
	background-color: var(--c-uiturn-arrow-bg-override, var(--c-uiturn-arrow-bg));
	border-radius: 9999px;
	transition-property: background-color;
	transition-duration: 0.5s;
	@media (width <= 768px){
		width: 17px;
	}
	svg{
		rotate: -90deg;
		@media (width <= 768px){
			width: 10px;
		}
	}
	&._c-uiturn-primary{
		--c-uiturn-arrow-color: var(--color-light);
		--c-uiturn-arrow-bg: var(--color-uiturn-primary);
	}
	&._c-student-primary{
		--c-uiturn-arrow-color: var(--color-light);
		--c-uiturn-arrow-bg: var(--color-uiturn-student-primary);
	}
	&._c-light{
		--c-uiturn-arrow-color: var(--color-base);
		--c-uiturn-arrow-bg: var(--color-light);
	}
	&:hover{
		&._uiturn\@hov{
			--c-uiturn-arrow-color: var(--color-uiturn-primary);
			--c-uiturn-arrow-bg: var(--color-light);
		}
		&._student\@hov{
			--c-uiturn-arrow-color: var(--color-uiturn-student-primary);
			--c-uiturn-arrow-bg: var(--color-light);
		}
	}
}





.p-uiturn-mv{
	display: grid;
	padding-block: 65px 60px;
	grid-template-columns: 1fr 309px;
	grid-template-rows: 1fr auto;
	gap: 30px;
	&._uiturn{
		--p-uiturn-mv-primary: var(--color-uiturn-primary);
		--p-uiturn-mv-bg: var(--color-uiturn-bg);
	}
	&._uiturn-student{
		--p-uiturn-mv-primary: var(--color-uiturn-student-primary);
		--p-uiturn-mv-bg: var(--color-uiturn-student-bg);
	}
	@media (width <= 1280px){
		@media (1180px < width){
			padding-block-start: 140px;
		}
	}
	@media (width <= 1000px){
		grid-area: 1/1/2/3;
	}
	@media (width <= 768px){
		grid-template-columns: 1fr;
		row-gap: 18px;
		padding: 0;
		font-size: 12px;
		.c-uiturn-button{
			width: 100%;
			border-radius: 0;
			box-shadow: none;
		}
		.c-uiturn-button__balloon{
			right: auto;
			left: 13px;
		}
	}
}
.p-uiturn-mv__mv{
	grid-area: 1/1/3/2;
	img{
		width: 100%; height: 100%;
		object-fit: cover;
	}
	@media (width <= 1000px){
		grid-area: 1/1/2/3;
	}
	@media (width <= 768px){
		grid-area: revert;
	}
}
.p-uiturn-mv__content{
	padding: 43px 22px 30px;
	@media (width <= 768px){
		padding-block: 22px 30px;
		padding-inline: var(--space-inline);
	}
}
.p-uiturn-mv__registeration{
	background-color: var(--p-uiturn-mv-bg);
}
.p-uiturn-mv__text{
	&:not(:last-child){
		margin-block-end: 12px;
	}
}
.p-uiturn-mv__buttons{
	@media (width <= 1000px){
		width: fit-content;
		margin-inline: auto;
	}
	@media (width <= 768px){
		display: grid;
		grid-template-columns: repeat(2,1fr);
		width: auto;
		margin-inline: var(--space-inline-negative);
		padding-block-start: 10px;
		.c-uiturn-arrow{
			position: absolute;
			top: 50%; right: 20px;
			translate: 0 -50%;
		}
	}
}
.p-uiturn-mv__line{
	margin-block-end: 25px;
	@media (width <= 768px){
		margin-block-end: 0;
	}
	.c-uiturn-arrow{
		--c-uiturn-arrow-color: var(--p-uiturn-mv-primary);
		--c-uiturn-arrow-bg: var(--color-light);
	}
}
.p-uiturn-mv__web{
	.c-uiturn-arrow{
		--c-uiturn-arrow-color: var(--color-light);
		--c-uiturn-arrow-bg: var(--color-base);
	}
}
.p-uiturn-mv__exp{
	margin-block-start: 5px;
	padding-inline: 10px;
	font-size: 12px;
	line-height: calc(16/12);
	display: none;
	&:where(._pc){
		display: revert;
	}
	@media (width <= 768px){
		display: none;
		grid-column: span 2;
		margin-block-start: 15px;
		padding-inline: var(--space-inline);
		&:where(._sp){
			display: revert;
		}
	}
}
.p-uiturn-mv__guardian{
	position: relative;
	display: block;
	background-color: var(--color-uiturn-warm);
	&:hover{
		text-decoration: none;
		--c-uiturn-arrow-color-override: var(--p-uiturn-mv-primary);
		--c-uiturn-arrow-bg-override: var(--color-light);
	}
}
.p-uiturn-mv__arrow{
	text-align: right;
	&._rotate{
		svg{
			rotate: revert;
		}
	}
	@media (width <= 1000px){
		position: absolute;
		bottom: 20px; right: 40px;
	}
}


.p-pickup_outer{
	@media (width <= 768px){
		position: relative;
		width: fit-content;
		margin-inline: auto;
	}
}
.p-pickup_wrapper{
	max-width: 958px;
	margin-inline: auto;
	overflow: visible;
	clip-path: inset(-100px 0);
	@media (width <= 768px){
		position: static;
		max-width: 400px;
		margin-inline: auto;
		overflow: hidden;
		clip-path: revert;
	}
	.swiper-slide-active .p-pickup{
		@media (768px < width){
			scale: 1.2;
		}
	}
	.swiper-button{
		@media (768px < width){
			display: none !important;
		}
		position: absolute; z-index: 1000;
		bottom: 10%;
		&::before{
			content: "";
			position: absolute;
			inset: -20px;
		}
		svg{
			display: block;
		}
		&._prev{
			scale: -1 1;
			translate: -50% 0;
		}
		&._next{
			right: 0;
			translate: 50% 0;
		}
	}
}
.p-pickup{
	position: relative;
	display: block;
	transition-property: scale;
	transition-duration: 0.3s;
}
.p-pickup__tags{
	position: absolute; z-index: 10;
	top: 0; left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
}
.p-pickup__tag{
	padding: 5px 10px;
	line-height: 1.2;
	color: var(--color-light);
	background-color: var(--color-base-light);
	text-align: center;
}



/* -------------------------
学生ページ
------------------------- */
.q-uiturn-student-navi{
	.pc{
		border-block-start: 19px solid var(--color-uiturn-student-border);
		padding-block: 70px 75px;
		background-color: var(--color-uiturn-student-bg-light);
	}
	.navi{
		display: grid;
		grid-template-columns: repeat(4, auto);
		justify-content: space-between;
		gap: 15px;
		@media (width <= 1000px){
			zoom: 0.7;
		}
	}
	.navi__item{
		display: flex;
		flex-direction: column;
		transition-property: opacity;
		transition-duration: 0.5s;
		&:hover{
			opacity: 0.7;
			text-decoration: none;
			--q-icon-zoom: 1.1;
		}
	}
	.navi__icon{
		order: -10;
		display: grid;
		place-content: center;
		width: 170px; aspect-ratio: 1/1;
		margin-block-end: 25px;
		margin-inline: auto;
		border-radius: 9999px;
		background-color: var(--color-light);
		img{
			opacity: 1;
			transform: scale(var(--q-icon-zoom, 1));
			transition-property: transform;
			transition-duration: 0.5s;
		}
	}
	.navi__title{
		font-size: 20px;
		text-align: center;
		line-height: calc(27/20);
	}
	.navi__arrow{
		color: var(--color-uiturn-student-primary);
		text-align: center;
	}

	.sp{
		border-block-end: 19px solid var(--color-uiturn-student-border);
		padding-block: 37px 53px;
		.c-uiturn-heading{
			padding-inline: 10px;
		}
	}
	.details{
		font-size: 12px;
	}
	.details__summary{
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 10px;
		padding: 12px 24px;
		color: var(--color-light);
		background-color: var(--color-uiturn-student-primary);
		&::before,
		&::after{
			content: "";
			position: absolute;
			width: 100%; height: 1px;
			background-color: var(--color-light);
		}
		&::before{
			top: 1px;
		}
		&::after{
			bottom: 1px;
		}
	}
	.details__arrow{
		svg{
			display: block;
			width: 13px;
		}
	}
	.details__list{
		display: flex;
		flex-direction: column;
		row-gap: 1px;
		border-block-end: 1px solid var(--color-uiturn-student-primary);
		background-color: var(--color-uiturn-student-primary);
	}
	.details__link{
		display: block;
		padding: 12px 24px;
		background-color: var(--color-light);
	}
}

.q-uiturn-student-support{
	max-width: 873px;
	padding-block: 110px 88px;
	@media (width <= 768px){
		padding-block: 57px 72px;
	}
	.heading{
		margin-block-end: 46px;
		color: var(--color-uiturn-student-primary);
		font-size: 30px;
		line-height: calc(40/30);
		@media (width <= 768px){
			margin-block-end: 23px;
			font-size: 18px;
			span{
				padding-inline: 25px;
				padding-block-end: 5px;
				background: linear-gradient(transparent 37%, var(--color-uiturn-student-bg-light) 37%);
				box-decoration-break: clone;
			}
		}
	}
	.desc{
		&:not(:last-child){
			margin-block-end: 50px;
		}
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.support_wrapper{
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 86px 60px;
		margin-block-end: 160px;
		@media (width <= 768px){
			gap: 25px 20px;
			margin-block-end: 57px;
		}
		@media (width <= 650px){
			grid-template-columns: 1fr;
		}
	}
	.support{
		@media (width <= 768px){
			padding: 33px 20px 38px;
			background-color: var(--color-uiturn-student-bg-light);
		}
	}
	.support__title{
		margin-block-end: 5px;
		font-size: 25px;
		line-height: (33/25);
		@media (width <= 768px){
			font-size: 18px;
			text-align: center;
		}
	}
	.support__image{
		margin-block-end: 20px;
		img{
			width: 100%;
		}
	}
	.support__desc{
		padding-inline: 20px;
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			padding-inline: 0;
			font-size: 12px;
		}
	}

	.flow_wrapper{
		display: flex;
		flex-direction: column;
		row-gap: 30px;
		margin-block-end: 110px;
		@media (width <= 768px){
			margin-block-end: 57px;
		}
	}
	.flow{
		position: relative;
		padding: 22px 27px 33px;
		background-color: var(--color-uiturn-student-bg-light);
	}
	.flow__head{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 16px;
		margin-block-end: 3px;
		@media (width <= 1000px){
			margin-block-end: 15px;
		}
		@media (width <= 768px){
			column-gap: 10px;
		}
	}
	.flow__index{
		display: grid;
		place-content: center;
		width: 57px; aspect-ratio: 1/1;
		border-radius: 9999px;
		color: var(--color-light);
		font-size: 25px;
		line-height: 1.2;
		background-color: var(--color-uiturn-student-primary);
		@media (width <= 768px){
			width: 30px;
			font-size: 16px;
		}
	}
	.flow__title{
		font-size: 20px;
		line-height: (27/20);
		@media (width <= 768px){
			font-size: 14px;
			line-height: 1.2;
		}
	}
	.flow__body{
		padding-inline-start: 73px;
		font-size: 16px;
		line-height: calc(30/16);
		@media (width <= 1000px){
			padding-inline-start: 0;
		}
		@media (width <= 768px){
			font-size: 12px;
		}
		&._narrow{
			padding-inline-end: 120px;
			@media (width <= 768px){
				padding-inline-end: 0;
			}
		}
	}
	.flow__button_wrapper{
		display: grid;
		max-width: 668px;
		margin-block-start: 20px;
		grid-template-columns: repeat(2,auto);
		justify-content: space-between;
		column-gap: 20px;
		@media (width <= 768px){
			grid-template-columns: 1fr;
			row-gap: 23px;
			width: fit-content;
			margin-inline: auto;
		}
	}
	.flow__button{
		min-width: 0;
	}
	.flow__exp{
		margin-block-start: 15px;
		padding-inline: 30px;
		font-size: 12px;
		line-height: calc(16/12);
		@media (width <= 768px){
			padding-inline: 0;
			text-align: center;
		}
	}
	.flow__illust{
		position: absolute;
		right: 40px; bottom: -30px;
	}
	.flow__next{
		position: absolute;
		left: 50%; bottom: -14px;
		translate: -50% 0;
		@media (width <= 768px){
			bottom: -16px;
		}
		svg{
			display: block;
			@media (width <= 768px){
				width: 16px;
			}
		}
	}
}

.q-uiturn-student-schedule{
	position: relative; isolation: isolate;
	margin-block-end: 120px;
	padding-block-end: 60px;
	&::before{
		content: "";
		position: absolute; z-index: -10;
		inset: 36px 0 0;
		background-color: var(--color-uiturn-student-bg-light);
	}
	.schedule_wrapper{
		display: flex;
		flex-direction: column;
		row-gap: 42px;
	}
	.sp-exp{
		margin-block-end: 15px;
		padding-inline: 16px;
		font-size: 10px;
	}
	.schedule__table{
		@media (width <= 768px){
			overflow: auto;
		}
		img{
			@media (width <= 768px){
				max-width: none;
				width: 1576px;
			}
		}
	}
	.schedule__exp{
		max-width: 780px;
		margin-block-start: 10px;
		margin-inline: auto;
		font-size: 14px;
		text-align: right;
		@media (width <= 768px){
			padding-inline: 16px;
			font-size: 10px;
			text-align: left;
		}
	}
}

.q-uiturn-student-registration{
	margin-block-end: 120px;
	background-color: var(--color-uiturn-warm);
	@media (width <= 768px){
		margin-block-end: 60px;
	}
	.inner{
		position: relative;
		padding-block: 50px 60px;
	}
	.desc{
		margin-block: 50px;
		font-size: 18px;
		line-height: calc(24/18);
		text-align: center;
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.button_wrapper{
		display: grid;
		max-width: 668px;
		margin-block-start: 20px;
		margin-inline: auto;
		grid-template-columns: repeat(2,auto);
		justify-content: space-between;
		column-gap: 20px;
		@media (width <= 768px){
			grid-template-columns: 1fr;
			row-gap: 23px;
			width: fit-content;
			margin-inline: auto;
		}
	}
	.button{
		min-width: 0;
	}
	.button__exp{
		margin-block-start: 15px;
		padding-inline: 30px;
		font-size: 12px;
		line-height: calc(16/12);
		@media (width <= 768px){
			padding-inline: 0;
			text-align: center;
		}
	}
	.illust{
		position: absolute;
		bottom: 0; right: 30px;
		@media (width <= 900px){
			display: none;
		}
	}
}


.q-uiturn-student-guardian{
	margin-block-end: 203px;
	padding-block: 100px 130px;
	background-color: var(--color-uiturn-student-bg-light);
	@media (width <= 768px){
		margin-block-end: 33px;
		padding-block: 60px;
	}

	.c-uiturn-button{
		@media (768px < width){
			width: 364px;
		}
	}
	.desc{
		margin-block: 45px;
		padding-inline: 60px;
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			padding-inline: 0;
			font-size: 12px;
		}
	}
	.info_wrapper{
		display: flex;
		flex-direction: column;
		row-gap: 50px;
		@media (width <= 768px){
			row-gap: 28px;
		}
	}
	.info{
		display: grid;
		grid-template-columns: 1fr 351px;
		column-gap: 66px;
		padding: 50px 60px;
		background-color: var(--color-light);
		@media (width <= 768px){
			grid-template-columns: 1fr;
			padding: 30px 20px 40px;
		}
	}
	.info__detail{
		min-width: 0;
	}
	.info__title{
		margin-block-end: 30px;
		color: var(--color-uiturn-student-primary);
		font-size: 25px;
		@media (width <= 768px){
			margin-block-end: 20px;
			font-size: 18px;
			text-align: center;
		}
	}
	.info__desc{
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.info__note{
		margin-block-start: 20px;
		line-height: calc(19/14);
	}
	.info__button{
		margin-block-start: 45px;
		@media (width <= 768px){
			text-align: center;
		}
	}
	.info__image{
		@media (width <= 768px){
			max-width: 340px;
			margin-block-end: 13px;
			margin-inline: auto;
		}
		img{
			width: 100%;
		}
	}
}




/* -------------------------
総合ページ
------------------------- */
.q-uiturn-navi{
	.pc{
		border-block-start: 19px solid var(--color-uiturn-border);
		padding-block: 80px 40px;
		background-color: var(--color-uiturn-bg-light);
	}
	.navi{
		display: grid;
		grid-template-columns: repeat(5, auto);
		justify-content: space-between;
		gap: 15px;
		@media (width <= 1000px){
			zoom: 0.7;
		}
	}
	.navi__item{
		display: flex;
		flex-direction: column;
		transition-property: opacity;
		transition-duration: 0.5s;
		&:hover{
			opacity: 0.7;
			text-decoration: none;
			--q-icon-zoom: 1.1;
		}
	}
	.navi__icon{
		order: -10;
		display: grid;
		place-content: center;
		width: 170px; aspect-ratio: 1/1;
		margin-block-end: 25px;
		margin-inline: auto;
		border-radius: 9999px;
		background-color: var(--color-light);
		img{
			opacity: 1;
			transform: scale(var(--q-icon-zoom, 1));
			transition-property: transform;
			transition-duration: 0.5s;
		}
	}
	.navi__title{
		font-size: 20px;
		text-align: center;
		line-height: calc(27/20);
	}
	.navi__arrow{
		color: var(--color-uiturn-primary);
		text-align: center;
	}

	.sp{
		padding-block: 37px 53px;
		.c-uiturn-heading{
			padding-inline: 10px;
		}
	}
	.details{
		font-size: 12px;
	}
	.details__summary{
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 10px;
		padding: 12px 24px;
		color: var(--color-light);
		background-color: var(--color-uiturn-primary);
		&::before,
		&::after{
			content: "";
			position: absolute;
			width: 100%; height: 1px;
			background-color: var(--color-light);
		}
		&::before{
			top: 1px;
		}
		&::after{
			bottom: 1px;
		}
	}
	.details__arrow{
		svg{
			display: block;
			width: 13px;
		}
	}
	.details__list{
		display: flex;
		flex-direction: column;
		row-gap: 1px;
		border-block-end: 1px solid var(--color-uiturn-primary);
		background-color: var(--color-uiturn-primary);
	}
	.details__link{
		display: block;
		padding: 12px 24px;
		background-color: var(--color-light);
	}
	.navi__note{
		font-size: 12px;
		text-align: center;
	}
}


.q-uiturn-news{
	padding-block: 60px 100px;
	@media (width <= 768px){
		padding-block: 20px 56px;
	}
	.news{
		position: relative;
		display: grid;
		grid-template-columns: 180px 1fr;
		border: 2px solid var(--color-uiturn-primary);
		padding: 40px 20px;
		@media (width <= 1000px){
			grid-template-columns: 1fr;
		}
		@media (width <= 600px){
			border: 0;
			padding: 0;
		}
	}
	.news__head{
		align-self: center;
		color: var(--color-uiturn-primary);
		font-size: 25px;
		text-align: center;
		@media (width <= 1000px){
			margin-block-end: 20px;
			padding-block-end: 20px;
			border-block-end: 1px solid var(--color-uiturn-primary);
			line-height: 1.2;
		}
		@media (width <= 768px){
			font-size: 18px;
		}
		@media (width <= 600px){
			padding-block-end: 10px;
			padding-inline: 10px;
			color: var(--color-base);
			text-align: left;
		}
	}
	.news__body{
		display: flex;
		flex-direction: column;
		row-gap: 3px;
		border-inline-start: 1px solid var(--color-uiturn-primary);
		padding-inline-start: 60px;
		@media (width <= 1000px){
			border-inline-start: 0;
			padding-inline-start: 0;
		}
		@media (width <= 768px){
			row-gap: 12px;
		}
	}
	.news__item{
		display: grid;
		grid-template-columns: 80px auto 1fr;
		align-items: center;
		transition-property: color;
		transition-duration: 0.5s;
		@media (width <= 600px){
			grid-template-columns: 65px 1fr;
			row-gap: 6px;
		}
		&:hover{
			color: var(--color-uiturn-primary);
			text-decoration: none;
		}
	}
	.news__categories{
		display: flex;
		flex-direction: column;
		row-gap: 6px;
	}
	.news__category{
		padding: 5px 5px;
		font-size: 13px;
		line-height: 1.2;
		text-align: center;
		@media (width <= 768px){
			font-size: 10px;
		}
		&.cat-news{
			background-color: var(--color-uiturn-bg);
		}
		&.cat-report{
			background-color: var(--color-uiturn-primary);
			color: var(--color-light);
		}
	}
	.news__date{
		margin-inline-start: 15px;
		margin-inline-end: 24px;
		@media (width <= 768px){
			font-size: 10px;
		}
	}
	.news__title{
		@media (768px < width){
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		@media (width <= 768px){
			grid-column: span 2;
			font-size: 12px;
		}
	}
	.news__more{
		@media (768px < width){
			position: absolute;
			bottom: -30px; right: 38px;
			width: 188px;
		}
		@media (width <= 768px){
			width: 92px;
			margin-block-start: 15px;
			margin-inline-end: 10px;
			margin-inline-start: auto;
			.c-uiturn-button{
				font-size: 10px;
				min-height: 27px;
			}
		}
	}
}


.q-uiturn-pickup{
	padding-block: 60px 100px;
	background-color: var(--color-uiturn-bg-light);
	@media (width <= 768px){
		padding-block-end: 50px;
	}
	.p-pickup_wrapper{
		margin-block-start: 40px;
        margin-block-end: 45px;
	}
	.button{
		text-align: center;
	}
	.c-uiturn-button{
		width: 477px;
		@media (width <= 768px){
			width: 270px;
		}
	}
}


.q-uiturn-strength{
	padding-block: 90px 100px;
	.head{
		margin-block-end: 45px;
		padding-inline-start: 60px;
		@media (width <= 1000px){
			margin-block-end: 60px;
			padding-inline-start: 0;
		}
	}
	.head__title{
		margin-block-end: 60px;
		color: var(--color-uiturn-primary);
		font-size: 30px;
		line-height: calc(40/30);
		@media (width <= 768px){
			margin-block-end: 35px;
			color: var(--color-base);
			font-size: 12px;
			text-align: center;
		}
	}
	.head__strong{
		@media (width <= 768px){
			display: block;
			width: fit-content;
			margin-inline: auto;
			margin-block-start: 20px;
			padding-inline: 5px;
			padding-block-end: 5px;
			font-size: 18px;
			background: linear-gradient(transparent 37%, var(--color-uiturn-primary-light) 37%);
			box-decoration-break: clone;
		}
	}
	.head__detail{
		position: relative;
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 40px;
		@media (width <= 768px){
			grid-template-columns: 1fr;
		}
	}
	.head__desc{
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.head__illust{
		translate: 0 -10px;
		@media (width <= 768px){
			width: 55px;
			position: absolute;
			top: -70px; left: 50%;
			translate: 100px 0;
		}
	}

	.strength_wrapper{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		column-gap: 20px;
		margin-block-end: 80px;
		@media (width <= 900px){
			grid-template-columns: repeat(1,1fr);
			row-gap: 17px;
			max-width: 600px;
			margin-inline: auto;
		}
	}
	.strength{
		padding: 20px 20px 50px;
		background-color: var(--color-uiturn-bg-light);
	}
	.strength__head{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: end;
		column-gap: 10px;
		margin-block-end: 26px;
		@media (width <= 768px){
			margin-inline: -13px;
		}
	}
	.strength__icon{
		position: relative; z-index: 10;
	}
	.strength__title{
		padding-block-end: 20px;
		font-size: 20px;
		line-height: calc(30/20);
		@media (width <= 768px){
			font-size: 18px;
		}
	}
	.strength__border{
		position: absolute;
		bottom: 8px; left: 0;
		width: 100%;

		display: grid;
		grid-template-columns: 1fr 60px;
		column-gap: 25px;
	}
	.strength__line{
		position: relative;
		display: block;
		height: 2px; width: 100%;
		border-radius: 9999px;
		background-color: var(--color-uiturn-primary);
		&._2{
			&::after{
				content: "";
				display: block;
				position: relative;
				top: 0; left: 0;
				width: 2px; height: 31px;
				background-color: inherit;
				rotate: 46deg;
				translate: -5px -10px;
			}
		}
	}
	.strength__image{
		margin-block-end: 25px;
		img{
			width: 100%;
		}
	}
	.strength__desc{
		font-size: 16px;
		line-height: calc(21/16);
		@media (width <= 768px){
			font-size: 12px;
		}
	}

	.target{
		padding-inline-start: 60px;
		@media (width <= 1000px){
			padding-inline-start: 0;
		}
	}
	.target__title{
		margin-block-end: 30px;
		color: var(--color-uiturn-primary);
		font-size: 25px;
		line-height: calc(33/25);
		@media (width <= 768px){
			margin-block-end: 20px;
			padding-inline: 8px;
			font-size: 18px;
		}
	}
	.target__desc{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 22px;
		font-size: 18px;
		line-height: (30/18);
		&:not(:last-child){
			margin-block-end: 7px;
		}
		@media (width <= 768px){
			align-items: center;
			column-gap: 10px;
			font-size: 12px;
			line-height: calc(20/12);
		}
	}
	.target__icon{
		translate: 2px 5px;
		@media (width <= 768px){
			width: 18px;
			translate: 0 -1px;
		}
		img{
			display: block;
		}
	}
}


.q-uiturn-registration{
	margin-block-end: 141px;
	background-color: var(--color-uiturn-warm);
	@media (width <= 768px){
		margin-block-end: 60px;
	}
	.inner{
		position: relative;
		padding-block: 50px 60px;
	}
	.desc{
		margin-block: 50px;
		font-size: 18px;
		line-height: calc(24/18);
		text-align: center;
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.button_wrapper{
		display: grid;
		max-width: 668px;
		margin-block-start: 20px;
		margin-inline: auto;
		grid-template-columns: repeat(2,auto);
		justify-content: space-between;
		column-gap: 20px;
		@media (width <= 768px){
			grid-template-columns: 1fr;
			row-gap: 23px;
			width: fit-content;
			margin-inline: auto;
		}
	}
	.button{
		min-width: 0;
	}
	.button__exp{
		margin-block-start: 15px;
		padding-inline: 30px;
		font-size: 12px;
		line-height: calc(16/12);
		@media (width <= 768px){
			padding-inline: 0;
			font-size: 10px;
			text-align: center;
		}
	}
	.illust{
		position: absolute;
		bottom: 0; left: 30px;
		@media (width <= 900px){
			bottom: auto; left: calc(50% - 230px);
			top: 20px;
			width: 52px;
		}
		@media (width <= 768px){
			top: 30px;
			left: calc(50% - 156px);
			width: 32px;
		}
	}
}


.q-uiturn-ehime{
	position: relative; isolation: isolate;
	border-block-start: 17px solid var(--color-uiturn-border);
	&::before{
		--q-clip-inset-bottom: 50px;
		--q-clip-height: 755px;
		content: "";
		position: absolute; z-index: -10;
		inset: 0 0 auto;
		height: var(--q-clip-height);
		background-color: var(--color-uiturn-bg-light);
		clip-path: polygon(
			0 0, 100% 0,
			100% calc(100% - var(--q-clip-inset-bottom)), 50% 100%,
			0 calc(100% - var(--q-clip-inset-bottom))
		);
		@media (width <= 768px){
			--q-clip-inset-bottom: 40px;
			--q-clip-height: 450px;
		}
	}
	.inner{
		position: relative;
		padding-block: 90px 136px;
		@media (width <= 768px){
			padding-block: 57px 80px;
		}
	}
	.illust{
		position: absolute;
		top: -80px; right: 40px;
		@media (width <= 768px){
			top: -47px; right: 15px;
			width: 70px;
		}
	}
	.head{
		padding-inline-start: 65px;
		@media (width <= 1000px){
			padding-inline-start: 0;
		}
	}
	.heading{
		margin-block-end: 40px;
		color: var(--color-uiturn-primary);
		font-size: 30px;
		line-height: calc(43/30);
		@media (width <= 768px){
			width: fit-content;
			margin-inline: auto;
			padding-inline: 25px;
			padding-block-end: 5px;
			color: var(--color-base);
			font-size: 18px;
			background: linear-gradient(transparent 44%, var(--color-uiturn-primary-light) 44%);
			box-decoration-break: clone;
		}
	}
	.desc{
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			width: fit-content;
			margin-inline: auto;
			font-size: 12px;
			line-height: calc(16/12);
		}
	}
	.ehime{
		position: relative;
		margin-block-start: 100px;
		width: fit-content;
		margin-inline: auto;
		@media (width <= 768px){
			margin-block-start: 72px;
		}
		svg{
			max-width: 100%;
			height: auto;
		}
	}
	.area{
		*{
			transition-property: fill;
			transition-duration: 0.5s;
		}
		&:hover *{
			fill: #FFDA77;
		}
	}
	.button{
		position: absolute;
		width: 130px;
		translate: -50% -50%;
		@media (width <= 768px){
			width: 102px;
			min-height: 38px;
		}
		&._button_nanyo{
			top: 59%; left: 23%;
			@media (width <= 768px){
				top: 89%; left: 21%;
			}
		}
		&._button_chuyo{
			top: 58%; left: 59%;
			@media (width <= 768px){
				top: 56.7%; left: 50%;
			}
		}
		&._button_toyo{
			top: 26%; left: 72%;
			@media (width <= 768px){
				top: 25%; left: 81%;
			}
		}
	}

	/* ホバー連動 */
	.ehime:has(.area._chuyo:hover) .button._button_chuyo,
	.ehime:has(.area._nanyo:hover) .button._button_nanyo,
	.ehime:has(.area._toyo:hover) .button._button_toyo{
		color: var(--color-base);
		--c-uiturn-button-bg: var(--color-uiturn-hover);
	}
	.ehime:has(.button._button_chuyo:hover) .area._chuyo *,
	.ehime:has(.button._button_nanyo:hover) .area._nanyo *,
	.ehime:has(.button._button_toyo:hover) .area._toyo *{
		fill: #FFDA77;
	}

	.note{
		margin-block-start: -35px;
		font-size: 16px;
		text-align: right;
		@media (width <= 768px){
			box-sizing: border-box;
			max-width: 338px;
			margin-inline: auto;
			margin-block-start: 20px;
			padding-inline: 28px;
			font-size: 10px;
			text-align: left;
		}
	}
}


.q-uiturn-contact{
	padding-block: 110px 110px;
	font-size: 16px;
	line-height: calc(21/16);
	background-color: var(--color-uiturn-warm);
	@media (width <= 768px){
		padding-block: 60px 60px;
	}
	.desc{
		margin-block-start: 45px;
		margin-block-end: 70px;
		padding-inline-start: 60px;
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 1000px){
			padding-inline-start: 0;
		}
		@media (width <= 768px){
			font-size: 12px;
			line-height: calc(16/12);
		}
	}
	.content{
		display: grid;
		grid-template-columns: 1fr 460px;
		column-gap: 35px;
		@media (width <= 1000px){
			grid-template-columns: 1fr 360px;
			column-gap: 15px;
		}
		@media (width <= 768px){
			grid-template-columns: 1fr;
			row-gap: 64px;
		}
	}
	.heading{
		margin-block-end: 45px;
		font-size: 25px;
		line-height: calc(33/25);
		text-align: center;
		@media (width <= 768px){
			margin-block-end: 25px;
			font-size: 16px;
		}
	}
	.uturn{
		padding: 44px 42px 62px;
		background-color: var(--color-light);
		@media (width <= 1000px){
			padding-inline: 20px;
		}
		@media (width <= 768px){
			font-size: 12px;
		}
		.c-uiturn-button{
			width: 100%;
		}
	}
	.address{
		margin-block-end: 40px;
		@media (width <= 768px){
			margin-block-end: 25px;
		}
	}
	.tel{
		margin-block-end: 60px;
		@media (width <= 768px){
			margin-block-end: 24px;
		}
	}
	.tel__main{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 10px;
		color: var(--color-uiturn-primary);
		font-size: 30px;
		line-height: 1.1;
		letter-spacing: 0.05em;
	}
	.tel__info{
		margin-block-start: 5px;
		padding-inline-start: 34px;
		font-size: 12px;
		@media (width <= 768px){
			padding-inline-start: 0;
		}
	}
	.tel__sp{
		margin-block-end: 15px;
	}

	.buttons{
		display: flex;
		flex-direction: column;
		row-gap: 40px;
		@media (width <= 768px){
			row-gap: 20px;
		}
	}
	.button__exp{
		margin-block-start: 15px;
		padding-inline: 30px;
		font-size: 12px;
		line-height: calc(16/12);
		@media (width <= 768px){
			font-size: 10px;
		}
	}

	.tab{
		display: grid;
		grid-template-columns: 1fr 60px;
		@media (width <= 1000px){
			grid-template-columns: 1fr;
		}
		@media (width <= 768px){
			font-size: 12px;
		}
	}
	.tab__buttons{
		display: grid;
		@media (1000px < width){
			grid-template-rows: repeat(3,1fr);
		}
		@media (width <= 1000px){
			grid-template-columns: repeat(3,1fr);
		}
	}
	.tab__button{
		border: 1px solid var(--color-uiturn-bg-light);
		font-size: 16px;
		letter-spacing: 0.5em;
		text-align: center;
		background-color: #fff;
		min-height: 50px;
		@media (width <= 768px){
			letter-spacing: 0;
		}
		&[aria-selected="true"]{
			background-color: var(--color-uiturn-bg-light);
		}
		span{
			@media (1000px < width){
				writing-mode: vertical-rl;
			}
		}
	}
	.tab__panels{
		@media (1000px < width){
			grid-area: 1/1/2/2;
		}
	}
	.tab__panels[hidden]{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
	.tab__panel{
		box-sizing: border-box;
		height: 100%;
		padding: 44px 38px 48px;
		background-color: var(--color-uiturn-bg-light);
		@media (width <= 1000px){
			padding-inline: 20px;
		}
	}
	.tab__desc{
		margin-block-end: 25px;
	}
	.tab__link a{
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 8px;
		width: fit-content;
		color: var(--color-uiturn-primary);
		font-size: 16px;
		&::before{
			content: "";
			display: block;
			width: 9px; aspect-ratio: 9/18;
			background-color: currentColor;
			clip-path: polygon(0 0, 100% 50%, 0 100%);
		}
	}
	.tab__map{
		position: relative;
		height: 267px;
		margin-block-start: 30px;
		border: 2px solid var(--color-uiturn-primary);
		@media (width <= 768px){
			height: 170px;
			margin-block-start: 20px;
		}
		iframe{
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
		}
	}
}


.q-uiturn-ai-work-navi{
	padding-block: 110px 200px;
	@media (width <= 768px){
		padding-block: 60px 107px;
	}
	.content{
		padding-inline: 60px 60px;
		@media (width <= 1000px){
			padding-inline: 0;
			text-align: center;
		}
	}
	.detail{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 100px;
		@media (width <= 1000px){
			grid-template-columns: 1fr;
		}
	}
	.heading{
		margin-block-end: 40px;
		color: var(--color-uiturn-primary);
		font-size: 30px;
		line-height: calc(43/30);
		@media (width <= 768px){
			margin-block-end: 20px;
			font-size: 18px;
		}
	}
	.desc{
		font-size: 18px;
		line-height: calc(24/18);
		@media (width <= 768px){
			font-size: 12px;
			line-height: calc(16/12);
		}
	}
	.illust{
		padding-block-start: 15px;
		@media (width <= 1000px){
			grid-area: 1/1/2/2;
			margin-block-end: 40px;
			padding-block-start: 0;
		}
	}
	.button{
		margin-block-start: 70px;
		text-align: center;
		@media (width <= 768px){
			margin-block-start: 58px;
		}
		.c-uiturn-button{
			width: 571px;
			@media (width <= 768px){
				width: 270px;
			}
		}
	}
}

/* 20260226 */

@media (max-width: 480px) {
.p-pickup_outer {
    width: auto;
}
}