@charset "utf-8";
/* CSS Document */


/*MEMBERSHIP*/

	/*TITLE*/
	.membership .content_membership {padding-top: 170px; background-color: var(--white);}
		.membership .content_membership .section_title {display: flex; align-items: center; justify-content: center; padding: 25px 0;}
			.membership .content_membership .section_title hr {width: 100%; border-color: var(--white); border-width: 2px;}
			.membership .content_membership .section_title h1 {font-size: 5.125rem; color: var(--white); padding: 0 20px;}

		/*Animations*/
		.membership .content_membership {transition: background 0.5s ease-in-out;}
			.membership .content_membership.show {background-color: var(--pink);}

		.membership .content_membership .section_title hr {transition: all 0.5s 0.5s ease-in-out; transform: scale(0);}
			.membership .content_membership.show .section_title hr {transform: scale(1);}

		.membership .content_membership .section_title h1 {transition: opacity 0.8s 0.5s ease-in-out; opacity: 0;}
			.membership .content_membership.show .section_title h1 {opacity: 1;}

	/*INTRO*/
	.membership .content_intro {margin-top: 95px;}
		.membership .content_intro .students {width: 522px; font-weight: 400; font-size: 1.25rem; line-height: 1.4; margin-bottom: 30px;}
		.membership .content_intro figure {position: absolute; top: 0; right: 0; z-index: 2;}
		.membership .content_intro .pink_container {background: var(--white); padding: 72px 0 80px;}
			.membership .content_intro .pink_container p {font-size: 2.25rem; width: 522px; margin-bottom: 62px;}
			.membership .content_intro .pink_container small {font-size: 1.25rem;}

		/*Animations*/
		.membership .content_intro p,
		.membership .content_intro small {transition: all 0.5s 0.5s ease-in-out; opacity: 0; transform: translateY(20px);}
			.membership .content_intro.show p,
			.membership .content_intro.show small {opacity: 1;  transform: translateY(0px);}
		.membership .content_intro figure {transition: opacity 0.5s 0.7s ease-in-out; opacity: 0;}
			.membership .content_intro.show figure {opacity: 1;}
		.membership .content_intro .pink_container {transition: background 0.5s 0.3s ease-in-out;}
			.membership .content_intro.show .pink_container {background: var(--pink);}

	/*JOIN*/
	.membership .content_block {margin-bottom: 115px;}
	/*Pearl Ornaments*/
	.membership .content_block .ornament_pearl{position:absolute; z-index:3;}

	.membership .content_block .pearl01{width:76px; right:-2px; bottom: 35px;}

	.membership .content_block .pearl02{width:38px; right:90px; bottom: 52px;}

	/*Headings*/
	.membership .content_block h3{font-size:3.750rem; margin:60px 0 100px; position:relative; margin:0 0 40px; color:var(--black);}

		.membership .content_block h3 .animation_text02{font-family:'boisterous_scriptregular', serif; font-weight:400; font-size:6.250rem; color:var(--pink); position:relative; z-index:2;}

		/*Line*/
		.membership .content_block h3::before{width:100%; height:2px; background:var(--pink); position:absolute; left:0; bottom:70px; content:'';}

		/*Animations*/
		.membership .content_block h3 .animation_text01,
		.membership .content_block h3 .animation_text02,
		.membership .content_block h3::before{transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1);}

		.membership .content_block .ornament_pearl{transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
			/*Heading*/
			.membership .content_block h3 .animation_text01{opacity:0; transform:translateX(-40px); -webkit-transform:translateX(-40px); display:inline-block;}
			.membership .content_block.show h3 .animation_text01{opacity:1; transform:translateX(0);}

			.membership .content_block h3 .animation_text02{opacity:0;}
			.membership .content_block.show h3 .animation_text02{opacity:1;}

			.membership .content_block h3::before{transform:scaleX(0); -webkit-transform:scaleX(0); transform-origin:left; -webkit-transform-origin:left;}
			.membership .content_block.show h3::before{transform:scaleX(1); -webkit-transform:scaleX(1);}

				/*Delays*/
				.membership .content_block h3 .animation_text01{transition-delay:0.1s; -webkit-transition-delay:0.1s;}

				.membership .content_block h3 .animation_text02{transition-delay:0.5s; -webkit-transition-delay:0.5s;}

				.membership .content_block h3::before{transition-delay:0s; -webkit-transition-delay:0s;}

			/*Pearls*/
			.membership .content_block .ornament_pearl{opacity:0;}
			.membership .content_block.show .ornament_pearl{opacity:1;}

		.membership .content_block .text_container {display: flex; align-items: flex-start; justify-content: center; gap: 120px; margin-bottom: 70px;}
			.membership .content_block .left,
			.membership .content_block .right {width: 50%;}
			.membership .content_block .text_container h1 {font-size: 2.25rem; margin-bottom: 30px;}
			.membership .content_block .text_container p {font-weight: 400; font-size: 1.25rem; line-height: 1.4; margin-bottom: 30px;}
				.membership .content_block .text_container a.link {text-decoration: underline;}

		/*Animations*/
		.membership .content_block p,
		.membership .content_block h1 {transition: all 0.5s 0.5s ease-in-out; opacity: 0; transform: translateY(20px);}
			.membership .content_block.show p,
			.membership .content_block.show h1 {opacity: 1;  transform: translateY(0px);}

	/*REACTIVATION*/
	.membership .content_reactivation h3 .animation_text02 {color: var(--green);}
	.membership .content_reactivation h3::before {background: var(--green);}
	.membership .content_reactivation .right {display: flex; flex-direction: column; align-items: flex-end; gap: 36px;}

	/*Animations*/
	.membership .content_block figure {transition: all 1s 0.5s cubic-bezier(0.25, 0.1, 0.1, 1); clip-path: inset(0 0 100% 0);}
		.membership .content_block.show figure {clip-path: inset(0 0 0 0);}

	/*SISTERS*/
	.membership .content_sisters h3 {display: flex; justify-content: flex-start; align-items: center;}
		.membership .content_sisters h3::before {bottom: 20px;}
		.membership .content_sisters h3 .animation_text02 {margin-left: 50px;}
		.membership .content_sisters .pearl01 {bottom: -15px;}
		.membership .content_sisters .pearl02 {bottom: 2px;}
	.membership .content_sisters .text_container p {margin-bottom: 30px;}

	/*RISK*/
	.membership .content_risk {margin-bottom: 0;}
		.membership .content_risk .green_background {background: rgba(46, 151, 55, 0.1); padding: 136px 0 105px;}
		.membership .content_risk h3 .animation_text02 {color: var(--green);}
		.membership .content_risk h3::before {background: var(--green);}
		.membership .content_risk .pink_background {background: var(--pink); padding: 75px 0; display: flex; align-items: flex-end; justify-content: center; gap: 114px;}
			.membership .content_risk .pink_background figure {width: 20px;}
			.membership .content_risk .pink_background p {color: var(--white); font-size: 2rem; font-weight: 300;}

@media (max-width: 1400px) {
	.membership .content_intro .students,
	.membership .content_intro .pink_container p {width: 400px;}
	.membership .content_intro figure {width: 500px;}	
}

@media (max-width: 1000px) {
	.membership .p_left_1 {padding-left: 0;}
	.membership > section .center_content.c_10, 
	.membership > section .center_content.c_12 {width: 676px;}

	/*Title*/
	.membership .content_membership .center_content.c_10 {width: 100%;}
	.membership .content_membership {padding-top: 115px;}
		.membership .content_membership .section_title {width: 100%;}
			.membership .content_membership .section_title h1 {font-size: 3rem;}

	/*Intro*/
	.membership .content_intro .students {width: 100%; font-size: 1.125rem; margin-bottom: 56px;}
	.membership .content_intro figure {width: 332px; position: relative; margin: auto;}
	.membership .content_intro .pink_container {padding: 200px 0 62px; margin-top: -166px;}
		.membership .content_intro .pink_container p {width: 100%; font-size: 1.75rem; margin-bottom: 38px;}
		.membership .content_intro .pink_container small {font-size: 1.125rem;}

	/*Join*/
	.membership .content_block {margin-top: 50px;}
		.membership .content_block h3{font-size:2.375rem;}
			.membership .content_block h3::before{bottom:30px;}
			.membership .content_block h3 .animation_text01 {position: relative; bottom: -20px;}
			.membership .content_block h3 .animation_text02{font-size:3.875rem; left: -10px;}
		.membership .content_block .pearl01{width:28px; right:55px; top: 100px;}
		.membership .content_block .pearl02{width:45px; right:-2px; top: 90px;}

		.membership .content_block .text_container {flex-direction: column; gap: 80px;}
			.membership .content_block .left,
			.membership .content_block .right {width: 100%;}
			.membership .content_block .text_container h1 {font-size: 1.75rem;}
			.membership .content_block .text_container p {font-size: 1.125rem;}

	/*Reactivation*/
	.membership .content_block img {width: 100%;}
	.membership .content_block .button {margin: auto;}

	/*Sisters*/
	.membership .content_sisters h3 .animation_text01 {bottom: 10px;}
	.membership .content_sisters .left {order: 2;}
	.membership .content_sisters .right {order: 1;}

	/*Risk*/
	.membership .content_risk .green_background {padding-bottom: 30px;}
	.membership .content_risk .text_container {gap: 38px;}
	.membership .content_risk .button {margin-top: 70px;}
	.membership .content_risk .pink_background {gap: 66px; align-items: center;}
	.membership .content_risk .pink_background p {max-width: 500px; text-align: center;}
}

@media (max-width: 750px) {
	.membership > section .center_content.c_10, 
	.membership > section .center_content.c_12 {width: 100%;}

	/*Title*/
	.membership .content_membership {padding-top: 165px;}
		.membership .content_membership .section_title {padding: 43px 0;}
			.membership .content_membership .section_title h1 {font-size: 2.25rem;}

	/*Intro*/
	.membership .content_intro {margin-bottom: 40px;}
		.membership .content_intro .center_content {padding: 0 36px;}
		.membership .content_intro figure {width: 100%;}

	/*Join*/
	.membership > section .center_content {padding: 0 36px;}
	.membership > section .center_content .center_content {padding: 0;}
		.membership .content_block h3 {font-size: 1.875rem; display: flex; flex-direction: column; margin-bottom: 0; align-items: flex-start;}
			.membership .content_block h3 .animation_text01 {position: relative; bottom: -14px;}
			.membership .content_block h3 .animation_text02 {font-size: 3.125rem; bottom: -5px;}
			.membership .content_block h3::before {bottom: 90px;}
			.membership .content_block .pearl01 {width: 30px; right: -2px; bottom: 77px; top: initial;}
			.membership .content_block .pearl02 {width: 18px; right: 36px; bottom: 82px; top: initial;} 

		.membership .content_block .text_container {margin-top: 40px;}
			.membership .content_block .text_container h1 {margin-bottom: 50px;}
			.membership .content_block .button {margin: 0;}

	/*Reactivation*/
	.membership .content_reactivation .right {align-items: flex-start;}
	.membership .content_block h3 .animation_text02 {margin-left: 10px;}

	/*Risk*/
	.membership .content_risk .green_background {padding: 10px 0 80px;}
	.membership .content_risk .pink_background {gap: 15px;}
		.membership .content_risk .pink_background p {font-size: 1.75rem; max-width: 240px;}
		.membership .content_risk .pink_background figure {width: 25px;}
}