@charset "UTF-8";

:root {
	--text-color: #323232;
	--primary-color: #50AE6C;
	--primary-light-color: #7CBD5A;
	--secondary-color: #FFFF60;
	--secondary-light-color: #FFF4D1;
	--white-color: #FFFFFF;
	--container-width-narrow: 800px;
	--container-width: 1100px;	
	--container-width-wide: 1300px;
	--border-color: #CCC;
	--input-border-color: #8E8E8E;
	--input-placeholder-color: #BDBDBD;
	
	--sp-breakpoint: 848;
  --pc-breakpoint: 1024;
  --normalized-factor: calc((100vw - (var(--sp-breakpoint) * 1px)) / (var(--pc-breakpoint) - var(--sp-breakpoint)));
	@media (848px <= width) {
    --pc: true;
  }
	@media (1200px <= width) {
    --pc-wide: true;
  }
	@media (847px >= width) {
		--sp: true;
	}
	--container-padding: 1em;
	@media (848px <= width) {
		--container-padding: 2em;
	}

	--shape-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 100%);
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shape-triangle-left: polygon(0 50%, 100% 0, 100% 100%);
  --shape-triangle-lower-left: polygon(0 0, 100% 100%, 0 100%);
  --shape-triangle-upper-left: polygon(0 0, 100% 0, 0 100%);
  --shape-triangle-lower-right: polygon(100% 0, 100% 100%, 0 100%);
  --shape-triangle-upper-right: polygon(0 0, 100% 0, 100% 100%);

	--radius-default: 10px;
	--radius-small: 4px;
	@media (768px <= width) {
		--radius-default: 20px;
		--radius-small: 6px;
	}
}

@property --formula {
  syntax: '<length>';
  initial-value: 0;
  inherits: false;
}

*,
::before,
::after {
  box-sizing: border-box;
  --clamp-root-font-size: 16;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
  font-size: var(--clamp);

  --formula: var(--clamp);
  --clamp-font-size-number: calc(10000 * tan(atan2(var(--formula), 10000px)));
  --clamp-font-size-number-for-line-height: clamp(
    var(--clamp-min),
    var(--clamp-font-size-number),
    var(--clamp-max)
  );
  --max-line-height: 1.8;
  --font-size-of-max-line-height: 14;
  --min-line-height: 1.25;
  --font-size-of-min-line-height: 50;
  --line-height-diff: calc(var(--max-line-height) - var(--min-line-height));
  --fonf-size-of-line-height-diff: calc(var(--font-size-of-min-line-height) - var(--font-size-of-max-line-height));
  --line-height-slope: calc(var(--line-height-diff) / var(--fonf-size-of-line-height-diff));
  --line-height: clamp(
    var(--min-line-height),
    calc((var(--line-height-diff) - ((var(--clamp-font-size-number-for-line-height) - var(--font-size-of-max-line-height)) * var(--line-height-slope))) + var(--min-line-height)),
    var(--max-line-height)
  );
  line-height: var(--line-height);
}

/* パスアニメーション ここから */
@property --shape-y1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 99.28%;
}

@property --shape-y2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 81.54%;
}

@property --shape-y3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 22.42%;
}

@property --shape-y4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 9.03%;
}

@property --shape-c1-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 104.04%;
}

@property --shape-c2-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -7.80%;
}

@keyframes SHAPE_Y1 {
	0% {
		--shape-y1: 99.28%;
	}
	25% {
		--shape-y1: 96%;
	}
	50% {
		--shape-y1: 101%;
	}
	75% {
		--shape-y1: 97%;
	}
	100% {
		--shape-y1: 99.28%;
	}
}

@keyframes SHAPE_Y2 {
	0% {
		--shape-y2: 81.54%;
	}
	50% {
		--shape-y2: 76%;
	}
	100% {
		--shape-y2: 81.54%;
	}
}

@keyframes SHAPE_Y3 {
	0% {
		--shape-y3: 22.42%;
	}
	50% {
		--shape-y3: 27%;
	}
	100% {
		--shape-y3: 22.42%;
	}
}

@keyframes SHAPE_Y4 {
	0% {
		--shape-y4: 9.03%;
	}
	25% {
		--shape-y4: 6%;
	}
	50% {
		--shape-y4: 11%;
	}
	75% {
		--shape-y4: 7%;
	}
	100% {
		--shape-y4: 9.03%;
	}
}

@keyframes SHAPE_C1 {
	0% {
		--shape-c1-x: 104.04%;
	}
	50% {
		--shape-c1-x: 99%;
	}
	100% {
		--shape-c1-x: 104.04%;
	}
}

@keyframes SHAPE_C2 {
	0% {
		--shape-c2-y: -7.80%;
	}
	50% {
		--shape-c2-y: -2%;
	}
	100% {
		--shape-c2-y: -7.80%;
	}
}

@property --blob2-y1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 99.28%;
}

@property --blob2-y2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 81.54%;
}

@property --blob2-y3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 22.42%;
}

@property --blob2-y4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 9.03%;
}

@property --blob2-x1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 19.48%;
}

@property --blob2-x2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 4.56%;
}

@property --blob2-x3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 53%;
}

@property --blob2-x4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 97.27%;
}

@property --blob2-c1-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -4.04%;
}

@property --blob2-c2-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -7.80%;
}


@keyframes BLOB2_Y1 {
	0% {
		--blob2-y1: 99.28%;
	}
	25% {
		--blob2-y1: 96%;
	}
	50% {
		--blob2-y1: 101%;
	}
	75% {
		--blob2-y1: 97%;
	}
	100% {
		--blob2-y1: 99.28%;
	}
}

@keyframes BLOB2_Y2 {
	0% {
		--blob2-y2: 81.54%;
	}
	50% {
		--blob2-y2: 76%;
	}
	100% {
		--blob2-y2: 81.54%;
	}
}

@keyframes BLOB2_Y3 {
	0% {
		--blob2-y3: 22.42%;
	}
	50% {
		--blob2-y3: 27%;
	}
	100% {
		--blob2-y3: 22.42%;
	}
}

@keyframes BLOB2_Y4 {
	0% {
		--blob2-y4: 9.03%;
	}
	25% {
		--blob2-y4: 6%;
	}
	50% {
		--blob2-y4: 11%;
	}
	75% {
		--blob2-y4: 7%;
	}
	100% {
		--blob2-y4: 9.03%;
	}
}


/* 左下付近 */
@keyframes BLOB2_X1 {
	0% {
		--blob2-x1: 19.48%;
	}
	/* 25% {
		--blob2-x1: 15%;
	} */
	50% {
		--blob2-x1: 21%;
	}
	/* 75% {
		--blob2-x1: 17%;
	} */
	100% {
		--blob2-x1: 19.48%;
	}
}

/* 左上付近 */
@keyframes BLOB2_X2 {
	0% {
		--blob2-x2: 4.56%;
	}
	50% {
		--blob2-x2: 9%;
	}
	100% {
		--blob2-x2: 4.56%;
	}
}

/* 上中央 */
@keyframes BLOB2_X3 {
	0% {
		--blob2-x3: 53%;
	}
	25% {
		--blob2-x3: 48%;
	}
	50% {
		--blob2-x3: 55%;
	}
	75% {
		--blob2-x3: 51%;
	}
	100% {
		--blob2-x3: 53%;
	}
}

/* 右側 */
@keyframes BLOB2_X4 {
	0% {
		--blob2-x4: 97.27%;
	}
	50% {
		--blob2-x4: 92%;
	}
	100% {
		--blob2-x4: 97.27%;
	}
}


@keyframes BLOB2_C1 {
	0% {
		--blob2-c1-x: -4.04%;
	}
	50% {
		--blob2-c1-x: 3%;
	}
	100% {
		--blob2-c1-x: -4.04%;
	}
}

@keyframes BLOB2_C2 {
	0% {
		--blob2-c2-y: -7.80%;
	}
	50% {
		--blob2-c2-y: -2%;
	}
	100% {
		--blob2-c2-y: -7.80%;
	}
}

@property --blob3-y1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 99.28%;
}

@property --blob3-y2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 81.54%;
}

@property --blob3-y3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 22.42%;
}

@property --blob3-y4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 9.03%;
}

@property --blob3-x1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 19.48%;
}

@property --blob3-x2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 4.56%;
}

@property --blob3-x3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 53%;
}

@property --blob3-x4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 97.27%;
}

@property --blob3-c1-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -4.04%;
}

@property --blob3-c2-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -7.80%;
}


@keyframes BLOB3_Y1 {
	0% {
		--blob3-y1: 99.28%;
	}
	25% {
		--blob3-y1: 96%;
	}
	50% {
		--blob3-y1: 101%;
	}
	75% {
		--blob3-y1: 97%;
	}
	100% {
		--blob3-y1: 99.28%;
	}
}

@keyframes BLOB3_Y2 {
	0% {
		--blob3-y2: 81.54%;
	}
	50% {
		--blob3-y2: 76%;
	}
	100% {
		--blob3-y2: 81.54%;
	}
}

@keyframes BLOB3_Y3 {
	0% {
		--blob3-y3: 22.42%;
	}
	50% {
		--blob3-y3: 27%;
	}
	100% {
		--blob3-y3: 22.42%;
	}
}

@keyframes BLOB3_Y4 {
	0% {
		--blob3-y4: 9.03%;
	}
	25% {
		--blob3-y4: 6%;
	}
	50% {
		--blob3-y4: 11%;
	}
	75% {
		--blob3-y4: 7%;
	}
	100% {
		--blob3-y4: 9.03%;
	}
}


@keyframes BLOB3_X1 {
	0% {
		--blob3-x1: 19.48%;
	}
	/* 25% {
		--blob3-x1: 14%;
	}
	50% {
		--blob3-x1: 22%;
	}
	75% {
		--blob3-x1: 17%;
	} */
	100% {
		--blob3-x1: 19.48%;
	}
}

@keyframes BLOB3_X2 {
	0% {
		--blob3-x2: 4.56%;
	}
	25% {
		--blob3-x2: 8%;
	}
	50% {
		--blob3-x2: 2%;
	}
	75% {
		--blob3-x2: 7%;
	}
	100% {
		--blob3-x2: 4.56%;
	}
}

@keyframes BLOB3_X3 {
	0% {
		--blob3-x3: 53%;
	}
	25% {
		--blob3-x3: 47%;
	}
	50% {
		--blob3-x3: 56%;
	}
	75% {
		--blob3-x3: 50%;
	}
	100% {
		--blob3-x3: 53%;
	}
}

@keyframes BLOB3_X4 {
	0% {
		--blob3-x4: 97.27%;
	}
	25% {
		--blob3-x4: 93%;
	}
	50% {
		--blob3-x4: 100%;
	}
	75% {
		--blob3-x4: 95%;
	}
	100% {
		--blob3-x4: 97.27%;
	}
}


@keyframes BLOB3_C1 {
	0% {
		--blob3-c1-x: -4.04%;
	}
	50% {
		--blob3-c1-x: 3%;
	}
	100% {
		--blob3-c1-x: -4.04%;
	}
}

@keyframes BLOB3_C2 {
	0% {
		--blob3-c2-y: -7.80%;
	}
	50% {
		--blob3-c2-y: -1%;
	}
	100% {
		--blob3-c2-y: -7.80%;
	}
}

@property --blob4-x1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 96.47%;
}

@property --blob4-y1 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 52.04%;
}

@property --blob4-x2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 54.63%;
}

@property --blob4-y2 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 90.84%;
}

@property --blob4-x3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 4.11%;
}

@property --blob4-y3 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 78.02%;
}

@property --blob4-x4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 22.58%;
}

@property --blob4-y4 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 28.82%;
}

@property --blob4-x5 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 68.74%;
}

@property --blob4-y5 {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0.51%;
}

@property --blob4-c1-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 13.22%;
}

@property --blob4-c2-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: -4.73%;
}


@keyframes BLOB4_X1 {
	0% {
		--blob4-x1: 96.47%;
	}
	25% {
		--blob4-x1: 94%;
	}
	50% {
		--blob4-x1: 98%;
	}
	75% {
		--blob4-x1: 95%;
	}
	100% {
		--blob4-x1: 96.47%;
	}
}

@keyframes BLOB4_Y1 {
	0% {
		--blob4-y1: 52.04%;
	}
	50% {
		--blob4-y1: 55%;
	}
	100% {
		--blob4-y1: 52.04%;
	}
}


@keyframes BLOB4_X2 {
	0% {
		--blob4-x2: 54.63%;
	}
	25% {
		--blob4-x2: 52%;
	}
	50% {
		--blob4-x2: 57%;
	}
	75% {
		--blob4-x2: 53%;
	}
	100% {
		--blob4-x2: 54.63%;
	}
}

@keyframes BLOB4_Y2 {
	0% {
		--blob4-y2: 90.84%;
	}
	/* 50% {
		--blob4-y2: 94%;
	} */
	100% {
		--blob4-y2: 90.84%;
	}
}


@keyframes BLOB4_X3 {
	0% {
		--blob4-x3: 4.11%;
	}
	25% {
		--blob4-x3: 6%;
	}
	50% {
		--blob4-x3: 2%;
	}
	75% {
		--blob4-x3: 5%;
	}
	100% {
		--blob4-x3: 4.11%;
	}
}

@keyframes BLOB4_Y3 {
	0% {
		--blob4-y3: 78.02%;
	}
	50% {
		--blob4-y3: 75%;
	}
	100% {
		--blob4-y3: 78.02%;
	}
}


@keyframes BLOB4_X4 {
	0% {
		--blob4-x4: 22.58%;
	}
	25% {
		--blob4-x4: 20%;
	}
	50% {
		--blob4-x4: 25%;
	}
	75% {
		--blob4-x4: 21%;
	}
	100% {
		--blob4-x4: 22.58%;
	}
}

@keyframes BLOB4_Y4 {
	0% {
		--blob4-y4: 28.82%;
	}
	50% {
		--blob4-y4: 32%;
	}
	100% {
		--blob4-y4: 28.82%;
	}
}


@keyframes BLOB4_X5 {
	0% {
		--blob4-x5: 68.74%;
	}
	25% {
		--blob4-x5: 66%;
	}
	50% {
		--blob4-x5: 71%;
	}
	75% {
		--blob4-x5: 67%;
	}
	100% {
		--blob4-x5: 68.74%;
	}
}

@keyframes BLOB4_Y5 {
	0% {
		--blob4-y5: 0.51%;
	}
	50% {
		--blob4-y5: 3%;
	}
	100% {
		--blob4-y5: 0.51%;
	}
}


@keyframes BLOB4_C1 {
	0% {
		--blob4-c1-x: 13.22%;
	}
	50% {
		--blob4-c1-x: 10%;
	}
	100% {
		--blob4-c1-x: 13.22%;
	}
}

@keyframes BLOB4_C2 {
	0% {
		--blob4-c2-y: -4.73%;
	}
	50% {
		--blob4-c2-y: -1%;
	}
	100% {
		--blob4-c2-y: -4.73%;
	}
}

@property --ellipse-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 50%;
}

@property --ellipse-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 50%;
}

@keyframes ELLIPSE_X {
	0% {
		--ellipse-x: 50%;
	}
	25% {
		--ellipse-x: 53%;
	}
	50% {
		--ellipse-x: 49%;
	}
	75% {
		--ellipse-x: 52%;
	}
	100% {
		--ellipse-x: 50%;
	}
}

@keyframes ELLIPSE_Y {
	0% {
		--ellipse-y: 50%;
	}
	25% {
		--ellipse-y: 48%;
	}
	50% {
		--ellipse-y: 53%;
	}
	75% {
		--ellipse-y: 49%;
	}
	100% {
		--ellipse-y: 50%;
	}
}

@keyframes FUWAFUWA {
	0% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-5px);
	}
	40% {
		transform: translateY(0);
	}
	60% {
		transform: translateY(5px);
	}
	80% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

/* パスアニメーション ここまで */

html {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	scroll-behavior: smooth;
}

body::after {
  content: '0';
  display: none;
	@container style(--pc: true) {
		content: '1';
	}
}

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1200;
  --clamp-min: 14;
  --clamp-max: 16;
  margin: 0;
  color: var(--text-color);
	background-color: #FFFCF7;
}

