@charset "utf-8";

@media(width <=1100px) {}
@media(width <=1023px) {}
@media(width <=999px) {}
@media(width <=767px) {}
/* ==========================================================================
   kosodate
========================================================================== */
main {
  background-color: var(--color-lightBlue);
}

section {
	position: relative;
	/*z-index: 1;*/
}


/*
 * hero
 * ---------------------------*/
.l-hero {
	position: relative;
	height: calc(100vh - 100px - 20px);
}
@media(width <=767px) {
	.l-hero {
		height: auto !important;
		min-height: auto !important;
		padding-top: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
}

.l-hero:before {
	content: "";
	display: block;
	width: 100%;
	height: 36%; 
	background: var(--color-lightYellow);	
	position: absolute;
	bottom: 0;
	z-index: 0;
}

.l-hero:after {
	content: "";
	width: 100%;
	height: 80px;
	background-color: var(--color-lightYellow);	
	-webkit-mask-image: url(../../../_assets/images/home/bg_hill.webp);
  mask-image: url(../../../_assets/images/home/bg_hill.webp);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
	bottom: 36%;
	z-index: 0;
}
@media(width <=767px) {
	.l-hero:after {
		height: 30px;
	}
}

.l-hero__title {
	width: 60%;
	max-width: 364px;
	margin: auto;
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}
@media(width <=767px) {
	.l-hero__title {
		position: static !important;
		transform: none !important;

		/* ★画面幅いっぱいに広げる指定 */
		width: 100% !important;
		max-width: none !important; /* 幅の制限を解除 */
		margin: 0 !important;
		padding: 0 !important;      /* 左右のパディング（隙間）を消す */

		z-index: 2;
	}
}

.l-hero__img {
	width: 90%;
	max-width: 750px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
}
@media(width <=767px) {
	.l-hero__title img {
		width: 100%;
		height: auto;
	}
}

.l-hero__img02 {
	width: 70%;
	max-width: 598px;
	position: absolute;
	right: 66%;
	top: 66%;
}
@media(width > 1280px) {
	.l-hero__img02 {
		right: auto;
		left: -12.5%;
	}
}


.l-hero__text {
	max-width: 384px;
	position: absolute;
	left: 50%;
	top: 78%;
  transform: translateX(-50%);
	z-index: 2;
}
@media(width <=767px) {
	.l-hero__text {
		width: 290px;
		max-width: 90%;
		top: auto;
		bottom: 20px;
	}
}



/*
 * about
 * ---------------------------*/
#about {
	background: var(--color-lightYellow);
}
@media(width <=767px) {
	#about {
		padding-top: 30px;
	}
}

.l-about__title {
	max-width: 681px;
	margin: 0 auto 60px;
}
@media(width <=767px) {
	.l-about__title {
		width: 100%;
		max-width: 750px;
		margin-bottom: 10px;
	}
}


/*
 * about
 * ---------------------------*/
.l-about__text {
	font-size: 1.8rem;
	margin-bottom: 70px;
}
@media(width <=767px) {
	.l-about__text {
		margin-bottom: 40px;
	}
}

.l-about__img {
	position: absolute;
	width: 122px;
	top: -35px;
	left: 74%;
}

.l-about__img02 {
	max-width: 1400px;
	margin-top: 40px;
}
@media(width <=767px) {
	.l-about__img02 {
		width: auto;
	}
}

.l-about__nav {
	gap: 40px 0;
}

.l-about__nav .item {
	font-weight: bold;
}
@media(width <=767px) {
	.l-about__nav .item {
		width: 310px !important;
    margin-right: auto;
    margin-left: auto;
	}
}

.l-about__nav .item .link-arrow,
.l-about__nav button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: left;
	padding: 0.75em 1.5em;
	border: 1px solid var(--color-base);
	border-radius: 25px;
	font-weight: bold;
	line-height: 1.5;
	transition: all 0.2s ease;
	background: #fffbe9;
	width: 100%;
}

.l-about__nav .item .link-arrow:after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--color-base);
	border-right: 2px solid var(--color-base);
	rotate: 135deg;
	translate: 0 -65%;
	transition: translate 0.2s ease;
}

.l-about__nav .item .link-arrow:hover:after, 
.l-about__nav .item .link-arrow:active:after {
	translate: 0 calc(-65% + 4px);
}

.l-about__nav button:after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 18px;
	height: 2px;
	background: var(--color-base);
	transform: translateY(-50%);
}

.l-about__nav button:before {
	content: '';
	position: absolute;
	right: 28px;
	top: 50%;
	width: 2px;
	height: 18px;
	background: var(--color-base);
	transform: translateY(-50%);
	transition: all 0.2s;
}

.l-about__nav button.is-open:before {
	transform: translateY(-50%) rotate(90deg);
	opacity: 0;
}

.l-about__nav .accordion-content {
	display: none;
}

.l-about__nav .accordion-content > * {
	margin: 1.25em auto 0;
	padding-inline: 1.5em 0;
}
@media(width <=767px) {
	.l-about__nav .accordion-content > * {
    padding-bottom: .25em;
	}
}

