@charset "UTF-8";



*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 62.5%;
}
body{
	font-family: "Noto Sans JP", sans-serif;
}

.youtube-variable{
  position: relative;
  margin: 0 auto;
  width: 80%;
  padding-top: 56.25%;
}

.youtube-variable iframe{
  position: absolute;
  padding: 20px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.btn, a.btn, button.btn {
    font-size: 2.5rem; /* サイズは元のまま維持 */
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    display: flex;
	justify-content: center;
	align-items: center;
    padding: 1rem 4rem;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all 0.3s ease; /* トランジションを少し滑らかに */
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    
    color: #fff; /* テキストは白維持 */
    border-radius: 99px; /*画像に合わせて完全な丸み（ピル型）に変更*/
    
    display: block;
	white-space: nowrap;

    /* キスアンドテル風：光沢感を演出するために、テキストにわずかな陰影を追加します */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); 
}

/* ラッパーは不要なら削除可能ですが、既存コードに合わせて修正します。
   今回は画像のグラデーションをボタン本体（a.btn-radius-gradient）に適用するのが最適です */

.btn-radius-gradient-wrap {
    display: inline-block;
    padding: 0px; /* ラッパーにはパディングなしでシンプル化推奨*/
}

/* --- ここから変更部分：Kissntell風のピンクグラデーション定義 --- */