@keyframes ILLUST_ANIMATION {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-10deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/*
  MARK: Menu
*/

@media (847px >= width) {
	.js-menu,
	.js-menu-layer,
	.js-menu__container,
	.js-menu-switch,
	.js-menu-switch__icon,
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  display: block;
	}
	.js-menu,
	.js-menu-layer,
	.js-menu-switch {
	  overflow: hidden;
	}
	.js-menu,
	.js-menu-layer {
	  position: fixed;
	  visibility: hidden;
	}
	.js-menu-layer,
	.js-menu__container {
	  width: 100%;
	  height: 100%;
	}
	.js-menu {
	  width: 100%;
	  height: 100%;
	  transition: transform 0.5s ease-in-out 0s, visibility 0s step-end 0.5s, opacity 0.5s ease-in-out 0s;
	  z-index: 10001;
	  top: 0;
	  right: 0;
	  transform: translateY(1%);
	  opacity: 0;
	}
	.js-menu-layer {
	  top: 0;
	  left: 0;
	  z-index: 10000;
	  transition: visibility 0s step-end 0.5s, opacity 0.5s ease-in-out 0s;
	  background-color: var(--white-color);
	  opacity: 0;
	  cursor: default;
	}
	.js-menu__container {
	  overflow-x: hidden;
	  overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.js-menu-switch {
	  position: relative;
	  width: 45px;
	  height: 32px;
	  z-index: 10002;
	  appearance: none;
	  background-color: var(--white-color);
		border-radius: 45px;
	  border-width: 0;
	  text-decoration: none;
	  padding: 0;
	  margin: 0;
		margin-block-start: 1em;
		margin-inline-end: 1em;
	  cursor: pointer;
	}
	.js-menu-switch__icon {
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  margin: auto;
	  transition: background-color 0.15s ease-in-out;
	  background-color: var(--text-color);
	}
	.js-menu-switch__icon,
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  position: absolute;
	  width: 12px;
	  height: 2px;
		border-radius: 4px;
	}
	.js-menu-switch__icon::before,
	.js-menu-switch__icon::after {
	  content: '';
	  transition: transform 0.1s ease-in-out, background-color 0.1s ease-in-out;
	  background-color: var(--text-color);
	}
	.js-menu-switch__icon::before {
	  top: -6px;
	}
	.js-menu-switch__icon::after {
	  bottom: -6px;
	}
	.is-menu-open .js-menu,
	.is-menu-open .js-menu-layer {
	  visibility: visible;
	  transition-delay: 0s;
	}
	.is-menu-open .js-menu {
	  transform: translateY(0);
		opacity: 1;
	}
	.is-menu-open .js-menu-layer {
	  opacity: 1;
	}
	.is-menu-open .js-menu-switch__icon {
	  background-color: transparent;
	}
	.is-menu-open .js-menu-switch__icon::before,
	.is-menu-open .js-menu-switch__icon::after {
	  background-color: var(--text-color);
	  transition-delay: 0.15s;
	}
	.is-menu-open .js-menu-switch__icon::before {
	  transform: translateY(6px) rotate(45deg);
	}
	.is-menu-open .js-menu-switch__icon::after {
	  transform: translateY(-6px) rotate(-45deg);
	}
}

.js-menu-layer,
.js-menu-switch {
	@container style(--pc: true) {
		display: none;
	}
}

/*
  MARK: Header
*/

.header {
	display: block flex;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	justify-content: flex-end;
	z-index: 1000;

	&&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: var(--white-color);
		transform: translateY(-100%);
		transition: transform .2s ease-in-out;
	}
}

.header__logo {
	margin-block: 0;
}

/* @keyframes BOUND_FRAME{
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.95, 0.95) translate(0%, -0.05%); }
  30%  { transform: scale(1.15, 0.9) translate(0%, -1%); }
  50%  { transform: scale(0.9, 1.15) translate(0%, 0.15%); }
  70%  { transform: scale(1.05, 0.95) translate(0%, 0.05%); }
  90% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes BOUND_IMAGE {
  10%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  25%  { transform: scale(0.95, 0.95) translate(0%, 2.5%); }
  40%  { transform: scale(1.15, 0.9) translate(0%, 5%); }
  60%  { transform: scale(0.9, 1.15) translate(0%, -5%); }
  80%  { transform: scale(1.05, 0.95) translate(0%, 2.5%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
} */

@keyframes BOUND_FRAME{
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  15%  { transform: scale(0.975, 0.975) translate(0%, -0.025%); }
  30%  { transform: scale(1.075, 0.95) translate(0%, -0.5%); }
  50%  { transform: scale(0.95, 1.075) translate(0%, 0.075%); }
  70%  { transform: scale(1.025, 0.975) translate(0%, 0.025%); }
  90% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes BOUND_IMAGE {
  10%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  25%  { transform: scale(0.975, 0.975) translate(0%, 1.25%); }
  40%  { transform: scale(1.075, 0.95) translate(0%, 2.5%); }
  60%  { transform: scale(0.95, 1.075) translate(0%, -2.5%); }
  80%  { transform: scale(1.025, 0.975) translate(0%, 1.25%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@property --logo-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}

@property --logo-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@keyframes LOGO_Y {
	0% {
		--logo-y-progress: 80%;
	}
	25% {
		--logo-y-progress: 70%;
	}
	50% {
		--logo-y-progress: 80%;
	}
	75% {
		--logo-y-progress: 90%;
	}
	100% {
		--logo-y-progress: 80%;
	}
}

@keyframes LOGO_C {
	0% {
		--logo-c-progress: 20%;
	}
	50% {
		--logo-c-progress: 40%;
	}
	100% {
		--logo-c-progress: 20%;
	}
}

.header__logo a {
	display: block grid;
	place-items: center;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #58b774;
	transform-origin: 0% 0%;
	clip-path: shape(
		from 80% 0%,
		smooth to 62.5% 92.5% with 100% var(--logo-y-progress),
		smooth to 0% 90% with var(--logo-c-progress) 70%,
		line to 0% 0%,
		close
	);
	width: 150px;
	height: 90px;
	z-index: 10003;
	img {
		display: block;
		margin-block-start: -16px;
		margin-inline-start: -32px;
		width: 67px;
		height: auto;
		aspect-ratio: 101 / 72;
	}
	animation: LOGO_Y 12s linear infinite, LOGO_C 6s linear infinite;
	&:hover {
		@media (any-hover: hover) {
			animation: BOUND_FRAME .85s ease-in-out, LOGO_Y 12s linear infinite, LOGO_C 6s linear infinite;
			img {
				animation: BOUND_IMAGE .85s ease-in-out;
			}
		}
	}
	@container style(--pc: true) {
		width: 213px;
		height: 142px;
		img {
			margin-block-start: -24px;
			margin-inline-start: -48px;
			width: 101px;
		}
	}
}

.menu__list {
	display: block flex;
	align-items: center;
	position: relative;
	transition: color .2s ease-in-out;

	li.is-current {
		font-weight: bold;
	}

	li:last-child {
		a {
			display: inline flex; /* Safariのバグ対策 */
			align-items: center;
			justify-content: center;
			gap: 1em;
			color: var(--text-color);
			background-color: var(--white-color);
			border-radius: 2em;
			padding: .25em 1.25em;
			transition: background-color .2s ease-in-out, color .2s ease-in-out;
			svg {
				fill: currentColor;
				aspect-ratio: 14 / 11;
				width: 1em;
			}
		}
		a:hover {
			@media (any-hover: hover) {
				text-decoration: none;
				background-color: var(--primary-light-color) !important;
				color: var(--white-color);
			}
		}
	}

	@container style(--sp: true) {
		padding-block-start: 85px;
		flex-direction: column;
		li {
			border-bottom: 1px solid var(--border-color);
			max-width: 20em;
			width: calc(100% - var(--container-padding) * 2);
		}
		li:last-child,
		li:nth-last-child(2) {
			border-bottom: none;
		}
		li:not(:last-child) {
			a {
				position: relative;
				padding-inline: 1em 2em;
				&::before {
					content: '';
					width: .5em;
					height: .5em;
					border-top: 2px solid var(--text-color);
					border-right: 2px solid var(--text-color);
					position: absolute;
					right: 1em;
					top: 50%;
					transform: translateY(-50%) rotate(45deg);
				}
			}
		}
		li:last-child {
			padding-block: 1em 85px;
			a {
				padding-block: .75em;
				background-color: var(--primary-color);
				color: var(--white-color);
				width: 100%;
			}
		}
		a {
			display: block;
			padding-block: 1em;
		}
	}

	@container style(--pc: true) {
		color: var(--white-color);
		gap: 3em;
		padding: 1.5em;
	}

	a {
		&:hover {
			@media (any-hover: hover) {
				text-decoration: underline;
				text-underline-offset: .15em;
			}
		}
	}
}

/* .header:not(.is-scrolled) {
	position: absolute;
	z-index: auto;
	@container style(--pc: true) {
		.menu__list li:not(:last-child) a {
			mix-blend-mode: difference;
			color: var(--white-color);
		}
	}
} */

.header.is-scrolled {
	@container style(--pc: true) {
		&::before {
			transform: translateY(0);
		}
		.menu__list {
			color: var(--text-color);
			li:last-child {
				a {
					color: var(--white-color);
					background-color: var(--primary-color);
				}
			}
		}
	}
}

/*
  MARK: MV
*/

@property --mv-y1-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --mv-y2-progress {
  syntax: "<percentage>";
  inherits: false;
 	initial-value: 100%;
}

@property --mv-c1-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}

@property --mv-c2-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@keyframes MV_Y1 {
	0% {
		--mv-y1-progress: 100%;
	}
	25% {
		--mv-y1-progress: 90%;
	}
	50% {
		--mv-y1-progress: 100%;
	}
	75% {
		--mv-y1-progress: 85%;
	}
	100% {
		--mv-y1-progress: 100%;
	}
}

@keyframes MV_Y2 {
	0% {
		--mv-y2-progress: 100%;
	}
	50% {
		--mv-y2-progress: 85%;
	}
	100% {
		--mv-y2-progress: 100%;
	}
}

@keyframes MV_C1 {
	0% {
		--mv-c1-progress: 70%;
	}
	50% {
		--mv-c1-progress: 65%;
	}
	100% {
		--mv-c1-progress: 70%;
	}
}

@keyframes MV_C2 {
	0% {
		--mv-c2-progress: 20%;
	}
	25% {
		--mv-c2-progress: 15%;
	}
	50% {
		--mv-c2-progress: 20%;
	}
	75% {
		--mv-c2-progress: 25%;
	}
	100% {
		--mv-c2-progress: 20%;
	}
}

.mv {
	display: block grid;
	place-items: center;
	position: relative;
	padding-inline: var(--container-padding);
	overflow: hidden;
	--mv-wave-height: 15vw;
	padding-block: 100px calc(70px + var(--mv-wave-height));
	--mv-wave-v-position: calc(100% - var(--mv-wave-height));
	clip-path: shape(
		from 0% 0%,
		line to 100% 0%,
		line to 100% var(--mv-wave-v-position),
		smooth to 45% var(--mv-wave-v-position) with var(--mv-c1-progress) var(--mv-y1-progress),
		smooth to 0% var(--mv-wave-v-position) with var(--mv-c2-progress) var(--mv-y2-progress),
		line to 0% 0%,
		close
	);
	/* smooth to 45% var(--mv-wave-v-position) with 70% 100%,
		smooth to 0% var(--mv-wave-v-position) with 20% 100%, */
	/* animation: MV_Y1 12s linear infinite, MV_C1 6s linear infinite, MV_Y2 12s linear infinite, MV_C2 6s linear infinite; */
	animation: MV_Y1 20s linear infinite, MV_C1 10s linear infinite, MV_Y2 20s linear infinite, MV_C2 10s linear infinite;
	@container style(--pc: true) {
		--mv-wave-height: 200px;
		padding-block: 120px calc(120px + var(--mv-wave-height));
	}
}

.mv__image {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.mv__content {
	display: block grid;
	justify-items: center;
	z-index: 1;
	color: var(--white-color);
	text-align: center;
}

@keyframes MV_LINE_ANIMATION {
	0% {
		stroke-dashoffset: 700;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

.mv__illust {
	g {
		stroke-dasharray: 700;
		stroke-dashoffset: 700;
	}
	path {
		fill: none !important;
	}
	@container style(--sp: true) {
		width: 80%;
		height: auto;
		aspect-ratio: 438 / 118;
		margin-inline: auto;
		path {
			stroke-width: 1px !important;
		}
	}
}

.mv__title {
	--clamp-min: 80;
  --clamp-max: 90;
	font-weight: normal;
	letter-spacing: .05em;
	margin-block: 0;
	text-shadow: 0 0 20px #182D03;
	span {
		display: block;
	}
	span:not(:last-child) {
		@container style(--sp: true) {
			font-size: 8vw;
		}
	}
	span:last-child {
		@container style(--sp: true) {
			font-size: 16vw;
		}
	}
}

.mv__description {
	--clamp-min: 16;
  --clamp-max: 22;
	font-weight: normal;
	letter-spacing: .05em;
	margin-block: 2em;
	text-shadow: 0 0 20px #000;
	@container style(--sp: true) {
		margin-block: 1em 2em;
		font-size: 4vw;
	}
	@container style(--pc: true) {
		br {
			display: none;
		}
	}
}

.mv__message {
	--clamp-min: 11;
  --clamp-max: 20;
	position: absolute;
	/* top: 250px; */
	top: 190px;
	left: 50%;
	/* margin-inline-start: 180px; */
	margin-inline-start: 160px;
	background-color: var(--secondary-color);
	color: var(--text-color);
	padding: 1em 2em;
	border-radius: 100%;
	transform: rotate(10deg);
	/* transform-origin: 100% 0%; */
	transform-origin: 0% 100%;

	&::before {
		content: '';
		--size: 1em;
		width: calc(var(--size) * 1.5);
		height: calc(var(--size) * 2);
		position: absolute;
		left: 15%;
		top: calc(100% - calc(var(--size) * 1.5));
		background-color: var(--secondary-color);
		clip-path: var(--shape-triangle-upper-left);
	}

	@container style(--sp: true) {
		top: auto;
		/* bottom: calc(70px + 93vw); */
		bottom: calc(70px + 100vw);
		left: auto;
		/* right: 0; */
		right: 4vw;
		margin-inline-start: 0;
		font-size: 2.5vw;
		width: 13em;
		span {
			position: relative;
		}
		br {
			display: none;
		}
	}
}

.mv__buttons {
	display: block grid;
	align-items: center;
	/* justify-content: center; */
	gap: calc(var(--container-padding) * 1);
	width: 100%;
	@container style(--pc: true) {
		display: block flex;
		width: auto;
		gap: calc(var(--container-padding) / 2);
	}
}

.mv__button-mail,
.mv__button-line {
	--clamp-min: 16;
  --clamp-max: 22;
	display: block grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--container-padding) / 2);
	text-align: center;
	padding: .5em 3em;
	border-radius: 3em;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	width: 100%;
	max-width: 20em;
	margin-inline: auto;
	position: relative;
	@container style(--pc: true) {
		grid-template-columns: auto 1fr;
		max-width: auto;
		width: auto;
		margin-inline: 0;
		padding: .5em 1em;
	}
	@container style(--sp: true) {
		font-size: 4vw;
		span {
			font-size: 1em;
		}
		svg {
			position: absolute;
			left: 1em;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

.mv__button-mail {
	background-color: var(--white-color);
	color: var(--text-color);
	svg {
		fill: currentColor;
		aspect-ratio: 14 / 11;
		width: 1.25em;
		height: auto;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-color);
			color: var(--white-color);
		}
	}
}

.mv__button-line {
	background-color: #37BC3D;
	color: var(--white-color);
	svg {
		fill: currentColor;
		aspect-ratio: 34 / 34;
		width: 1.75em;
		height: auto;
		@container style(--sp: true) {
			margin-inline-start: -.25em;
		}
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--white-color);
			color: #37BC3D;
		}
	}
}

.mv {
	.mv__image {
		opacity: 0;
		transform: scale(1.05) translateY(-30px);
		transform-origin: 50% 0%;
		transition: opacity .6s ease-in-out, transform .6s ease-in-out;
	}
	.mv__image img {
		transform: scale(1.02);
		transform-origin: 50% 0%;
		transition: transform .8s ease-in-out;
	}
	.mv__title span {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1), transform .55s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.mv__title span:nth-child(3) {
		transform: translateY(10px) scale(0.95);
	}
	.mv__description {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1), transform .55s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.mv__button-outer{
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1), transform .55s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.mv__message {
		opacity: 0;
		transform: translateY(10px) rotate(8deg) scale(.85);
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1), transform .55s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	&.is-loaded {
		.mv__image {
			opacity: 1;
			transform: scale(1.0) translateY(0);
		}
		.mv__image img {
			transform: scale(1.0) translateY(0);
		}
		.mv__illust {
			g {
				animation: MV_LINE_ANIMATION 4s ease-in-out forwards;
			}
		}
		.mv__title span {
			opacity: 1;
			transform: translateY(0) scale(1.0);
		}
		.mv__title span:nth-child(2) {
			transition-delay: .1s;
		}
		.mv__title span:nth-child(3) {
			transition-delay: .4s;
		}
		.mv__description {
			opacity: 1;
			transform: translateY(0);
			transition-delay: .7s;
		}
		.mv__button-outer {
			opacity: 1;
			transform: translateY(0);
		}
		.mv__button-outer:nth-child(1) {
			transition-delay: .8s;
		}
		.mv__button-outer:nth-child(2) {
			transition-delay: .9s;
		}
		.mv__message {
			opacity: 1;
			transform: translateY(0) rotate(10deg) scale(1.0);
			transition-delay: 1.2s;
		}
	}
}

/*
  MARK: Hero
*/

.hero {
	display: block grid;
	align-items: center;
	position: relative;
	overflow: hidden;
	@container style(--pc-wide: true) {
		grid-template-columns: 2fr 3fr;
		grid-template-areas: "text image";
	}
}

@property --hero-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}

@property --hero-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}

@keyframes HERO_Y {
	0% {
		--hero-y-progress: 70%;
	}
	25% {
		--hero-y-progress: 50%;
	}
	50% {
		--hero-y-progress: 70%;
	}
	75% {
		--hero-y-progress: 90%;
	}
	100% {
		--hero-y-progress: 70%;
	}
}

@keyframes HERO_C {
	0% {
		--hero-c-progress: 40%;
	}
	50% {
		--hero-c-progress: 30%;
	}
	100% {
		--hero-c-progress: 40%;
	}
}