.l-about__nav .accordion-content li {
	display: flex;
}

.l-about__nav .accordion-content li:not(:last-child) {
	margin-bottom: 0.5em;
}

.l-about__nav .accordion-content li a {
	display: flex;
	justify-content: start;
	align-items: center;
	position: relative;
	padding-right: 1.75em;
}

.l-about__nav .accordion-content li a:after {
	content: '';
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg) translate3d(0, 0, 0);
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--color-base);
	border-right: 2px solid var(--color-base);
	transition: transform 0.2s ease;
}

.l-about__nav .accordion-content li a[href^="#"]:after {
	border-top: 2px solid var(--color-base);
	border-right: 2px solid var(--color-base);
	border-bottom: none;
	rotate: 135deg;
	translate: 0 -65%;
	transform: none;
	transition: translate 0.2s ease, border-color 0.2s ease;
}

.l-about__nav .accordion-content li a:hover:after,
.l-about__nav .accordion-content li a:active:after {
	transform: translateY(-50%) rotate(45deg) translate3d(4px, -4px, 0);
}

.l-about__nav .accordion-content li a[href^="#"]:hover:after,
.l-about__nav .accordion-content li a[href^="#"]:active:after {
	transform: none;
	translate: 0 calc(-65% + 4px);
}

.l-about__nav .accordion-content li .free {
	background: #f397c0;
	color: #fff;
	font-size: 1.2rem;
	line-height: 20px;
	padding-inline: .5em;
	margin-right: .75em;
}



/*
 * service
 * ---------------------------*/
#service {
	background: var(--color-lightGreen); 
	padding: 100px 0 70px;
}
@media(width <=767px) {
	#service {
		padding: 40px 0 0;
	}
}

.l-service__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px 40px;
	margin: 0 auto;
	align-items: start;
}
@media(width <=1100px) {
	.l-service__list {
		 grid-template-columns: repeat(2, 1fr);
	}
}
@media(width <=767px) {
	.l-service__list {
		 grid-template-columns: 1fr; 
	}
}