a.btn-radius-gradient, 
button.btn-radius-gradient {
    
    border-radius: 99px; 
    
    background-color: #ffcae4; /* フォールバック用単色（淡いピンク） */
    
    /* 画像の配色：左上が明るいライトピンクから、右下が濃いマゼンタへ流れるグラデーションを定義しました */
    background-image: linear-gradient(135deg, #fff0f9 0%, #ff7eb9 40%, #d62c7a 100%);

    /* ホバー時のエフェクト（少し浮き上がるように変更）*/
    box-shadow: inset 0 -3px 8px rgba(15, 25, 40, .1), inset 0 2px 6px #fff; 
}

a.btn-radius-gradient:hover {
    transform: scale(1.07); /* 少し大きめに */
    
    /* ホバー時に光沢感が強くなるように色を調整（オプション）*/
    background-image: linear-gradient(135deg, #ffeaf6 0%, #ff9ebd 40%, #e82f80 100%); 
}


/* fadeUp */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/


.fadeUpTrigger {
    opacity: 0;
}

@keyframes flashing {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}


html {
    scroll-behavior: smooth;
}

.top a {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 24px;
    z-index: 100;
		opacity: 0;
		transition: opacity .3s ease;
}

.top.on a{
	opacity: 1;
}

.top img{
    width: 50px;
    height: 50px;
}

.item img{
    width: 100%;
}

.member{
	position: relative;
}
.member img{
	width: 100%;
}
.member:before{
	content: "";
	padding-top: calc(2734 / 1382 * 100%);
	display: block;
}
.member01{
	width: calc(628 / 1382 * 100%);
	position: absolute;
	top: 0;
	right: 0;
}
.member02{
	width: calc(628 / 1382 * 100%);
	position: absolute;
	top: 6.5%;
	left: 0;
}
.member03{
	width: calc(628 / 1382 * 100%);
	position: absolute;
	top: 24%;
	right: 0;
}
.member04{
	width: calc(628 / 1382 * 100%);
	position: absolute;
	top: 35%;
	left: 0;
}

.bgIcon01{
	width: calc(168 / 1382 * 100%);
	position: absolute;
	top: 2.5%;
	left: 16%;
}
.bgIcon02{
	width: calc(169 / 1382 * 100%);
	position: absolute;
	top: 33.5%;
	right: 18%;
}
.bgIcon03{
	width: calc(138 / 1382 * 100%);
	position: absolute;
	top: 47%;
	left: 17%;
}
.bgIcon04{
	width: calc(169 / 1382 * 100%);
	position: absolute;
	top: 77%;
	right: 17.5%;
}

/*PCサイズレスポンシブ*/
@media(min-width:1200px) {
    body {
        min-width: 1200px;
        /*height: 10000px;*/
        background-image: url(../img/background.jpg);
        /*background-repeat: repeat-y;*/
        background-size: cover;
        text-align: center;
        margin: 0 auto;
        color: #fff;
    }

    .container {
        width: 100%;
        /* max-width: 1500px; */
        margin: 0 auto;
    }

     /* 表示領域全体 */
     div.container.itmFade_2 {
        position: relative;
        width: 100%;
    }

    /* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */
    div.container.itmFade_2::before {
        content: "";
        display: block;
        padding-top: 57%;
    }


    /* アニメーションの設定 */
    div.container.itmFade_2 div.item {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        max-height: 100%;
        /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「10秒」で「無限」に繰り返す */
    }

    /* 1つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(1) {
        animation-delay: 0s;
        /* アニメーション(下記「@keyframes chg-itm-anim」)の開始を0秒遅らせる */
    }

    /* 2つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(2) {
			opacity: 0;
			animation: itmFade2-chg-itm-anim 1.4s step-end infinite;
        /**
     * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を5秒遅らせる
     * (上記アニメーション全体10秒の1/2，1枚目のアニメーションが50%に到達(フェードアウト開始)した時に2枚目のアニメーション(フェードイン)開始)
    **/
        animation-delay: 0.3s;
    }

    /* アニメーションの進行 */
    @keyframes itmFade2-chg-itm-anim {
        0% {
            opacity: 0;
            z-index: 2;
        }

        30% {
            opacity: 1;
        }

        50% {
            opacity: 1;
        }

        /**
     * 画像が2枚のため1枚当たり50%
     * 1枚目->2枚目(50%・不透明から65%・透明)にフェードして切り替える
     * 表示されている画像が一番手前に来るように「z-index」で奥行きの並び順を変更
     */
        65% {
            opacity: 0;
            z-index: 1;
        }

        100% {
            opacity: 1;
        }
    }

    .item img {
        width: 100%;
    }

    main {
        max-width: 1200px;
        margin: 0 auto;
    }



    .mainvisual2-sp, .footer-right-sp, .SP {
        display: none;
    }


    .mainvisual {
        padding-top:5vw;
    }

    .mainvisual img {
        width: 90%;
    }

    .mainvisual2 img,
		.mainvisual2-pc img{
        width: 80%;
        margin-top: 40px;
    }

    .mainvisual3 img {
        width: 60%;
        margin-top: 40px;
    }

		.member{
			max-width: 720px;
			width: 60%;
			margin: 40px auto 0;
		}
		.member02{
			top: 13.5%;
			left: 0;
		}
		.member03{
			top: 42.5%;
		}
		.member04{
			top: 55.5%;
		}
		.bgIcon01{
			top: 2.5%;
			left: 16%;
		}
		.bgIcon02{
			top: 34%;
			right: 18%;
		}
		.bgIcon03{
			top: 48%;
			left: 17%;
		}
		.bgIcon04{
			top: 77%;
			right: 17.5%;
		}

		.mainvisual + .box{
			margin-top: -6vw;
		}

    .news {
        width: 80%;
        background-color: #fff;
        padding: 20px 5px;
        margin: 20px auto;
        color: #555;
        font-size: 1.6rem;
        text-align: center;

    }

    .news-under {
        width: 90%;
        margin: 0 auto;
    }

    .kissntell img {
        /*padding-top: 120px;*/
        width: 80%;
    }

    .kissntell {
        position: relative;
    }

    .btn-radius-gradient-wrap {
        position: absolute;
        right: 14%;
        bottom: 6%;
    }

    .btn-radius-gradient-wrap-2 {
        position: absolute;
        right: 14%;
        bottom: 6%;
    }

    .btn-radius-gradient-wrap-3 {
        position: absolute;
        right: 14%;
        bottom: 6%;
    }

    .aespa img {
        width: 50%;
        padding-top: 32px;
    }

    .aespa p {
        font-size: 2.4rem;
    }

	.aespa2 img {
        width: 100%;
        padding-top: 150px;
    }
	
    .aespa2 p {
        font-size: 3.0rem;
		color: #000000;
		font-weight: 700;
    }
	
	 .note-right p {
        font-size: 2.5rem;
		width: 100%;
		 color: #EE0003;
		font-weight: 500;
    }
	
    footer {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 80px;
    }

    footer a {
        color: #fff;
        text-decoration: none;
        display: block;
    }

    .footer-left {
        width: 40%;
        text-align: left;
        font-size: 2.2rem;
    }

    .footer-right {
        width: 20%;
    }

    .footer-right ul {
        display: flex;
        align-items: flex-end;
        padding: 0;
        margin: 0;
    }

    .footer-right li {
        margin: 0 10px;
        list-style: none;
    }

    .footer-right img {
        width: 42px;
        height: 42px;
        object-fit: cover;
    }

    .copy {
        margin-top: 40px;
        padding-bottom: 24px;
        font-size: 2.2rem;
    }


}

