@charset "utf-8";
/*------------------------------------------------------------
	services
------------------------------------------------------------*/
#main .heading01 {
	color: #1970ef;
	font-size: min(6.369vw, 7rem);
	line-height: 1.1;
	font-weight: 700;
	writing-mode: vertical-rl;
	white-space: nowrap;
	text-orientation: upright;
	position: relative;
	z-index: 1;
}
#main .ttlBox {
	margin: 0 min(0.364vw, 0.4rem) 1.5rem;
	display: flex;
	align-items: center;
	gap: min(2.275vw, 2.5rem);
}
#main .ttlBox .pho {
	width: min(14.377vw, 15.8rem);
}
#main .ttlBox p {
	flex: 1;
	color: #000;
	font-size: min(3.185vw, 3.5rem);
	font-weight: 700;
	line-height: 1.36;
}
#main .numBox {
	margin: 0 0 2.8rem max(-0.728vw, -0.8rem);
	display: flex;
	gap: min(1.82vw, 2rem);
}
#main .numBox .num {
	margin-top: min(0.273vw, 0.3rem);
	width: min(13.194vw, 14.5rem);
}
#main .numBox .subBox {
	flex: 1;
}
#main .numBox .subBox .ttl {
	margin-bottom: 2rem;
	font-size: min(2.73vw, 3rem);
	font-weight: 700;
	line-height: 1.34;
	color: #f39400;
}
#main .numBox .subBox .text {
	color: #251714;
	font-size: min(1.638vw, 1.8rem);
	line-height: 1.88;
}
#main .secBox {
	gap: min(2.275vw, 2.5rem);
	align-items: flex-start;
}
#main .secBox .sideBox {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}
#main .secBox .innerBox {
	flex: 1;
}
#main .sec01 {
	padding: 3rem 0 7.6rem;
	flex-direction: row-reverse;
}
#main .sec01 .sideBox {
	margin-top: 2.5rem;
}
#main .sec01 .photo {
	margin: 0 min(8.644vw, 9.5rem) 0 min(0.273vw, 0.3rem);
	position: relative;
}
#main .sec01 .photo .img {
	width: min(21.565vw, 23.7rem);
	position: absolute;
	right: max(-16.561vw, -18.2rem);
	bottom: -6.2rem;
}
#main .sec02 {
	margin: 0 min(0.182vw, 0.2rem) 0 min(1.001vw, 1.1rem);
}
#main .sec02 .sideBox {
	margin: -2.4rem 0 0;
}
#main .sec02 .sideBox .img {
	width: min(19.836vw, 21.8rem);
	margin: 3.1rem -4rem 0 -3.4rem;
}
#main .sec02 .photo {
	max-width: 65rem;
	margin: 0 0 3.5rem auto;
}
#main .sec02 .numBox {
	margin: 0 0 0 -1.2rem;
	gap: min(2.821vw, 3.1rem);
}
#main .sec02 .numBox .num {
	margin-top: -0.7rem;
}
#main .sec02 .numBox .subBox .ttl {
	margin-bottom: 1.7rem;
}
#main .sec03 {
	margin: max(-9.463vw, -10.4rem) min(2.184vw, 2.4rem) 7.9rem 0;
	flex-direction: row-reverse;
}
#main .sec03 .sideBox .img {
	position: absolute;
	top: 100%;
	right: max(-2.366vw, -2.6rem);
	width: min(19.927vw, 21.9rem);
	margin-top: 1.3rem;
}
#main .sec03 .innerBox .num {
	width: min(13.194vw, 14.5rem);
	margin: 0.8rem 0 4.1rem auto;
}
#main .pointList01 {
	margin-left: min(2.184vw, 2.4rem);
	max-width: 72rem;
}
#main .pointList01 li {
	margin-bottom: 4.2rem;
	display: flex;
	gap: min(2.002vw, 2.2rem);
}
#main .pointList01 li:last-child {
	margin-bottom: 0;
}
#main .pointList01 li .mark {
	width: min(8.371vw, 9.2rem);
}
#main .pointList01 li .subBox {
	flex: 1;
}
#main .pointList01 li .subBox .ttl {
	font-size: min(2.639vw, 2.9rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #f39400;
	line-height: 1.4;
	margin-bottom: 1.3rem;
}
#main .pointList01 li .subBox .text {
	color: #251714;
	font-size: min(1.638vw, 1.8rem);
	line-height: 1.84;
	letter-spacing: 0.02em;
	text-align: justify;
}
#main .sec04 {
	margin: 0 0.3rem 12.2rem 0.5rem;
}
#main .sec04 .sideBox {
	margin: 0.5rem 0.9rem 0 0;
}
#main .sec04 .innerBox h4 {
	margin-bottom: 2.7rem;
	font-size: min(6.733vw, 7.4rem);
	line-height: 1;
	color: #f39400;
}
#main .sec04 .innerBox h4 .imgtext {
	margin-bottom: 0.5rem;
	display: block;
}
#main .sec04 .innerBox h4 .imgtext img {
	width: min(25.387vw, 27.9rem);
}
#main .sec04 .innerBox p {
	margin-bottom: 4.2rem;
	color: #1F1916;
	font-size: min(2.002vw, 2.2rem);
	line-height: 2.05;
}
#main .sec04 .innerBox .photo img {
	width: 100%;
	border-radius: 2.5rem;
}
#main .sec05 {
	margin: 0 0.1rem 14rem 1rem;
	flex-direction: row-reverse;
	align-items: flex-start;
}
#main .sec05 .sideBox {
	margin-top: -0.8rem;
}
#main .sec05 .sideBox .img {
	width: min(31.574vw, 34.7rem);
	position: absolute;
	left: max(-6.096vw, -6.7rem);
	top: 100%;
	margin-top: -0.1rem;
}
#main .sec05 .ttlBox {
	margin: 0 0 4rem;
	gap: min(1.638vw, 1.8rem);
}
#main .sec05 .ttlBox p {
	font-size: min(3.822vw, 4.2rem);
}
#main .sec05 .textBox {
	margin: 0 min(1.183vw, 1.3rem) 7.6rem;
}
#main .heading02 {
	margin-bottom: 2.3rem;
	color: #1970ef;
	font-weight: 700;
	font-size: min(3.185vw, 3.5rem);
	line-height: 1.2;
}
#main .sec05 .text {
	color: #251714;
	font-size: min(1.638vw, 1.8rem);
	line-height: 1.8;
}
#main .heading03 {
	margin-bottom: 2.6rem;
	color: #000;
	font-size: min(3.822vw, 4.2rem);
	font-weight: 700;
	line-height: 1.1;
}
#main .heading03 .lrg {
	display: block;
	font-size: min(6.824vw, 7.5rem);
	color: #1970ef;
	line-height: 1.05;
}
#main .pointList02 li {
	margin-bottom: 3rem;
}
#main .pointList02 li:last-child {
	margin-bottom: 0;
}
#main .pointList02 li .subTtl {
	margin: 0 0 1.6rem -0.4rem;
	display: flex;
	gap: min(1.365vw, 1.5rem);
	align-items: center;
	font-weight: 700;
}
#main .pointList02 li .subTtl .num {
	width: min(10.464vw, 11.5rem);
}
#main .pointList02 li .subTtl p {
	margin-bottom: 0.2rem;
	flex: 1;
	color: #000;
	font-size: min(3.822vw, 4.2rem);
	line-height: 1.05;
}
#main .pointList02 li .subTtl p .lrg {
	display: block;
	font-size: min(6.824vw, 7.5rem);
	color: #f39400;
	line-height: 1;
}
#main .pointList02 li .txt {
	color: #251714;
	font-size: min(1.456vw, 1.6rem);
	line-height: 2;
	margin-left: min(1.365vw, 1.5rem);
}
#main .sec06 {
	margin: 0 0 5.4rem min(1.82vw, 2rem);
}
#main .sec06 .sideBox .img {
	width: min(36.852vw, 40.5rem);
	position: absolute;
	top: 100%;
	left: -17.1rem;
	margin-top: 4.2rem;
}
#main .sec06 .innerBox {
	margin-top: 0.7rem;
	max-width: 75rem;
}
#main .sec06 .ttlBox {
	gap: min(1.82vw, 2rem);
	margin: 0 0 3.9rem -1.4rem;
}
#main .sec06 .ttlBox p {
	font-size: min(3.822vw, 4.2rem);
}
#main .sec06 .heading02 {
	margin-bottom: 1.5rem;
}
#main .sec06 .text {
	margin-bottom: 3.8rem;
	color: #251714;
	font-size: min(1.638vw, 1.8rem);
	line-height: 1.78;
}
#main .sec06 .egBox {
	margin-bottom: 5.6rem;
	padding: 2rem;
	color: #251714;
	border-radius: 0.8rem;
	background: #FFCF00;
}
#main .sec06 .egBox .subTtl {
	margin: -3.9rem 0 -1.6rem -3.7rem;
	display: flex;
	align-items: center;
	gap: 0;
}
#main .sec06 .egBox .subTtl .img {
	width: 18.2rem;
}
#main .sec06 .egBox .subTtl .inner {
	margin-top: 0.5rem;
	flex: 1;
}
#main .sec06 .egBox .subTtl .heading {
	margin-bottom: 0.4rem;
	color: #000;
	font-size: min(3.731vw, 4.1rem);
	font-weight: 700;
}
#main .sec06 .egBox .imgList {
	margin-right: 0.1rem;
	gap: 2.8rem 2.2rem;
}
#main .sec06 .egBox .imgList li {
	width: calc(50% - 1.1rem);
}
#main .sec06 .egBox .imgList li img {
	width: 100%;
	aspect-ratio: 344/258;
}
#main .sec06 .pointList02 li .subTtl {
	margin-left: 1rem;
}
#main .sec07 {
	position: relative;
}
#main .sec07 .ttlBox {
	margin: 0 0 1.8rem;
	width: 100%;
}
#main .sec07 .ttlBox .pho {
	width: min(14.195vw, 15.6rem);
}
#main .sec07 .ttlBox p {
	font-size: min(3.822vw, 4.2rem);
}
#main .sec07 .sideBox {
	position: static;
}
#main .sec07 .sideBox .img {
	width: min(29.481vw, 32.4rem);
	position: absolute;
	right: -0.7rem;
	top: -1.8rem;
}
#main .sec07 .innerBox {
	max-width: 80.4rem;
}
#main .sec07 .innerBox .photo {
	margin-bottom: 4.1rem;
}
#main .sec07 .innerBox .photo img {
	width: 100%;
	border-radius: 1.8rem;
}
#main .sec07 .innerBox h4 {
	margin-bottom: 3rem;
	color: #000;
	font-size: min(5.823vw, 6.4rem);
	font-weight: 700;
	line-height: 1.07;
}
#main .sec07 .innerBox h4 .imgtext {
	display: block;
	line-height: 1;
	font-size: 0;
	margin-bottom: 0;
}
#main .sec07 .innerBox h4 .imgtext img {
	width: min(26.024vw, 28.6rem);
}
#main .sec07 .innerBox h4 .color {
	color: #f39400;
	font-size: min(5.278vw, 5.8rem);
}
#main .sec07 .innerBox h4 .color .lrg {
	font-size: min(6.733vw, 7.4rem);
}
#main .sec07 .innerBox .txtList li {
	padding-left: 0.5em;
	text-indent: -0.5em;
	font-size: 1.5rem;
	line-height: 2.05;
	color: #251714;
}
#main {
	padding-bottom: 15.7rem;
}
@media all and (min-width: 897px) {
	#main .heading01 .dot {
		display: inline-block;
		writing-mode: horizontal-tb;
	}
}
@media all and (max-width: 896px) {
	#main .heading01 {
		font-size: 3rem;
		writing-mode: horizontal-tb;
		white-space: initial;
		text-orientation: initial;
	}
	#main .ttlBox {
		margin: 0 0 1.5rem;
		gap: 1.5rem;
	}
	#main .ttlBox .pho {
		width: 8rem;
	}
	#main .ttlBox p {
		font-size: 1.8rem;
	}
	#main .numBox {
		margin: 0 0 2rem;
		gap: 1.5rem;
	}
	#main .numBox .num {
		width: 8rem;
	}
	#main .numBox .subBox .ttl {
		margin-bottom: 1rem;
		font-size: 2rem;
	}
	#main .numBox .subBox .text {
		font-size: 1.5rem;
	}
	#main .secBox {
		display: block !important;
	}
	#main .secBox .sideBox {
		margin-bottom: 2.5rem;
		display: block;
	}
	#main .sec01 {
		padding: 4rem 0 5rem;
	}
	#main .sec01 .sideBox {
		margin-top: 0;
	}
	#main .sec01 .photo {
		margin: 0 3rem 0 0;
	}
	#main .sec01 .photo .img {
		width: 10rem;
		right: -4rem;
		bottom: -3rem;
	}
	#main .sec02 {
		margin: 0 0 5rem;
	}
	#main .sec02 .sideBox {
		margin: 0 0 2.5rem;
	}
	#main .sec02 .sideBox .img {
		width: 10rem;
		margin: 0;
		position: absolute;
		right: -1rem;
		top: -1rem;
	}
	#main .sec02 .photo {
		max-width: initial;
		margin: 0 0 3rem;
	}
	#main .sec02 .photo img {
		width: 100%;
	}
	#main .sec02 .numBox {
		margin: 0;
		gap: 1.5rem;
	}
	#main .sec02 .numBox .num {
		margin-top: 0.2rem;
	}
	#main .sec02 .numBox .subBox .ttl {
		margin-bottom: 1rem;
	}
	#main .sec03 {
		margin: 0 0 5rem;
	}
	#main .sec03 .sideBox .img {
		right: -1rem;
		width: 10rem;
	}
	#main .sec03 .innerBox .num {
		width: 8rem;
		margin: 0 0 3rem;
	}
	#main .pointList01 {
		margin-left: 0;
		max-width: initial;
	}
	#main .pointList01 li {
		margin-bottom: 2.5rem;
		display: block;
		position: relative;
	}
	#main .pointList01 li:last-child {
		margin-bottom: 0;
	}
	#main .pointList01 li .mark {
		width: 6rem;
		position: absolute;
		left: 0;
		top: 0.5rem;
	}
	#main .pointList01 li .subBox .ttl {
		min-height: 7.5rem;
		padding-left: 7rem;
		display: flex;
		align-items: center;
		font-size: 2.4rem;
	}
	#main .pointList01 li .subBox .text {
		font-size: 1.5rem;
	}
	#main .sec04 {
		margin: 0 0 5rem;
	}
	#main .sec04 .sideBox {
		margin: 0 0 2.5rem;
	}
	#main .sec04 .innerBox h4 {
		margin-bottom: 1.5rem;
		font-size: 3.3rem;
	}
	#main .sec04 .innerBox h4 .imgtext img {
		width: 15rem;
	}
	#main .sec04 .innerBox p {
		margin-bottom: 2rem;
		font-size: 1.6rem;
	}
	#main .sec04 .innerBox .photo img {
		border-radius: 1.5rem;
	}
	#main .sec05 {
		margin: 0 0 5rem;
	}
	#main .sec05 .sideBox {
		margin: 0 0 2.5rem;
		padding-right: 10rem;
		display: flex;
		justify-content: center;
		min-height: 15rem;
	}
	#main .sec05 .sideBox .img {
		width: 15rem;
		left: auto;
		right: -5rem;
		top: -2rem;
		margin-top: 0;
	}
	#main .sec05 .ttlBox {
		margin: 0 0 2rem;
		gap: 1.5rem;
	}
	#main .sec05 .ttlBox p {
		font-size: 2rem;
	}
	#main .sec05 .textBox {
		margin: 0 0 2rem;
	}
	#main .heading02 {
		margin: 0 0 1.5rem;
		font-size: 2.1rem;
	}
	#main .sec05 .text {
		font-size: 1.5rem;
	}
	#main .heading03 {
		margin-bottom: 1.5rem;
		font-size: 2.4rem;
		line-height: 1.25;
	}
	#main .heading03 .lrg {
		font-size: 3.5rem;
	}
	#main .pointList02 li {
		margin-bottom: 2rem;
	}
	#main .pointList02 li:last-child {
		margin-bottom: 0;
	}
	#main .pointList02 li .subTtl {
		margin: 0 0 1rem;
		gap: 1rem;
	}
	#main .pointList02 li .subTtl .num {
		width: 7rem;
	}
	#main .pointList02 li .subTtl p {
		margin: 1rem 0 0;
		font-size: 2rem;
		line-height: 1.5;
	}
	#main .pointList02 li .subTtl p .lrg {
		font-size: 3rem;
	}
	#main .pointList02 li .txt {
		font-size: 1.4rem;
		margin: 0;
	}
	#main .sec06 {
		margin: 0 0 5rem;
	}
	#main .sec06 .sideBox {
		padding-left: 11rem;
		min-height: 13rem;
		display: flex;
		justify-content: center;
	}
	#main .sec06 .sideBox .img {
		width: 15rem;
		top: 0;
		left: -5rem;
		margin-top: 0;
	}
	#main .sec06 .innerBox {
		margin-top: 0;
		max-width: initial;
	}
	#main .sec06 .ttlBox {
		gap: 1.5rem;
		margin: 0 0 2rem;
	}
	#main .sec06 .ttlBox p {
		font-size: 2rem;
	}
	#main .sec06 .text {
		margin-bottom: 2rem;
		font-size: 1.5rem;
	}
	#main .sec06 .egBox {
		margin-bottom: 3rem;
		padding: 1.5rem;
		border-radius: 0.5rem;
	}
	#main .sec06 .egBox .subTtl {
		margin: -2.5rem 0 2rem -2.5rem;
		gap: 0.5rem;
		align-items: flex-start;
	}
	#main .sec06 .egBox .subTtl .img {
		width: 10rem;
	}
	#main .sec06 .egBox .subTtl .inner {
		margin-top: 3rem;
	}
	#main .sec06 .egBox .subTtl .heading {
		margin-bottom: 1rem;
		font-size: 3rem;
		line-height: 1.2;
	}
	#main .sec06 .egBox .imgList {
		margin-right: 0;
		gap: 1rem;
	}
	#main .sec06 .egBox .imgList li {
		width: calc(50% - 0.5rem);
	}
	#main .sec06 .pointList02 li .subTtl {
		margin-left: 0;
	}
	#main .sec07 .ttlBox {
		margin-bottom: 2rem;
	}
	#main .sec07 .ttlBox .pho {
		width: 8rem;
	}
	#main .sec07 .ttlBox p {
		font-size: 2rem;
	}
	#main .sec07 .sideBox {
		margin-bottom: 4rem;
		position: relative;
	}
	#main .sec07 .sideBox .img {
		width: 15rem;
		right: -0.5rem;
		top: 20%;
	}
	#main .sec07 .innerBox {
		max-width: initial;
	}
	#main .sec07 .innerBox .photo {
		margin-bottom: 2rem;
	}
	#main .sec07 .innerBox .photo img {
		border-radius: 1.5rem;
	}
	#main .sec07 .innerBox h4 {
		margin-bottom: 1.5rem;
		font-size: 3rem;
	}
	#main .sec07 .innerBox h4 .imgtext img {
		width: 15rem;
	}
	#main .sec07 .innerBox h4 .color {
		font-size: 2.8rem;
	}
	#main .sec07 .innerBox h4 .color .lrg {
		font-size: 3.3rem;
	}
	#main .sec07 .innerBox .txtList li {
		font-size: 1.3rem;
		line-height: 1.8;
	}
}


