@charset "UTF-8";

.main {
	overflow: hidden;
}

.header-navList__link._service {
	color: var(--color-orange);
}

.swiper-button-next,
.swiper-button-prev {
	position: static;
	margin: 0;
}
.swiper-pagination {
	inset: auto !important;
}

/* kv
---------------------------------------------- */
.kv__figure {
	position: absolute;
	top: -8%;
	right: -5%;
	width: calc(1108 / 1500 * 100%);
	/* mask-image: linear-gradient(0deg, transparent, transparent 41.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	mask-size: 100% max(300%, 100vh);
	-webkit-mask-repeat: none;
	mask-repeat: none;
	transition: mask-position 1s .5s linear, -webkit-mask-position 1s .5s linear; */
	z-index: -1;
}

.loaded .kv__figure {
	/* mask-position: center 0%; */
}

.kv__circleImg01 {
  top: 150px;
  right: calc(120 / 1500 * 100%);
}
.kv__circleImg02 {
  top: 330px;
  right: calc(350 / 1500 * 100%);
  transition-delay: .3s;
}

#kv-svg {
  width: 100%;
	height: 100%;
}
#kv-svg image {
	width: 100%;
	height: 100%;
}
#kv-mask {
  stroke-dasharray: 2500px;
}
.kv-svg__cls-1 {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 78px;
	transform: translate(0px, -3px);
}
.loaded #kv-mask {
  animation: write-move-kv 1.5s .6s both;
}

@keyframes write-move-kv {
  0% {
    stroke-dashoffset: 2500px;
  }

  100% {
    stroke-dashoffset: 0px;
  }
}

@media screen and (max-width: 768px) {
	.kv__figure {
		top: -45px;
		right: -50%;
		width: calc(461 / 375 * 100%);
	}

	.kv__circleImg01 {
    top: 80px;
    right: calc(60 / 375 * 100%);
  }
  .kv__circleImg02 {
    top: 240px;
    right: calc(25 / 375 * 100%);
  }
}


/* intro
---------------------------------------------- */
.intro {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 100px;
	z-index: 0;
}

.introNav {
	position: relative;
	width: calc(800 / 1500 * 100%);
	z-index: 1;
}
.introNavList {
	border-radius: 0 50px 50px 0;
	overflow: hidden;
}
.introNavList > li {

}
.introNavList__link {
	display: flex;
	align-items: center;
	position: relative;
	font-size: clamp(15px, -0.29rem + 2.55vw, 26px); /* 769px - 1200px */
	letter-spacing: 0.1em;
	padding: 1em;
	padding-left: calc(200 / 800 * 100%);
	transition: background-color .4s, color .4s;
	z-index: 0;
}
.introNavList__link::before {
	width: calc(19 / 800 * 100%);
}
.introNavList__link .txt {
	font-size: inherit;
}
.introNavList__link .txt::before {
	transition: background-color .4s;
}

.introNavList__link[data-num="01"] {
	background-color: var(--color-orange-light);
}
.introNavList__link[data-num="01"] .txt::before {
	background-color: var(--color-orange);
}
.introNavList__link[data-num="02"] {
	background-color: var(--color-pink-light);
}
.introNavList__link[data-num="02"] .txt::before {
	background-color: var(--color-pink);
}
.introNavList__link[data-num="03"] {
	background-color: var(--color-green-light);
}
.introNavList__link[data-num="03"] .txt::before {
	background-color: var(--color-green);
}
.introNavList__link[data-num="04"] {
	background-color: var(--color-blue-light);
}
.introNavList__link[data-num="04"] .txt::before {
	background-color: var(--color-blue);
}
.introNavList__link[data-num="05"] {
	background-color: var(--color-darkGreen-light);
}
.introNavList__link[data-num="05"] .txt::before {
	background-color: var(--color-darkGreen);
}

.introImgBox {
	position: relative;
	width: calc(830 / 1500 * 100%);
	margin-left: -8.6666667%;
	z-index: -1;
}

.intro__img {
	aspect-ratio: 830 / 650;
	background: url(../img/img_intro01.png) center/contain no-repeat;
	transition: .4s ease-out;
}
.intro__img[data-bg="01"] {
  background-image: url(../img/img_intro01.png);
}
.intro__img[data-bg="02"] {
  background-image: url(../img/img_intro02.png);
}
.intro__img[data-bg="03"] {
  background-image: url(../img/img_intro03.png);
}
.intro__img[data-bg="04"] {
  background-image: url(../img/img_intro04.png);
}
.intro__img[data-bg="05"] {
  background-image: url(../img/img_intro05.png);
}