.hero__image {
	overflow: hidden;
	clip-path: shape(
		from 10% 0%,
		smooth to 45% 75% with -20% var(--hero-y-progress),
		smooth to 100% 100% with var(--hero-c-progress) 85%,
		line to 100% 0%,
		close
	);
	animation: HERO_Y 12s linear infinite, HERO_C 6s linear infinite;
	@container style(--pc-wide: true) {
		grid-area: image;
	}
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.hero__text {
	display: block grid;
	place-items: center;
	position: relative;
	gap: var(--container-padding);
	padding: var(--container-padding);
	@container style(--pc-wide: true) {
		grid-area: text;
		padding-inline-end: 0;
	}
}

.hero__title {
	display: block grid;
	place-items: center;
	gap: .25em;
	--clamp-min: 21;
  --clamp-max: 28;
	font-weight: bold;
	letter-spacing: .05em;

	&::before {
		content: attr(data-en);
		--clamp-min: 48;
  	--clamp-max: 64;
		display: block;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--primary-light-color);
	}
}

.hero__description {
	text-align: center;
}

@keyframes HERO_BG_CIRCLE {
	0%,
	100% {
		transform: scale(1) translateY(0);
		border-radius: 50%;
	}
	10% {
		transform: scale(1.05, 0.96) translateY(2%);
		border-radius: 50% 48% 52% 50%/50% 52% 48% 50%;
	}
	20% {
		transform: scale(0.98, 1.06) translateY(-2%);
		border-radius: 48% 52% 48% 52%/52% 50% 50% 48%;
	}
	30% {
		transform: scale(1.04, 0.96) translateY(1%);
		border-radius: 50% 52% 48% 50%/48% 50% 52% 50%;
	}
	40% {
		transform: scale(0.97, 1.03) translateY(-1%);
		border-radius: 51% 49% 51% 49%/49% 51% 49% 51%;
	}
	50% {
		transform: scale(1.03, 1.01) translateY(0);
		border-radius: 48% 52% 51% 49%/50% 52% 50% 48%;
	}
	60% {
		transform: scale(0.99, 1.04) translateY(1%);
		border-radius: 49% 51% 49% 51%/51% 51% 49% 49%;
	}
	70% {
		transform: scale(1.07, 0.94) translateY(0);
		border-radius: 52% 48% 52% 48%/48% 50% 52% 50%;
	}
	80% {
		transform: scale(0.96, 1.07) translateY(-2%);
		border-radius: 49% 51% 50% 50%/52% 50% 48% 50%;
	}
	90% {
		transform: scale(1.04, 0.98) translateY(1%);
		border-radius: 50% 52% 48% 50%/50% 52% 48% 50%;
	}
}

.hero__bg-circle {
	@container style(--pc-wide: true) {
		position: absolute;
		bottom: 0;
		left: calc(0% - (412px * 0.6));
		width: 412px;
		height: 412px;
		transform: translateY(50%);
		z-index: -1;
		animation: HERO_BG_CIRCLE 12s linear infinite;
	}
}

.hero__bg-circle-icon {
	@container style(--pc-wide: true) {
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--secondary-light-color);
		border-radius: 50%;
	}
}

.hero {
	.hero__image {
		opacity: 0;
		transform: scale(.95) translateY(-30px) translateX(30px);
		transform-origin: 100% 0%;
		transition: opacity .6s ease-in-out, transform .6s ease-in-out;
	}
	img {
		transform: scale(.98);
		transform-origin: 100% 0%;
		transition: transform .8s ease-in-out;
	}
	.hero__title::before {
		opacity: 0;
		transform: translateY(30px);
		transform-origin: 100% 0%;
		transition: opacity .5s cubic-bezier(0.65, 0.05, 0.36, 1), transform .5s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.hero__title span {
		opacity: 0;
		transform: translateY(30px);
		transform-origin: 100% 0%;
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1), transform .55s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.hero__description {
		opacity: 0;
		transform: translateY(30px);
		transform-origin: 100% 0%;
		transition: opacity .6s cubic-bezier(0.65, 0.05, 0.36, 1), transform .6s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	.hero__bg-circle-icon {
		opacity: 0;
		transform: scale(.95) translateX(-30px) translateY(30px);
		transform-origin: 0% 100%;
		transition: opacity .3s ease-in-out .3s, transform .3s ease-in-out .3s;
	}
	&.is-loaded {
		.hero__image {
			opacity: 1;
			transform: scale(1.0) translateY(0) translateX(0);
		}
		img {
			transform: scale(1.0) translateY(0);
		}
		.hero__title::before {
			opacity: 1;
			transform: translateY(0);
		}
		.hero__title span {
			opacity: 1;
			transform: translateY(0);
		}
		.hero__description {
			opacity: 1;
			transform: translateY(0);
		}
		.hero__bg-circle-icon {
			opacity: 1;
			transform: scale(1.0) translateX(0) translateY(0);
		}
	}
}

/*
  MARK: Content
*/

.content {
	width: calc(100% - var(--container-padding) * 2);
	max-width: var(--container-width-narrow);
	margin-inline: auto;
	padding-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 5);

	@container style(--sp: true) {
		padding-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 4);
	}
}

.content + .content {
	padding-block-start: 0;
}

.content--lg {
	max-width: var(--container-width);
}

.content--xl {
	max-width: var(--container-width-wide);
}

.content--works-detail {
	max-width: 1200px;
}

.content-wrapper-green {
	background-color: var(--primary-color);
}

/*
  MARK: Heading
*/

.heading {
	--clamp-min: 32;
  --clamp-max: 40;
	font-weight: bold;
	margin-block-end: 1em;
	text-align: center;
}

.home-heading-icon {
	display: block grid;
	place-items: center;
	margin-block-end: 1em;
}

.home-heading {
	display: block grid;
	place-items: center;
	gap: .25em;
	--clamp-min: 21;
  --clamp-max: 28;
	font-weight: bold;
	letter-spacing: .05em;

	&::before {
		content: attr(data-en);
		--clamp-min: 48;
  	--clamp-max: 64;
		display: block;
		text-transform: uppercase;
		letter-spacing: .1em;
		color: var(--primary-light-color);
	}
}

.home-sub-heading {
	--clamp-min: 26;
  --clamp-max: 28;
	color: var(--primary-color);
	background-color: #FCF8F1; /* 背景色 */
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #FCF8F1 50%, #FCF8F1 100%), /* 点線1の色 */
										linear-gradient(180deg, transparent calc(100% - 2px), #D8C8AD 100%); /* 点線2の色と太さ */
	background-size: 8px 100%, /* 点線1のサイズ */
									100% 1.8em; /* 点線2のサイズ */
	line-height: 1.8em; /* 文字の高さ */
	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.lead {
	text-align: center;
	margin-block: 2em;
}

.content-wrapper-green {
	.home-heading {
		color: var(--white-color);
		&::before {
			color: var(--white-color);
		}
	}
	.lead {
		color: var(--white-color);
	}
}

.area {
	.home-heading {
		color: var(--text-color);
		&::before {
			color: var(--primary-light-color);
		}
	}
}

/*
  MARK: Form
*/

.form-message {
	text-align: center;
}

.form-button-outer {
	margin-block-start: 5em;
}

.form-button {
	--clamp-min: 18;
  --clamp-max: 22;
	display: block;
	grid-template-columns: 1fr auto;
	text-align: center;
	position: relative;
	padding: .35em 2em;
	border-radius: 3em;
	background-color: var(--white-color);
	color: var(--primary-color);
	text-decoration: none;
	border: 2px solid var(--primary-color);
	transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	max-width: 25em;
	width: 100%;
	margin-inline: auto;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	svg {
		position: absolute;
		top: 50%;
		right: 1em;
		transform: translateY(-50%);
		stroke: currentColor;
		fill: transparent;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-color);
			color: var(--white-color);
		}
	}
}

.form-button--sm {
	--clamp-min: 14;
  --clamp-max: 16;
	width: fit-content;
	margin-inline: auto;
	padding-inline: 4em;
}

.form-button--submit {
	background-color: var(--primary-color);
	color: var(--white-color);
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-light-color);
			color: var(--white-color);
			border-color: var(--primary-light-color);
		}
	}
}

.form-steps {
	display: block flex;
	align-items: center;
	justify-content: center;
	counter-reset: form-step;
	margin-block: 3em 5em;
}

.form-step {
	display: block grid;
	place-items: center;
	padding-inline: 1em;
	position: relative;

	&:not(:last-child)::after {
		content: '';
		width: .5em;
		height: .5em;
		border-top: 2px solid var(--primary-color);
		border-right: 2px solid var(--primary-color);
		position: absolute;
		right: -.125em;
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}
}

.form-step span {
	display: block;
	font-weight: bold;
	padding: .25em 2em;
	border-radius: 3em;
	background-color: #FCF8F1;
	color: var(--primary-color);
	text-align: center;
	@container style(--pc: true) {
		padding: .25em 5em;
	}
}

.form-step span::before {
	content: counter(form-step) ". ";
	counter-increment: form-step;
}

.form-step.is-completed span {
	color: var(--white-color);
	background-color: var(--primary-color);
}

.form-list {
	display: block grid;
	gap: var(--container-padding);
	width: 100%;
	--clamp-min: 16;
  --clamp-max: 16;
}

.form-item {
	display: block grid;
	gap: calc(var(--container-padding) / 4);
	width: 100%;
}

.form-checkboxes {
	display: block flex;
	flex-wrap: wrap;
	column-gap: var(--container-padding);
}

.form-input.form-input--number {
	display: block flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--container-padding) / 4);
	input[type="number"] {
		width: 10em;
	}
}

.form-input {
	width: 100%;
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	textarea {
		width: 100%;
		padding: .5em 1em;
		border: 1px solid var(--input-border-color);
		border-radius: var(--radius-small);
		font-size: inherit;
		color: inherit;
		&::placeholder {
			color: var(--input-placeholder-color);
		}
	}
	textarea {
		height: 20em;
		line-height: 1.5;
		padding: 1.5em;
	}
}

.form-checkbox {
	display: block flex;
	flex-wrap: wrap;
	gap: calc(var(--container-padding) / 4);
	align-items: center;
}

.form-label {
	display: block flex;
	flex-wrap: wrap;
	font-weight: bold;
	align-items: center;
	gap: calc(var(--container-padding) / 4);
}

.form-label__required {
	display: inline-block;
	font-size: .6em;
	background-color: #FF6F6F;
	color: var(--white-color);
	padding: .2em .5em;
	border-radius: var(--radius-small);
	vertical-align: middle;
}

.privacy-policy {
	border: 1px solid var(--input-border-color);
	border-radius: var(--radius-small);
	font-size: .8em;
	height: 28em;
	overflow-y: auto;
	padding: 2.1em;
	background-color: var(--white-color);
}

.privacy-policy__inner {
	display: block;
	white-space: pre-wrap;
	margin-block: 0;
	line-height: 1.5;
}

.form-cautions {
	display: block grid;
	gap: var(--container-padding);
	@container style(--pc-wide: true) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.form-caution {
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	background-color: #FCF8F1;
	border: 2px solid var(--primary-color);
	padding: calc(var(--container-padding) * 2) calc(var(--container-padding) * 1.5);
	border-radius: var(--radius-default);
	@container style(--pc-wide: true) {
		padding: calc(var(--container-padding) * 1);
		gap: calc(var(--container-padding) / 2);
	}
}

.form-caution__heading {
	--clamp-min: 24;
  --clamp-max: 32;
	font-weight: bold;
	color: var(--primary-color);
	text-align: center;
}

.form-caution__description {
	text-align: center;
}

.form-caution__list {
	display: block grid;

	li {
		display: block flex;
		flex-wrap: wrap;
		align-items: center;
		gap: calc(var(--container-padding) / 4);
	}
}

.form-line-button {
	--clamp-min: 18;
  --clamp-max: 22;
	display: block grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap: calc(var(--container-padding) / 2);
	padding: .35em 1em;
	border-radius: 3em;
	background-color: #37BC3D;
	color: var(--white-color);
	text-decoration: none;
	border: 2px solid #37BC3D;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 15em;
	margin-inline: auto;
	.form-line-button__arrow {
		stroke: currentColor;
		fill: transparent;
	}
	.form-line-button__icon {
		fill: currentColor;
		aspect-ratio: 34 / 34;
		width: 1.75em;
		height: auto;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--white-color);
			color: #37BC3D;
		}
	}
}

/*
  MARK: Home
*/

.home-wrapper {
	overflow: hidden;
	width: 100vw;
	@container style(--pc: true) {
		position: relative;
		margin-block-start: -150px;
		z-index: 2;
	}
	@container style(--pc-wide: true) {
		padding-bottom: 500px;
    margin-bottom: -500px;
	}
}

/*
  MARK: Works
*/

.works-list {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	@container style(--sp: true) {
		max-width: 500px;
		margin-inline: auto;
	}
	@container style(--pc: true) {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--container-padding) * 1);
	}
	@container style(--pc-wide: true) {
		grid-template-columns: repeat(3, 1fr);
	}
}

.works-item {
	display: block grid;
	grid-template-rows: subgrid;
  grid-row: span 5;
	gap: calc(var(--container-padding) * 1);
	position: relative;
	align-content: start;
	@container style(--pc: true) {
		gap: calc(var(--container-padding) / 2);
	}
}

.home-works {
	position: relative;
	margin-block: calc(var(--container-padding) * 4) calc(var(--container-padding) * 8);
	padding-inline: calc(var(--container-padding) * 1);
	@container style(--pc: true) {
		padding-inline: 0;
		margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 4);
	}
	@container style(--pc-wide: true) {
		margin-block: 0 calc(var(--container-padding) * 1);
	}
}

.home-works__inner {
	position: relative;
	z-index: 1;
}

@property --home-works-y-progress {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 75px;
}

@property --home-works-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

/* @keyframes AREA_Y_SP_1 {
	0% {
		--area-y-sp-1-progress: 75px;
	}
	25% {
		--area-y-sp-1-progress: 80px;
	}
	50% {
		--area-y-sp-1-progress: 75px;
	}
	75% {
		--area-y-sp-1-progress: 70px;
	}
	100% {
		--area-y-sp-1-progress: 75px;
	}
}

@keyframes AREA_C_SP_1 {
	0% {
		--area-c-sp-1-progress: 50%;
	}
	50% {
		--area-c-sp-1-progress: 45%;
	}
	100% {
		--area-c-sp-1-progress: 50%;
	}
} */

@keyframes HOME_ANIMATION_1 {
	0% {
		rotate: 0deg;
	}
	10% {
		rotate: 2deg;
	}
	18% {
		rotate: -1.8deg;
	}
	27% {
		rotate: 2.5deg;
	}
	36% {
		rotate: -3deg;
	}
	48% {
		rotate: 1.2deg;
	}
	61% {
		rotate: -2deg;
	}
	74% {
		rotate: 2.3deg;
	}
	85% {
		rotate: -2deg;
	}
	100% {
		rotate: 0deg;
	}
}

.home-works__bg-1,
.home-works__bg-2 {
	position: absolute;
	height: auto;
	clip-path: shape(
    from 3.53% 52.04%,
    curve to 45.37% 90.84%
      with 12.37% 74.30% / 32.53% 71.99%,
    smooth to 95.89% 78.02%
      with 86.78% 94.86%,
    smooth to 77.42% 28.82%
      with 97.28% 34.65%,
    smooth to 31.26% 0.51%
      with 56.27% -4.73%,
    smooth to 3.53% 52.04%
      with -5.32% 29.79%,
    close
  );
	animation: HOME_ANIMATION_1 10s ease-in-out infinite;
}

.home-works__feature-head {
	margin-block: 0 calc(var(--container-padding) * 6);
	@container style(--pc: true) {
		margin-block: 0 calc(var(--container-padding) * 4);
	}
	@container style(--pc-wide: true) {
		margin-block: 0;
	}
}

.home-works__bg-1 {
	top: -427px;
	left: 50%;
	width: 900px;
	margin-inline-start: -595px;
	height: auto;
	aspect-ratio: 880.42 / 894.52;
	background-color: var(--secondary-light-color);
	@container style(--pc: true) {
		top: -642px;
    width: 1200px;
    margin-inline-start: -750px;
	}
	@container style(--pc-wide: true) {
		top: -600px;
		left: 50%;
		bottom: auto;
		right: auto;
		margin-left: -1350px;
		width: 1400px;
	}
}

.home-works__bg-2 {
	display: none;
	@container style(--pc-wide: true) {
		display: block;
		top: 0;
		left: 50%;
		width: 800px;
		margin-left: 400px;
		aspect-ratio: 1 / 1;
		background-color: #DDF2CD;
	}
}

.home-works__feature {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	margin-block-end: calc(var(--container-padding) * 2);

	@container style(--sp: true) {
		gap: calc(var(--container-padding) * 3);
	}

	@container style(--pc: true) {
		gap: calc(var(--container-padding) * 1);
		.works-list--home {
			.works-item {
				grid-column: span 2;
			}
			.works-item__image {
				aspect-ratio: 16 / 9;
			}
		}
	}

	@container style(--pc-wide: true) {
		grid-template-columns: 1fr 2fr;
		margin-block-end: calc(var(--container-padding) * 2);
		.works-list--home {
			.works-item {
				grid-column: span 3;
			}
			.works-item__image {
				aspect-ratio: 16 / 9;
			}
		}
	}
}