/*ipadサイズレスポンシブ*/
@media(min-width:600px) and (max-width:1199px) {
    body {
        min-width: 600px;
        max-width: 1199px;
        /*height: 1000px;*/
        background-image: url(../img/background.jpg);
        /*background-repeat: repeat-y;*/
        background-size: cover;
        text-align: center;
        color: #fff;
    }

    .container {
        width: 100%;
    }

    /* 表示領域全体 */
    div.container.itmFade_2 {
        position: relative;
        width: 100%;
    }

    /* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */
    div.container.itmFade_2::before {
        content: "";
        display: block;
        padding-top: 57%;
    }


    /* アニメーションの設定 */
    div.container.itmFade_2 div.item {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        max-height: 100%;
        /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「10秒」で「無限」に繰り返す */
    }

    /* 1つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(1) {
        animation-delay: 0s;
        /* アニメーション(下記「@keyframes chg-itm-anim」)の開始を0秒遅らせる */
    }

    /* 2つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(2) {
			opacity: 0;
			animation: itmFade2-chg-itm-anim 1.4s step-end infinite;
        /**
     * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を5秒遅らせる
     * (上記アニメーション全体10秒の1/2，1枚目のアニメーションが50%に到達(フェードアウト開始)した時に2枚目のアニメーション(フェードイン)開始)
    **/
        animation-delay: 0.3s;
    }

    /* アニメーションの進行 */
    @keyframes itmFade2-chg-itm-anim {
        0% {
            opacity: 0;
            z-index: 2;
        }

        30% {
            opacity: 1;
        }

        50% {
            opacity: 1;
        }

        /**
     * 画像が2枚のため1枚当たり50%
     * 1枚目->2枚目(50%・不透明から65%・透明)にフェードして切り替える
     * 表示されている画像が一番手前に来るように「z-index」で奥行きの並び順を変更
     */
        65% {
            opacity: 0;
            z-index: 1;
        }

        100% {
            opacity: 1;
        }
    }

    .item img {
        width: 100%;
    }

    .mainvisual2-sp, .footer-right-sp, .SP {
        display: none;
    }


    .mainvisual {
        padding-top: 20vw;
    }

    .mainvisual img {
        width: 80%;
    }

    .mainvisual2 img {
        width: 600px;
        width: 79%;
    }

    .mainvisual2-pc img {
        width: 80%;
        margin-top: 40px;
    }

		.member{
			width: 80%;
			margin: 40px auto 0;
		}
		.member img{
			width: 100%;
		}
		.member02{
			top: 15.5%;
			left: 0;
		}
		.member03{
			top: 48%;
		}
		.member04{
			top: 63%;
		}

		.bgIcon01{
			top: 3.5%;
			left: 16%;
		}
		.bgIcon02{
			top: 38.5%;
			right: 18%;
		}
		.bgIcon03{
			top: 54%;
			left: 17%;
		}
		.bgIcon04{
			top: 87%;
			right: 17.5%;
		}


    .news {
        width: 80%;
        background-color: #fff;
        padding: 20px 5px;
        margin: 20px auto;
        color: #555;
        font-size: 1.6rem;
        text-align: center;

    }

    .news-under {
        width: 90%;
        margin: 0 auto;
    }

    .news img {
        width: 90%;
    }

    .kissntell img {
        width: 100%;
    }

    .kissntell {
        position: relative;
        width: 650px;
        margin: 80px auto 0;
				width: 80%;
    }

    .btn-radius-gradient-wrap {
        position: absolute;
        right: 14vw;
        bottom: 9.5vw;
				width: 20%;
    }

    .btn-radius-gradient-wrap-2 {
        position: absolute;
        right: 14vw;
        bottom: 9.5vw;
				width: 20%;
    }

    .btn-radius-gradient-wrap-3 {
        position: absolute;
        right: 14vw;
        bottom: 9.5vw;
				width: 20%;
    }

    .btn,
    a.btn,
    button.btn {
			font-size: 1.5vw;
			font-weight: 700;
			line-height: 1.5;
			position: relative;
			display: flex;
			padding: 1.8vw 1.8vw;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
			text-align: center;
			vertical-align: middle;
			text-decoration: none;
			letter-spacing: 0.1em;
			border-radius: 0.5rem;
			width: 100%;
			max-height: 27px;
			justify-content: center;
			align-items: center;
    }

    a.btn-radius-gradient:hover {
        -webkit-transform: scale(1.06);
        transform: scale(1.05);
    }

    a.btn-radius-gradient {
        border-radius: 100vh;
    }

    .aespa img {
        width: 50%;
        padding-top: 32px;

    }
	
	.aespa2 img {
        width: 100%;
        padding-top: 150px;
    }
	
    .aespa2 p {
        font-size: 3.0rem;
		color: #000000;
		font-weight: 700;
    }
	
	 .note-right p {
        font-size: 2.5rem;
		width: 100%;
		 color: #EE0003;
		font-weight: 500;

	}


    footer {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 80px;
    }

    footer a {
        color: #fff;
        text-decoration: none;
        display: block;
    }

    .footer-left {
        width: 50%;
        text-align: left;
    }

    .footer-right {
        width: 30%;
    }

    .footer-right ul {
        display: flex;
        align-items: flex-end;
        padding: 0;
        margin: 0;
    }

    .footer-right li {
        margin: 0 10px;
        list-style: none;
    }

    .footer-right img {
        width: 24px;
        height: 24px;
        object-fit: cover;
    }

    .copy {
        margin-top: 40px;
        padding-bottom: 24px;
    }
}


