@charset utf-8;



section.hero-section	{max-width: 100vw;
			height: 600px;
			margin-inline: auto;
			background-image: linear-gradient(#eee 0% 8%, #fff 98% 100%);
			position: relative;
			}

@media (max-width:1024px){

section.hero-section {
    max-width: 100vw;
    height: 55vw;}

}
@media (max-width:680px){

section.hero-section {height: 65vw;}

}

/* ---------------------------------------------------

		小型楕円のスタイル　　ｚ-index:0/1

------------------------------------------------------ */



	.smb_container	{position: absolute;
			top: 0;
			right: 49%;
			z-index: 0;
			}

		.sm-bean	{background-color: #83CCFF;
				width: 28rem;
				height: 23rem;
				opacity:0.7;
				border-radius: 71% 29% 26% 74% / 74% 25% 75% 26%;
				animation: sm-bean_anm 15s ease 0s infinite normal;
				}


			@keyframes sm-bean_anm	{
   					 0%, 100% {border-radius: 71% 29% 26% 74% / 74% 25% 75% 26%;}
					
					50% {	width:15rem;
						border-radius: 52% 48% 67% 33% / 38% 48% 52% 62%;}
						}


	.smb_container2	{position: absolute;
    			top: -6%;
    			left: -5%;
    			z-index: 0;
			}

		.sm-bean2	{background-color: #8BFC9D;
				width: 28rem;
				height: 27rem;
				opacity:0.8;
				border-radius: 59% 41% 67% 33% / 57% 48% 52% 43%;
				animation: sm-bean2_anm 10s ease 0s infinite normal;
				}

			@keyframes sm-bean2_anm	{
   					 0%, 100% {border-radius: 59% 41% 67% 33% / 57% 48% 52% 43%;}
					
					50% {	width:12rem;
						height:15rem;
						border-radius: 30% 70% 40% 60% / 57% 22% 78% 43%;}
						}


	.smb_container3	{position: absolute;
    			top: 82%;
			left: 3vw;
			z-index: 0;
			}

		.sm-bean3	{background-color: #83CCFF;
    				width: 17rem;
    				height: 17rem;
				opacity:0.7;
				border-radius: 68% 32% 52% 48% / 39% 22% 78% 61%;
				animation: sm-bean3_anm 15s ease 0s infinite normal;
				}

			@keyframes sm-bean3_anm	{
   					 0%, 100% {border-radius: 68% 32% 52% 48% / 39% 22% 78% 61%;}
					
					30% {	width:12rem;
						height:9rem;
						transform:rotate(30deg);
						border-radius: 55% 45% 69% 31% / 34% 60% 40% 66%;}

   					70% {	transform:rotate(0deg);
						border-radius: 69% 31% 67% 33% / 59% 45% 55% 41%;}
					
						}


	.smb_container4 {position: absolute;
    			top: 94%;
   			right: 3%;
    			z-index: 1;
			}

		.sm-bean4	{background-color: #8BFC9D;
				width: 21rem;
				height: 13rem;
				opacity:0.7;
				border-radius: 73% 27% 71% 29% / 71% 79% 21% 29%;
				animation: sm-bean4_anm 10s ease 0s infinite normal;
				}

			@keyframes sm-bean4_anm	{
   					 0%, 100% {border-radius: 73% 27% 71% 29% / 71% 79% 21% 29%;}
					
					50% {	width:16rem;
						border-radius: 32% 68% 62% 38% / 45% 79% 21% 55%;}
						}


	.smb_container5 {position: absolute;
			top: -1%;
			right: 0%;
			z-index: 0;
			}

		.sm-bean5	{background-color: #8BFC9D;
    				width: 22rem;
    				height: 27rem;
				border-radius: 33% 67% 88% 12% / 79% 39% 61% 21%;
    				animation: sm-bean5_anm 15s ease 0s infinite normal;
				}

			@keyframes sm-bean5_anm	{
   					 0%, 100% {border-radius: 59% 41% 21% 79% / 62% 53% 47% 38%;}
					
					50%	{height:12rem;
						border-radius: 78% 25% 45% 46% / 42% 14% 88% 37%;}
						}


@media (max-width:1100px){


	.smb_container4 {top: 91%;
			right: -3%;}



}
@media (max-width:680px){


	.smb_container	{top: 64%;
			right: 0%;
			z-index: 10;
			}

		.sm-bean	{width: 6rem;
				height: 4rem;}

			@keyframes sm-bean_anm	{
   					 0%, 100% {border-radius: 71% 29% 26% 74% / 74% 25% 75% 26%;}
					
					50% {width:3rem;}
			}
						


	.smb_container3 {top: 86%;
    			left: 3vw;}

		.sm-bean3	{width: 15rem;
    				height: 11rem;}

		

	.smb_container2 {z-index: 1;}

	.sm-bean2	{background-color: #8BFC9D;
			width: 16rem;
			height: 12rem;
			border-radius: 57% 48% 52% 43% / 57% 48% 52% 43%;
			animation: sm-bean2_anm 10s ease 0s infinite normal;
			}

			@keyframes sm-bean2_anm	{
   					 0%, 100% {border-radius: 59% 41% 67% 33% / 78% 25% 45% 46%;}
					
					50% {	width:12rem;
						height:7rem;
						border-radius: 57% 48% 52% 43% / 42% 14% 88% 37%;}
						}

	.smb_container4 {top: 76%;
			right: -4%;
			z-index: 0;
			}

		.sm-bean4	{height: 16rem;}

			@keyframes sm-bean4_anm	{
   					 0%, 100%	{transform:rotate(0deg);}
					
					50% {	transform:rotate(-25deg);}
			}
				

	,smb_container5	{display:none;}

}
@media (max-width:430px){

	.smb_container2 {top: 61%;
			left: -7%;}

		.sm-bean2	{width: 9rem;
				height: 8rem;}

				@keyframes sm-bean2_anm	{
   					 0%, 100% {transform:rotate(-30deg);}
					
					50% {	width:6rem;
						height:6rem;
						transform:rotate(0deg);}
				}


}


/* ---------------------------------------------------

		 楕円のスタイル　ｚ-index:　none

------------------------------------------------------ */

.bean-positionbox	{max-width: 1200px;
			width: 100vw;
			height: 100%;
			position: relative;
			}



        .bean-container {max-width: 1200px;
			min-width: 1300px;
			width: 100%;
			height: auto;
			background-color: #fff;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
			border-radius: 53% 47% 50% 50% / 58% 59% 41% 42%;
			position: relative;
			top: -2rem;
			left: 25vw;
			overflow: hidden;
			animation: morphBean 18s ease-in-out infinite alternate;
			}


        @keyframes morphBean {
            0% {
                border-radius: 38% 62% 37% 63% / 42% 41% 59% 58%;
                transform: scale(1);}

            25% {border-radius: 39% 61% 40% 60% / 56% 24% 76% 44%;
                transform: scale(0.98) rotate(1deg);}

            50% {width: 90%;
                border-radius: 27% 73% 40% 60% / 40% 35% 40% 50%;
                transform: scale(1);}

            75% {border-radius: 38% 62% 52% 48% / 67% 35% 65% 33%;
                transform: scale(0.96) rotate(-2deg);}

            100% {border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
                transform: scale(1);}
        }


        /* 写真を領域にフィット*/
	.bean-container img	{width: 100%;
				height: 100%;
				object-fit: cover;
				object-position:left -10% top 0%
				display: block;
				}


@media (max-width:1100px){

        .bean-container {max-width: 100vw;
			min-width: 100vw;
			top: 0;
			left: 22vw;
			}

}

@media (max-width:680px){


        .bean-container {max-width: 150vh;
			min-width: 114vw;
			width: 100%;
			border-radius: 0 0 50% 50%;
			position: relative;
			top: -3rem;
			left: -4rem;
			overflow: hidden;
			animation: none;
			}

}


/* ---------------------------------------------------

	「RENEWAL」タイトルスタイル  ｚ-index:10/100/110

------------------------------------------------------ */


/* タイトルボックス */
.top_title_box	{width: 100%;
		max-width: 500px;
		font-size: clamp(18px, 1vw, 1rem);
		position: absolute;
		top: 50%;
		left: 2.5%;
		transform: translate(0,-50%);
		}


div.top_title_box::before	{content: "";
				display: inline-block;
				max-width: 95px;
				width:100%;
				height: 100%;
				background-image: url("../imgs/indexitems/svg/star_b.svg");
				background-size: contain;
				background-repeat: no-repeat;
				position:absolute;
				top:-12rem;
				left:10%;
				z-index:10;
				}




	h1.hero-title	{max-width: 450px;
			color: #222;
			font-size: clamp(5.5rem, 6.5vw, 6rem);
			font-weight: bold;
			white-space: nowrap;
			letter-spacing:0;
			line-height: 0.9; 
			text-align: center;
			margin-inline: auto;
			position: relative;
			box-sizing: border-box;
			text-shadow:
			1px 1px 0 #fff,
			-1px -1px 0 #fff,
			0px 0px 3px #fff,
			0px 0px 8px #fff;
			z-index: 100;
			}


			h1 span {display: block;
     				width: 80%;
   				margin-inline: auto;
				margin-top: 6px;
				line-height: 1.8;
				font-size: clamp(1.3rem, 2vw, 1.8rem); 
				border-top: 4px solid #000;
				}



@media (max-width:1100px){

	.top_title_box {top: 50%;
			left: -7vw;}

	h1 span {display: block;
		width: 70%;}

	div.top_title_box::before	{top: -9rem;
					left: 21%;
					}
}
@media (max-width: 850px) {
    .top_title_box {left: -9vw;}

}
@media (max-width: 768px){

	div.top_title_box::before	{top: -15rem;
					left: 22%;}
}

@media (max-width:680px){

	.top_title_box	{top: 0;
        		left: 0;
			margin-inline: auto;
			position: relative;
			z-index:110;
			}


	
	 h1 span	{width: 100%;
			color: #fff;
			font-size:2rem;
			text-shadow: none;
			border: none;
			background-color: #222;
			}

	
	div.top_title_box::before	{width:60px;
					top: -6rem;
        				left: 70%;
					}


	h1.hero-title	{line-height: 70%;
			text-shadow:
			1px 1px 0 #fff,
			-1px -1px 9px #fff,
			0px 0px 3px #fff,
			0px 0px 3px #fff;
			
			max-width: fit-content;
			font-size: clamp(6.5rem, 10.5vw, 10rem);
			letter-spacing: -1px;
			}
}


@media (max-width:430px){

	h1.hero-title {font-size: 6.5rem;}

	h1 span {font-size: 2rem;}

}

/* ---------------------------------------------------

		ボタンエリア 	z-index: 0

------------------------------------------------------ */

	div.top_2link	{display: flex;
			width: fit-content;
			margin-inline: auto;
			margin-top: 2rem;
			gap: 1.5rem;
			flex-wrap: nowrap;
			justify-content: space-between;
			box-sizing: border-box;
			position: relative;
			z-index: 100;
			}


	/*  2ボタン  */
	div.top_2link div	{display: flex;
				font-weight: bold;
				align-items: center;
				background-image: linear-gradient(#ade5ef 0%, #6ec1fa 100%);
				border: 2px solid #1883D7;
				border-radius: 8px 8px;
				filter: drop-shadow(8px 8px 3px #777);
				}


		div.top_2link div:nth-of-type(2)	{background-image: linear-gradient(#B2E888 0%, #45D02D 100%);
							border: 2px solid #349C22;
							}


	a.top2button	{display:  block;
			width: 100%;
			color: #222;
			padding: 1rem 2rem 0.5rem;
			text-align: right;
			font-size: 1rem;
			line-height: 2rem;
			}

		a.top2button:hover { opacity: 0.7;}


		a.topb_type2 {padding: 1.5rem 1rem;}



		a.top2button span	{display: block;
					font-size: 2.4rem;
					line-height: 2.4rem;
					letter-spacing:0;
					text-shadow:
					1px 1px 0 #fff,
					-1px -1px 0 #fff,
					0px 0px 3px #fff;
					}


	a.top2button span.toplink_type2 {display: inline-block;}

	a.top2button span.toplink_type2	{max-width: 8rem;}


	/* 背面のサークル画像 */
	div.img_titlecircle	{position: absolute;
				width: 120%; 
				max-width: 400px;
				min-width: 300px;
				height: auto;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 0;
				}

	div.img_titlecircle img {width: 100%;
				height: auto;}



@media (max-width:1100px){

	div.img_titlecircle {width: 50%;}

}

@media (max-width: 768px) {
	div.img_titlecircle {min-width: 280px;}

}

@media (max-width: 680px) {

	a.top2button {font-size: 1.5rem;}

		a.top2button:hover {opacity: 1;}

		a.top2button span	{font-size: 3rem;
					line-height: 3rem;}

			a.top2button span.toplink_type2 {max-width: 11rem;}


div.top_2link {justify-content: center;}

	div.top_2link div:nth-of-type(1)	{max-width:15rem;}

	div.img_titlecircle {display:none;}
}



/* ---------------------------------------------------

		会員登録案内  z-index:5

------------------------------------------------------ */

 section.hero-section+aside	{max-width:1600px;
				width:100%;
				padding:1rem 2rem;
				margin-top:6rem;
				margin-inline:auto;
				position:relative;
				z-index:5;
				}

div.rn_jkkmembership_allbox	{width: 100%;
				font-weight: bold;
				padding: 1.8rem 5%;
				margin-bottom: 7rem;
				background-image: linear-gradient(90deg,#85D0EA 0% 35%, #A5DE41 75% 100%);
				border-radius: 10px 10px ;
				}

	div.rn_jkkmember_top	{max-width: 95%;
				width: 100%;
				font-size:3vw;
				padding:1.5rem 1rem;
				margin: 0 auto;
				background-color: #fff;
				border: 5px solid #aaa;
				border-radius: 50vh;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				flex-wrap: wrap;
				}

		p.rn_topmember_t	{font-size:2rem;
					line-height: 3rem;
					text-align: center;
					padding: 0.3rem 2.5rem 0;
					}

		div.rn_jkkmembership_allbox a {
					color: #fff;
    					font-size: 1.5rem;
					background-color: #E11;
					border-radius: 100vh;
					display: inline-block;
					padding: 1rem 1.8rem;
					}



@media (max-width:1100px){


	section.hero-section+aside	{margin-top: 0;}

}
@media (max-width:680px){

	div.rn_jkkmember_top	{max-width: 100%;
				border: none;
				display: block;
				text-align: center;
				font-weight: bold;
				padding: 0;
				border-radius: 0;
        			background: transparent;
				}

}
@media (max-width:680px){


	div.rn_jkkmembership_allbox	{width: 100%;
					font-weight: normal;
					padding:0;
					padding-top: 14rem;
					margin-bottom: 6rem;
					background-image: none;
					border-radius: 0;
					}

	div.rn_jkkmembership_allbox a	{font-size: 2.2rem;
					margin-top: 1rem;
					padding: 2rem 7rem;

					}

}
@media (max-width:430px){

	.cssbr_sp430::after	{content:"\A";
				white-space:pre;}

	p.rn_topmember_t {font-size: 2.2rem;}


}