@charset "UTF-8";
/* header、footer など、ベースとなる部分のCSSを書く*/
/*メディアクエリ（サンプル最後に取る）*/
/*sp（なくても良い）*/
@media screen and (max-width: 480px) {}
/*tablet 768px以下*/
@media screen and (max-width: 767px) {}
/*pc 1000px以下*/
@media screen and (max-width: 1000px) {}
body {
    overflow-x: hidden;
}
#goody-lp img {
    width: 100%;
    height: auto;
}
#goody-lp a {
    text-decoration: none;
}
/* 文字基準 */
#goody-lp h1, #goody-lp h2, #goody-lp h3, #goody-lp h4, #goody-lp h5, #goody-lp h6, #goody-lp p, #goody-lp span {
    font-family: 'Noto Sans JP', sans-serif;
}
html {
    scroll-behavior: smooth;
}

.display_pc {
    display: block;
}
.display_sp {
    display: none;
}
.scroll-target {
    scroll-margin-top: var(--header-offset, 0px);
}

.note{
	font-size: 1.0rem;
	line-height: 1.4;
	margin-top: 20px;
}
/* 文字基準 */
.main_mv-contents {
    position: relative;
    background-color: #31e5d9;
}
.mv__main {
    position: absolute;
    z-index: 3;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mv__person {
    width: 462px;
    height: 642px;
}
.mv__logo {
    width: 328px;
}
/* ====== Layout ====== */
.mv {
    position: relative;
    height: clamp(650px, 60vh, 700px);
    overflow: hidden;
    isolation: isolate;
}
/* 落下コンテナ */
.mv__item {
    position: absolute;
    top: 0;
    left: var(--x, 0);
    width: var(--w, 140px);
    pointer-events: none;
    user-select: none;
    opacity: 0;
    animation: fall var(--dur, 9s) linear infinite;
    animation-play-state: paused;
    transform: translateY(calc(-1 * var(--start, 120%)));
    will-change: transform;
}
/* 中の画像は回転だけ担当 */
.mv__img {
    display: block;
    width: 100%;
    height: auto;
    animation: spin var(--spin, 24s) linear infinite;
    animation-delay: 0s !important; /* ← ここで強制リセット */
    transform-origin: 50% 50%;
    will-change: transform;
    transform: translateZ(0);
}
/* ロード完了で再生 */
.mv.is-running .mv__item {
    animation-play-state: running;
    opacity: 1;
}
@keyframes fall {
    0% {
        transform: translateY(calc(-1 * var(--start, 120%)));
    }
    100% {
        transform: translateY(calc(var(--mv-h, 600px) + var(--end-extra, 120%)));
    }
}
/* 回転：1周=1turn。逆回転は --spin-deg: -1turn; */
@keyframes spin {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(var(--spin-deg, 1turn));
    }
}
/* 動き控えめ設定に配慮 */
@media (prefers-reduced-motion: reduce) {
    .mv__item {
        animation: none;
        opacity: 1;
    }
    .mv__img {
        animation: none;
    }
}
/* テキストスライダー */
.slide_text-contents {
    overflow: hidden;
    background-color: #ef4cbd;
    padding: 15px 0px;
	position: relative;
  z-index: 3;
}
.slide_text-contents.white {
    background-color: #fff;
}
.slide_text-area {
    display: flex;
    align-items: center;
    animation: marquee-left 30s linear infinite;
    /* コンテンツを2倍に複製して無限ループ */
    width: max-content;
}
.slide_text-area p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 4.3rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
.white .slide_text-area p {
    color: #000;
}
.slide_text-area .slide_ta-img {
    width: 50px;
    margin: 0px 20px;
}
@keyframes marquee-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* 全体幅の半分ずらす */
    }
}
/* テキストスライダー */
/* 見出し */
.headtext {
    text-align: center;
}
.headtext p {
    font-size: 1.4rem;
    font-weight: 500;
}
.headtext h2, .headtext h3 {
    font-size: 5.6rem;
    font-weight: 600;
    line-height: 1.4;
}
/* 見出し */
@media screen and (max-width: 930px) {
    .mv__person {
        width: 442px;
        height: 614px;
    }
    .mv__logo {
        width: 288px;
    }
}
@media screen and (max-width: 800px) {
    .display_pc {
        display: none;
    }
    .display_sp {
        display: block;
    }
    .mv {
        height: 400px;
    }
    .mv__person {
                width: 320px;
        height: 372px;
    }
    .mv__logo {
        width: 200px;
    }
}
@media screen and (max-width: 600px) {
    .mv {
        height: 230px;
    }
    .mv__person {
        width: 180px;
        height: 209px;
    }
    .mv__logo {
        width: 135px;
    }
	.slide_text-contents {
    padding: 5px 0px;
		        margin-top: 50px;
}
	.main_mv-contents + .slide_text-contents {
		        margin-top: 0px;
}
	#feature + .slide_text-contents {
		        margin-top: 0px;
}
	.slide_text-area p{
		font-size: 1.5rem;
	}
	.slide_text-area .slide_ta-img {
    width: 18px;
    margin: 0px 20px;
}
}