.home-works__feature-content {
	@container style(--pc-wide: true) {
		padding-block-start: calc(var(--container-padding) * 5);
	}
}

.works-list--home .works-item {
	grid-template-rows: none;
	.works-item__content {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		align-items: center;
		gap: calc(var(--container-padding) * 1);
		@container style(--pc-wide: true) {
			gap: calc(var(--container-padding) * .5);
		}
	}
	.works-item__title {
		grid-column: span 2;
		align-self: start;
	}
	.works-item__description {
		padding-inline-end: calc(var(--container-padding) * 1);
		border-right: 2px dotted var(--text-color);
	}
}

.works-list:not(.works-list--home) .works-item {
	@container style(--pc-wide: true) {
		&:first-child {
			grid-template-columns: repeat(2, 1fr);
			grid-column: span 3;
			grid-row: auto;
			background-color: transparent;
			margin-block-end: calc(var(--container-padding) * 2);
			border-radius: var(--radius-default);
			gap: 0;
			.works-item__image {
				aspect-ratio: none;
				order: 2;
				clip-path: none;
				border-radius: 0 var(--radius-default) var(--radius-default) 0;
			}
			.works-item__content {
				align-content: center;
				grid-template-rows: auto;
				grid-row: auto;
				overflow: hidden;
				background-color: var(--white-color);
				padding: calc(var(--container-padding) * 2);
				gap: calc(var(--container-padding) * 1);
				--height: 43px;
				--width: 138px;
				clip-path: shape(
					from calc(100% - var(--radius-default)) 0,

					line to 100% 0,
					arc to calc(100% - var(--radius-default)) 100% of var(--radius-default) cw,

					line to var(--radius-default) 100%,
					arc to 0 calc(100% - var(--radius-default)) of var(--radius-default) cw,

					line to 0 calc(var(--height) + var(--radius-default)),
					arc to var(--radius-default) var(--height) of var(--radius-default) cw,

					line to calc(var(--width) - var(--radius-default)) var(--height),
					arc to var(--width) calc(var(--height) - var(--radius-default)) of var(--radius-default) ccw,

					line to var(--width) var(--radius-default),
					arc to calc(var(--width) + var(--radius-default)) 0 of var(--radius-default) cw,

					close
				);
			}
			.works-item__title {
				--clamp-min: 28;
				--clamp-max: 32;
			}
			.works-item__description {
				background-color: #fff; /* 背景色 */
				background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
													linear-gradient(180deg, #D8C8AD 1px, transparent 1px); /* 点線2の色と太さ */
				background-size: 8px 100%, /* 点線1のサイズ */
												100% 3em; /* 点線2のサイズ */
				line-height: 3em; /* 文字の高さ */
				padding-bottom: 1px; /* 最終行の下にも罫線を引く */
			}
			.works-item__button {
				width: 15em;
			}
		}
	}
}

.works-item__label {
	position: absolute;
	top: 0;
	left: 0;
	width: 128px;
	background-color: var(--primary-color);
	color: var(--white-color);
	border-radius: 3em;
	text-align: center;
	font-weight: bold;
	letter-spacing: .05em;
	font-size: 16px;
	line-height: 33px;
	text-transform: uppercase;
}

.works-item__image {
	width: 100%;
	height: auto;
	aspect-ratio: 390 / 360;
	overflow: hidden;
	--height: 43px;
	--width: 138px;
	clip-path: shape(
		from calc(100% - var(--radius-default)) 0,
		arc to 100% var(--radius-default) of var(--radius-default) cw,

		line to 100% calc(100% - var(--radius-default)),
		arc to calc(100% - var(--radius-default)) 100% of var(--radius-default) cw,

		line to var(--radius-default) 100%,
		arc to 0 calc(100% - var(--radius-default)) of var(--radius-default) cw,

		line to 0 calc(var(--height) + var(--radius-default)),
		arc to var(--radius-default) var(--height) of var(--radius-default) cw,

		line to calc(var(--width) - var(--radius-default)) var(--height),
		arc to var(--width) calc(var(--height) - var(--radius-default)) of var(--radius-default) ccw,

		line to var(--width) var(--radius-default),
		arc to calc(var(--width) + var(--radius-default)) 0 of var(--radius-default) cw,

		close
	);
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.works-item__content {
	display: block grid;
	grid-template-rows: subgrid;
  grid-row: span 3;
	gap: calc(var(--container-padding) / 2);
}

.works-item__title {
	--clamp-min: 24;
  --clamp-max: 24;
	font-weight: bold;
	color: var(--primary-color);
}

.works-item__button {
	--clamp-min: 12;
  --clamp-max: 12;
	display: inline-block;
	align-self: center;
	position: relative;
	text-align: left;
	padding: .5em 4em .5em 2em;
	width: fit-content;
	border-radius: 3em;
	background-color: var(--white-color);
	color: var(--primary-color);
	text-decoration: none;
	border: 1px solid var(--primary-color);
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	svg {
		position: absolute;
		top: 50%;
		right: 1em;
		transform: translateY(-50%);
		stroke: currentColor;
		fill: transparent;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-color);
			color: var(--white-color);
		}
	}
}

.works-head {
	overflow: hidden;
}

.works-head__image {
	width: 100%;
	height: 430px;
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
	@container style(--pc: true) {
		height: 640px;
	}
}

.works-head {
	.works-head__image {
		opacity: 0;
		transform: translateY(-10px);
		transform-origin: 50% 0%;
		transition: opacity .6s cubic-bezier(0.65, 0.05, 0.36, 1), transform .6s cubic-bezier(0.65, 0.05, 0.36, 1);

		img {
			transform: translateY(10px) scale(1.05);
			transform-origin: 50% 50%;
			transition: transform .8s cubic-bezier(0.65, 0.05, 0.36, 1);
		}
	}
	&.is-loaded {
		.works-head__image {
			opacity: 1;
			transform: translateY(0);

			img {
				transform: translateY(0) scale(1.0);
			}
		}
	}
}

.works-detail {
	display: block grid;
	gap: calc(var(--container-padding) * 4);
	margin-block: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		grid-template-columns: 2fr 3fr;
		column-gap: calc(var(--container-padding) * 4);
		row-gap: calc(var(--container-padding) * 2);
		margin-block: calc(var(--container-padding) * 4) 0;
		align-items: start;
	}
}

.works-text {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	align-content: start;
}

.works-text__heading {
	--clamp-min: 24;
  --clamp-max: 32;
	font-weight: bold;
	color: var(--primary-color);
}

.works-text__description {
	background-color: #FFFCF7;
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #FFFCF7 50%, #FFFCF7 100%), /* 点線1の色 */
										linear-gradient(180deg, #D8C8AD 1px, transparent 1px); /* 点線2の色と太さ */
	background-size: 8px 100%, /* 点線1のサイズ */
									100% 3em; /* 点線2のサイズ */
	line-height: 3em; /* 文字の高さ */
	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.works-differences {
	position: relative;
	padding-block-start: calc(var(--container-padding) * 2);
	padding-inline-start: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		padding-block-start: 0;
		padding-inline-start: 0;
	}
}

.works-differences__before {
	position: absolute;
	top: 0;
	left: 0;
	width: 33.33333333333333%;
	min-width: 10em;
	aspect-ratio: 424 / 314;
	height: auto;
	z-index: 1;
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: calc(var(--radius-default) * .5);
	}
	@container style(--pc-wide: true) {
		top: calc(var(--container-padding) * -1.5);
		left: calc(var(--container-padding) * -1.5);
	}
}

.works-differences__after {
	position: relative;
	img {
		border-radius: var(--radius-default);
	}
}

.works-differences__before-label,
.works-differences__after-label {
	--clamp-min: 12;
  --clamp-max: 16;
	position: absolute;
	text-align: center;
	color: var(--white-color);
	font-weight: bold;
	background-color: var(--primary-color);
	padding-inline: 1em;
	border-radius: 3em;
	bottom: 1em;
	right: 1em;
	letter-spacing: .05em;
	z-index: 2;
	@container style(--pc-wide: true) {
		padding-inline: 2em;
	}
}

.works-differences:not(:has(.works-differences__before)) {
	padding-block-start: 0 !important;
	padding-inline-start: 0 !important;
	.works-differences__after-label {
		display: none;
	}
}

.works-info {
	display: block grid;
	background-color: var(--secondary-light-color);
	padding: calc(var(--container-padding) * 1.5);
	border-radius: var(--radius-default);
	gap: calc(var(--container-padding) * 1);
	@container style(--pc-wide: true) {
		padding: calc(var(--container-padding) * 1);
	}
}

.works-detail:not(:has(.works-images__item)) {
	.works-info {
		@container style(--pc-wide: true) {
			grid-column: span 2;
		}
	}
}

.works-info__heading {
	--clamp-min: 24;
  --clamp-max: 24;
	font-weight: bold;
	color: var(--primary-color);
	border-bottom: 1px dotted #D8C8AD;
	padding-block-end: calc(var(--container-padding) * .25);
}

.works-info__description {
	--clamp-min: 14;
  --clamp-max: 14;
}

.works-images {
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	@container style(--pc-wide: true) {
		gap: calc(var(--container-padding) * 1.5);
	}
}

.works-images__item {
	text-align: center;
	img {
		vertical-align: bottom;
		border-radius: var(--radius-default);
	}
}

.works-foot {
	display: block grid;
	grid-template-columns: repeat(3, 1fr);
	margin-block-end: -161px;
}

.works-foot__image {
	display: block;
	height: 300px;
	overflow: hidden;
	@container style(--pc: true) {
		height: 400px;
	}
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

/*
  MARK: Introduction
*/

.introduction .home-heading {
	--clamp-min: 28;
	--clamp-max: 48;
	justify-items: start;
	&::before {
		--clamp-min: 16;
		--clamp-max: 24;
	}
}

.introduction__heading {
	--clamp-min: 22;
  --clamp-max: 28;
	font-weight: bold;
	@container style(--sp: true) {
		br {
			display: none;
		}
	}
}

.introduction__sub-heading {
	--clamp-min: 28;
  --clamp-max: 40;
	font-weight: bold;
	background-color: var(--secondary-light-color); /* 背景色 */
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--secondary-light-color) 50%, var(--secondary-light-color) 100%), /* 点線1の色 */
										linear-gradient(180deg, transparent calc(100% - 2px), #D8C8AD 100%); /* 点線2の色と太さ */
	background-size: 8px 100%, /* 点線1のサイズ */
									100% 1.5em; /* 点線2のサイズ */
	line-height: 1.5em; /* 文字の高さ */
	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
	text-align: center;
	width: fit-content;
	margin-inline: auto;
}

.introduction__lead {
	background-color: #FFFCF7; /* 背景色 */
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #FFFCF7 50%, #FFFCF7 100%), /* 点線1の色 */
										linear-gradient(180deg, transparent calc(100% - 2px), #D8C8AD 100%); /* 点線2の色と太さ */
	background-size: 8px 100%, /* 点線1のサイズ */
									100% 2.5em; /* 点線2のサイズ */
	line-height: 2.5em; /* 文字の高さ */
	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
	width: fit-content;
	@container style(--sp: true) {
		br {
			display: none;
		}
	}
}

.introduction__item-inner {
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	position: relative;
	z-index: 1;
}

@keyframes HOME_ANIMATION_2 {
	0% {
		transform: translateY(0) scaleY(1) scaleX(1);
	}
	10% {
		transform: translateY(-10px) scaleY(1.05) scaleX(0.97);
	}
	20% {
		transform: translateY(-20px) scaleY(1.08) scaleX(0.95);
	}
	30% {
		transform: translateY(-12px) scaleY(1.04) scaleX(0.98);
	}
	40% {
		transform: translateY(0) scaleY(1) scaleX(1);
	}
	50% {
		transform: translateY(10px) scaleY(0.97) scaleX(1.03);
	}
	60% {
		transform: translateY(20px) scaleY(0.95) scaleX(1.05);
	}
	70% {
		transform: translateY(12px) scaleY(0.99) scaleX(1.01);
	}
	80% {
		transform: translateY(0) scaleY(1) scaleX(1);
	}
	90% {
		transform: translateY(-10px) scaleY(1.03) scaleX(0.96);
	}
	100% {
		transform: translateY(0) scaleY(1) scaleX(1);
	}
}

.introduction__item--1 {
	position: relative;
	padding-block-end: 180px;
	.introduction__photo {
		position: relative;
		width: 800px;
		height: auto;
		aspect-ratio: 100 / 70;
		/* left: 90%;
		margin-inline-start: -800px; */
		left: 55%;
		margin-inline-start: -650px;
		/* clip-path: shape(
			from 29.57% 99.28%,
			curve to 80.52% 81.54%
				with 51.48% 104.93% / 59.45% 82.63%,
			smooth to 95.44% 22.42%
				with 104.04% 43.32%,
			smooth to 47.00% 9.03%
				with 61.23% -7.80%,
			smooth to 2.73% 37.25%
				with 10.93% 8.45%,
			smooth to 29.57% 99.28%
				with 7.66% 93.63%,
			close
		); */
		clip-path: shape(
			from 29.57% var(--shape-y1),
			curve to 80.52% var(--shape-y2)
				with 51.48% 104.93% / 59.45% 82.63%,
			smooth to 95.44% var(--shape-y3)
				with var(--shape-c1-x) 43.32%,
			smooth to 47.00% var(--shape-y4)
				with 61.23% var(--shape-c2-y),
			smooth to 2.73% 37.25%
				with 10.93% 8.45%,
			smooth to 29.57% var(--shape-y1)
				with 7.66% 93.63%,
			close
		);
		animation: SHAPE_Y1 18s linear infinite, SHAPE_Y2 13s linear infinite, SHAPE_Y3 17s linear infinite, SHAPE_Y4 21s linear infinite, SHAPE_C1 15s linear infinite, SHAPE_C2 19s linear infinite;
		
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 0px center;
			max-width: none;
		}
	}
	.introduction__image {
		position: absolute;
		top: 300px;
		left: 55%;
		z-index: 2;
		animation: ILLUST_ANIMATION 6s linear infinite;
	}
	.introduction__item-inner {
		margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 4);
	}
	.introduction__bg-1 {
		position: absolute;
		top: 450px;
		/* right: calc(-1vw - 100px); */
		left: 80%;
		width: 200px;
		border-radius: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		background-color: #DDF2CD;
		animation: HOME_ANIMATION_2 12s linear infinite;
	}
	.introduction__dog {
		position: absolute;
		bottom: 5vw;
		left: 45%;
		width: 172px;
    height: auto;
    aspect-ratio: 1 / 1;
    clip-path: ellipse(var(--ellipse-x) var(--ellipse-y) at 50% 50%);
    animation: ELLIPSE_X 12s linear infinite, ELLIPSE_Y 15s linear infinite, FUWAFUWA 16s linear infinite;

		img {
			position: absolute;
			width: 120%;
			height: 120%;
			left: -10%;
			top: -10%;
			object-fit: cover;
			object-position: center;
			max-width: none;
		}
	}
	.introduction__bg-2 {
		position: absolute;
		/* top: calc(100% + 50px); */
		top: 90%;
		left: 40%;
		margin-inline-start: -250px;
		width: 150px;
		border-radius: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		background-color: var(--secondary-light-color);
		animation: HOME_ANIMATION_2 6s linear infinite;
	}
	@container style(--pc: true) {
		.introduction__item-inner {
			left: 5%;
		}
	}
	@container style(--pc-wide: true) {
		display: block grid;
		grid-template-columns: 1fr 520px;
		grid-template-areas: ". item-inner";
		margin-block-end: 0px;
		padding-block-end: 0px;
		.introduction__photo {
			position: absolute;
			top: 0px;
			width: 1200px;
			left: 50%;
			margin-inline-start: -1200px;
		}
		.introduction__item-inner {
			left: auto;
			grid-area: item-inner;
			justify-items: start;
			padding-block-start: calc(var(--container-padding) * 6);
		}
		.introduction__image {
			right: auto;
			left: 50%;
			top: 520px;
			margin-inline-start: -180px;
		}
		.introduction__bg-1 {
			top: 0px;
			width: 500px;
			right: auto;
			left: 50%;
			margin-inline-start: 800px;
		}
		.introduction__dog {
			bottom: auto;
			top: 72%;
			margin-inline-start: 720px;
		}
		.introduction__bg-2 {
			top: -30px;
			left: 50%;
			margin-inline-start: -900px;
		}
	}
}