.l-service__list > * {
  position: relative;
  background-color: var(--color-white); 
  border-radius: 20px;
  box-sizing: border-box;
  padding-top: 30px;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.l-service__inner {
  display: flex;
	flex-direction: column;
  padding: 30px 30px;
  gap: 25px 0;
	flex-grow: 1;
}

.l-service__name {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	line-height: 50px;
	width: 230px;
	text-align: center;
	font-weight: bold;
	color: var(--color-white);
	border-radius: 0 0 20px 20px;
	white-space: nowrap;
}

.l-service__name:before,
.l-service__name:after {
  content: "";
  position: absolute;
  top: 0;
  border-top: 20px solid transparent;
  width: 0;
  height: 0;
}

.is-orange .l-service__name { background-color: var(--color-orange); }
.is-pink .l-service__name   { background-color: var(--color-pink); }
.is-green .l-service__name  { background-color: var(--color-green); }
.is-purple .l-service__name  { background-color: var(--color-purple); }
.is-blue .l-service__name  { background-color: var(--color-blue); }

.l-service__name:before { left: -10px; border-right: 10px solid #d34513;}
.l-service__name:after { right: -10px; border-left: 10px solid #d34513; }
.is-pink .l-service__name:before { border-right-color: #ce7ea4; }
.is-pink .l-service__name:after { border-left-color: #ce7ea4; }
.is-green .l-service__name:before { border-right-color: #008e79; }
.is-green .l-service__name:after { border-left-color: #008e79; }
.is-purple .l-service__name:before { border-right-color: #6b4dbc; }
.is-purple .l-service__name:after { border-left-color: #6b4dbc; }
.is-blue .l-service__name:before { border-right-color: #246ea0; }
.is-blue .l-service__name:after { border-left-color: #246ea0; }

.l-service__title {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
	min-height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
@media(width <=767px) {
	.l-service__title {
		min-height: auto;
	}
}



.l-service__title.l-service__title_wide {
	margin: 0 -.5em;
}

.l-service__title em {
	display: block;
}

.l-service__title em:before {
	content: attr(data-lead);
  font-size: 1.6rem;
	display: block;
}

.l-service__img {
  width: 100%;
  height: 140px;
	display: flex;
  align-items: center;
  justify-content: center;
}

.l-service__img img {
  max-width: 100%;
  max-height: 100%;
}

.l-service__img.js-fadeslider {
  position: relative;
  overflow: hidden;
}

.l-service__img.js-fadeslider img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  pointer-events: none;
}

.l-service__img.js-fadeslider img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.l-service__text {
  font-size: 1.4rem;
  line-height: 1.5;
}

.l-service__text li {
  position: relative;
	border-bottom: 1px solid #e2e2e2;
	padding: 1em 0;
}

.l-service__text li:first-child {
	padding-top: 0;
}

/*.l-service__text li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
	position: relative;
}*/

.l-service__text li a,
.l-service__text li button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	position: relative;
}

.l-service__text li a:after,
.l-service__text li button span {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  background: var(--color-lightGray);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-left: 10px;
}

.l-service__text li a:before {
	content: "";
	position: absolute;
	right: 14.5px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg) translate3d(0, 0, 0);
	width: 5px;
	height: 5px;
	border-top: 2px solid var(--color-base);
	border-right: 2px solid var(--color-base);
	transition: transform 0.2s ease;
	z-index: 1;
}

.l-service__text li button:before {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 2px;
	height: 8px;
	background: var(--color-base);
	transform: translateY(-50%);
	transition: all 0.2s;
	z-index: 1;
}

.l-service__text li button:after {
	content: '';
	position: absolute;
	right: 13px;
	top: 50%;
	width: 8px;
	height: 2px;
	background: var(--color-base);
	transform: translateY(-50%);
	transition: all 0.2s;
	z-index: 1;
}

.l-service__text li button.is-open:before {
	transform: translateY(-50%) rotate(90deg);
	opacity: 0;
}

.l-service__text .accordion-content {
  font-size: 1.3rem;
  color: #666;
}

.l-service__text .accordion-content > * {
  margin-top: 1em;
}

.l-service__subtitle {
  background-color: #fce0ee;
  color: #ea328a;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
	line-height: 30px;
  margin-bottom: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.l-service__subtitle:before {
  content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../../../_assets/images/home/icon_service.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: .75em;
}

.l-service__button {
	gap: 15px 0;
}

.l-service__button .u-button {
	width: 240px;
	margin: auto;
}

.l-service__img02 {
	max-width: 810px;
	position: absolute;
	bottom: 100px;
	right: 0;
	transform: translateX(0);
	z-index: 0;
}
@media (width <= 1100px) {
  .l-service__img02 {
		position: static;
    bottom: auto;
    right: auto;
    transform: none;
    margin-left: auto;
    margin-right: 0;
		width: 55%;
	}
}
@media (width <= 767px) {
  .l-service__img02 {
		margin-top: 30px;
		width: 100%;
		background: linear-gradient(transparent 50%, var(--color-lightYellow) 50%);
	}
}



/*
 * other
 * ---------------------------*/
#other {
	background: var(--color-lightYellow); 
	position: relative;
	padding-bottom: 80px;
}
@media (width <= 767px) {
  #other {
		padding-bottom: 50px;
  }
}

.l-other:before {
  content: '';
	display: block;
	width: 100%;
	height: 50px;
	background-image: url(../../../_assets/images/home/bg_other.webp);
	background-color: var(--color-lightGreen); 
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
@media (width <= 767px) {
  .l-other:before {
		display: none;
  }
}

.l-other__title {
	font-size: 2.4rem;
  text-align: center;
  margin-bottom: 40px;
	padding-top: 70px;
}
@media (width <= 767px) {
  .l-other__title {
  	margin-bottom: 30px;
		padding-top: 20px;
  }
}

.l-other__button .u-button {
	justify-content: space-between;
	height: 100px;
	border-radius: 20px;
	padding-right: 50px;
}
@media (width <= 767px) {
  .l-other__button .u-button {
		height: 110px;
		padding: 0;
		flex-wrap: wrap;
		font-size: 1.4rem;
		text-align: center;
		justify-content: center;
		align-items: stretch;
  }
}

@media (width <= 767px) {
  .l-other__button .u-button > * {
		width: 100%;
  }
}

@media (width <= 767px) {
  .l-other__text {
		min-height: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
  }
}

.l-other__img {
	max-width: 99px;
	width: 40%;
}
@media (width <= 767px) {
  .l-other__img {
		max-width: 77px;
  }
}

.l-other__img img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
}


/*
 * contact
 * ---------------------------*/
#contact {
	background: var(--color-lightYellow); 
	position: relative;
	z-index: 0;
}

#contact:before {
	content: "";
	display: block;
	width: 100%;
	height: calc(100% - 144px - 80px); 
	background: var(--color-yellow);	
	position: absolute;
	bottom: 0;
	z-index: -1;
}
@media(width <=767px) {
	#contact:before {
		height: calc(77% - 30px);
	}
}

#contact:after {
	content: "";
	width: 100%;
	height: 80px;
	background-image: url(../../../_assets/images/home/bg_hill.webp);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	position: absolute;
	bottom: calc(100% - 144px - 80px); 
	z-index: -1;
}
@media(width <=767px) {
	#contact:after {
		height: 30px;
		bottom: calc(77% - 30px);
	}
}

.l-contact__img {
	position: relative;
	margin: 0 auto 50px;
	width: 488px;
}
@media(width <=767px) {
	.l-contact__img {
		margin-bottom: 30px;
		width: 100%;
	}
}

.l-contact__text {
	font-size: 1.8rem;
	margin-bottom: 50px;
}
@media(width <=767px) {
	.l-contact__text {
		margin-bottom: 30px;
	}
}

@media(width <=767px) {
	.l-contact__button .u-button {
		width: 310px;
		margin: auto;
	}
}