/*SPサイズレスポンシブ*/
@media (max-width:599px) {
    body {
        max-width: 599px;
        background-image: url(../img/background.jpg);
        /*background-repeat: repeat-y;*/
        background-size: cover;
        text-align: center;
        color: #fff;
    }

    .container {
        width: 100%;
        /* max-width: 360px; */
        margin: 0 auto;
    }


    p {
        font-size: 13px;
        margin-top: 10px;
    }

    /* 表示領域全体 */
    div.container.itmFade_2 {
        position: relative;
        width: 100%;
    }

    /* 表示領域の「position: relative;」により，領域高さが0になるため，paddingで高さを確保する */
    div.container.itmFade_2::before {
        content: "";
        display: block;
        padding-top: 57%;
    }


    /* アニメーションの設定 */
    div.container.itmFade_2 div.item {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        max-height: 100%;
        /* アニメーション : 下記「@keyframes chg-itm-anim の 0% から 100% まで」を「10秒」で「無限」に繰り返す */
    }

    /* 1つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(1) {
        animation-delay: 0s;
        /* アニメーション(下記「@keyframes chg-itm-anim」)の開始を0秒遅らせる */
    }

    /* 2つ目のアイテム */
    div.container.itmFade_2 div.item:nth-of-type(2) {
			opacity: 0;
			animation: itmFade2-chg-itm-anim 1.4s step-end infinite;
        /**
     * アニメーションの進行(下記「@keyframes chg-itm-anim」)の開始を5秒遅らせる
     * (上記アニメーション全体10秒の1/2，1枚目のアニメーションが50%に到達(フェードアウト開始)した時に2枚目のアニメーション(フェードイン)開始)
    **/
        animation-delay: 0.3s;
    }

    /* アニメーションの進行 */
    @keyframes itmFade2-chg-itm-anim {
        0% {
            opacity: 0;
            z-index: 2;
        }

        30% {
            opacity: 1;
        }

        50% {
            opacity: 1;
        }

        /**
     * 画像が2枚のため1枚当たり50%
     * 1枚目->2枚目(50%・不透明から65%・透明)にフェードして切り替える
     * 表示されている画像が一番手前に来るように「z-index」で奥行きの並び順を変更
     */
        65% {
            opacity: 0;
            z-index: 1;
        }

        100% {
            opacity: 1;
        }
    }

    .item img {
        width: 100%;
    }


    .footer-right {
        display: none;
    }

    .mainvisual {
        padding-top: 22vw;
    }

    .mainvisual img {
        width: 90%;
    }

    .mainvisual2 {
        text-align: center;
    }

    .mainvisual2 img {
        width: 89%;
        display: block;
        margin: 0 auto;
    }

    .mainvisual2-pc {
        display: none;
    }

    .mainvisual2-sp img {
        width: 89%;
        margin-top: 20px;
    }

		.member{
			width: 90%;
			margin: 40px auto 0;
		}
		.member img{
			width: 100%;
		}
		.member02{
			top: 15.5%;
			left: 0;
		}
		.member03{
			top: 48%;
		}
		.member04{
			top: 63%;
		}

		.bgIcon01{
			top: 3.5%;
			left: 16%;
		}
		.bgIcon02{
			top: 38.5%;
			right: 18%;
		}
		.bgIcon03{
			top: 54%;
			left: 17%;
		}
		.bgIcon04{
			top: 87%;
			right: 17.5%;
		}

    .news {
        width: 90%;
        background-color: #fff;
        padding: 20px 5px;
        margin: 20px auto;
        color: #555;
        font-size: 1.6rem;
        text-align: center;

    }

    .news a {
        font-size: 10px;
    }

    .news-under {
        width: 90%;
        margin: 0 auto;
    }

    .news img {
        width: 90%;
    }

    .kissntell {
        width: 90%;
        margin: 0 auto;
        position: relative;
        margin-top: 10px;
    }

    .kissntell img {
        /*width: 300px;*/
				width: 100%;
    }


    .btn-radius-gradient-wrap {
				position: absolute;
				right: 4vw;
				bottom: 3vw;
				width: 30%;
				min-width: 75px;
    }

    .btn-radius-gradient-wrap-2 {
			position: absolute;
			right: 4vw;
			bottom: 3vw;
			width: 30%;
			min-width: 75px;
    }

    .btn-radius-gradient-wrap-3 {
			position: absolute;
			right: 4vw;
			bottom: 3vw;
			width: 30%;
			min-width: 75px;
    }


    .btn,
    a.btn,
    button.btn {
			font-size: 2.2vw;
			font-weight: 700;
			line-height: 0.7;
			position: relative;
			display: inline-block;
			padding: 1.4vw 2vw;
			cursor: pointer;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-transition: all 0.3s;
			transition: all 0.3s;
			text-align: center;
			vertical-align: middle;
			text-decoration: none;
			letter-spacing: 0.1em;
			color: #212529;
			border-radius: 0.5rem;
			width: 100%;
    }

    a.btn-radius-gradient:hover {
        -webkit-transform: scale(1.06);
        transform: scale(1.05);
    }

    a.btn-radius-gradient {
        border-radius: 100vh;
    }

    .btn-radius-gradient-wrap {
        padding: 0.2rem;
    }

    .aespa img {
        width: 50%;
        padding-top: 32px;

    }
	
	.aespa2 img {
        width: 100%;
        padding-top: 90px;
    }
	
    .aespa2 p {
        font-size: 1.9rem;
		color: #000000;
		font-weight: 700;
    }

	.note-right p {
        font-size: 1.5rem;
		width: 100%;
		 color: #EE0003;
		font-weight: 500;

	}

    footer {
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-top: 80px;
    }

    footer {
        font-size: 14px;
    }

    footer a {
        color: #fff;
        text-decoration: none;
        display: block;
        font-size: 12px;
    }


    .footer-left {
        width: 70%;
        text-align: left;
    }

    .footer-right-sp {
        width: 30%;
    }

    .footer-right-sp ul {
        display: flex;
        justify-content: end;
        padding: 0;
        margin: 0;
    }

    .footer-right-sp li {
        margin: 8px 8px 0 8px;
        list-style: none;
    }

    .footer-right-sp img {
        width: 20px;
        height: 20px;
        object-fit: cover;
    }

    .copy {
        margin-top: 40px;
        padding-bottom: 24px;
    }