.introduction__item--2 {
	position: relative;
	.introduction__photo {
		position: relative;
		width: 800px;
		height: auto;
		aspect-ratio: 100 / 70;
		left: 45%;
		margin-inline-start: -150px;
		/* clip-path: shape(
			from 70.43% 99.28%,
			curve to 19.48% 81.54%
				with 48.52% 104.93% / 40.55% 82.63%,
			smooth to 4.56% 22.42%
				with -4.04% 43.32%,
			smooth to 53.00% 9.03%
				with 38.77% -7.80%,
			smooth to 97.27% 37.25%
				with 89.07% 8.45%,
			smooth to 70.43% 99.28%
				with 92.34% 93.63%,
			close
		); */
		clip-path: shape(
			from 70.43% var(--blob3-y1),

			curve to var(--blob3-x1) var(--blob3-y2)
				with 48.52% 104.93% / 40.55% 82.63%,

			smooth to var(--blob3-x2) var(--blob3-y3)
				with var(--blob3-c1-x) 43.32%,

			smooth to var(--blob3-x3) var(--blob3-y4)
				with 38.77% var(--blob3-c2-y),

			smooth to var(--blob3-x4) 37.25%
				with 89.07% 8.45%,

			smooth to 70.43% var(--blob3-y1)
				with 92.34% 93.63%,

			close
		);
		animation:
			BLOB3_Y1 17s linear infinite,
			BLOB3_Y2 14s linear infinite,
			BLOB3_Y3 19s linear infinite,
			BLOB3_Y4 22s linear infinite,

			BLOB3_X1 15s linear infinite,
			BLOB3_X2 18s linear infinite,
			BLOB3_X3 13s linear infinite,
			BLOB3_X4 21s linear infinite,

			BLOB3_C1 16s linear infinite,
			BLOB3_C2 20s linear infinite;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			max-width: none;
		}
	}
	.introduction__image {
		position: absolute;
		top: 300px;
		left: calc(45vw - 200px);
		z-index: 2;
		animation: ILLUST_ANIMATION 6s linear infinite;
	}
	.introduction__item-inner {
		margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 8);
	}
	@container style(--pc: true) {
		.introduction__item-inner {
			justify-content: end;
			margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 3);
		}
	}
	@container style(--pc-wide: true) {
		display: block grid;
		grid-template-columns: 640px 1fr;
		grid-template-areas: "item-inner .";
		z-index: 1;
		.introduction__photo {
			position: absolute;
			top: 0;
			width: 1200px;
			left: 50%;
			margin-inline-start: 200px;
		}
		.introduction__image {
			top: 520px;
			left: 50%;
			margin-inline-start: 180px;
		}
		.introduction__item-inner {
			margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 8);
			justify-content: start;
			justify-items: start;
			grid-area: item-inner;
			position: relative;
			top: calc(var(--container-padding) * 6);
		}
	}
}

.introduction__item--3 {
	position: relative;
	margin-block: calc(var(--container-padding) * 4);
	.introduction__item-inner {
		padding-block: calc(var(--container-padding) * 4);
	}
	@container style(--pc: true) {
		width: 80%;
		margin-inline: auto;
		margin-block: calc(var(--container-padding) * 2);
	}
	@container style(--pc-wide: true) {
		width: 520px;
		margin-inline-start: auto;
		margin-inline-end: 0;
		margin-block-start: 100px;
		.introduction__item-inner {
			grid-area: item-inner;
		}
	}
}

@keyframes INTRODUCTION_ITEM_3_BG {
	0% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
	10% {
		scale: 1.06 0.96;
		skew: 3deg -2deg;
		rotate: 2deg;
	}
	18% {
		scale: 0.97 1.07;
		skew: -2deg 1.5deg;
		rotate: -2deg;
	}
	27% {
		scale: 1.07 0.96;
		skew: 2deg -2deg;
		rotate: 2.5deg;
	}
	36% {
		scale: 1.05 1.05;
		skew: 1deg 2deg;
		rotate: -2.5deg;
	}
	48% {
		scale: 0.98 1.05;
		skew: -2deg 1deg;
		rotate: 1.5deg;
	}
	61% {
		scale: 1.06 0.96;
		skew: 3deg -1.5deg;
		rotate: -3deg;
	}
	74% {
		scale: 1 1.07;
		skew: -1.5deg 2deg;
		rotate: 2deg;
	}
	85% {
		scale: 0.97 1.04;
		skew: 1deg -2deg;
		rotate: -1.5deg;
	}
	100% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
}

.introduction__item--3 .introduction__bg {
	position: absolute;
	top: -20%;
	left: -10%;
	background-color: var(--secondary-light-color);
	width: 120%;
	height: 140%;
	clip-path: shape(
    from 29.57% 99.28%,
    curve to 80.52% 81.54%
      with 51.48% 104.93% / 59.45% 82.63%,
    smooth to 95.44% 22.42%
      with 104.04% 43.32%,
    smooth to 47.00% 9.03%
      with 61.23% -7.80%,
    smooth to 2.73% 37.25%
      with 10.93% 8.45%,
    smooth to 29.57% 99.28%
      with 7.66% 93.63%,
    close
  );
	animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
	@container style(--pc: true) {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	@container style(--pc-wide: true) {
		width: 1000px;
		height: 700px;
		top: -50%;
		left: -25%;
	}
}

.introduction__item--4 {
	position: relative;
	margin-block-end: calc(var(--container-padding) * 3);
	.introduction__photo {
		position: relative;
		width: 800px;
		height: auto;
		aspect-ratio: 100 / 70;
		left: 90%;
		margin-inline-start: -800px;
		/* clip-path: shape(
			from 70.43% 99.28%,
			curve to 19.48% 81.54%
				with 48.52% 104.93% / 40.55% 82.63%,
			smooth to 4.56% 22.42%
				with -4.04% 43.32%,
			smooth to 53.00% 9.03%
				with 38.77% -7.80%,
			smooth to 97.27% 37.25%
				with 89.07% 8.45%,
			smooth to 70.43% 99.28%
				with 92.34% 93.63%,
			close
		); */
		clip-path: shape(
			from 70.43% var(--blob2-y1),

			curve to var(--blob2-x1) var(--blob2-y2)
				with 48.52% 104.93% / 40.55% 82.63%,

			smooth to var(--blob2-x2) var(--blob2-y3)
				with var(--blob2-c1-x) 43.32%,

			smooth to var(--blob2-x3) var(--blob2-y4)
				with 38.77% var(--blob2-c2-y),

			smooth to var(--blob2-x4) 37.25%
				with 89.07% 8.45%,

			smooth to 70.43% var(--blob2-y1)
				with 92.34% 93.63%,

			close
		);
		animation:
			BLOB2_Y1 18s linear infinite,
			BLOB2_Y2 13s linear infinite,
			BLOB2_Y3 17s linear infinite,
			BLOB2_Y4 21s linear infinite,

			BLOB2_X1 16s linear infinite,
			BLOB2_X2 19s linear infinite,
			BLOB2_X3 14s linear infinite,
			BLOB2_X4 22s linear infinite,

			BLOB2_C1 15s linear infinite,
			BLOB2_C2 19s linear infinite;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 0px center;
			max-width: none;
		}
	}
	.introduction__bg {
		position: absolute;
		top: 0px;
		right: calc(-1vw - 140px);
		clip-path: shape(
			from 99.28% 70.43%,
			curve to 81.54% 19.48%
				with 104.93% 48.52% / 82.63% 40.55%,
			smooth to 22.42% 4.56%
				with 43.32% -4.04%,
			smooth to 9.03% 53.00%
				with -7.80% 38.77%,
			smooth to 37.25% 97.27%
				with 8.45% 89.07%,
			smooth to 99.28% 70.43%
				with 93.63% 92.34%,
			close
		);
		width: 200px;
		height: auto;
		aspect-ratio: 2 / 3;
		background-color: #DDF2CD;
		animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
	}
	@container style(--pc: true) {
		margin-block-end: 0;
		.introduction__photo {
			width: 1200px;
			margin-inline-start: -1200px;
		}
	}
	@container style(--pc-wide: true) {
		margin-block-end: calc(var(--container-padding) * 3);
		.introduction__bg {
			width: 700px;
			top: 100px;
			right: auto;
			left: -50%;
			margin-inline-start: 1800px;
		}
		.introduction__photo {
			position: absolute;
			width: 1800px;
			left: 50%;
			margin-inline-start: -1850px;
			top: -800px;
		}
	}
}

/*
  MARK: Reasons
*/

@keyframes HOME_REASONS_HEAD {
	0% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
	10% {
		scale: 1.06 0.96;
		skew: 3deg -2deg;
		rotate: 2deg;
	}
	18% {
		scale: 0.97 1.07;
		skew: -2deg 1.5deg;
		rotate: -2deg;
	}
	27% {
		scale: 1.07 0.96;
		skew: 2deg -2deg;
		rotate: 2.5deg;
	}
	36% {
		scale: 1.05 1.05;
		skew: 1deg 2deg;
		rotate: -2.5deg;
	}
	48% {
		scale: 0.98 1.05;
		skew: -2deg 1deg;
		rotate: 1.5deg;
	}
	61% {
		scale: 1.06 0.96;
		skew: 3deg -1.5deg;
		rotate: -3deg;
	}
	74% {
		scale: 1 1.07;
		skew: -1.5deg 2deg;
		rotate: 2deg;
	}
	85% {
		scale: 0.97 1.04;
		skew: 1deg -2deg;
		rotate: -1.5deg;
	}
	100% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
}

.reasons__head {
	position: relative;
	text-align: center;
	padding-block: calc(var(--container-padding) * 8);
	@container style(--pc-wide: true) {
		margin-block-end: calc(var(--container-padding) * 18);
	}
}

.reasons__head-inner {
	position: relative;
	z-index: 1;
}

.reasons__head-image {
	position: absolute;
	top: -10%;
	left: 0%;
	animation: ILLUST_ANIMATION 6s linear infinite;
	img {
		display: block;
	}
	@container style(--pc-wide: true) {
		top: 8%;
		left: 25%;
	}
}

.reasons__head-bg {
	position: absolute;
	top: -25%;
	left: -25%;
	background-color: var(--secondary-light-color);
	width: 150%;
	height: 150%;
	clip-path: shape(
    from 29.57% 99.28%,
    curve to 80.52% 81.54%
      with 51.48% 104.93% / 59.45% 82.63%,
    smooth to 95.44% 22.42%
      with 104.04% 43.32%,
    smooth to 47.00% 9.03%
      with 61.23% -7.80%,
    smooth to 2.73% 37.25%
      with 10.93% 8.45%,
    smooth to 29.57% 99.28%
      with 7.66% 93.63%,
    close
  );
	animation: HOME_REASONS_HEAD 18s linear infinite;
	@container style(--pc-wide: true) {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

.reasons-item {
	position: relative;
	max-width: 600px;
	width: 100%;
	margin-inline: auto;
	margin-block: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		display: block flex;
		max-width: 1200px;
	}
}

.reasons-item__inner {
	position: relative;
	display: block grid;
	width: 100%;
	max-height: 720px;
	height: 110vw;
	align-content: center;
	gap: calc(var(--container-padding) * 1);
	padding: calc(var(--container-padding) * 1.5);
	z-index: 1;
	@container style(--pc-wide: true) {
		width: 50%;
		padding-inline: calc(var(--container-padding) * 2.5);
		gap: calc(var(--container-padding) * .5);
	}
}

.reasons-item__label {
	display: block flex;
	align-items: center;
	width: fit-content;
	gap: calc(var(--container-padding) * .25);
	border-bottom: 2px dotted var(--text-color);
	padding-block-end: calc(var(--container-padding) * .25);
	span:first-child {
		--clamp-min: 20;
		--clamp-max: 24;
		color: var(--primary-color);
	}
	span:last-child {
		--clamp-min: 32;
		--clamp-max: 48;
	}
}

.reasons-item__title {
	--clamp-min: 32;
  --clamp-max: 52;
	position: relative;
	font-weight: bold;
	color: var(--primary-color);
}

.reasons-item__description {
	--clamp-min: 16;
  --clamp-max: 18;
	position: relative;
}

.reasons-item__image {
	position: absolute;
	top: 0;
	right: 0;
	animation: ILLUST_ANIMATION 6s linear infinite;
	@container style(--pc-wide: true) {
		top: 80px;
		right: 80px;
	}
}

@keyframes REASONS_ITEM_BG {
	0% {
		scale: 1 1;
	}
	20% {
		scale: 1.06 0.98;
	}
	40% {
		scale: 0.98 1.04;
	}
	60% {
		scale: 1.04 0.97;
	}
	80% {
		scale: 0.98 1.03;
	}
	100% {
		scale: 1 1;
	}
}

.reasons-item__bg {
	position: absolute;
	top: 50%;
	width: 120%;
	left: -10%;
	transform: translateY(-50%);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	transform-origin: 50% 50%;
	animation: REASONS_ITEM_BG 15s linear infinite;
	@container style(--pc-wide: true) {
		width: 50%;
	}
}

.reasons-item--1,
.reasons-item--3,
.reasons-item--5 {
	@container style(--pc-wide: true) {
		justify-content: flex-start;
		.reasons-item__bg {
			left: 0;
		}
	}
}

.reasons-item--2,
.reasons-item--4 {
	@container style(--pc-wide: true) {
		justify-content: flex-end;
		.reasons-item__bg {
			left: auto;
			right: 0;
		}
	}
}

.reasons-item--1 {
	position: relative;
	z-index: 2;
	.reasons-item__bg {
		background-color: #fff;
	}
}

.reasons-item--2 {
	.reasons-item__bg {
		background-color: #F0F4ED;
	}
}

.reasons-item--3 {
	.reasons-item__bg {
		background-color: #fff;
	}
}

.reasons-item--4 {
	.reasons-item__bg {
		background-color: #FAF5E6;
	}
}

.reasons-item--5 {
	.reasons-item__bg {
		background-color: #F6F9FE;
	}
}

:root {
	--path-image-1: shape(
		from 29.57% 99.28%,
		curve to 80.52% 81.54%
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% 22.42%
			with 104.04% 43.32%,
		smooth to 47.00% 9.03%
			with 61.23% -7.80%,
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% 99.28%
			with 7.66% 93.63%,
		close
	);
}

.reasons {
	@container style(--pc-wide: true) {
		position: relative;
	}
}

.reasons__body {
	position: relative;
}

.reasons-image-1 {
	position: relative;
	top: -10vw;
	left: -20vw;
	width: 140vw;
	height: auto;
	aspect-ratio: 1780 / 1108;
	z-index: 1;
	clip-path: shape(
		from 29.57% var(--shape-y1),
		curve to 80.52% var(--shape-y2)
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% var(--shape-y3)
			with var(--shape-c1-x) 43.32%,
		smooth to 47.00% var(--shape-y4)
			with 61.23% var(--shape-c2-y),
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% var(--shape-y1)
			with 7.66% 93.63%,
		close
	);
	animation: SHAPE_Y1 18s linear infinite, SHAPE_Y2 13s linear infinite, SHAPE_Y3 17s linear infinite, SHAPE_Y4 21s linear infinite, SHAPE_C1 15s linear infinite, SHAPE_C2 19s linear infinite;
	img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}

	@container style(--pc-wide: true) {
		position: absolute;
		top: -400px;
		left: 50%;
		width: 1200px;
		margin-inline-start: 600px;
		z-index: auto;
	}
}

.reasons-image-2 {
	display: none;
	@container style(--pc-wide: true) {
		display: block;
		position: absolute;
		top: 850px;
		left: 50%;
		width: 350px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin-inline-start: -670px;
		/* clip-path: circle(50% at 50% 50%); */
		clip-path: ellipse(
			var(--ellipse-x)
			var(--ellipse-y)
			at 50% 50%
		);

		animation:
			ELLIPSE_X 9s linear infinite,
			ELLIPSE_Y 12s linear infinite,
			FUWAFUWA 10s linear infinite;
		img {
			position: absolute;
			top: -5%;
			left: -5%;
			width: 110%;
			height: 110%;
			max-width: none;
			object-fit: cover;
			object-position: center;
		}
	}
}

.reasons-bg-1 {
	position: absolute;
	background-color: #DDF2CD;
	width: 20vw;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	left: -10vw;
	margin-block-start: -30px;
	animation: HOME_ANIMATION_2 12s linear infinite;
	@container style(--pc-wide: true) {
		width: 400px;
		left: 50%;
		margin-block-start: 0;
		margin-inline-start: -900px;
		top: -160px;
	}
}

.reasons-bg-2 {
	@container style(--pc-wide: true) {
		position: absolute;
		background-color: #DDF2CD;
		width: 200px;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 100%;
		left: 50%;
		margin-inline-start: -1000px;
		top: 500px;
		animation: HOME_ANIMATION_2 8s linear infinite;
	}
}

.reasons-bg-3 {
	@container style(--pc-wide: true) {
		position: absolute;
		background-color: #DDF2CD;
		width: 200px;
		height: auto;
		aspect-ratio: 2 / 3;
		left: 50%;
		margin-inline-start: -1000px;
		top: 1100px;
		clip-path: shape(
			from 99.28% 70.43%,
			curve to 81.54% 19.48%
				with 104.93% 48.52% / 82.63% 40.55%,
			smooth to 22.42% 4.56%
				with 43.32% -4.04%,
			smooth to 9.03% 53.00%
				with -7.80% 38.77%,
			smooth to 37.25% 97.27%
				with 8.45% 89.07%,
			smooth to 99.28% 70.43%
				with 93.63% 92.34%,
			close
		);
		animation: INTRODUCTION_ITEM_3_BG 12s linear infinite;
	}
}

.reasons-bg-4 {
	@container style(--pc-wide: true) {
		position: absolute;
		background-color: #DDF2CD;
		width: 600px;
		height: auto;
		aspect-ratio: 3 / 2;
		left: 50%;
		margin-inline-start: 600px;
		top: 690px;
		clip-path: var(--path-image-1);
		animation: INTRODUCTION_ITEM_3_BG 16s linear infinite;
	}
}