@media (hover: hover) and (pointer: fine) {
	.introNavList__link[data-num="01"]:hover {
		background-color: var(--color-orange);
		color: #fff;
	}
	.introNavList__link[data-num="01"]:hover .txt::before {
		background-color: #fff;
	}
	.introNavList__link[data-num="02"]:hover {
		background-color: var(--color-pink);
		color: #fff;
	}
	.introNavList__link[data-num="02"]:hover .txt::before {
		background-color: #fff;
	}
	.introNavList__link[data-num="03"]:hover {
		background-color: var(--color-green);
		color: #fff;
	}
	.introNavList__link[data-num="03"]:hover .txt::before {
		background-color: #fff;
	}
	.introNavList__link[data-num="04"]:hover {
		background-color: var(--color-blue);
		color: #fff;
	}
	.introNavList__link[data-num="04"]:hover .txt::before {
		background-color: #fff;
	}
	.introNavList__link[data-num="05"]:hover {
		background-color: var(--color-darkGreen);
		color: #fff;
	}
	.introNavList__link[data-num="05"]:hover .txt::before {
		background-color: #fff;
	}

	.introNavList__link:hover::before {
		background-color: #fff;
	}
}

@media screen and (min-width: 769px) {
	.intro {
		padding-bottom: 70px;
	}
	.introSlider {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.intro {
		align-items: flex-start;
		flex-direction: column-reverse;
	}

	.introNav {
		width: calc(275 / 375 * 100%);
		margin-top: -50px;
	}
	.introNavList {
		border-radius: 0 25px 25px 0;
	}
	.introNavList__link {
		padding: .7em;
		padding-left: calc(20 / 275 * 100%);
	}
	.introNavList__link::before {
		width: calc(10 / 275 * 100%);
	}

	.introImgBox {
		width: calc(304 / 375 * 100%);
		margin-left: auto;
	}

	.introSlider {
		overflow: hidden;
	}
}

/* service
---------------------------------------------- */
.service__ttl .small {
	display: block;
}
.service__ttl .medium {
	display: block;
	font-size: 72.5%;
	margin-left: 0.5em;
}

.serviceHead {
	justify-content: flex-start;
	gap: 15px calc(100 / 1110 * 100%);
	padding-block: 100px 80px;
}

.serviceContents {
	background-color: #fff;
	padding-block: 100px;
}

.service:nth-child(odd) .serviceContents {
	border-radius: 200px 0 0 0;
}
.service:nth-child(even) .serviceContents {
	border-radius: 0 200px 0 0;
}

.serviceBox {
	display: grid;
	grid-template-columns: calc(440 / 1110 * 100%) 1fr;
	gap: 25px calc(60 / 1110 * 100%);
}
* + .serviceBox {
	margin-top: 100px;
}
.serviceBox__copy {
	grid-area: 1/2/2/3;
	align-self: flex-end;
}
.serviceBox__copy .subTtl {
	display: block;
	font-size: 76%;
}
.serviceBox__copy .small {
	display: block;
	font-size: 76%;
}
.serviceBox__head {
	grid-area: 1/1/3/2;
}
.serviceBox__body {
	grid-area: 2/2/3/3;
	align-self: flex-start;
}

.serviceBox__info {
	color: #595757;
}
.serviceBox__info::before {
	background-color: var(--color-darkGreen);
}

.serviceBox._reverse {
	grid-template-columns: 1fr calc(440 / 1110 * 100%);
}
.serviceBox._reverse .serviceBox__copy {
	grid-area: 1/1/2/2;
	align-self: flex-end;
}
.serviceBox._reverse .serviceBox__head {
	grid-area: 1/2/3/3;
}
.serviceBox._reverse .serviceBox__body {
	grid-area: 2/1/3/2;
	align-self: flex-start;
}

.serviceBox--large {
	gap: 20px calc(80 / 1200 * 100%);
}
.serviceBox--large__head {
	width: calc(658 / 1110 * 100%);
}
.serviceBox--large__body {
	flex: 1;
}

.serviceColumn {
	background-color: #faf6eb;
	border-radius: 40px;
	padding: 60px calc(60 / 1110 * 100%);
}
* + .serviceColumn {
	margin-top: 100px;
}

.serviceColumn__inner {
	display: grid;
	grid-template-columns: calc(360 / 990 * 100%) 1fr;
	gap: 30px calc(70 / 990 * 100%);
}

.serviceColumn__copy {
	grid-area: 1/2/2/3;
	align-self: flex-end;
}

.serviceColumn__head {
	grid-area: 1/1/3/2;
}

.serviceColumn__body {
	grid-area: 2/2/3/3;
	align-self: flex-start;
}

/* serviceSlider */
.serviceSlider {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.serviceSlider__navBox {
	justify-content: center;
	flex-wrap: nowrap;
}
.serviceSlider__navBox :is(.swiper-button-prev, .swiper-button-next) {
	width: 40px;
	height: auto;
	aspect-ratio: 1;
}
.serviceSlider__navBox .swiper-button-prev {
	transform: scaleX(-1);
}

.serviceSlider__navBox .swiper-pagination {
	width: fit-content;
}

.service__figure {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 769px) {
	.serviceHead__copy {
		line-height: 2.3;
	}
}

@media screen and (max-width: 768px) {
	.service__ttl {
		line-height: 1.5;
	}

	.serviceHead {
		justify-content: center;
		padding-block: 80px 40px;
		text-align: center;
	}

	.serviceContents {
		padding-block: 70px;
	}

	.service:nth-child(odd) .serviceContents {
		border-radius: 80px 0 0 0;
	}
	.service:nth-child(even) .serviceContents {
		border-radius: 0 80px 0 0;
	}

	.serviceBox,
	.serviceBox._reverse  {
		grid-template-columns: 1fr;
		width: calc(300 / 335 * 100%);
		margin-inline: auto;
	}
	* + .serviceBox {
		margin-top: 50px;
	}
	.serviceBox__copy,
	.serviceBox._reverse .serviceBox__copy {
		grid-area: auto;
		font-size: 23px;
		letter-spacing: 0.05em;
	}
	.serviceBox__head,
	.serviceBox._reverse .serviceBox__head {
		grid-area: auto;
	}
	.serviceBox__body,
	.serviceBox._reverse  .serviceBox__body {
		grid-area: auto;
	}

	.serviceBox__copy .subTtl,
	.serviceBox__copy .small {
		font-size: 15px;
	}

	.serviceBox__info {
		font-size: 14px;
	}

	.serviceBox--large {
		width: calc(300 / 335 * 100%);
		margin-inline: auto;
	}
	.serviceBox--large__head {
		width: 100%;
	}
	.serviceBox--large__body {
		flex: revert;
	}

	.serviceColumn {
		border-radius: 20px;
		padding: 50px calc(22.5 / 335 * 100%);
	}
	* + .serviceColumn {
		margin-top: 50px;
	}

	.serviceColumn__inner {
		grid-template-columns: 100%;
		row-gap: 20px;
	}

	.serviceColumn__copy {
		grid-area: auto;
		text-align: center;
	}

	.serviceColumn__head {
		grid-area: auto;
	}

	.serviceColumn__body {
		grid-area: auto;
	}

	/* serviceSlider */
	.serviceSlider__navBox {
		justify-content: space-between;
		gap: auto;
	}
}

/* service01
---------------------------------------------- */
.service01 {
	background-color: var(--color-orange-light);
}

.service01 :is(.service__ttl, .serviceBox__copy) {
	color: var(--color-orange);
}

.providingSlider__name {
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(200 / 360 * 100%);
	background-color: #faf6eb;
	border-radius: 0 40px 0 0;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 0.8em;
	text-align: center;
}

.providingSlider .serviceSlider__navBox {
	gap: calc(50 / 360 * 100%);
	margin-top: 30px;
}

.generalFood {
	display: block;
	width: 100%;
	margin-top: 30px;
}

.service01 .service__figure {
	top: -55px;
	left: -4%;
	width: calc(512 / 1500 * 100%);
	height: 117px;
}

@media screen and (max-width: 768px) {
	.providingSlider__name {
		width: calc(160 / 290 * 100%);
		border-radius: 0 20px 0 0;
		font-size: 15px;
	}

	.providingSlider .serviceSlider__navBox {
		gap: auto;
		margin-top: 25px;
	}

	.service01 .service__figure {
		top: -25px;
		left: -16%;
		width: calc(256 / 375 * 100%);
		height: 58px;
	}
}

/* service02
---------------------------------------------- */
.service02 {
	background-color: var(--color-pink-light);
}

.service02 :is(.service__ttl, .serviceBox__copy) {
	color: var(--color-pink);
}

.service02 .serviceBox--large {
	gap: 10px calc(12 / 1200 * 100%);
}

.service02 .serviceColumn__txt {
	font-size: 16px;
}

.service02 .service__figure {
	top: 205px;
	right: 1%;
	width: calc(514 / 1500 * 100%);
	height: 161px;
}

@media screen and (max-width: 991px) {
	.service02 .serviceColumn__txt br {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.service02 .service__figure {
		top: 225px;
		right: -3%;
		width: calc(257 / 375 * 100%);
		height: 80px;
	}
}

/* service03
---------------------------------------------- */
.service03 {
	background-color: var(--color-green-light);
}

.service03 :is(.service__ttl, .serviceBox__copy) {
	color: var(--color-green);
}

.service03 .serviceBox--large {
	align-items: center;
}

.cateringColumn {
	position: relative;
	margin-top: 100px;
	margin-inline: var(--adjustment);
	padding-block: 110px 80px;
	z-index: 0;
}
.cateringColumn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(90%, 1110px);
	height: 100%;
	background-color: #faf6eb;
	border-radius: 40px;
	z-index: -1;
}

.cateringSlider {
	overflow: revert;
}

.cateringSlider .swiper-slide {
	transition: transform .6s;
}

.cateringSlider .swiper-slide-active {
	transform: translateY(-5%);
}

.cateringSlider__name {
	margin-top: 1em;
	text-align: center;
}

.cateringSlider .serviceSlider__navBox {
	column-gap: min(calc(40 / 1500 * 100%), 40px);
	margin-top: 30px;
}

.consignmentBtnWrap {
	max-width: 500px;
	margin-top: 60px;
}

.service03 .service__figure {
	top: 183px;
	left: -6%;
	width: calc(589 / 1500 * 100%);
	height: 161px;
}

@media screen and (max-width: 768px) {
	.cateringColumn {
		margin-top: 50px;
		padding-block: 70px 60px;
	}
	.cateringColumn::before {
		width: min(calc(335 / 375 * 100%), 560px);
		border-radius: 20px;
	}

	.cateringSlider__name {
		font-size: 15px;
	}

	.cateringSlider .serviceSlider__navBox {
		justify-content: center;
		column-gap: min(calc(30 / 375 * 100%), 30px);
		margin-top: 10px;
	}

	.consignmentBtnWrap {
		max-width: 290px;
		margin-top: 50px;
	}

	.service03 .service__figure {
		left: -12%;
		width: calc(295 / 375 * 100%);
		height: 80px;
	}
}

/* service04
---------------------------------------------- */
.service04 {
	background-color: var(--color-blue-light);
}

.service04 :is(.service__ttl, .serviceBox__copy) {
	color: var(--color-blue);
}

.cook123 {
	width: 216.5px;
}

.comment {
	position: relative;
	gap: 20px calc(35 / 910 * 100%);
	margin-top: 40px;
	padding: 40px calc(40 / 990 * 100%);
	z-index: 0;
}
.comment::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border-radius: 20px;
	z-index: -1;
}
.comment__txt {
	flex: 1;
	font-size: 16px;
}
.comment__img {
	width: calc(180 / 910 * 100%);
	background-color: var(--color-blue-light);
	border-radius: 50%;
}

.service04 .service__figure {
	top: 153px;
	right: -3%;
	width: calc(542 / 1500 * 100%);
	height: 152px;
}

@media screen and (max-width: 768px) {
	.cook123 {
		width: 170px;
	}

	.comment {
		flex-direction: column-reverse;
		padding: 0 calc(20 / 290 * 100%) 40px;
	}
	.comment::before {
		height: 87%;
		border-radius: 10px;
	}
	.comment__txt {
		flex: revert;
	}
	.comment__img {
		width: calc(180 / 290 * 100%);
		margin-inline: auto;
	}

	.service04 .service__figure {
		top: 125px;
		width: calc(271 / 375 * 100%);
		height: 76px;
	}
}

/* service05
---------------------------------------------- */
.service05 {
	background-color: var(--color-darkGreen-light);
}

.service05 :is(.service__ttl, .serviceBox__copy) {
	color: var(--color-darkGreen);
}

.service05 .service__ttl {
	line-height: 1.5;
}

.mapBtn {
	max-width: 210px;
	font-size: 15px;
	margin-top: 20px;
	margin-left: auto;
	padding: .6em;
}
.mapBtn .txt {
	align-items: center;
}

.wikiBox .serviceBox__copy {
	gap: 5px;
}
.waikiLogo {
	width: calc(230 / 600 * 100%);
}
.waikiImg {
	max-width: 565px;
	margin-top: 30px;
}

.service05 .service__figure {
	top: 287px;
	left: 5%;
	width: calc(534 / 1500 * 100%);
	height: 124px;
}

@media screen and (min-width: 769px) {
	.service05 .serviceBox {
		grid-template-columns: calc(450 / 1110 * 100%) 1fr;
	}
	.service05 .serviceBox._reverse {
		grid-template-columns: 1fr calc(450 / 1110 * 100%);
	}

	.service05 .instagramBox {
		margin-top: 80px;
	}
}

@media screen and (max-width: 768px) {
	.mapBtn {
		max-width: 250px;
		margin-top: 30px;
		margin-inline: auto;
		padding: 1em;
		padding-left: 3em;
	}
	.mapBtn .txt {
		column-gap: 2em;
	}

	.waikiLogo {
		width: 170px;
	}

	.service05 .service__figure {
		top: 368px;
		right: 0;
		left: auto;
		width: calc(267 / 375 * 100%);
		height: 61px;
	}
}