/* ↓↓↓ 下からスッと表示させるアニメーション用のCSS ↓↓↓ */

/* アニメーションの初期状態（透明で、少し下に配置） */
.fade-in-target {
  opacity: 0;
  transform: translateY(30px); /* 30px下から開始 */
  transition: opacity 0.8s, transform 0.8s;
  transition-timing-function: ease-out; /* アニメーションの速度を調整 */
}

/* is-visibleクラスが付与されたときの最終状態（不透明で、元の位置に） */
.fade-in-target.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ↓↓↓ 猿のイラスト ズームインアニメーション用のCSS ↓↓↓ */

/* アニメーションの初期状態（小さく透明） */
.zoom-in-target {
  opacity: 0;
  transform: scale(0.5); /* 50%のサイズから開始 */
  transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* 秒数を1.5sに変更 */
}

/* is-visibleクラスが付与されたときの最終状態（元のサイズで不透明） */
.zoom-in-target.is-visible {
  opacity: 1;
  transform: scale(1); /* 元のサイズ */
  animation: zoomBounce 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; /* 秒数を1.5sに変更 */
}

/* ぐわんアニメーションのキーフレーム */
@keyframes zoomBounce {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
    transform: scale(1.1); /* 少し大きめに跳ねる */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 元のサイズに戻る */
  }
}