.reasons-image-3 {
	position: relative;
	height: auto;
	aspect-ratio: 4 / 3;
	clip-path: shape(
		from 29.57% var(--shape-y1),
		curve to 80.52% var(--shape-y2)
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% var(--shape-y3)
			with var(--shape-c1-x) 43.32%,
		smooth to 47.00% var(--shape-y4)
			with 61.23% var(--shape-c2-y),
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% var(--shape-y1)
			with 7.66% 93.63%,
		close
	);
	animation: SHAPE_Y1 18s linear infinite, SHAPE_Y2 13s linear infinite, SHAPE_Y3 17s linear infinite, SHAPE_Y4 21s linear infinite, SHAPE_C1 15s linear infinite, SHAPE_C2 19s linear infinite;
	width: 120vw;
	left: -70vw;
	img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	@container style(--pc-wide: true) {
		position: absolute;
		width: 1600px;
		left: 50%;
		margin-inline-start: -800px;
		top: -344px;
	}
}

.reasons-image-4 {
	position: absolute;
	height: auto;
	aspect-ratio: 1 / 1;
	/* clip-path: circle(50% at 50% 50%); */
	clip-path: ellipse(
		var(--ellipse-x)
		var(--ellipse-y)
		at 50% 50%
	);

	animation:
		ELLIPSE_X 6s linear infinite,
		ELLIPSE_Y 8s linear infinite,
		FUWAFUWA 7s linear infinite;
	left: 55%;
	width: 20vw;
	margin-block-start: -80vw;
	img {
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
	@container style(--pc-wide: true) {
		left: 50%;
		width: 350px;
		margin-block-start: 140px;
		margin-inline-start: -420px;
	}
}

.reasons-bg-5 {
	position: absolute;
	background-color: var(--secondary-light-color);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	width: 40%;
	left: 70%;
	margin-block-start: -60vw;
	animation: HOME_ANIMATION_2 14s linear infinite;
	@container style(--pc-wide: true) {
		width: 600px;
		left: 50%;
		margin-inline-start: -1300px;
		margin-block-start: 0;
	}
}

.reasons-image-5 {
	position: relative;
	width: 150vw;
	left: -60vw;
	height: auto;
	aspect-ratio: 1 / 1;
	/* clip-path: shape(
		from 96.47% 52.04%,
		curve to 54.63% 90.84%
			with 87.62% 74.29% / 67.47% 71.99%,
		smooth to 4.11% 78.02%
			with 13.22% 94.86%,
		smooth to 22.58% 28.82%
			with 2.72% 34.65%,
		smooth to 68.74% 0.51%
			with 43.73% -4.73%,
		smooth to 96.47% 52.04%
			with 105.32% 29.79%,
		close
	); */
	clip-path: shape(
		from var(--blob4-x1) var(--blob4-y1),

		curve to var(--blob4-x2) var(--blob4-y2)
			with 87.62% 74.29% / 67.47% 71.99%,

		smooth to var(--blob4-x3) var(--blob4-y3)
			with var(--blob4-c1-x) 94.86%,

		smooth to var(--blob4-x4) var(--blob4-y4)
			with 2.72% 34.65%,

		smooth to var(--blob4-x5) var(--blob4-y5)
			with 43.73% var(--blob4-c2-y),

		smooth to var(--blob4-x1) var(--blob4-y1)
			with 105.32% 29.79%,

		close
	);
	animation:
		BLOB4_X1 18s linear infinite,
		BLOB4_Y1 21s linear infinite,

		BLOB4_X2 14s linear infinite,
		BLOB4_Y2 19s linear infinite,

		BLOB4_X3 17s linear infinite,
		BLOB4_Y3 22s linear infinite,

		BLOB4_X4 15s linear infinite,
		BLOB4_Y4 20s linear infinite,

		BLOB4_X5 13s linear infinite,
		BLOB4_Y5 18s linear infinite,

		BLOB4_C1 16s linear infinite,
		BLOB4_C2 23s linear infinite;
	img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	@container style(--pc: true) {
		width: 800px;
		left: 50%;
		margin-inline-start: -700px;
	}
	@container style(--pc-wide: true) {
		position: absolute;
		width: 1600px;
		left: 50%;
		margin-block-start: -220px;
		margin-inline-start: -1360px;
	}
}

.reasons-bg-6 {
	position: absolute;
	background-color: #DDF2CD;
	height: auto;
	aspect-ratio: 4 / 3;
	clip-path: var(--path-image-1);
	width: 60vw;
	left: 60vw;
	margin-block-start: -50vw;
	animation: INTRODUCTION_ITEM_3_BG 14s linear infinite;
	@container style(--pc-wide: true) {
		width: 500px;
		left: 50%;
		margin-inline-start: 750px;
		margin-block-start: 0;
		top: 550px;
	}
}

.reasons-image-6 {
	position: relative;
	left: 50vw;
	width: 100vw;
	height: auto;
	aspect-ratio: 1 / 1;
	/* clip-path: circle(50% at 50% 50%); */
	clip-path: ellipse(
		var(--ellipse-x)
		var(--ellipse-y)
		at 50% 50%
	);

	animation:
		ELLIPSE_X 10s linear infinite,
		ELLIPSE_Y 8s linear infinite,
		FUWAFUWA 11s linear infinite;
	img {
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
	@container style(--pc-wide: true) {
		position: absolute;
		left: 50%;
		width: 660px;
		margin-block-start: -900px;
		margin-inline-start: 420px;
	}
}

.reasons-image-7 {
	position: absolute;
	width: 40vw;
	height: auto;
	aspect-ratio: 1 / 1;
	/* clip-path: circle(50% at 50% 50%); */
	clip-path: ellipse(
		var(--ellipse-x)
		var(--ellipse-y)
		at 50% 50%
	);

	animation:
		ELLIPSE_X 8s linear infinite,
		ELLIPSE_Y 10s linear infinite,
		FUWAFUWA 12s linear infinite;
	margin-block-start: -38vw;
  left: 7vw;
	img {
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
	@container style(--pc-wide: true) {
		left: 50%;
		width: 232px;
		margin-block-start: 380px;
		margin-inline-start: -340px;
	}
}

.reasons-bg-7 {
	position: absolute;
	background-color: var(--secondary-light-color);
	width: 80vw;
	height: auto;
	aspect-ratio: 4 / 3;
	clip-path: var(--path-image-1);
	left: -45vw;
  margin-block-start: -100vw;
	animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
	@container style(--pc-wide: true) {
		width: 800px;
		left: 50%;
		margin-inline-start: 720px;
		margin-block-start: -200px;
	}
}

.reasons-image-8 {
	position: relative;
	width: 200vw;
	height: auto;
	aspect-ratio: 4 / 3;
	clip-path: shape(
		from 29.57% var(--shape-y1),
		curve to 80.52% var(--shape-y2)
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% var(--shape-y3)
			with var(--shape-c1-x) 43.32%,
		smooth to 47.00% var(--shape-y4)
			with 61.23% var(--shape-c2-y),
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% var(--shape-y1)
			with 7.66% 93.63%,
		close
	);
	animation: SHAPE_Y1 18s linear infinite, SHAPE_Y2 13s linear infinite, SHAPE_Y3 17s linear infinite, SHAPE_Y4 21s linear infinite, SHAPE_C1 15s linear infinite, SHAPE_C2 19s linear infinite;
	left: -50vw;
	img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
	@container style(--pc: true) {
		width: 1300px;
		left: 50%;
		margin-inline-start: -650px;
	}
	@container style(--pc-wide: true) {
		position: absolute;
		width: 1600px;
		left: 50%;
		margin-inline-start: 80px;
    margin-block-start: -275px;
	}
}

.reasons-image-9 {
	position: relative;
	left: -20vw;
	width: 70vw;
	height: auto;
	aspect-ratio: 1 / 1;
	/* clip-path: circle(50% at 50% 50%); */
	clip-path: ellipse(
		var(--ellipse-x)
		var(--ellipse-y)
		at 50% 50%
	);

	animation:
		ELLIPSE_X 12s linear infinite,
		ELLIPSE_Y 15s linear infinite,
		FUWAFUWA 16s linear infinite;
	img {
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}
	@container style(--pc-wide: true) {
		position: absolute;
		left: 50%;
		width: 705px;
		margin-block-start: -100px;
		margin-inline-start: -1000px;
	}
}

.reasons-bg-8 {
	position: relative;
	background-color: #DDF2CD;
	width: 100vw;
	left: 50vw;
	height: auto;
	aspect-ratio: 4 / 3;
	clip-path: var(--path-image-1);
	margin-block-start: -40vw;
	animation: INTRODUCTION_ITEM_3_BG 20s linear infinite;
	@container style(--pc-wide: true) {
		position: absolute;
		width: 800px;
		left: 50%;
		margin-inline-start: -1500px;
		margin-block-start: -870px;	
	}
}


/*
  MARK: Example Images
*/

@property --example-y-progress {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 25%;
}

@property --example-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@keyframes EXAMPLE_Y {
	0% {
		--example-y-progress: 25%;
	}
	25% {
		--example-y-progress: 30%;
	}
	50% {
		--example-y-progress: 25%;
	}
	75% {
		--example-y-progress: 20%;
	}
	100% {
		--example-y-progress: 25%;
	}
}

@keyframes EXAMPLE_C {
	0% {
		--example-c-progress: 50%;
	}
	25% {
		--example-c-progress: 55%;
	}
	50% {
		--example-c-progress: 50%;
	}
	75% {
		--example-c-progress: 45%;
	}
	100% {
		--example-c-progress: 50%;
	}
}

.example-images {
	position: relative;
}

.example-images__bg-1 {
	position: absolute;
	top: 4%;
	left: -20vw;
	clip-path: shape(
		from 29.57% 99.28%,
		curve to 80.52% 81.54%
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% 22.42%
			with 104.04% 43.32%,
		smooth to 47.00% 9.03%
			with 61.23% -7.80%,
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% 99.28%
			with 7.66% 93.63%,
		close
	);
	width: 40vw;
	height: auto;
	aspect-ratio: 4 / 2;
	background-color: #DDF2CD;
	animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
	@container style(--pc-wide: true) {
		max-width: 1400px;
		top: -2%;
	}
}

.example-images__bg-2 {
	position: absolute;
	clip-path: shape(
		from 29.57% 99.28%,
		curve to 80.52% 81.54%
			with 51.48% 104.93% / 59.45% 82.63%,
		smooth to 95.44% 22.42%
			with 104.04% 43.32%,
		smooth to 47.00% 9.03%
			with 61.23% -7.80%,
		smooth to 2.73% 37.25%
			with 10.93% 8.45%,
		smooth to 29.57% 99.28%
			with 7.66% 93.63%,
		close
	);
	top: 5%;
	width: 80vw;
	right: -25vw;
	height: auto;
	aspect-ratio: 3 / 2;
	background-color: var(--secondary-light-color);
	animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
	@container style(--pc-wide: true) {
		max-width: 1400px;
	}
}

.example-images__inner {
	display: block grid;
	grid-template-columns: repeat(3, 1fr);
	position: relative;
	width: 100%;
	height: 600px;
	--wave: 10%;
	clip-path: shape(
		from 0% var(--wave),
		smooth to var(--example-c-progress) calc(var(--wave) * 2) with var(--example-y-progress) 0%,
		smooth to 100% calc(var(--wave) * 3) with 75% calc(var(--wave) * 4),
		line to 100% calc(100% - var(--wave)),
		smooth to calc(100% - var(--example-c-progress)) calc(100% - (var(--wave) * 2)) with calc(100% - var(--example-y-progress)) 100%,
		smooth to 0% calc(100% - (var(--wave) * 3)) with 25% calc(100% - (var(--wave) * 4)),
		close
	);
	animation: EXAMPLE_Y 12s linear infinite, EXAMPLE_C 12s linear infinite;
	z-index: 2;
	@container style(--pc: true) {
		height: 1200px;
	}
}

.example-images__item {
	height: 100%;
	img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}

/*
  MARK: Exterior
*/

.exterior {
	.exterior__image {
		display: none;
	}
	@container style(--pc-wide: true) {
		position: relative;

		.exterior__image {
			display: block;
			position: absolute;
			width: 1000px;
			height: auto;
			aspect-ratio: 100 / 70;
			left: 50%;
			margin-inline-start: 600px;
			top: -100px;
			/* clip-path: shape(
				from 70.43% 99.28%,
				curve to 19.48% 81.54%
					with 48.52% 104.93% / 40.55% 82.63%,
				smooth to 4.56% 22.42%
					with -4.04% 43.32%,
				smooth to 53.00% 9.03%
					with 38.77% -7.80%,
				smooth to 97.27% 37.25%
					with 89.07% 8.45%,
				smooth to 70.43% 99.28%
					with 92.34% 93.63%,
				close
			); */
			clip-path: shape(
				from 70.43% var(--blob2-y1),

				curve to var(--blob2-x1) var(--blob2-y2)
					with 48.52% 104.93% / 40.55% 82.63%,

				smooth to var(--blob2-x2) var(--blob2-y3)
					with var(--blob2-c1-x) 43.32%,

				smooth to var(--blob2-x3) var(--blob2-y4)
					with 38.77% var(--blob2-c2-y),

				smooth to var(--blob2-x4) 37.25%
					with 89.07% 8.45%,

				smooth to 70.43% var(--blob2-y1)
					with 92.34% 93.63%,

				close
			);
			animation:
				BLOB2_Y1 18s linear infinite,
				BLOB2_Y2 13s linear infinite,
				BLOB2_Y3 17s linear infinite,
				BLOB2_Y4 21s linear infinite,

				BLOB2_X1 16s linear infinite,
				BLOB2_X2 19s linear infinite,
				BLOB2_X3 14s linear infinite,
				BLOB2_X4 22s linear infinite,

				BLOB2_C1 15s linear infinite,
				BLOB2_C2 19s linear infinite;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: 0px center;
				max-width: none;
			}
		}
		.exterior__bg {
			position: absolute;
			clip-path: shape(
				from 29.57% 99.28%,
				curve to 80.52% 81.54%
					with 51.48% 104.93% / 59.45% 82.63%,
				smooth to 95.44% 22.42%
					with 104.04% 43.32%,
				smooth to 47.00% 9.03%
					with 61.23% -7.80%,
				smooth to 2.73% 37.25%
					with 10.93% 8.45%,
				smooth to 29.57% 99.28%
					with 7.66% 93.63%,
				close
			);
			top: -450px;
			width: 1100px;
			left: 50%;
			margin-inline-start: -1600px;
			height: auto;
			aspect-ratio: 3 / 2;
			background-color: #DDF2CD;
			animation: INTRODUCTION_ITEM_3_BG 18s linear infinite;
		}
	}
}

.exterior__head {
	text-align: center;
}

.exterior__list {
	display: block grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(var(--container-padding) * .75);
	margin-block-start: calc(var(--container-padding) * 4);
	@container style(--pc: true) {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, auto);
		gap: calc(var(--container-padding) * .5);
		margin-block-start: calc(var(--container-padding) * 4);
	}
}

.exterior__item {
	position: relative;
}

.exterior__item-inner {
	display: block grid;
	place-items: center;
	height: 100%;
	gap: calc(var(--container-padding) * .5);
	--height: 43px;
	--width: 110px;
	padding: calc(var(--container-padding) + var(--height)) calc(var(--container-padding) * 1) calc(var(--container-padding) * 1);
	clip-path: shape(
		from calc(100% - var(--radius-default)) 0,
		arc to 100% var(--radius-default) of var(--radius-default) cw,

		line to 100% calc(100% - var(--radius-default)),
		arc to calc(100% - var(--radius-default)) 100% of var(--radius-default) cw,

		line to var(--radius-default) 100%,
		arc to 0 calc(100% - var(--radius-default)) of var(--radius-default) cw,

		line to 0 calc(var(--height) + var(--radius-default)),
		arc to var(--radius-default) var(--height) of var(--radius-default) cw,

		line to calc(var(--width) - var(--radius-default)) var(--height),
		arc to var(--width) calc(var(--height) - var(--radius-default)) of var(--radius-default) ccw,

		line to var(--width) var(--radius-default),
		arc to calc(var(--width) + var(--radius-default)) 0 of var(--radius-default) cw,

		close
	);
}

.exterior__item:nth-child(1) {
	grid-column: span 2;
	img {
		border-radius: var(--radius-small);
	}
	@container style(--pc: true) {
		grid-row: span 2;
	}
}

.exterior__item:nth-child(1) .exterior__item-inner {
	background-color: #FFF4D1;
}

.exterior__item:nth-child(2) .exterior__item-inner {
	background-color: #F0F4ED;
}

.exterior__item:nth-child(3) .exterior__item-inner {
	background-color: #F6F9FE;
}

.exterior__item:nth-child(4) .exterior__item-inner {
	background-color: #FFF4D1;
}

.exterior__item:nth-child(5) .exterior__item-inner {
	background-color: #F0F4ED;
}

.exterior__item:nth-child(6) .exterior__item-inner {
	background-color: #F6F9FE;
}

.exterior__item:nth-child(7) .exterior__item-inner {
	background-color: #F0F4ED;
}

.exterior__item:nth-child(8) .exterior__item-inner {
	background-color: #F6F9FE;
}

.exterior__item:nth-child(9) .exterior__item-inner {
	background-color: #FFF4D1;
}

.exterior__item > p {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	background-color: var(--primary-color);
	color: var(--white-color);
	border-radius: 3em;
	text-align: left;
	font-weight: bold;
	letter-spacing: .05em;
	padding-inline: 1em;
	font-size: 16px;
	line-height: 33px;
	text-transform: uppercase;
}

/*
  MARK: Service
*/

@keyframes SERVICE_HEAD {
	0% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
	10% {
		scale: 1.06 0.96;
		skew: 3deg -2deg;
		rotate: 2deg;
	}
	18% {
		scale: 0.97 1.07;
		skew: -2deg 1.5deg;
		rotate: -2deg;
	}
	27% {
		scale: 1.07 0.96;
		skew: 2deg -2deg;
		rotate: 2.5deg;
	}
	36% {
		scale: 1.05 1.05;
		skew: 1deg 2deg;
		rotate: -2.5deg;
	}
	48% {
		scale: 0.98 1.05;
		skew: -2deg 1deg;
		rotate: 1.5deg;
	}
	61% {
		scale: 1.06 0.96;
		skew: 3deg -1.5deg;
		rotate: -3deg;
	}
	74% {
		scale: 1 1.07;
		skew: -1.5deg 2deg;
		rotate: 2deg;
	}
	85% {
		scale: 0.97 1.04;
		skew: 1deg -2deg;
		rotate: -1.5deg;
	}
	100% {
		scale: 1 1;
		skew: 0 0;
		rotate: 0deg;
	}
}

.service__head {
	position: relative;
	z-index: 1;
	@container style(--pc-wide: true) {
		padding-inline-start: 30%;
	}
}

.service__body {
	position: relative;
	text-align: center;
	padding-block: calc(var(--container-padding) * 4);
	margin-block: calc(var(--container-padding) * 8);
	@container style(--pc: true) {
		margin-block: calc(var(--container-padding) * 4);
	}
	@container style(--pc-wide: true) {
		margin-block: calc(var(--container-padding) * 4) 0;
		padding-block: calc(var(--container-padding) * 6);
	}
}

.service__body-inner {
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	position: relative;
	text-align: center;
	z-index: 1;
	width: min(100%, 580px);
	margin-inline: auto;
}

.service__body-title {
	--clamp-min: 31;
  --clamp-max: 40;
	font-weight: bold;
}

.service__body-image-1 {
	position: absolute;
	top: 10%;
	left: -10%;
	animation: ILLUST_ANIMATION 6s linear infinite;
	img {
		display: block;
	}
	@container style(--sp: true) {
		display: none;
	}
}

.service__body-image-2 {
	position: absolute;
	bottom: 0%;
	right: -10%;
	animation: ILLUST_ANIMATION 6s linear infinite;
	img {
		display: block;
	}
	@container style(--sp: true) {
		display: none;
	}
}

.service__body-bg {
	position: absolute;
	top: -25%;
	left: -25%;
	background-color: var(--secondary-light-color);
	width: 150%;
	height: 150%;
	clip-path: shape(
    from 29.57% 99.28%,
    curve to 80.52% 81.54%
      with 51.48% 104.93% / 59.45% 82.63%,
    smooth to 95.44% 22.42%
      with 104.04% 43.32%,
    smooth to 47.00% 9.03%
      with 61.23% -7.80%,
    smooth to 2.73% 37.25%
      with 10.93% 8.45%,
    smooth to 29.57% 99.28%
      with 7.66% 93.63%,
    close
  );
	animation: SERVICE_HEAD 18s linear infinite;
	@container style(--pc-wide: true) {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/*
  MARK: Company
*/

.company-message {
	display: block grid;
	gap: var(--container-padding);
	@container style(--pc-wide: true) {
		grid-template-columns: 1fr 2fr;
		gap: calc(var(--container-padding) * 1.5);
	}
}

.company-message__image {
	text-align: center;
	img {
		border-radius: var(--radius-default);
		max-width: 360px;
		width: 100%;
		height: auto;
	}
}

.company-message__text {
	display: block grid;
	gap: calc(var(--container-padding) / 2);
	border-radius: var(--radius-default);
	background-color: var(--secondary-light-color);
	padding: calc(var(--container-padding) * 1.5);
	@container style(--pc-wide: true) {
		padding: calc(var(--container-padding) * 1);
	}
}

.company-message__heading,
.company-quality__heading {
	--clamp-min: 18;
  --clamp-max: 22;
	font-weight: bold;
	color: var(--primary-color);
	border-bottom: 1px dotted #D8C8AD;
	padding-block-end: calc(var(--container-padding) * .5);
}

.company-quality {
	display: block grid;
	gap: var(--container-padding);
	@container style(--pc-wide: true) {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--container-padding) * 1.5);
	}
}

.company-quality__first,
.company-quality__second {
	display: block grid;
	grid-template-rows: subgrid;
  grid-row: span 2;
	gap: calc(var(--container-padding) / 2);
	border-radius: var(--radius-default);
	padding: calc(var(--container-padding) * 1.5);
	@container style(--pc-wide: true) {
		padding: calc(var(--container-padding) * 1);
	}
}

.company-quality__first {
	background-color: var(--secondary-light-color);
}

.company-quality__second {
	background-color: #F0F4ED;
}

.cell-list__item {
	display: block grid;
	width: 100%;
	padding-block: var(--container-padding);
	border-bottom: 1px solid #D8C8AD;
	gap: calc(var(--container-padding) / 2);
	@container style(--pc-wide: true) {
		grid-template-columns: 1fr 3fr;
		gap: var(--container-padding);
	}
}

.cell-list__heading {
	font-weight: bold;
}

/*
  MARK: Review
*/

.reviews {
	margin-block-start: calc(var(--container-padding) * 4);
}

.review-list {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--container-padding) * 1);
	}
}

