@charset "utf-8";


.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
}
.mv.fade-in,
.main-point-text.fade-in,
.main-con-image.fade-in{
    transform: translateY(80px);
    transition: opacity 3s ease, transform 3s ease;
}

.main-function-list li:nth-child(2).fade-in,
.main-faq-list li:nth-child(2).fade-in{
    transform: translateY(70px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}
.main-function-list li:nth-child(3).fade-in,
.main-faq-list li:nth-child(3).fade-in{
    transform: translateY(80px);
    transition: opacity 2s ease, transform 2s ease;
}
.main-function-list li:nth-child(4).fade-in,
.main-faq-list li:nth-child(4).fade-in{
    transform: translateY(90px);
    transition: opacity 2.5s ease, transform 2.5s ease;
}
.main-faq-list li:nth-child(5).fade-in{
    transform: translateY(100px);
    transition: opacity 3s ease, transform 3s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0) !important;
}


.slide-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  /* 専用のフェードイン（左→右）クラス */
  .slide-left.slide-in-left {
    opacity: 1;
    transform: translateX(0);
}



/* ハンバーガーメニュー */
.menu-toggle {
	display: none;
    outline: none;
}

.menu-toggle:focus {
	outline: none;
}

/* 1400px以下で表示 */
@media screen and (max-width: 1400px) {
	.menu-toggle {
		display: flex;
		flex-direction: column;
        align-items: center;
		justify-content: center;
        gap: 7px;
		background: none;
		border: none;
		cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        width: 72px;
        height: 72px;
        background: #0bba90;
	}

	.menu-toggle span {
		display: block;
		height: 3px;
        width: 30px;
		background: #fff;
		border-radius: 2px;
	}

	/* ナビをデフォルト非表示に */
	.gnav {
		display: none;
		position: absolute;
		top: 72px;
		right: 0;
		width: 100%;
		background: #fff;
		padding: 20px 0;
	}

	/* 開いた状態 */
	.gnav.open {
		display: block;
        max-width: 300px;
        height: 100vh;
        margin-left: auto;
	}

	/* ナビリスト縦並びに */
	.gnav-list {
		flex-direction: column;
		gap: 15px;
		align-items: baseline;
        padding: 20px;
	}

    .header-con-wrap{
        margin-right: 72px;
    }
    /* 線の共通アニメーション */
    .menu-toggle span {
    	transition: transform 0.4s ease, opacity 0.3s ease;
    	transform-origin: center; /* 中央基点で回転 */
    }

    /* activeクラスが付いたときのバツ印化 */
    .menu-toggle.active span:nth-child(1) {
    	transform: rotate(45deg) translate(8px, 8px);
    }
    .menu-toggle.active span:nth-child(2) {
    	opacity: 0;
    }
    .menu-toggle.active span:nth-child(3) {
    	transform: rotate(-45deg) translate(6px, -6px);
    }
}


/* POP UP */
#modal-container {
    display: none;
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  
  #modal-container > div {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  
  #modal-container > div > img {
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 30px);
  }
  
  img.popup {
    cursor: pointer;
  }