.review-item {
	position: relative;
}

.review-item__label {
	position: absolute;
	top: 0;
	right: 0;
	width: 128px;
	background-color: var(--primary-color);
	color: var(--white-color);
	border-radius: 3em;
	text-align: center;
	font-weight: bold;
	letter-spacing: .05em;
	font-size: 16px;
	line-height: 33px;
	text-transform: uppercase;
}

.review-item__content {
	display: block grid;
	background-color: var(--white-color);
	border-radius: var(--radius-default);
	grid-template-columns: 100px 1fr;
	grid-template-rows: auto auto;
	padding: calc(var(--container-padding) * 3.5) calc(var(--container-padding) * 1.5) calc(var(--container-padding) * 1.5);
	align-items: center;
	gap: calc(var(--container-padding) * 1);
	--height: 43px;
	--width: 138px;
	clip-path: shape(
		from var(--radius-default) 0,
		arc to 0 var(--radius-default) of var(--radius-default) ccw,

		line to 0 calc(100% - var(--radius-default)),
		arc to var(--radius-default) 100% of var(--radius-default) ccw,

		line to calc(100% - var(--radius-default)) 100%,
		arc to 100% calc(100% - var(--radius-default)) of var(--radius-default) ccw,

		line to 100% calc(var(--height) + var(--radius-default)),
		arc to calc(100% - var(--radius-default)) var(--height) of var(--radius-default) ccw,

		line to calc(100% - var(--width) + var(--radius-default)) var(--height),
		arc to calc(100% - var(--width)) calc(var(--height) - var(--radius-default)) of var(--radius-default) cw,

		line to calc(100% - var(--width)) var(--radius-default),
		arc to calc(100% - var(--width) - var(--radius-default)) 0 of var(--radius-default) ccw,

		close
	);
	@container style(--pc: true) {
		grid-template-columns: 140px 1fr;
		padding: calc(var(--container-padding) * 2) calc(var(--container-padding) * 1) calc(var(--container-padding) * 1);
		gap: calc(var(--container-padding) * 1);
	}
}

.review-item__image {
	text-align: center;
	img {
		border-radius: var(--radius-small);
	}
}

.review-item__title {
	--clamp-min: 20;
  --clamp-max: 24;
	font-weight: bold;
	color: var(--primary-color);

	background-color: #fff; /* 背景色 */
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%), /* 点線1の色 */
										linear-gradient(180deg, transparent calc(100% - 2px), #D8C8AD 100%); /* 点線2の色と太さ */
	background-size: 8px 100%, /* 点線1のサイズ */
									100% 1.8em; /* 点線2のサイズ */
	line-height: 1.8em; /* 文字の高さ */
	padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.review-item__description {
	--clamp-min: 16;
  --clamp-max: 16;
	grid-column: span 2;
}

.review-item__area {
	display: block;
	color: var(--primary-color);
	font-weight: bold;
	text-align: right;
	margin-block-start: calc(var(--container-padding) * .5);
}

.review-item:first-child {
	@container style(--pc: true) {
		grid-column: span 2;
		.review-item__image {
			grid-row: span 2;
		}
		.review-item__description {
			grid-column: span 1;
		}
	}
}

/*
  MARK: Area
*/

.area {
	position: relative;
	padding-block: calc(var(--container-padding) * 2);
	overflow: hidden;
	margin-block: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		padding-inline: calc(var(--container-padding) * 1);
		max-width: 1800px;
		margin-inline: auto;
		margin-block: calc(var(--container-padding) * 2) calc(var(--container-padding) * 4);
	}
}

@property --area-y-sp-1-progress {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 75px;
}

@property --area-c-sp-1-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@keyframes AREA_Y_SP_1 {
	0% {
		--area-y-sp-1-progress: 75px;
	}
	25% {
		--area-y-sp-1-progress: 80px;
	}
	50% {
		--area-y-sp-1-progress: 75px;
	}
	75% {
		--area-y-sp-1-progress: 70px;
	}
	100% {
		--area-y-sp-1-progress: 75px;
	}
}

@keyframes AREA_C_SP_1 {
	0% {
		--area-c-sp-1-progress: 50%;
	}
	50% {
		--area-c-sp-1-progress: 45%;
	}
	100% {
		--area-c-sp-1-progress: 50%;
	}
}

.area__inner {
	display: block grid;
	gap: calc(var(--container-padding) * 2);
	align-items: center;
	justify-items: center;
	padding: 180px calc(var(--container-padding) * 1.5);
	background-color: #FCF8F1;
	padding: 180px calc(var(--container-padding) * 1.5);
	clip-path: shape(
		from 0% 150px,
		smooth to var(--area-c-sp-1-progress) var(--area-y-sp-1-progress) with 25% 150px,
		smooth to 100% 0px with 75% 0px,
		line to 100% calc(100% - 150px),
		smooth to calc(100% - var(--area-c-sp-1-progress)) calc(100% - var(--area-y-sp-1-progress)) with 75% calc(100% - 150px),
		smooth to 0% 100% with 25% 100%,
		close
	);
	animation: AREA_Y_SP_1 12s linear infinite, AREA_C_SP_1 6s linear infinite;
	@container style(--pc-wide: true) {
		clip-path: none;
		background-color: transparent;
		grid-template-columns: 1fr 1fr;
		/* ラッパーなしでも、余った高さを最後の行だけに引き受けさせれば、要素間が均等に広がるのを防げる */
		grid-template-rows:
			max-content
			max-content
			max-content
			minmax(0, 1fr);
		grid-template-areas: 
		"map icon"
		"map heading"
		"map sub-heading"
		"map description";
		column-gap: calc(var(--container-padding) * 1);
		row-gap: 0;
		align-items: start;
		padding: 150px calc(var(--container-padding) * 4) 100px;
		max-width: 1600px;
		margin-inline: auto;
		position: relative;
		.area__map {
			grid-area: map;
			padding-block-start: 7em;
		}
		.home-heading-icon {
			grid-area: icon;
			position: relative;
		}
		.home-heading {
			grid-area: heading;
			position: relative;
		}
		.home-sub-heading {
			grid-area: sub-heading;
			margin-block: 1.5em;
			max-width: 600px;
			margin-inline: auto;
			position: relative;
		}
		.area__description {
			grid-area: description;
			max-width: 600px;
			margin-inline: auto;
			position: relative;
			z-index: 2;
		}
	}
}

@keyframes AREA_INNER_FRAME {
	0% {
		transform: scaleX(1) scaleY(1);
	}
	25% {
		transform: scaleX(1.05) scaleY(0.95);
	}
	50% {
		transform: scaleX(1) scaleY(1);
	}
	75% {
		transform: scaleX(0.95) scaleY(1.05);
	}
	100% {
		transform: scaleX(1) scaleY(1);
	}
}

.area__inner-frame {
	@container style(--pc-wide: true) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FCF8F1;
		clip-path: shape(
			from 61.0169% 1.8310%,

			curve to 53.9520% 6.2469%
				with 58.4743% 2.9048% from origin
				/ 56.1109% 4.4017% from origin,

			curve to 52.4575% 7.6102%
				with 53.4862% 6.5742% from origin
				/ 52.9885% 7.0241% from origin,

			curve to 52.4427% 7.6272%
				with 52.4526% 7.6165% from origin
				/ 52.4474% 7.6209% from origin,

			curve to 51.0739% 9.0402%
				with 51.9755% 8.0814% from origin
				/ 51.5197% 8.5522% from origin,

			curve to 31.9946% 16.8472%
				with 43.5613% 16.3128% from origin
				/ 35.1144% 16.9062% from origin,

			curve to 30.7655% 16.7774%
				with 31.5864% 16.8119% from origin
				/ 31.1761% 16.7882% from origin,

			curve to 30.7496% 16.7756%
				with 30.7562% 16.7771% from origin
				/ 30.7496% 16.7756% from origin,

			line to 30.7468% 16.7768%,

			curve to 21.3167% 18.5969%
				with 27.6331% 16.6894% from origin
				/ 24.4567% 17.2708% from origin,

			curve to 1.3274% 70.5061%
				with 5.4068% 25.3159% from origin
				/ -3.5427% 48.5564% from origin,

			curve to 38.9531% 98.0836%
				with 6.1976% 92.4556% from origin
				/ 23.0432% 104.8022% from origin,

			curve to 45.9102% 93.7625%
				with 41.4531% 97.0279% from origin
				/ 43.7803% 95.5633% from origin,

			curve to 47.5411% 92.3073%
				with 46.4151% 93.4294% from origin
				/ 46.9560% 92.9505% from origin,

			curve to 47.8905% 91.9307%
				with 47.6570% 92.1792% from origin
				/ 47.7737% 92.0549% from origin,

			curve to 48.5328% 91.2655%
				with 48.1075% 91.7128% from origin
				/ 48.3203% 91.4901% from origin,

			curve to 67.9904% 83.0718%
				with 56.1311% 83.6378% from origin
				/ 64.8071% 83.0139% from origin,

			curve to 69.2194% 83.1416%
				with 68.3986% 83.1072% from origin
				/ 68.8084% 83.1289% from origin,

			curve to 69.2466% 83.1452%
				with 69.2367% 83.1429% from origin
				/ 69.2466% 83.1452% from origin,

			line to 69.2522% 83.1428%,

			curve to 78.6524% 81.3223%
				with 72.3571% 83.2253% from origin
				/ 75.5228% 82.6442% from origin,

			curve to 98.6423% 29.4131%
				with 94.5626% 74.6033% from origin
				/ 103.5119% 51.3626% from origin,

			curve to 61.0169% 1.8310%
				with 93.7719% 7.4635% from origin
				/ 76.9269% -4.8880% from origin,

			close
		);
		animation: AREA_INNER_FRAME 12s linear infinite;
	}
}

.area__map {
	width: 100%;
	text-align: center;
	margin-block: calc(var(--container-padding) * 2) 0;
}

.area__map-pc {
	@container style(--sp: true) {
		display: none;
	}
	img {
		max-width: 478px;
		width: 100%;
		height: auto;
		aspect-ratio: 478 / 608;
	}
}

.area__map-sp {
	margin-block-end: calc(var(--container-padding) * 2);
	display: block grid;
	gap: calc(var(--container-padding) * 1);
	justify-items: center;
	@container style(--pc: true) {
		display: none;
	}
	img {
		width: 100%;
		max-width: 600px;
		height: auto;
	}
	.area__map-sp-tokai {
		aspect-ratio: 335 / 418;
	}
	.area__map-sp-kanto {
		aspect-ratio: 335 / 265;
	}
}

.area-image-1,
.area-image-2 {
	position: absolute;
	z-index: 1;
}

.area-image-1 {
	top: 0;
	right: 0;
	img {
		width: 150px;
		height: auto;
		aspect-ratio: 219 / 260;
		animation: ILLUST_ANIMATION 6s linear infinite;
	}
	@container style(--pc-wide: true) {
		top: 15%;
		right: auto;
		left: 10%;
	}
}

.area-image-2 {
	bottom: 0;
	left: 0;
	img {
		width: 150px;
		height: auto;
		aspect-ratio: 281 / 246;
		animation: ILLUST_ANIMATION 6s linear infinite reverse;
	}
	@container style(--pc-wide: true) {
		right: 45%;
		left: auto;
		bottom: 12%;
	}
}

/*
  MARK: FAQ
*/

.faqs {
	display: block grid;
	gap: calc(var(--container-padding) * 1);

	@container style(--pc-wide: true) {
		grid-template-columns: 1fr 2fr;
		gap: calc(var(--container-padding) * 1.5);
	}
}

.faq-list {
	display: block grid;
	gap: calc(var(--container-padding) * .5);
}

.faq {
	background-color: var(--white-color);
	border-radius: var(--radius-default);
	font-weight: bold;
	overflow: hidden;
}

.faq__question,
.faq__answer {
	display: block;
  position: relative;
  padding: .5em 3em .5em 4em;
}

.faq__answer {
	border-top: 1px dotted var(--border-color);
}

.faq__question {
	cursor: pointer;
	transition: background-color .2s ease-in-out;

	&:hover {
		@media (any-hover: hover) {
			background-color: var(--secondary-light-color);
		}
	}
}

.faq__question span,
.faq__answer p {
	display: block;
	text-align: left;
	padding-block: 1em;
}

.faq__question i,
.faq__answer i {
	--clamp-min: 22;
	--clamp-max: 30;
	font-weight: bold;
	display: block grid;
	place-items: center;
  font-style: normal;
	position: absolute;
	top: 50%;
	left: .9em;
	transform: translateY(-50%);
}

.faq__question i {
	color: var(--primary-color);
}

.faq__answer i {
	color: #E89797;
}

.faq__question::before,
.faq__question::after {
  content: '';
  display: block;
  position: absolute;
  width: 1em;
  height: 3px;
	background-color: var(--primary-color);
  transform-origin: 50% 50%;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}

.faq__question::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq[open] .faq__question::after {
  display: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq {
  &::details-content {
    transition: height .4s, opacity .4s, content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content {
    opacity: 1;
  }
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
  }
  details[open]::details-content {
    height: auto;
  }
}

/* height:0→autoへのアニメーションが対応していない場合は、固定値にアニメーションさせる */
@supports not (interpolate-size: allow-keywords) {
  details[open]::details-content {
    height: 150px;
    overflow-y: scroll;
  }
}

.faqs-button-outer {
	display: block flex;
	justify-content: flex-end;
	margin-block-start: calc(var(--container-padding) * 1);
}

.faqs-button-outer:has(.faqs-button.is-open) {
	display: none;
}

.faqs-button {
	--clamp-min: 12;
  --clamp-max: 12;
	display: inline-block;
	align-self: center;
	position: relative;
	text-align: left;
	padding: .5em 4em .5em 2em;
	width: fit-content;
	border-radius: 3em;
	background-color: var(--white-color);
	color: var(--primary-color);
	text-decoration: none;
	border: 1px solid var(--primary-color);
	transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	border: 2px solid var(--primary-color);
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	&::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 2em;
		transform: translateY(-50%) rotate(45deg);
		margin-top: -.05em;
		width: .75em;
		height: .75em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-color);
			color: var(--white-color);
			border-color: var(--white-color);
		}
	}
}

.faq-item:has(.faqs-button) ~ .faq-item {
	display: none;
}

.faq-item:has(.faqs-button.is-open) ~ .faq-item {
	display: block;
  opacity: 1;
	transform: translateY(0);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;

  @starting-style {
    opacity: 0;
		transform: translateY(10px);
  }
}

/*
  MARK: Footer
*/

.footer__head {
	display: block grid;
	place-items: center;
	position: relative;
	overflow: hidden;
}

.footer__head + * {
	position: relative;
	margin-block-start: -1px;
}

@property --footer-wave-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --footer-wave-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 40%;
}

@keyframes FOOTER_WAVE_Y {
	0% {
		--footer-wave-y-progress: 50%;
	}
	25% {
		--footer-wave-y-progress: 45%;
	}
	50% {
		--footer-wave-y-progress: 50%;
	}
	75% {
		--footer-wave-y-progress: 55%;
	}
	100% {
		--footer-wave-y-progress: 50%;
	}
}

@keyframes FOOTER_WAVE_Y_SP {
	0% {
		--footer-wave-y-progress: 60%;
	}
	25% {
		--footer-wave-y-progress: 55%;
	}
	50% {
		--footer-wave-y-progress: 60%;
	}
	75% {
		--footer-wave-y-progress: 65%;
	}
	100% {
		--footer-wave-y-progress: 60%;
	}
}

@keyframes FOOTER_WAVE_C {
	0% {
		--footer-wave-c-progress: 40%;
	}
	50% {
		--footer-wave-c-progress: 30%;
	}
	100% {
		--footer-wave-c-progress: 40%;
	}
}

.footer__wave {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--primary-color);
	clip-path: shape(
		from 0% 80%,
		smooth to var(--footer-wave-c-progress) var(--footer-wave-y-progress) with 10% 50%,
		smooth to 100% 50% with 90% 100%,
		line to 100% 100%,
		line to 0% 100%,
		close
	);
	animation: FOOTER_WAVE_Y_SP 12s linear infinite, FOOTER_WAVE_C 6s linear infinite;
	@container style(--pc: true) {
		clip-path: shape(
			from 0% 50%,
			smooth to var(--footer-wave-c-progress) var(--footer-wave-y-progress) with 10% 0%,
			smooth to 100% 50% with 90% 100%,
			line to 100% 100%,
			line to 0% 100%,
			close
		);
		animation: FOOTER_WAVE_Y 12s linear infinite, FOOTER_WAVE_C 6s linear infinite;
	}
}

@keyframes CHILDREN {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}

.footer__children {
	display: block flex;
	align-items: bottom;
	@container style(--pc: true) {
		margin-left: 40%;
	}
	li {
		display: block grid;
		place-items: end;
		margin-inline: -10px;
		&:first-child {
			margin-inline-start: 0;
			margin-inline-end: -40px;
		}
		&:last-child {
			margin-inline-start: -20px;
			margin-inline-end: 0;
		}

		img {
			display: block;
			animation: CHILDREN 1s linear infinite;
		}
		&:nth-child(1) img {
			animation-delay: 0s;
		}
		&:nth-child(2) img {
			animation-delay: 0.05s;
		}
		&:nth-child(3) img {
			animation-delay: 0.1s;
		}
		&:nth-child(4) img {
			animation-delay: 0.15s;
		}
		&:nth-child(5) img {
			animation-delay: 0.2s;
		}
		&:nth-child(6) img {
			animation-delay: 0.25s;
		}
	}
}

.has-scroll-animation.animation-children .footer__child {
	transform: translateY(100%);
	transition: transform .4s cubic-bezier(.645, .045, .355, 1);
	&:nth-child(1) {
		transition-delay: 0s;
	}
	&:nth-child(2) {
		transition-delay: 0.05s;
	}
	&:nth-child(3) {
		transition-delay: 0.1s;
	}
	&:nth-child(4) {
		transition-delay: 0.15s;
	}
	&:nth-child(5) {
		transition-delay: 0.2s;
	}
	&:nth-child(6) {
		transition-delay: 0.25s;
	}
}

.has-scroll-animation.animation-children.is-scrolled .footer__child {
	transform: translateY(0) !important;
}

.footer__body {
	position: relative;
	background-color: var(--primary-color);
	padding-block: calc(var(--container-padding) * 4);
	@container style(--pc: true) {
		padding-block: calc(var(--container-padding) * 4) calc(var(--container-padding) * 2);
	}
}

.footer__contact {
	display: block grid;
	gap: var(--container-padding);
	max-width: 952px;
	width: calc(100% - var(--container-padding) * 2);
	margin-inline: auto;
}

.footer__contact-title {
	--clamp-min: 26;
  --clamp-max: 40;
	text-align: center;
	color: #FCF8F1;	
}

.footer__contact-methods {
	display: block grid;
	background-color: #FCF8F1;
	border-radius: var(--radius-default);
	padding-inline: calc(var(--container-padding) * 2);
	@container style(--pc-wide: true) {
		grid-template-columns: 1fr 1fr;
		padding-block: calc(var(--container-padding) * 1);
		padding-inline: 0;
	}
}

.footer__contact-method {
	display: block grid;
	align-items: start;
	gap: calc(var(--container-padding) / 2);
	padding-block: calc(var(--container-padding) * 2);
	&:first-child {
		border-bottom: 2px dotted var(--text-color);
	}
	@container style(--pc-wide: true) {
		padding-inline: calc(var(--container-padding) * 1.5);
		padding-block: 0;
		&:first-child {
			border-bottom: none;
			border-right: 2px dotted var(--text-color);
		}
	}
}

.footer__contact-method-title {
	--clamp-min: 26;
  --clamp-max: 32;
	font-weight: bold;
	color: var(--primary-color);
	text-align: center;
}

.footer__contact-method-description {
	color: var(--text-color);
	text-align: center;
}

.footer__contact-method-button {
	--clamp-min: 18;
  --clamp-max: 22;
	display: block grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap: calc(var(--container-padding) / 2);
	padding: .35em 1em;
	border-radius: 3em;
	background-color: var(--white-color);
	color: var(--primary-color);
	text-decoration: none;
	border: 2px solid var(--primary-color);
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	.footer__contact-method-button-arrow {
		stroke: currentColor;
		fill: transparent;
	}
}

.footer__contact-method-button--mail {
	.footer__contact-method-button-icon {
		fill: currentColor;
		aspect-ratio: 14 / 11;
		width: 1.25em;
		height: auto;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-color);
			color: var(--white-color);
		}
	}
}

.footer__contact-method-button--line {
	background-color: #37BC3D;
	color: var(--white-color);
	border: 2px solid #37BC3D;
	.footer__contact-method-button-icon {
		fill: currentColor;
		aspect-ratio: 34 / 34;
		width: 1.75em;
		height: auto;
	}
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--white-color);
			color: #37BC3D;
		}
	}
}

.footer__foot {
	display: block grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 2fr;
	position: relative;
	background-color: var(--primary-color);
	@container style(--pc: true) {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
	}
}

@property --footer-image-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}

@property --footer-image-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@keyframes FOOTER_IMAGE_Y {
	0% {
		--footer-image-y-progress: 70%;
	}
	25% {
		--footer-image-y-progress: 60%;
	}
	50% {
		--footer-image-y-progress: 70%;
	}
	75% {
		--footer-image-y-progress: 80%;
	}
	100% {
		--footer-image-y-progress: 70%;
	}
}

@keyframes FOOTER_IMAGE_C {
	0% {
		--footer-image-c-progress: 20%;
	}
	50% {
		--footer-image-c-progress: 30%;
	}
	100% {
		--footer-image-c-progress: 20%;
	}
}

.footer__image {
	grid-area: 1 / 1 / 3 / 2;
	position: relative;
	overflow: hidden;
	clip-path: shape(
		from 0% 35%,
		smooth to 60% 30% with 30% var(--footer-image-c-progress),
		smooth to 100% 0% with var(--footer-image-y-progress) 20%,
		line to 100% 100%,
		line to 0% 100%,
		close
	);
	animation: FOOTER_IMAGE_Y 12s linear infinite, FOOTER_IMAGE_C 6s linear infinite;
	@container style(--pc: true) {
		grid-area: 1 / 2 / 3 / 4;
		z-index: 2;
		clip-path: shape(
			from 0% 100%,
			smooth to 60% 30% with 30% var(--footer-image-c-progress),
			smooth to 100% 0% with var(--footer-image-y-progress) 20%,
			line to 100% 100%,
			close
		);
	}
	img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
}

@property --footer-info-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --footer-info-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 25%;
}

@keyframes FOOTER_INFO_Y {
	0% {
		--footer-info-y-progress: 50%;
	}
	25% {
		--footer-info-y-progress: 40%;
	}
	50% {
		--footer-info-y-progress: 50%;
	}
	75% {
		--footer-info-y-progress: 60%;
	}
	100% {
		--footer-info-y-progress: 50%;
	}
}

@keyframes FOOTER_INFO_C {
	0% {
		--footer-info-c-progress: 25%;
	}
	50% {
		--footer-info-c-progress: 35%;
	}
	100% {
		--footer-info-c-progress: 25%;
	}
}

.footer__info {
	display: block grid;
	align-content: end;
	grid-area: 2 / 1 / 3 / 2;
	gap: calc(var(--container-padding) * 1);
	background-color: #FCF8F1;
	padding: calc(var(--container-padding) * 3) var(--container-padding) var(--container-padding);
	position: relative;
	clip-path: shape(
		from 0% 10%,
		smooth to 40% 60% with var(--footer-info-c-progress) 0%,
		smooth to 100% 100% with 100% var(--footer-info-y-progress),
		line to 0% 100%,
		close
	);
	animation: FOOTER_INFO_Y 12s linear infinite, FOOTER_INFO_C 6s linear infinite;
	.footer__logo,
	.footer__copyright {
		width: 35%;
	}
	.footer__logo img {
		width: 100px;
		height: auto;
		aspect-ratio: 155 / 82;
	}
	@container style(--pc: true) {
		grid-area: 2 / 1 / 3 / 3;
		z-index: 1;
		gap: var(--container-padding);
		clip-path: shape(
			from 0% 10%,
			smooth to 40% 60% with 25% 0%,
			smooth to 100% 100% with 100% 50%,
			line to 0% 100%,
			close
		);
		.footer__logo,
		.footer__copyright {
			width: 30%;
		}
		.footer__logo img {
			width: 155px;
		}
	}
}

.footer__copyright {
	--clamp-min: 10;
	--clamp-max: 12;
}

@property --top-button-y-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 110%;
}

@property --top-button-c-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 70%;
}

@keyframes TOP_BUTTON_Y {
	0% {
		--top-button-y-progress: 110%;
	}
	25% {
		--top-button-y-progress: 90%;
	}
	50% {
		--top-button-y-progress: 110%;
	}
	75% {
		--top-button-y-progress: 130%;
	}
	100% {
		--top-button-y-progress: 110%;
	}
}

@keyframes TOP_BUTTON_C {
	0% {
		--top-button-c-progress: 70%;
	}
	50% {
		--top-button-c-progress: 50%;
	}
	100% {
		--top-button-c-progress: 70%;
	}
}

.top-button {
	display: none;
	@container style(--pc-wide: true) {
		display: block grid;
		position: fixed;
		place-items: center;
		right: 0;
		bottom: 0;
		gap: .25em;
		background-color: #58b774;
		color: var(--white-color);
		padding: .5em 1em;
		text-decoration: none;
		padding: calc(var(--container-padding) * 2);
		z-index: 100;
		clip-path: shape(
			from 100% 0%,
			smooth to 80% 10% with 90% 0%,
			smooth to 30% 30% with var(--top-button-c-progress) 20%,
			smooth to 100% 80% with -10% var(--top-button-y-progress),
			close
		);
		animation: TOP_BUTTON_Y 12s linear infinite, TOP_BUTTON_C 6s linear infinite;
		svg {
			stroke: currentColor;
			aspect-ratio: 22 / 14;
			width: 1.25em;
			height: auto;
			fill: transparent;
		}
		span {
			text-transform: uppercase;
		}
	}
	visibility: hidden;
	transform: translateX(100%) translateY(-1em);
	transition: background-color .2s ease-in-out, visibility 0s step-end .2s, transform .2s cubic-bezier(0.65, 0.05, 0.36, 1);
	&:hover {
		@media (any-hover: hover) {
			background-color: var(--primary-light-color);
		}
	}
}

.top-button.is-show {
	visibility: visible;
	transition-delay: 0s;
	transform: translateX(0) translateY(-1em);
}

.top-button.is-locked {
	transform: translateX(0) translateY(3em);
}

/*
  MARK: Contact Form 7
*/

.wpcf7-list-item.first {
	margin-inline-start: 0;
}

.wpcf7-not-valid-tip {
	margin-block-start: .5em;
	color: #FF6F6F;
}

.wpcf7-response-output {
	margin-block-start: var(--container-padding) !important;
	border-color: #FF6F6F !important;
	background-color: #FFE5E5 !important;
	color: #FF6F6F !important;
	padding: calc(var(--container-padding) * .5) !important;
	border-radius: var(--radius-default) !important;
	text-align: center !important;
	font-weight: bold !important;
}

.form-item:has(.wpcf7-not-valid-tip) input {
	border-color: #FF6F6F;
	background-color: #FFE5E5;
}

/*
  MARK: アニメーション
*/

:root {
  --animation-duration: 0.7s;
  --animation-timing-function: cubic-bezier(.645, .045, .355, 1);
}

.animation-lightup {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slideup-list {
  --base-animation-delay: 0.1s;
  & > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
  }
  & > *:nth-child(2) {
    transition-delay: calc(var(--base-animation-delay) * 1);
  }
  & > *:nth-child(3) {
    transition-delay: calc(var(--base-animation-delay) * 2);
  }
  & > *:nth-child(4) {
    transition-delay: calc(var(--base-animation-delay) * 3);
  }
  & > *:nth-child(5) {
    transition-delay: calc(var(--base-animation-delay) * 4);
  }
  & > *:nth-child(6) {
    transition-delay: calc(var(--base-animation-delay) * 5);
  }
  & > *:nth-child(7) {
    transition-delay: calc(var(--base-animation-delay) * 6);
  }

  &.has-scroll-animation.is-scrolled {
    & > * {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.animation-slideup {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slide-left {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-slide-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-home-heading {
	&::before {
		opacity: 0;
		transform: translateY(30px);
		transform-origin: 100% 0%;
		transition: opacity .5s cubic-bezier(0.65, 0.05, 0.36, 1), transform .5s cubic-bezier(0.65, 0.05, 0.36, 1);
	}
	& span {
		opacity: 0;
		transform: translateY(30px);
		transform-origin: 100% 0%;
		transition: opacity .55s cubic-bezier(0.65, 0.05, 0.36, 1) .1s, transform .55s cubic-bezier(0.65, 0.05, 0.36, 1) .1s;
	}

	&.has-scroll-animation.is-scrolled {
		&::before {
			opacity: 1;
			transform: translateY(0);
		}
		& span {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* 2026/09/10　追記 */
.company-lead {
	margin-block-end: calc(var(--container-padding) * 1);
}
.company-list li {
	position: relative;
	padding-inline-start: 1em;
}
.company-list li::before {
	content: '・';
	position: absolute;
	left: 0;
}
.cell-list__value a {
	text-decoration: underline;
	text-underline-offset: 2px;
	&:hover {
		@media (any-hover: hover) {
			text-decoration: none;
		}
	}
}